fixed reg trunk validation cannot move tab and focus to missing fields (#574 )

* fixed reg trunk validation cannot move tab and focus to missing fields * fixed reg trunk validation cannot move tab and focus to missing fields * wip
fixed cannot saved auth trunk (#573 )
2026-01-25 02:08:19 +00:00 · 2025-10-27 07:21:39 -04:00 · 2025-10-24 07:22:36 -04:00 · 2025-10-21 06:49:25 -04:00 · 2025-10-20 04:47:55 -04:00 · 2025-10-14 00:52:06 -04:00
151 changed files with 11473 additions and 17343 deletions
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
-VITE_API_BASE_URL=http://127.0.0.1:3000/v1
-VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
+# VITE_API_BASE_URL=http://127.0.0.1:3000/v1
+#VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1

 ## enables choosing units and lisenced account call limits
 # VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
@@ -25,4 +25,10 @@ VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
 ## Base url for jambomz webapp
 #VITE_APP_BASE_URL="http://jambonz.one"
 ## Strip publishable key
-#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"
+#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"
+## ignore some specific speech vendors, defined by ADDITIONAL_SPEECH_VENDORS constant
+# VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS=true
+## AWS region for enabling Recent Call Feature server logs
+#VITE_APP_AWS_REGION=us-west-2
+## enable lazy loading for phone numbers (improves performance when managing large quantities)
+# VITE_APP_ENABLE_PHONE_NUMBER_LAZY_LOAD=true
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -12,18 +12,18 @@ jobs:
  pr-checks:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

      - name: Cache node_modules
        id: node-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node-modules-${{ hashFiles('package-lock.json') }}

      - name: Cache cypress binary
        id: cypress-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: /home/runner/.cache/Cypress
          key: cypress-${{ hashFiles('package-lock.json') }}
--- a/4
+++ b/4
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2022 Drachtio Communications Services, LLC
+Copyright (c) 2018-2024 FirstFive8, Inc.

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <meta charset="utf-8" />
--- a/cypress/support/component.tsx
+++ b/cypress/support/component.tsx
@@ -44,7 +44,7 @@ declare global {
       */
      mountTestProvider(
        component: React.ReactNode,
-        options?: MountOptions & { authProps?: TestProviderProps["authProps"] }
+        options?: MountOptions & { authProps?: TestProviderProps["authProps"] },
      ): Cypress.Chainable<MountReturn>;
    }
  }
--- a/docs/contributors.md
+++ b/docs/contributors.md
@@ -100,7 +100,7 @@ export const postAccount = (payload: Partial<Account>) => {
 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };
 ```
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jambonz-webapp",
  "description": "A simple provisioning web app for jambonz",
-  "version": "0.8.5",
+  "version": "0.9.5",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -41,46 +41,46 @@
    "deploy": "npm i && npm run build && npm run pm2"
  },
  "dependencies": {
-    "@jambonz/ui-kit": "^0.0.21",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.1",
-    "dayjs": "^1.11.5",
+    "@jambonz/ui-kit": "^0.0.22",
+    "@stripe/react-stripe-js": "^2.6.2",
+    "@stripe/stripe-js": "^3.2.0",
+    "dayjs": "^1.11.10",
    "immutability-helper": "^3.1.1",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
    "react-dnd": "16.0.1",
    "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
-    "react-router-dom": "^6.3.0",
-    "wavesurfer.js": "^7.3.4"
+    "react-router-dom": "^6.22.3",
+    "wavesurfer.js": "^7.7.9"
  },
  "devDependencies": {
-    "@types/cors": "^2.8.12",
-    "@types/express": "^4.17.13",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "@vitejs/plugin-react": "^4.2.1",
    "cors": "^2.8.5",
-    "cypress": "^10.8.0",
+    "cypress": "^13.7.2",
    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.18.1",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "nanoid": "^4.0.0",
-    "prettier": "^2.7.1",
-    "sass": "^1.53.0",
-    "serve": "^14.0.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.6.3",
-    "vite": "^3.0.0"
+    "express": "^5.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^16.1.2",
+    "nanoid": "^5.1.5",
+    "prettier": "^3.2.5",
+    "sass": "^1.89.2",
+    "serve": "^14.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.4",
+    "vite": "^6.0.1"
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --max-warnings=0",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -111,14 +111,14 @@ app.get(
      page: query.page,
      data: paged,
    });
-  }
+  },
 );

 app.get(
  "/api/Accounts/:account_sid/RecentCalls/:call_sid",
  (req: Request, res: Response) => {
    res.status(200).json({ total: Math.random() > 0.5 ? 1 : 0 });
-  }
+  },
 );

 app.get(
@@ -126,7 +126,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const pcap: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap")
+      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap"),
    );

    res
@@ -136,7 +136,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(pcap); // server: Buffer => client: Blob
-  }
+  },
 );

 app.get(
@@ -144,7 +144,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const wav: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "example.mp3")
+      path.resolve(process.cwd(), "server", "example.mp3"),
    );

    res
@@ -154,7 +154,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(wav); // server: Buffer => client: Blob
-  }
+  },
 );

 app.get(
@@ -162,10 +162,10 @@ app.get(
  (req: Request, res: Response) => {
    const json = fs.readFileSync(
      path.resolve(process.cwd(), "server", "sample-jaeger.json"),
-      { encoding: "utf8" }
+      { encoding: "utf8" },
    );
    res.status(200).json(JSON.parse(json));
-  }
+  },
 );

 /** Alerts mock API responses for local dev */
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -1,14 +1,21 @@
 import type {
+  CartesiaOptions,
  Currency,
+  ElevenLabsOptions,
+  GoogleCustomVoice,
+  InworldOptions,
  LimitField,
  LimitUnitOption,
  PasswordSettings,
+  PlayHTOptions,
+  RimelabsOptions,
  SelectorOptions,
  SipGateway,
  SmppGateway,
  WebHook,
  WebhookOption,
 } from "./types";
+import { Vendor } from "src/vendor/types";

 /** This window object is serialized and injected at docker runtime */
 /** The API url is constructed with the docker containers `ip:port` */
@@ -25,6 +32,9 @@ interface JambonzWindowObject {
  BASE_URL: string;
  DEFAULT_SERVICE_PROVIDER_SID: string;
  STRIPE_PUBLISHABLE_KEY: string;
+  DISABLE_ADDITIONAL_SPEECH_VENDORS: string;
+  AWS_REGION: string;
+  ENABLE_PHONE_NUMBER_LAZY_LOAD: string;
 }

 declare global {
@@ -34,8 +44,12 @@ declare global {
 }

 /** https://vitejs.dev/guide/env-and-mode.html#env-files */
-export const API_BASE_URL =
+const CONFIGURED_API_BASE_URL =
  window.JAMBONZ?.API_BASE_URL || import.meta.env.VITE_API_BASE_URL;
+export const API_BASE_URL =
+  CONFIGURED_API_BASE_URL && CONFIGURED_API_BASE_URL.length !== 0
+    ? CONFIGURED_API_BASE_URL
+    : `${window.location.protocol}//${window.location.hostname}/api/v1`;

 /** Serves mock API responses from a local dev API server */
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;
@@ -69,6 +83,16 @@ export const DISABLE_CALL_RECORDING: boolean =
  window.JAMBONZ?.DISABLE_CALL_RECORDING === "true" ||
  JSON.parse(import.meta.env.VITE_APP_DISABLE_CALL_RECORDING || "false");

+/** Disable additional speech vendors */
+export const DISABLE_ADDITIONAL_SPEECH_VENDORS: boolean =
+  window.JAMBONZ?.DISABLE_ADDITIONAL_SPEECH_VENDORS === "true" ||
+  JSON.parse(
+    import.meta.env.VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS || "false",
+  );
+
+export const AWS_REGION: string =
+  window.JAMBONZ?.AWS_REGION || import.meta.env.VITE_APP_AWS_REGION;
+
 export const DEFAULT_SERVICE_PROVIDER_SID: string =
  window.JAMBONZ?.DEFAULT_SERVICE_PROVIDER_SID ||
  import.meta.env.VITE_APP_DEFAULT_SERVICE_PROVIDER_SID;
@@ -107,7 +131,7 @@ export const DEFAULT_WEBHOOK: WebHook = {
 };

 /** Default SIP/SMPP Gateways  */
-export const DEFAULT_SIP_GATEWAY: SipGateway = {
+export const DEFAULT_SIP_INBOUND_GATEWAY: SipGateway = {
  voip_carrier_sid: "",
  ipv4: "",
  port: 5060,
@@ -198,10 +222,39 @@ export const AUDIO_FORMAT_OPTIONS = [
  },
 ];

+export const LOG_LEVEL_OPTIONS = [
+  {
+    name: "Info",
+    value: "info",
+  },
+  {
+    name: "Debug",
+    value: "debug",
+  },
+];
+
 export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";

 export const DEFAULT_WHISPER_MODEL = "tts-1";

+// VERBIO
+export const VERBIO_STT_MODELS = [
+  { name: "V1", value: "V1" },
+  { name: "V2", value: "V2" },
+];
+
+export const DEFAULT_VERBIO_MODEL = "V1";
+
+// ASSEMBLYAI
+export const ASSEMBLYAI_STT_VERSIONS = [
+  { name: "V2", value: "v2" },
+  { name: "V3", value: "v3" },
+];
+
+export const DEFAULT_ASSEMBLYAI_STT_VERSION = "v2";
+
+export const ADDITIONAL_SPEECH_VENDORS: Lowercase<Vendor>[] = ["speechmatics"];
+
 // Google Custom Voice reported usage options

 export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
@@ -210,6 +263,54 @@ export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
  { name: "REALTIME", value: "REALTIME" },
  { name: "OFFLINE", value: "OFFLINE" },
 ];
+export const DEFAULT_GOOGLE_CUSTOM_VOICE: GoogleCustomVoice = {
+  name: "",
+  reported_usage: DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+  model: "",
+  use_voice_cloning_key: 0,
+  voice_cloning_key_file: null,
+};
+// ElevenLabs options
+export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
+  optimize_streaming_latency: 3,
+  voice_settings: {
+    stability: 0.5,
+    similarity_boost: 0.5,
+    use_speaker_boost: true,
+  },
+};
+
+// Rimelabs options
+export const DEFAULT_RIMELABS_OPTIONS: Partial<RimelabsOptions> = {
+  speedAlpha: 1.0,
+  reduceLatency: true,
+};
+
+export const DEFAULT_INWORLD_OPTIONS: Partial<InworldOptions> = {
+  audioConfig: {
+    pitch: 0.0,
+    speakingRate: 1.0,
+  },
+  temperature: 0.8,
+};
+
+// PlayHT options
+export const DEFAULT_PLAYHT_OPTIONS: Partial<PlayHTOptions> = {
+  quality: "medium",
+  speed: 1,
+  seed: 1,
+  temperature: 1,
+  emotion: "female_happy",
+  voice_guidance: 3,
+  style_guidance: 20,
+  text_guidance: 1,
+};
+
+// Cartesia options
+export const DEFAULT_CARTESIA_OPTIONS: Partial<CartesiaOptions> = {
+  speed: 0.0,
+  emotion: "positivity:high",
+};
 /** Password Length options */

 export const PASSWORD_MIN = 8;
@@ -223,6 +324,7 @@ export const PASSWORD_LENGTHS_OPTIONS = Array(13)
 /** List view filters */
 export const DATE_SELECTION = [
  { name: "today", value: "today" },
+  { name: "yesterday", value: "yesterday" },
  { name: "last 7d", value: "7" },
  { name: "last 14d", value: "14" },
  { name: "last 30d", value: "30" },
@@ -241,6 +343,17 @@ export const USER_SCOPE_SELECTION: SelectorOptions[] = [
  { name: "Account", value: "account" },
 ];

+export const DTMF_TYPE_SELECTION: SelectorOptions[] = [
+  { name: "RFC 2833", value: "rfc2833" },
+  { name: "Tones", value: "tones" },
+];
+
+export const TRUNK_TYPE_SELECTION: SelectorOptions[] = [
+  { name: "IP Trunk", value: "static_ip" },
+  { name: "Auth Trunk", value: "auth" },
+  { name: "Registration Trunk", value: "reg" },
+];
+
 /** Available webhook methods */
 export const WEBHOOK_METHODS: WebhookOption[] = [
  {
@@ -311,6 +424,11 @@ export const CurrencySymbol: Currency = {
  usd: "$",
 };

+export const DEEPGRAM_STT_ENPOINT = [
+  { name: "US (Default)", value: "" },
+  { name: "EU-hosted", value: "api.eu.deepgram.com" },
+];
+
 /** User scope values values */
 export const USER_ADMIN = "admin";
 export const USER_SP = "service_provider";
@@ -358,3 +476,4 @@ export const API_SUBSCRIPTIONS = `${API_BASE_URL}/Subscriptions`;
 export const API_CHANGE_PASSWORD = `${API_BASE_URL}/change-password`;
 export const API_SIGNIN = `${API_BASE_URL}/signin`;
 export const API_GOOGLE_CUSTOM_VOICES = `${API_BASE_URL}/GoogleCustomVoices`;
+export const API_APP_ENV = `${API_BASE_URL}/AppEnv`;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -34,6 +34,7 @@ import {
  API_CHANGE_PASSWORD,
  API_SIGNIN,
  API_GOOGLE_CUSTOM_VOICES,
+  API_APP_ENV,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -91,12 +92,13 @@ import type {
  DeleteAccount,
  ChangePassword,
  SignIn,
-  GetVoices,
-  LanguageOption,
-  VoiceOption,
-  GetLanguages,
  GoogleCustomVoice,
  GoogleCustomVoicesQuery,
+  SpeechSupportedLanguagesAndVoices,
+  AppEnv,
+  PhoneNumberQuery,
+  ApplicationQuery,
+  VoipCarrierQuery,
 } from "./types";
 import { Availability, StatusCodes } from "./types";
 import { JaegerRoot } from "./jaeger-types";
@@ -104,7 +106,7 @@ import { JaegerRoot } from "./jaeger-types";
 /** Wrap all requests to normalize response handling */
 const fetchTransport = <Type>(
  url: string,
-  options: RequestInit
+  options: RequestInit,
 ): Promise<FetchTransport<Type>> => {
  return new Promise(async (resolve, reject) => {
    try {
@@ -192,7 +194,7 @@ const getAuthHeaders = () => {

 const getQuery = <Type>(query: Type) => {
  return decodeURIComponent(
-    new URLSearchParams(query as unknown as Record<string, string>).toString()
+    new URLSearchParams(query as unknown as Record<string, string>).toString(),
  );
 };

@@ -228,6 +230,16 @@ export const getBlob = (url: string) => {
  });
 };

+export const postBlobFetch = <Type>(url: string, formdata?: FormData) => {
+  return fetchTransport<Type>(url, {
+    method: "POST",
+    body: formdata,
+    headers: {
+      Authorization: `Bearer ${getToken()}`,
+    },
+  });
+};
+
 /** Simple wrappers for fetchTransport calls to any API, :GET, :POST, :PUT, :DELETE */

 export const getFetch = <Type>(url: string) => {
@@ -238,7 +250,7 @@ export const getFetch = <Type>(url: string) => {

 export const postFetch = <Type, Payload = undefined>(
  url: string,
-  payload?: Payload
+  payload?: Payload,
 ) => {
  return fetchTransport<Type>(url, {
    method: "POST",
@@ -264,7 +276,7 @@ export const deleteFetch = <Type>(url: string) => {

 export const deleteFetchWithPayload = <Type, Payload>(
  url: string,
-  payload: Payload
+  payload: Payload,
 ) => {
  return fetchTransport<Type>(url, {
    method: "DELETE",
@@ -294,7 +306,7 @@ export const postLogout = () => {
 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
  return postFetch<SidResponse, Partial<ServiceProvider>>(
    API_SERVICE_PROVIDERS,
-    payload
+    payload,
  );
 };

@@ -308,24 +320,24 @@ export const postAccount = (payload: Partial<Account>) => {

 export const postAccountBucketCredentialTest = (
  sid: string,
-  payload: Partial<BucketCredential>
+  payload: Partial<BucketCredential>,
 ) => {
  return postFetch<BucketCredentialTestResult, Partial<BucketCredential>>(
    `${API_ACCOUNTS}/${sid}/BucketCredentialTest`,
-    payload
+    payload,
  );
 };

 export const postApplication = (payload: Partial<Application>) => {
  return postFetch<SidResponse, Partial<Application>>(
    API_APPLICATIONS,
-    payload
+    payload,
  );
 };

 export const postSpeechService = (
  sid: string,
-  payload: Partial<SpeechCredential>
+  payload: Partial<SpeechCredential>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -336,43 +348,17 @@ export const postSpeechService = (
  return postFetch<SidResponse, Partial<SpeechCredential>>(apiUrl, payload);
 };

-export const postSpeechServiceVoices = (
-  sid: string,
-  payload: Partial<GetVoices>
-) => {
-  const userData = parseJwt(getToken());
-  const apiUrl =
-    userData.scope === USER_ACCOUNT
-      ? `${API_ACCOUNTS}/${userData.account_sid}/SpeechCredentials/voices`
-      : `${API_SERVICE_PROVIDERS}/${sid}/SpeechCredentials/voices`;
-
-  return postFetch<VoiceOption[], Partial<GetVoices>>(apiUrl, payload);
-};
-
-export const postSpeechServiceLanguages = (
-  sid: string,
-  payload: Partial<GetLanguages>
-) => {
-  const userData = parseJwt(getToken());
-  const apiUrl =
-    userData.scope === USER_ACCOUNT
-      ? `${API_ACCOUNTS}/${userData.account_sid}/SpeechCredentials/languages`
-      : `${API_SERVICE_PROVIDERS}/${sid}/SpeechCredentials/languages`;
-
-  return postFetch<LanguageOption[], Partial<GetLanguages>>(apiUrl, payload);
-};
-
 export const postMsTeamsTentant = (payload: Partial<MSTeamsTenant>) => {
  return postFetch<SidResponse, Partial<MSTeamsTenant>>(
    API_MS_TEAMS_TENANTS,
-    payload
+    payload,
  );
 };

 export const postPhoneNumber = (payload: Partial<PhoneNumber>) => {
  return postFetch<SidResponse, Partial<PhoneNumber>>(
    API_PHONE_NUMBERS,
-    payload
+    payload,
  );
 };

@@ -388,19 +374,19 @@ export const postCarrier = (sid: string, payload: Partial<Carrier>) => {

 export const postPredefinedCarrierTemplate = (
  currentServiceProviderSid: string,
-  predefinedCarrierSid: string
+  predefinedCarrierSid: string,
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`
+    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`,
  );
 };

 export const postPredefinedCarrierTemplateAccount = (
  accountSid: string,
-  predefinedCarrierSid: string
+  predefinedCarrierSid: string,
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`
+    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`,
  );
 };

@@ -411,45 +397,45 @@ export const postSipGateway = (payload: Partial<SipGateway>) => {
 export const postSmppGateway = (payload: Partial<SmppGateway>) => {
  return postFetch<SidResponse, Partial<SmppGateway>>(
    API_SMPP_GATEWAY,
-    payload
+    payload,
  );
 };

 export const postServiceProviderLimit = (
  sid: string,
-  payload: Partial<Limit>
+  payload: Partial<Limit>,
 ) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_SERVICE_PROVIDERS}/${sid}/Limits`,
-    payload
+    payload,
  );
 };

 export const postAccountLimit = (sid: string, payload: Partial<Limit>) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_ACCOUNTS}/${sid}/Limits`,
-    payload
+    payload,
  );
 };

 export const postPasswordSettings = (payload: Partial<PasswordSettings>) => {
  return postFetch<EmptyResponse, Partial<PasswordSettings>>(
    API_PASSWORD_SETTINGS,
-    payload
+    payload,
  );
 };

 export const postForgotPassword = (payload: Partial<ForgotPassword>) => {
  return postFetch<EmptyResponse, Partial<ForgotPassword>>(
    API_FORGOT_PASSWORD,
-    payload
+    payload,
  );
 };

 export const postSystemInformation = (payload: Partial<SystemInformation>) => {
  return postFetch<SystemInformation, Partial<SystemInformation>>(
    API_SYSTEM_INFORMATION,
-    payload
+    payload,
  );
 };

@@ -459,11 +445,11 @@ export const postLcr = (payload: Partial<Lcr>) => {

 export const postLcrCreateRoutes = (
  sid: string,
-  payload: Partial<LcrRoute[]>
+  payload: Partial<LcrRoute[]>,
 ) => {
  return postFetch<EmptyResponse, Partial<LcrRoute[]>>(
    `${API_LCRS}/${sid}/Routes`,
-    payload
+    payload,
  );
 };

@@ -472,11 +458,11 @@ export const postLcrRoute = (payload: Partial<LcrRoute>) => {
 };

 export const postLcrCarrierSetEntry = (
-  payload: Partial<LcrCarrierSetEntry>
+  payload: Partial<LcrCarrierSetEntry>,
 ) => {
  return postFetch<SidResponse, Partial<LcrCarrierSetEntry>>(
    API_LCR_CARRIER_SET_ENTRIES,
-    payload
+    payload,
  );
 };

@@ -487,27 +473,27 @@ export const postClient = (payload: Partial<Client>) => {
 export const postRegister = (payload: Partial<RegisterRequest>) => {
  return postFetch<RegisterResponse, Partial<RegisterRequest>>(
    API_REGISTER,
-    payload
+    payload,
  );
 };

 export const postSipRealms = (accountSid: string, domain: string) => {
  return postFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`
+    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`,
  );
 };

 export const postSubscriptions = (payload: Partial<Subscription>) => {
  return postFetch<Subscription, Partial<Subscription>>(
    API_SUBSCRIPTIONS,
-    payload
+    payload,
  );
 };

 export const postChangepassword = (payload: Partial<ChangePassword>) => {
  return postFetch<EmptyResponse, Partial<ChangePassword>>(
    API_CHANGE_PASSWORD,
-    payload
+    payload,
  );
 };

@@ -518,7 +504,16 @@ export const postSignIn = (payload: Partial<SignIn>) => {
 export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
  return postFetch<SidResponse, Partial<GoogleCustomVoice>>(
    API_GOOGLE_CUSTOM_VOICES,
-    payload
+    payload,
+  );
+};
+
+export const postGoogleVoiceCloningKey = (sid: string, file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  return postBlobFetch<EmptyResponse>(
+    `${API_GOOGLE_CUSTOM_VOICES}/${sid}/VoiceCloningKey`,
+    formData,
  );
 };
 /** Named wrappers for `putFetch` */
@@ -526,38 +521,38 @@ export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
  return putFetch<EmptyResponse, Partial<UserUpdatePayload>>(
    `${API_USERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putServiceProvider = (
  sid: string,
-  payload: Partial<ServiceProvider>
+  payload: Partial<ServiceProvider>,
 ) => {
  return putFetch<EmptyResponse, Partial<ServiceProvider>>(
    `${API_SERVICE_PROVIDERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putApplication = (sid: string, payload: Partial<Application>) => {
  return putFetch<EmptyResponse, Partial<Application>>(
    `${API_APPLICATIONS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putSpeechService = (
  sid1: string,
  sid2: string,
-  payload: Partial<SpeechCredential>
+  payload: Partial<SpeechCredential>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -570,25 +565,25 @@ export const putSpeechService = (

 export const putMsTeamsTenant = (
  sid: string,
-  payload: Partial<MSTeamsTenant>
+  payload: Partial<MSTeamsTenant>,
 ) => {
  return putFetch<EmptyResponse, Partial<MSTeamsTenant>>(
    `${API_MS_TEAMS_TENANTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putPhoneNumber = (sid: string, payload: Partial<PhoneNumber>) => {
  return putFetch<EmptyResponse, Partial<PhoneNumber>>(
    `${API_PHONE_NUMBERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putCarrier = (
  sid1: string,
  sid2: string,
-  payload: Partial<Carrier>
+  payload: Partial<Carrier>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -602,14 +597,14 @@ export const putCarrier = (
 export const putSipGateway = (sid: string, payload: Partial<SipGateway>) => {
  return putFetch<EmptyResponse, Partial<SipGateway>>(
    `${API_SIP_GATEWAY}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putSmppGateway = (sid: string, payload: Partial<SmppGateway>) => {
  return putFetch<EmptyResponse, Partial<SmppGateway>>(
    `${API_SMPP_GATEWAY}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -619,55 +614,55 @@ export const putLcr = (sid: string, payload: Partial<Lcr>) => {

 export const putLcrUpdateRoutes = (
  sid: string,
-  payload: Partial<LcrRoute[]>
+  payload: Partial<LcrRoute[]>,
 ) => {
  return putFetch<EmptyResponse, Partial<LcrRoute[]>>(
    `${API_LCRS}/${sid}/Routes`,
-    payload
+    payload,
  );
 };

 export const putLcrRoutes = (sid: string, payload: Partial<LcrRoute>) => {
  return putFetch<EmptyResponse, Partial<LcrRoute>>(
    `${API_LCR_ROUTES}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putLcrCarrierSetEntries = (
  sid: string,
-  payload: Partial<LcrCarrierSetEntry>
+  payload: Partial<LcrCarrierSetEntry>,
 ) => {
  return putFetch<EmptyResponse, Partial<LcrCarrierSetEntry>>(
    `${API_LCR_CARRIER_SET_ENTRIES}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putClient = (sid: string, payload: Partial<Client>) => {
  return putFetch<EmptyResponse, Partial<Client>>(
    `${API_CLIENTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putActivationCode = (
  code: string,
-  payload: Partial<ActivationCode>
+  payload: Partial<ActivationCode>,
 ) => {
  return putFetch<EmptyResponse, Partial<ActivationCode>>(
    `${API_ACTIVATION_CODE}/${code}`,
-    payload
+    payload,
  );
 };

 export const putGoogleCustomVoice = (
  sid: string,
-  payload: Partial<GoogleCustomVoice>
+  payload: Partial<GoogleCustomVoice>,
 ) => {
  return putFetch<EmptyResponse, Partial<GoogleCustomVoice>>(
    `${API_GOOGLE_CUSTOM_VOICES}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -688,7 +683,7 @@ export const deleteApiKey = (sid: string) => {
 export const deleteAccount = (sid: string, payload: Partial<DeleteAccount>) => {
  return deleteFetchWithPayload<EmptyResponse, Partial<DeleteAccount>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -698,7 +693,7 @@ export const deleteApplication = (sid: string) => {

 export const deleteSpeechService = (sid1: string, sid2: string) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`
+    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`,
  );
 };

@@ -724,16 +719,16 @@ export const deleteSmppGateway = (sid: string) => {

 export const deleteServiceProviderLimit = (
  sid: string,
-  cat: LimitCategories
+  cat: LimitCategories,
 ) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`
+    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`,
  );
 };

 export const deleteAccountLimit = (sid: string, cat: LimitCategories) => {
  return deleteFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`
+    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`,
  );
 };

@@ -776,7 +771,7 @@ export const getServiceProviders = () => {

 export const getAccountWebhook = (sid: string) => {
  return getFetch<SecretResponse>(
-    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`
+    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`,
  );
 };

@@ -798,7 +793,7 @@ export const getLcrRoute = (sid: string) => {

 export const getLcrCarrierSetEtries = (sid: string) => {
  return getFetch<LcrCarrierSetEntry[]>(
-    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`
+    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`,
  );
 };

@@ -812,16 +807,43 @@ export const getClient = (sid: string) => {

 export const getAvailability = (domain: string) => {
  return getFetch<Availability>(
-    `${API_AVAILABILITY}?type=subdomain&value=${domain}`
+    `${API_AVAILABILITY}?type=subdomain&value=${domain}`,
  );
 };

 export const getGoogleCustomVoices = (
-  query: Partial<GoogleCustomVoicesQuery>
+  query: Partial<GoogleCustomVoicesQuery>,
 ) => {
  const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
  return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
 };
+// ENV VARS
+
+export const getAppEnvSchema = (url: string) => {
+  return getFetch<AppEnv>(`${API_APP_ENV}?url=${url}`);
+};
+
+export const getApplications = (
+  sid: string,
+  query: Partial<ApplicationQuery>,
+) => {
+  const qryStr = getQuery<Partial<ApplicationQuery>>(query);
+
+  return getFetch<PagedResponse<Application>>(
+    `${API_ACCOUNTS}/${sid}/Applications?${qryStr}`,
+  );
+};
+
+export const getSPVoipCarriers = (
+  sid: string,
+  query: Partial<VoipCarrierQuery>,
+) => {
+  const qryStr = getQuery<Partial<VoipCarrierQuery>>(query);
+
+  return getFetch<PagedResponse<Carrier>>(
+    `${API_SERVICE_PROVIDERS}/${sid}/VoipCarriers?${qryStr}`,
+  );
+};

 /** Wrappers for APIs that can have a mock dev server response */

@@ -833,17 +855,19 @@ export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
  const qryStr = getQuery<Partial<CallQuery>>(query);

  return getFetch<PagedResponse<RecentCall>>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`
+    `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`,
  );
 };

 export const getRecentCall = (sid: string, sipCallId: string) => {
  return getFetch<TotalResponse>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`
+    `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`,
+  );
+};
+
+export const getRecentCallLog = (sid: string, callSid: string) => {
+  return getFetch<string[]>(
+    `${API_ACCOUNTS}/${sid}/RecentCalls/${callSid}/logs`,
  );
 };

@@ -851,7 +875,7 @@ export const getPcap = (sid: string, sipCallId: string, method: string) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
  );
 };

@@ -859,30 +883,30 @@ export const getJaegerTrace = (sid: string, traceId: string) => {
  return getFetch<JaegerRoot>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/trace/${traceId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`,
  );
 };

 export const getServiceProviderRecentCall = (
  sid: string,
-  sipCallId: string
+  sipCallId: string,
 ) => {
  return getFetch<TotalResponse>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`,
  );
 };

 export const getServiceProviderPcap = (
  sid: string,
  sipCallId: string,
-  method: string
+  method: string,
 ) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
  );
 };

@@ -892,7 +916,7 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  return getFetch<PagedResponse<Alert>>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/Alerts?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`
+      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`,
  );
 };

@@ -900,6 +924,29 @@ export const getPrice = () => {
  return getFetch<PriceInfo[]>(API_PRICE);
 };

+export const getPhoneNumbers = (query: Partial<PhoneNumberQuery>) => {
+  const qryStr = getQuery<Partial<PhoneNumberQuery>>(query);
+
+  return getFetch<PagedResponse<PhoneNumber>>(`${API_PHONE_NUMBERS}?${qryStr}`);
+};
+
+export const getSpeechSupportedLanguagesAndVoices = (
+  sid: string | undefined,
+  vendor: string,
+  label: string,
+  create_new: boolean = false,
+) => {
+  const userData = parseJwt(getToken());
+  const apiUrl =
+    (userData.scope === USER_ACCOUNT
+      ? `${API_ACCOUNTS}/${userData.account_sid}`
+      : `${API_SERVICE_PROVIDERS}/${sid}`) +
+    `/SpeechCredentials/speech/supportedLanguagesAndVoices?vendor=${vendor}${
+      label ? `&label=${label}` : ""
+    }${create_new ? "&create_new=true" : ""}`;
+  return getFetch<SpeechSupportedLanguagesAndVoices>(apiUrl);
+};
+
 /** Hooks for components to fetch data with refetch method */

 /** :GET /{apiPath} -- this is generic for any fetch of data collections */
@@ -959,7 +1006,7 @@ export const useServiceProviderData: UseApiData = <Type>(apiPath: string) => {

    if (currentServiceProvider) {
      getFetch<Type>(
-        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`
+        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`,
      )
        .then(({ json }) => {
          if (!ignore) {
--- a/src/api/jaeger-types.ts
+++ b/src/api/jaeger-types.ts
@@ -45,6 +45,17 @@ export interface WaveSurferSttResult {
  latency?: number;
 }

+export interface WaveSurferTtsLatencyResult {
+  vendor: string;
+  latency: string;
+  isCached: string;
+}
+
+export interface WaveSurferGatherSpeechVerbHookLatencyResult {
+  statusCode: number;
+  latency: string;
+}
+
 export interface WaveSurferDtmfResult {
  dtmf: string;
  duration: string;
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1,4 +1,10 @@
-import type { Vendor } from "src/vendor/types";
+import type {
+  JambonzResourceOptions,
+  Language,
+  Model,
+  Vendor,
+  VoiceLanguage,
+} from "src/vendor/types";

 /** Simple types */

@@ -26,6 +32,8 @@ export interface LimitUnitOption {
 /** User roles / permissions */
 export type UserScopes = "admin" | "service_provider" | "account";

+export type LogLevel = "info" | "debug";
+
 export type UserPermissions =
  | "VIEW_ONLY"
  | "PROVISION_SERVICES"
@@ -63,11 +71,9 @@ export interface FetchError {
 }

 export interface UseApiData {
-  <Type>(apiPath: string): [
-    Type | undefined,
-    () => void,
-    FetchError | undefined
-  ];
+  <Type>(
+    apiPath: string,
+  ): [Type | undefined, () => void, FetchError | undefined];
 }

 /** API related interfaces */
@@ -124,9 +130,11 @@ export interface ForgotPassword {
 }

 export interface SystemInformation {
-  domain_name: string;
-  sip_domain_name: string;
-  monitoring_domain_name: string;
+  domain_name: null | string;
+  sip_domain_name: null | string;
+  monitoring_domain_name: null | string;
+  private_network_cidr: null | string;
+  log_level: LogLevel;
 }

 export interface TtsCache {
@@ -141,6 +149,7 @@ export interface User {
  name: string;
  email: string;
  is_active: boolean;
+  is_view_only: boolean;
  force_change: boolean;
  account_sid: string | null;
  account_name?: string | null;
@@ -172,6 +181,7 @@ export interface UserUpdatePayload {
  name: string;
  force_change: boolean;
  is_active: boolean;
+  is_view_only: boolean;
  service_provider_sid: string | null;
  account_sid: string | null;
 }
@@ -262,6 +272,8 @@ export interface Account {
  plan_type?: string;
  device_to_call_ratio?: number;
  trial_end_date?: null | string;
+  is_active: boolean;
+  enable_debug_log: boolean;
 }

 export interface Product {
@@ -314,7 +326,6 @@ export interface Application {
  app_json: null | string;
  call_hook: null | WebHook;
  account_sid: null | string;
-  messaging_hook: null | WebHook;
  application_sid: string;
  call_status_hook: null | WebHook;
  speech_synthesis_voice: null | string;
@@ -333,6 +344,7 @@ export interface Application {
  fallback_speech_recognizer_vendor: null | string;
  fallback_speech_recognizer_language: null | string;
  fallback_speech_recognizer_label: null | string;
+  env_vars: null | Record<string, string | number | boolean>;
 }

 export interface PhoneNumber {
@@ -377,7 +389,10 @@ export interface GoogleCustomVoice {
  speech_credential_sid?: string;
  name: string;
  reported_usage: string;
-  model: string;
+  model?: string;
+  use_voice_cloning_key: number;
+  voice_cloning_key?: string | null;
+  voice_cloning_key_file?: File | null;
 }

 export interface SpeechCredential {
@@ -391,6 +406,8 @@ export interface SpeechCredential {
  region: null | string;
  aws_region: null | string;
  api_key: null | string;
+  role_arn: null | string;
+  user_id: null | string;
  access_key_id: null | string;
  secret_access_key: null | string;
  service_key: null | string;
@@ -401,6 +418,8 @@ export interface SpeechCredential {
  custom_stt_endpoint_url: null | string;
  custom_stt_endpoint: null | string;
  client_id: null | string;
+  client_secret: null | string;
+  client_key: null | string;
  secret: null | string;
  nuance_tts_uri: null | string;
  nuance_stt_uri: null | string;
@@ -413,10 +432,24 @@ export interface SpeechCredential {
  auth_token: null | string;
  custom_stt_url: null | string;
  custom_tts_url: null | string;
+  custom_tts_streaming_url: null | string;
  label: null | string;
  cobalt_server_uri: null | string;
  model_id: null | string;
+  stt_model_id: null | string;
+  voice_engine: null | string;
+  engine_version: null | string;
+  service_version: null | string;
  model: null | string;
+  options: null | string;
+  deepgram_stt_uri: null | string;
+  deepgram_tts_uri: null | string;
+  deepgram_stt_use_tls: number;
+  speechmatics_stt_uri: null | string;
+  playht_tts_uri: null | string;
+  resemble_tts_uri: null | string;
+  resemble_tts_use_tls: number;
+  api_uri: null | string;
 }

 export interface Alert {
@@ -434,6 +467,10 @@ export interface CarrierRegisterStatus {
  callId: null | string;
 }

+export type DtmfType = "rfc2833" | "tones" | "info";
+
+export type TrunkType = "static_ip" | "auth" | "reg";
+
 export interface Carrier {
  voip_carrier_sid: string;
  name: string;
@@ -460,6 +497,9 @@ export interface Carrier {
  smpp_inbound_password: null | string;
  smpp_enquire_link_interval: number;
  register_status: CarrierRegisterStatus;
+  dtmf_type: DtmfType;
+  outbound_sip_proxy: string | null;
+  trunk_type: TrunkType;
 }

 export interface PredefinedCarrier extends Carrier {
@@ -481,6 +521,8 @@ export interface SipGateway extends Gateway {
  protocol?: string;
  port: number | null;
  pad_crypto?: boolean;
+  send_options_ping?: boolean;
+  use_sips_scheme?: boolean;
 }

 export interface SmppGateway extends Gateway {
@@ -530,16 +572,32 @@ export interface Client {

 export interface PageQuery {
  page: number;
+  page_size?: number;
  count: number;
  start?: string;
  days?: number;
 }

+export interface PhoneNumberQuery extends PageQuery {
+  service_provider_sid?: string;
+  account_sid?: string;
+  filter?: string;
+}
+
 export interface CallQuery extends PageQuery {
  direction?: string;
  answered?: string;
 }

+export interface ApplicationQuery extends PageQuery {
+  name?: string;
+}
+
+export interface VoipCarrierQuery extends PageQuery {
+  name?: string;
+  account_sid?: string;
+}
+
 export interface GoogleCustomVoicesQuery {
  speech_credential_sid?: string;
  label?: string;
@@ -633,8 +691,9 @@ export interface Price {
  recurring: Recurring;
  stripe_price_id: null | string;
  tiers_mode: null | string;
+  tiers?: null | Tier[];
  type: null | string;
-  unit_amount: number;
+  unit_amount: null | number;
  unit_amount_decimal: null | string;
 }

@@ -653,9 +712,11 @@ export interface StripeCustomerId {
 }

 export interface Tier {
-  up_to: number;
-  flat_amount: number;
-  unit_amount: number;
+  up_to: null | number;
+  flat_amount: null | number;
+  unit_amount: null | number;
+  flat_amount_decimal: null | string;
+  unit_amount_decimal: null | string;
 }

 export interface ServiceData {
@@ -696,19 +757,89 @@ export interface SignIn {
  account_sid?: null | string;
 }

-export interface GetVoices {
+export interface GetLanguagesAndVoices {
  vendor: string;
  label: string;
 }

-export interface VoiceOption extends SelectorOptions {
-  [key: string]: unknown;
+export interface SpeechSupportedLanguagesAndVoices {
+  tts: VoiceLanguage[];
+  stt: Language[];
+  models: Model[];
+  sttModels: Model[];
 }

-export interface GetLanguages extends GetVoices {
-  [key: string]: unknown;
+export interface ElevenLabsOptions {
+  optimize_streaming_latency: number;
+  voice_settings: Partial<{
+    similarity_boost: number;
+    stability: number;
+    style: number;
+    use_speaker_boost: boolean;
+  }>;
 }

-export interface LanguageOption extends SelectorOptions {
-  [key: string]: unknown;
+export interface PlayHTOptions {
+  quality: string;
+  speed: number;
+  seed: number;
+  temperature: number;
+  emotion: string;
+  voice_guidance: number;
+  style_guidance: number;
+  text_guidance: number;
+}
+
+export interface RimelabsOptions {
+  speedAlpha: number;
+  reduceLatency: boolean;
+}
+
+export interface InworldOptions {
+  audioConfig: {
+    bitRate?: number;
+    sampleRateHertz?: number;
+    pitch?: number;
+    speakingRate?: number;
+  };
+  temperature?: number;
+}
+
+export type CartesiaEmotions =
+  | "anger:lowest"
+  | "anger:low"
+  | "anger:high"
+  | "anger:highest"
+  | "positivity:lowest"
+  | "positivity:low"
+  | "positivity:high"
+  | "positivity:highest"
+  | "surprise:lowest"
+  | "surprise:high"
+  | "surprise:highest"
+  | "sadness:lowest"
+  | "sadness:low"
+  | "curiosity:low"
+  | "curiosity:high"
+  | "curiosity:highest";
+
+export interface CartesiaOptions {
+  speed: number;
+  emotion: CartesiaEmotions;
+}
+
+export interface AppEnvProperty {
+  description: string;
+  type: string;
+  required?: boolean;
+  default?: string | number | boolean;
+  obscure?: boolean;
+  uiHint?: "input" | "textarea" | "filepicker";
+  enum?: string[];
+  jambonzResource?: "carriers";
+  jambonzResourceOptions?: JambonzResourceOptions[];
+}
+
+export interface AppEnv {
+  [key: string]: AppEnvProperty;
 }
--- a/src/components/account-filter.cy.tsx
+++ b/src/components/account-filter.cy.tsx
@@ -43,32 +43,63 @@ describe("<AccountFilter>", () => {
    cy.mount(<AccountFilterTestWrapper />);

    /** Default value is properly set to first option */
-    cy.get("select").should("have.value", accountsSorted[0].account_sid);
+    cy.get("input").should("have.value", accountsSorted[0].name);
  });

  it("updates value onChange", () => {
    cy.mount(<AccountFilterTestWrapper />);

    /** Assert onChange value updates */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get("select").should("have.value", accountsSorted[1].account_sid);
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").should("have.value", accountsSorted[1].name);
  });

  it("manages the focused state", () => {
    cy.mount(<AccountFilterTestWrapper />);

    /** Test the `focused` state className (applied onFocus) */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get(".account-filter").should("have.class", "focused");
-    cy.get("select").blur();
-    cy.get(".account-filter").should("not.have.class", "focused");
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").parent().should("have.class", "focused");
+    cy.get("input").blur();
+    cy.get("input").parent().should("not.have.class", "focused");
  });

  it("renders with default option", () => {
    /** Test with the `defaultOption` prop */
    cy.mount(<AccountFilterTestWrapper defaultOption />);
-
    /** No default value is set when this prop is present */
-    cy.get("select").should("have.value", "");
+    cy.get("input").should("have.value", "All accounts");
+  });
+
+  it("verify the typeahead dropdown", () => {
+    /** Test by typing cus then custom account is selected */
+    cy.mount(<AccountFilterTestWrapper defaultOption />);
+    cy.get("input").clear();
+    cy.get("input").type("cus");
+    cy.get("div#account_filter-option-1").should("have.text", "custom account");
+  });
+  it("handles Enter key press", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    cy.get("input").type("cus{enter}");
+    cy.get("input").should("have.value", "custom account");
+  });
+  it("navigates down and up with arrow keys", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    // Press arrow down to move to the first option
+    cy.get("input").type("{downarrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "default account");
+
+    // Press up to move to the previous option
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "custom account");
  });
 });
--- a/src/components/account-filter.tsx
+++ b/src/components/account-filter.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { classNames } from "@jambonz/ui-kit";

-import { Icons } from "src/components/icons";
+import { TypeaheadSelector } from "src/components/forms";

 import type { Account } from "src/api/types";
 import { hasLength, sortLocaleName } from "src/utils";
@@ -22,12 +22,10 @@ export const AccountFilter = ({
  accounts,
  defaultOption,
 }: AccountFilterProps) => {
-  const [focus, setFocus] = useState(false);
  const classes = {
    smsel: true,
    "smsel--filter": true,
    "account-filter": true,
-    focused: focus,
  };

  useEffect(() => {
@@ -36,41 +34,30 @@ export const AccountFilter = ({
    }
  }, [accounts, defaultOption, setAccountSid]);

+  const options = [
+    ...(defaultOption ? [{ name: "All accounts", value: "" }] : []),
+    ...(hasLength(accounts)
+      ? accounts.sort(sortLocaleName).map((acct) => ({
+          name: acct.name,
+          value: acct.account_sid,
+        }))
+      : []),
+  ];
+
  return (
    <div className={classNames(classes)}>
      {label && <label htmlFor="account_filter">{label}:</label>}
-      <div>
-        <select
-          id="account_filter"
-          name="account_filter"
-          value={accountSid}
-          onChange={(e) => {
-            setAccountSid(e.target.value);
-            setAccountFilter(e.target.value);
-          }}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
-        >
-          {defaultOption ? (
-            <option value="">All accounts</option>
-          ) : (
-            accounts &&
-            !accounts.length && <option value="">No accounts</option>
-          )}
-          {hasLength(accounts) &&
-            accounts.sort(sortLocaleName).map((acct) => {
-              return (
-                <option key={acct.account_sid} value={acct.account_sid}>
-                  {acct.name}
-                </option>
-              );
-            })}
-        </select>
-        <span>
-          <Icons.ChevronUp />
-          <Icons.ChevronDown />
-        </span>
-      </div>
+      <TypeaheadSelector
+        id="account_filter"
+        name="account_filter"
+        value={accountSid}
+        options={options}
+        className="small"
+        onChange={(e) => {
+          setAccountSid(e.target.value);
+          setAccountFilter(e.target.value);
+        }}
+      />
    </div>
  );
 };
--- a/src/components/application-filter.cy.tsx
+++ b/src/components/application-filter.cy.tsx
@@ -12,7 +12,7 @@ import applications from "../../cypress/fixtures/applications.json";

 /** Wrapper to perform React state setup */
 const ApplicationFilterTestWrapper = (
-  props: Partial<ApplicationFilterProps>
+  props: Partial<ApplicationFilterProps>,
 ) => {
  const [application, setApplication] = useState("");

@@ -47,7 +47,7 @@ describe("<ApplicationFilter>", () => {
    /** Default value is properly set to first option */
    cy.get("select").should(
      "have.value",
-      applicationsSorted[0].application_sid
+      applicationsSorted[0].application_sid,
    );
  });

@@ -58,7 +58,7 @@ describe("<ApplicationFilter>", () => {
    cy.get("select").select(applicationsSorted[1].application_sid);
    cy.get("select").should(
      "have.value",
-      applicationsSorted[1].application_sid
+      applicationsSorted[1].application_sid,
    );
  });

@@ -75,7 +75,7 @@ describe("<ApplicationFilter>", () => {
  it("renders default option", () => {
    /** Test with the `defaultOption` prop */
    cy.mount(
-      <ApplicationFilterTestWrapper defaultOption="Choose Application" />
+      <ApplicationFilterTestWrapper defaultOption="Choose Application" />,
    );

    /** No default value is set when this prop is present */
--- a/src/components/clipboard/index.tsx
+++ b/src/components/clipboard/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";

 import { Icons } from "src/components/icons";
-import { toastError, toastSuccess } from "src/store";
+import { useToast } from "../toast/toast-provider";

 type ClipBoardProps = {
  id?: string;
@@ -13,6 +13,7 @@ type ClipBoardProps = {
 const hasClipboard = typeof navigator.clipboard !== "undefined";

 export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
+  const { toastSuccess, toastError } = useToast();
  const handleClick = () => {
    navigator.clipboard
      .writeText(text)
@@ -20,7 +21,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
        toastSuccess(
          <>
            <strong>{text}</strong> copied to clipboard
-          </>
+          </>,
        );
      })
      .catch(() => {
@@ -28,7 +29,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
          <>
            Unable to copy <strong>{text}</strong>, please select the text and
            right click to copy
-          </>
+          </>,
        );
      });
  };
--- a/src/components/forms/account-select.tsx
+++ b/src/components/forms/account-select.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";

-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";

 import type { Account } from "src/api/types";
 import { hasLength } from "src/utils";
@@ -16,7 +16,7 @@ type AccountSelectProps = {
  disabled?: boolean;
 };

-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;

 export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
  (
@@ -28,7 +28,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
      defaultOption,
      ...restProps
    }: AccountSelectProps,
-    ref
+    ref,
  ) => {
    useEffect(() => {
      if (hasLength(accounts) && !accountSid && !defaultOption) {
@@ -41,7 +41,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
        <label htmlFor="account_sid">
          {label} {required && <span>*</span>}
        </label>
-        <Selector
+        <TypeaheadSelector
          ref={ref}
          id="account_sid"
          name="account_sid"
@@ -56,14 +56,14 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
                  name: account.name,
                  value: account.account_sid,
                }))
-              : []
+              : [],
          )}
          onChange={(e) => setAccountSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  }
+  },
 );

 AccountSelect.displayName = "AccountSelect";
--- a/src/components/forms/application-select.tsx
+++ b/src/components/forms/application-select.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";

-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";
 import { hasLength } from "src/utils";

 import type { Application } from "src/api/types";
@@ -18,7 +18,7 @@ type ApplicationSelectProps = {
  disabled?: boolean;
 };

-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;

 export const ApplicationSelect = forwardRef<
  SelectorRef,
@@ -34,7 +34,7 @@ export const ApplicationSelect = forwardRef<
      defaultOption,
      ...restProps
    }: ApplicationSelectProps,
-    ref
+    ref,
  ) => {
    useEffect(() => {
      if (hasLength(applications) && !applicationSid && !defaultOption) {
@@ -47,7 +47,7 @@ export const ApplicationSelect = forwardRef<
        <label htmlFor={id}>
          {label} {required && <span>*</span>}
        </label>
-        <Selector
+        <TypeaheadSelector
          ref={ref}
          id={id}
          name={id}
@@ -62,14 +62,14 @@ export const ApplicationSelect = forwardRef<
                  name: application.name,
                  value: application.application_sid,
                }))
-              : []
+              : [],
          )}
          onChange={(e) => setApplicationSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  }
+  },
 );

 ApplicationSelect.displayName = "ApplicationSelect";
--- a/src/components/forms/checkzone/index.tsx
+++ b/src/components/forms/checkzone/index.tsx
@@ -11,6 +11,7 @@ type CheckzoneProps = {
  hidden?: boolean;
  children: React.ReactNode;
  initialCheck: boolean;
+  disabled?: boolean;
  handleChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };

@@ -28,8 +29,9 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
      children,
      initialCheck,
      handleChecked,
+      disabled = false,
    }: CheckzoneProps,
-    ref
+    ref,
  ) => {
    const [checked, setChecked] = useState(false);
    const classesTop = classNames({
@@ -51,6 +53,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        <label>
          <div className="label-container">
            <input
+              disabled={disabled}
              ref={ref}
              type="checkbox"
              name={name}
@@ -71,7 +74,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        {checked && <div className={classesIn}>{children}</div>}
      </div>
    );
-  }
+  },
 );

 Checkzone.displayName = "Checkzone";
--- a/src/components/forms/file-upload/index.tsx
+++ b/src/components/forms/file-upload/index.tsx
@@ -25,7 +25,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
      disabled,
      ...restProps
    }: FileProps,
-    ref
+    ref,
  ) => {
    const [fileName, setFileName] = useState("");
    const [focus, setFocus] = useState(false);
@@ -73,7 +73,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
        </div>
      </div>
    );
-  }
+  },
 );

 FileUpload.displayName = "FileUpload";
--- a/src/components/forms/index.ts
+++ b/src/components/forms/index.ts
@@ -6,6 +6,7 @@ import { FileUpload } from "./file-upload";
 import { AccountSelect } from "./account-select";
 import { ApplicationSelect } from "./application-select";
 import { LocalLimits, useLocalLimitsRef } from "./local-limits";
+import { TypeaheadSelector } from "./typeahead-selector";

 export {
  Passwd,
@@ -17,4 +18,5 @@ export {
  ApplicationSelect,
  LocalLimits,
  useLocalLimitsRef,
+  TypeaheadSelector,
 };
--- a/src/components/forms/local-limits.tsx
+++ b/src/components/forms/local-limits.tsx
@@ -52,12 +52,12 @@ export const LocalLimits = ({
    ? LIMITS.filter((limit) =>
        unit === LIMIT_SESS
          ? !limit.category.includes(LIMIT_MIN)
-          : limit.category.includes(LIMIT_MIN)
+          : limit.category.includes(LIMIT_MIN),
      )
    : LIMITS.filter(
        (limit) =>
          !limit.category.includes("license") &&
-          !limit.category.includes(LIMIT_MIN)
+          !limit.category.includes(LIMIT_MIN),
      );

  useEffect(() => {
@@ -130,7 +130,7 @@ export const LocalLimits = ({
                  }
                  onChange={(e) => {
                    const limit = localLimits.find(
-                      (l) => l.category === category
+                      (l) => l.category === category,
                    );
                    const value = e.target.value ? Number(e.target.value) : "";

@@ -139,8 +139,8 @@ export const LocalLimits = ({
                        localLimits.map((l) =>
                          l.category === category
                            ? { ...l, quantity: value }
-                            : l
-                        )
+                            : l,
+                        ),
                      );
                    } else {
                      setLocalLimits([
--- a/src/components/forms/passwd/index.tsx
+++ b/src/components/forms/passwd/index.tsx
@@ -8,6 +8,8 @@ type PasswdProps = JSX.IntrinsicElements["input"] & {
  locked?: boolean;
  /** This is optional in case an onChange override is necessary... */
  setValue?: React.Dispatch<React.SetStateAction<string>>;
+  /** Whether to ignore password managers */
+  ignorePasswordManager?: boolean;
 };

 type PasswdRef = HTMLInputElement;
@@ -22,16 +24,27 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
      setValue,
      placeholder,
      locked = false,
+      ignorePasswordManager = true,
      ...restProps
    }: PasswdProps,
-    ref
+    ref,
  ) => {
    const [reveal, setReveal] = useState(false);

+    // Create object with conditional password manager attributes
+    const passwordManagerAttributes = ignorePasswordManager
+      ? {
+          "data-lpignore": "true",
+          "data-1p-ignore": "",
+          "data-form-type": "other",
+          "data-bwignore": "",
+        }
+      : {};
+
    return (
      <div className="passwd">
        <input
-          autoComplete={"off"}
+          autoComplete="off"
          ref={ref}
          type={reveal ? "text" : "password"}
          name={name}
@@ -43,6 +56,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
            }
          }}
          {...restProps}
+          {...passwordManagerAttributes}
        />
        {!locked && (
          <button
@@ -55,7 +69,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
        )}
      </div>
    );
-  }
+  },
 );

 Passwd.displayName = "Passwd";
--- a/src/components/forms/selector/index.tsx
+++ b/src/components/forms/selector/index.tsx
@@ -20,7 +20,7 @@ type SelectorRef = HTMLSelectElement;
 export const Selector = forwardRef<SelectorRef, SelectorProps>(
  (
    { id, name, value, options, disabled, ...restProps }: SelectorProps,
-    ref
+    ref,
  ) => {
    const [focus, setFocus] = useState(false);
    const classes = {
@@ -53,7 +53,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
        </span>
      </div>
    );
-  }
+  },
 );

 Selector.displayName = "Selector";
--- a/src/components/forms/selector/styles.scss
+++ b/src/components/forms/selector/styles.scss
@@ -25,7 +25,6 @@
  }

  select {
-    @include ui-mixins.m();
    appearance: none;
    padding: ui-vars.$px01 ui-vars.$px02;
    border-radius: ui-vars.$px01;
@@ -33,6 +32,7 @@
    background-color: ui-vars.$white;
    width: 100%;
    max-width: vars.$widthinput;
+    @include ui-mixins.m();

    &:focus {
      border-color: ui-vars.$dark;
--- a/src/components/forms/typeahead-selector/index.tsx
+++ b/src/components/forms/typeahead-selector/index.tsx
@@ -0,0 +1,391 @@
+import React, { useState, forwardRef, useEffect } from "react";
+import { classNames } from "@jambonz/ui-kit";
+import { Icons } from "src/components/icons";
+
+import "./styles.scss";
+
+/**
+ * Represents an option in the typeahead selector dropdown
+ * @interface TypeaheadOption
+ * @property {string} name - The display text shown in the dropdown
+ * @property {string} value - The underlying value used when the option is selected
+ */
+export interface TypeaheadOption {
+  name: string;
+  value: string;
+}
+
+/**
+ * Props for the TypeaheadSelector component
+ * @extends {JSX.IntrinsicElements["input"]} - Inherits all standard HTML input props
+ * @typedef TypeaheadSelectorProps
+ * @property {TypeaheadOption[]} options - Array of selectable options to display in the dropdown
+ * @property {string} [className] - Optional CSS class name to apply to the component
+ */
+type TypeaheadSelectorProps = JSX.IntrinsicElements["input"] & {
+  options: TypeaheadOption[];
+  className?: string;
+};
+
+type TypeaheadSelectorRef = HTMLInputElement;
+
+/**
+ * TypeaheadSelector - A searchable dropdown component with keyboard navigation
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.id - Unique identifier for the input
+ * @param {string} props.name - Form field name
+ * @param {string} props.value - Currently selected value
+ * @param {TypeaheadOption[]} props.options - Array of selectable options
+ * @param {boolean} props.disabled - Whether the input is disabled
+ * @param {Function} props.onChange - Callback when selection changes
+ * @param {Ref} ref - Forwarded ref for the input element
+ *
+ * Features:
+ * - Keyboard navigation (up/down arrows, enter to select, escape to close)
+ * - Auto-scroll selected option into view
+ * - Filtering options by typing
+ * - Click or keyboard selection
+ * - Maintains value synchronization with parent component
+ * - Accessibility support with ARIA attributes
+ */
+export const TypeaheadSelector = forwardRef<
+  TypeaheadSelectorRef,
+  TypeaheadSelectorProps
+>(
+  (
+    {
+      id,
+      name,
+      value = "",
+      options,
+      disabled,
+      onChange,
+      className,
+      ...restProps
+    }: TypeaheadSelectorProps,
+    ref,
+  ) => {
+    const [inputValue, setInputValue] = useState("");
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    const classes = {
+      "typeahead-selector": true,
+      [`typeahead-selector${className}`]: true,
+      focused: isOpen,
+      disabled: !!disabled,
+    };
+    const [activeIndex, setActiveIndex] = useState(-1);
+
+    /**
+     * Synchronizes the input field with external value changes
+     * - Updates the input value when the selected value changes externally
+     * - Sets the input text to the name of the selected option
+     * - Updates the active index to match the selected option
+     * - Runs when either the value prop or options array changes
+     */
+    useEffect(() => {
+      let selectedIndex = options.findIndex((opt) => opt.value === value);
+      selectedIndex = selectedIndex < 0 ? 0 : selectedIndex;
+      const selected = options[selectedIndex];
+      setInputValue(selected?.name ?? "");
+      setActiveIndex(selectedIndex);
+    }, [value, options]);
+
+    /**
+     * Handles changes to the input field value
+     * @param {React.ChangeEvent<HTMLInputElement>} e - Input change event
+     *
+     * - Updates the input field with user's typed value
+     * - Opens the dropdown menu
+     * - Shows all available options (unfiltered)
+     * - Finds and highlights the first option that starts with the input text
+     * - Scrolls the highlighted option into view
+     */
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const input = e.target.value;
+      setInputValue(input);
+      setIsOpen(true);
+      setFilteredOptions(options);
+
+      const currentIndex = options.findIndex((opt) =>
+        opt.name.toLowerCase().startsWith(input.toLowerCase()),
+      );
+      setActiveIndex(currentIndex);
+
+      // Wait for dropdown to render, then scroll to the selected option
+      setTimeout(() => {
+        scrollActiveOptionIntoView(currentIndex);
+      }, 0);
+    };
+
+    /**
+     * Scrolls the option at the specified index into view within the dropdown
+     * @param {number} index - The index of the option to scroll into view
+     *
+     * - Uses the option's ID to find its DOM element
+     * - Smoothly scrolls the option into view if found
+     * - Does nothing if the option element doesn't exist
+     */
+    const scrollActiveOptionIntoView = (index: number) => {
+      const optionElement = document.getElementById(`${id}-option-${index}`);
+      if (optionElement) {
+        optionElement.scrollIntoView({ block: "nearest" });
+      }
+    };
+
+    /**
+     * Handles keyboard navigation and selection within the dropdown
+     * @param {React.KeyboardEvent<HTMLInputElement>} e - Keyboard event
+     *
+     * Keyboard controls:
+     * - ArrowDown/ArrowUp: Opens dropdown if closed, otherwise navigates options
+     * - Enter: Selects the currently highlighted option
+     * - Escape: Closes the dropdown
+     *
+     * Features:
+     * - Prevents default arrow key scrolling behavior
+     * - Auto-scrolls the active option into view
+     * - Wraps navigation within available options
+     * - Maintains current selection if at list boundaries
+     */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          setIsOpen(true);
+          setFilteredOptions(options);
+          return;
+        }
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const newIndex =
+              prev < filteredOptions.length - 1 ? prev + 1 : prev;
+            scrollActiveOptionIntoView(newIndex);
+            return newIndex;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const newIndex = prev > 0 ? prev - 1 : prev;
+            scrollActiveOptionIntoView(newIndex);
+            return newIndex;
+          });
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+            handleOptionSelect(filteredOptions[activeIndex], e);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+
+    /**
+     * Handles the selection of an option from the dropdown
+     * @param {TypeaheadOption} option - The selected option object
+     * @param {React.MouseEvent | React.KeyboardEvent} e - Optional event object
+     *
+     * - Updates the input field with the selected option's name
+     * - Closes the dropdown
+     * - Triggers the onChange callback with a synthetic event containing the selected value
+     */
+    const handleOptionSelect = (
+      option: TypeaheadOption,
+      e?: React.MouseEvent | React.KeyboardEvent,
+    ) => {
+      e?.preventDefault();
+      setInputValue(option.name);
+      setIsOpen(false);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: option.value, name },
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(syntheticEvent);
+      }
+    };
+
+    /**
+     * Handles the input focus event
+     *
+     * - Opens the dropdown menu
+     * - Shows all available options (unfiltered)
+     * - Finds and highlights the currently selected option based on value or input text
+     * - Scrolls the highlighted option into view after dropdown renders
+     *
+     * Note: Uses setTimeout to ensure the dropdown is rendered before attempting to scroll
+     */
+    const handleFocus = () => {
+      setIsOpen(true);
+      setFilteredOptions(options);
+      // Find and highlight the current value in the dropdown
+      const currentIndex = options.findIndex(
+        (opt) => opt.value === value || opt.name === inputValue,
+      );
+      setActiveIndex(currentIndex);
+
+      // Wait for dropdown to render, then scroll to the selected option
+      setTimeout(() => {
+        scrollActiveOptionIntoView(currentIndex);
+      }, 0);
+    };
+
+    /**
+     * Handles the input blur (focus loss) event
+     * @param {React.FocusEvent} e - The blur event object
+     *
+     * - Checks if focus is moving outside the component
+     * - If focus leaves component:
+     *   - Validates current input value against available options
+     *   - Resets input to last valid selection if no match found
+     *   - Closes the dropdown menu
+     * - Preserves focus state if clicking within component (e.g., dropdown options)
+     */
+    const handleBlur = (e: React.FocusEvent) => {
+      // Check if the new focus target is within our component
+      const relatedTarget = e.relatedTarget as Node;
+      const container = inputRef.current?.parentElement;
+
+      if (!container?.contains(relatedTarget)) {
+        // Reset value if it doesn't match any option
+        const matchingOption = options.find(
+          (opt) => opt.name.toLowerCase() === inputValue.toLowerCase(),
+        );
+        if (!matchingOption) {
+          const selected = options.find((opt) => opt.value === value);
+          setInputValue(selected?.name || "");
+        }
+        setIsOpen(false);
+      }
+    };
+    /**
+     * Renders a typeahead selector component with dropdown functionality.
+     *
+     * Key features:
+     * - Input field with autocomplete functionality
+     * - Dropdown toggle button with chevron icons
+     * - Dropdown list of filterable options
+     * - Keyboard navigation support
+     * - Accessibility attributes (ARIA)
+     *
+     * Component Structure:
+     * 1. Input field:
+     *    - Handles text input, focus/blur events
+     *    - Supports both function and object refs
+     *    - Disables browser autocomplete features
+     *
+     * 2. Toggle button:
+     *    - Opens/closes dropdown
+     *    - Shows up/down chevron icons
+     *    - Resets filtered options on click
+     *    - Auto-scrolls to selected option
+     *
+     * 3. Dropdown menu:
+     *    - Displays filtered options
+     *    - Supports mouse and keyboard interaction
+     *    - Highlights active option
+     *    - Implements proper ARIA attributes for accessibility
+     *
+     * States managed:
+     * - isOpen: Controls dropdown visibility
+     * - activeIndex: Tracks currently focused option
+     * - inputValue: Current input text
+     * - filteredOptions: Available options based on input
+     */
+    return (
+      <div className={classNames(classes)}>
+        <input
+          className={classNames({
+            active: isOpen,
+            disabled: !!disabled,
+          })}
+          ref={(node) => {
+            // Handle both refs
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            inputRef.current = node;
+          }}
+          id={id}
+          name={name}
+          value={inputValue}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          {...restProps}
+        />
+        <span
+          role="button"
+          tabIndex={0}
+          onBlur={handleBlur}
+          className={classNames({
+            active: isOpen,
+            disabled: !!disabled,
+            pointerevents: true,
+          })}
+          onClick={() => {
+            setIsOpen(!isOpen);
+            setFilteredOptions(options);
+            const currentIndex = options.findIndex(
+              (opt) => opt.value === value || opt.name === inputValue,
+            );
+            setActiveIndex(currentIndex);
+
+            // Wait for dropdown to render, then scroll to the selected option
+            setTimeout(() => {
+              scrollActiveOptionIntoView(currentIndex);
+            }, 0);
+          }}
+          onKeyDown={handleKeyDown}
+        >
+          <Icons.ChevronUp />
+          <Icons.ChevronDown />
+        </span>
+
+        {isOpen && (
+          <div
+            className="typeahead-dropdown"
+            role="listbox"
+            id={`${id}-listbox`}
+          >
+            {filteredOptions.map((option, index) => (
+              <div
+                key={`${id}_${option.value}`}
+                className={classNames({
+                  "typeahead-option": true,
+                  active: index === activeIndex,
+                })}
+                role="option"
+                id={`${id}-option-${index}`}
+                aria-selected={index === activeIndex}
+                tabIndex={-1}
+                onMouseDown={() => handleOptionSelect(option)}
+                onMouseEnter={() => setActiveIndex(index)}
+              >
+                {option.name}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+TypeaheadSelector.displayName = "TypeaheadSelector";
--- a/src/components/forms/typeahead-selector/styles.scss
+++ b/src/components/forms/typeahead-selector/styles.scss
@@ -0,0 +1,182 @@
+@use "src/styles/vars";
+@use "src/styles/mixins";
+@use "@jambonz/ui-kit/src/styles/index";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+// ... imports remain the same ...
+
+// Common mixins for shared styles
+@mixin typeahead-base {
+  position: relative;
+  max-width: vars.$widthtypeaheadselector;
+
+  &.disabled {
+    @include mixins.disabled();
+  }
+
+  &.focused {
+    input {
+      border-color: ui-vars.$dark;
+      outline: 0;
+    }
+
+    span {
+      background-color: ui-vars.$dark;
+    }
+  }
+}
+
+@mixin typeahead-input {
+  appearance: none;
+  padding: ui-vars.$px01 ui-vars.$px02;
+  border-radius: ui-vars.$px01;
+  border: 2px solid ui-vars.$grey;
+  background-color: ui-vars.$white;
+  max-width: vars.$widthtypeaheadinput;
+  transition: border-color 0.2s ease;
+  font-family: inherit;
+  @include ui-mixins.m();
+
+  &:focus {
+    border-color: ui-vars.$dark;
+    outline: 0;
+  }
+
+  &[disabled] {
+    @include mixins.disabled();
+  }
+}
+
+@mixin typeahead-span {
+  height: 100%;
+  width: 50px;
+  background-color: ui-vars.$grey;
+  border-radius: 0 ui-vars.$px01 ui-vars.$px01 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+
+  &.disabled {
+    @include mixins.disabled();
+  }
+
+  &.active {
+    background-color: ui-vars.$dark;
+  }
+
+  svg {
+    stroke: ui-vars.$white;
+    cursor: default;
+
+    &:first-child {
+      transform: translateY(5px);
+    }
+    &:last-child {
+      transform: translateY(-5px);
+    }
+  }
+}
+
+@mixin typeahead-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: ui-vars.$white;
+  border: 1px solid ui-vars.$dark;
+  max-height: 200px;
+  overflow-y: auto;
+  @include ui-mixins.m();
+}
+
+@mixin typeahead-option {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: normal;
+  display: block;
+  padding-block-start: 0px;
+  padding-block-end: 1px;
+  min-block-size: 1.2em;
+  padding-inline: 2px;
+  white-space: nowrap;
+  padding-left: 16px;
+  font-family: inherit;
+  line-height: 30.4px;
+
+  &:hover,
+  &.active {
+    background-color: #006dff;
+    color: ui-vars.$white;
+  }
+
+  &.active {
+    cursor: default;
+  }
+}
+
+// Main classes using the mixins
+.typeahead-selector {
+  @include typeahead-base();
+  width: 100%;
+
+  input {
+    width: 100%;
+    @include typeahead-input();
+  }
+
+  span {
+    @include typeahead-span();
+  }
+
+  .typeahead-dropdown {
+    z-index: 1000;
+    @include typeahead-dropdown();
+  }
+
+  .typeahead-option {
+    @include typeahead-option();
+  }
+}
+
+.typeahead-selectorsmall {
+  @include typeahead-base();
+  width: auto;
+
+  input {
+    height: 34px;
+    min-width: 370px;
+    font-size: var(--mxs-size);
+    @include typeahead-input();
+  }
+
+  span {
+    @include typeahead-span();
+  }
+
+  .typeahead-dropdown {
+    width: 100%;
+    @include typeahead-dropdown();
+  }
+
+  .typeahead-option {
+    font-size: var(--mxs-size);
+    @include typeahead-option();
+  }
+
+  .pointerevents {
+    pointer-events: all;
+    cursor: default;
+  }
+}
+
+.filters--multi {
+  overflow-x: visible !important;
+  white-space: nowrap;
+  grid-gap: 16px;
+}
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -50,7 +50,7 @@ export const Modal = ({
        </ButtonGroup>
      </div>
    </div>,
-    portal
+    portal,
  );
 };

@@ -87,7 +87,7 @@ export const ModalForm = ({
        </ButtonGroup>
      </form>
    </div>,
-    portal
+    portal,
  );
 };

@@ -113,7 +113,7 @@ export const ModalClose = ({ children, handleClose }: CloseProps) => {
        </ButtonGroup>
      </div>
    </div>,
-    portal
+    portal,
  );
 };

@@ -147,6 +147,6 @@ export const ModalLoader = ({ children }: LoaderProps) => {
        </div>
      </div>
    </div>,
-    portal
+    portal,
  );
 };
--- a/src/components/obscure-input/index.tsx
+++ b/src/components/obscure-input/index.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Icons } from "src/components/icons";
+import "./styles.scss";
+
+interface ObscureInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const ObscureInput = ({
+  value,
+  onChange,
+  className = "",
+  ...props
+}: ObscureInputProps) => {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className="passwd">
+      <input
+        type={revealed ? "text" : "password"}
+        value={value}
+        onChange={onChange}
+        className={className}
+        {...props}
+      />
+      <button
+        className="btnty"
+        type="button"
+        onClick={() => setRevealed(!revealed)}
+        aria-label={revealed ? "Hide text" : "Show text"}
+      >
+        {revealed ? <Icons.EyeOff /> : <Icons.Eye />}
+      </button>
+    </div>
+  );
+};
+
+export default ObscureInput;
--- a/src/components/obscure-input/styles.scss
+++ b/src/components/obscure-input/styles.scss
@@ -0,0 +1,39 @@
+@use "src/styles/vars";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.obscure-input {
+  position: relative; // This is correct
+  width: 100%;
+  display: block; // Add this to ensure proper containing block
+
+  &__field {
+    width: 100%;
+    padding-right: 40px;
+    font-family: ui-vars.$font-mono;
+    box-sizing: border-box; // Add this to ensure padding doesn't expand width
+  }
+
+  &__toggle {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    height: 100%; // Make the button take full height of input
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2; // Ensure button is above input
+
+    svg {
+      stroke: ui-vars.$jambonz;
+      pointer-events: none;
+      width: 18px; // Control icon size
+      height: 18px;
+    }
+  }
+}
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -32,7 +32,7 @@ export const Pagination = ({
    (num: number) => {
      setPageNumber(Math.max(1, Math.min(maxPageNumber, num)));
    },
-    [maxPageNumber, setPageNumber]
+    [maxPageNumber, setPageNumber],
  );

  const handleNumberMapping = useCallback(
@@ -100,7 +100,7 @@ export const Pagination = ({
        );
      }
    },
-    [maxPageNumber, pageNumber]
+    [maxPageNumber, pageNumber],
  );

  return (
--- a/src/components/require-auth.cy.tsx
+++ b/src/components/require-auth.cy.tsx
@@ -2,15 +2,18 @@ import React from "react";
 import { H1 } from "@jambonz/ui-kit";

 import { RequireAuth } from "./require-auth";
+import { ToastProvider } from "./toast/toast-provider";

 /** Wrapper to pass different auth contexts */
 const RequireAuthTestWrapper = () => {
  return (
-    <RequireAuth>
-      <div className="auth-div">
-        <H1>Protected Route</H1>
-      </div>
-    </RequireAuth>
+    <ToastProvider>
+      <RequireAuth>
+        <div className="auth-div">
+          <H1>Protected Route</H1>
+        </div>
+      </RequireAuth>
+    </ToastProvider>
  );
 };

--- a/src/components/require-auth.tsx
+++ b/src/components/require-auth.tsx
@@ -2,14 +2,15 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";

 import { useAuth } from "src/router/auth";
-import { toastError } from "src/store";
 import { ROUTE_LOGIN } from "src/router/routes";
 import { MSG_MUST_LOGIN } from "src/constants";
+import { useToast } from "./toast/toast-provider";

 /**
 * Wrapper component that enforces valid authorization to the app
 */
 export const RequireAuth = ({ children }: { children: React.ReactNode }) => {
+  const { toastError } = useToast();
  const { authorized } = useAuth();
  const navigate = useNavigate();

--- a/src/components/scoped-access.cy.tsx
+++ b/src/components/scoped-access.cy.tsx
@@ -29,7 +29,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: admin</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("exist");
  });
@@ -44,7 +44,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: service_provider</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("not.exist");
  });
@@ -59,7 +59,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: account</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("not.exist");
  });
--- a/src/components/search-filter/index.tsx
+++ b/src/components/search-filter/index.tsx
@@ -46,7 +46,7 @@ export const SearchFilter = ({
        setAppearance(false);
      }
    },
-    [setFilterValue]
+    [setFilterValue],
  );

  const handleActive = useCallback(() => {
--- a/src/components/select-filter.tsx
+++ b/src/components/select-filter.tsx
@@ -42,7 +42,7 @@ export const SelectFilter = ({
            setFilterValue(e.target.value);
            const queryFilter = createFilterString(
              e.target.value,
-              label as string
+              label as string,
            );
            setQueryFilter(queryFilter);

--- a/src/components/toast/index.tsx
+++ b/src/components/toast/index.tsx
@@ -23,6 +23,6 @@ export const Toast = ({ type, message }: ToastProps) => {
        {message}
      </div>
    </div>,
-    portal
+    portal,
  );
 };
--- a/src/components/toast/toast-provider.tsx
+++ b/src/components/toast/toast-provider.tsx
@@ -0,0 +1,96 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import { Toast } from "./index";
+import type { IMessage, Toast as ToastProps } from "src/store/types";
+import { TOAST_TIME } from "src/constants";
+
+// Define the context type
+interface ToastContextType {
+  toastSuccess: (message: IMessage) => void;
+  toastError: (message: IMessage) => void;
+}
+
+// Create the context with a default value
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+/**
+ * Provider component that makes toast functionality available to any
+ * nested components that call useToast().
+ */
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toast, setToast] = useState<ToastProps | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+
+  // Clear any existing toasts and timeouts
+  const clearToast = useCallback(() => {
+    setToast(null);
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  // Show a toast with the specified type and message
+  const showToast = useCallback(
+    (type: "success" | "error", message: IMessage) => {
+      clearToast();
+
+      setToast({ type, message });
+
+      // Auto-hide after specified time
+      timeoutRef.current = window.setTimeout(() => {
+        setToast(null);
+      }, TOAST_TIME);
+    },
+    [clearToast],
+  );
+
+  // Exposed methods
+  const toastSuccess = useCallback(
+    (message: IMessage) => {
+      showToast("success", message);
+    },
+    [showToast],
+  );
+
+  const toastError = useCallback(
+    (message: IMessage) => {
+      showToast("error", message);
+    },
+    [showToast],
+  );
+
+  // Context value
+  const contextValue = useMemo(
+    () => ({
+      toastSuccess,
+      toastError,
+    }),
+    [toastSuccess, toastError],
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {toast && <Toast type={toast.type} message={toast.message} />}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (context === undefined) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+
+  return context;
+};
--- a/src/containers/internal/api-keys/index.tsx
+++ b/src/containers/internal/api-keys/index.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { P, Button } from "@jambonz/ui-kit";

-import { toastSuccess, toastError } from "src/store";
 import { useApiData, postApiKey, deleteApiKey } from "src/api";
 import { Modal, ModalClose, Obscure, ClipBoard, Section } from "src/components";
 import { getHumanDateTime, hasLength } from "src/utils";

 import type { ApiKey, TokenResponse } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 type ApiKeyProps = {
  path: string;
@@ -18,6 +18,7 @@ type ApiKeyProps = {
 };

 export const ApiKeys = ({ path, post, label }: ApiKeyProps) => {
+  const { toastSuccess, toastError } = useToast();
  const [apiKeys, apiKeysRefetcher] = useApiData<ApiKey[]>(path);
  const [deleteKey, setDeleteKey] = useState<ApiKey | null>(null);
  const [addedKey, setAddedKey] = useState<TokenResponse | null>(null);
--- a/src/containers/internal/navi/index.tsx
+++ b/src/containers/internal/navi/index.tsx
@@ -5,13 +5,12 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Icons, ModalForm } from "src/components";
 import { naviTop, naviByo } from "./items";
 import { UserMe } from "../user-me";
+import { useSelectState, useDispatch } from "src/store";
 import {
-  useSelectState,
-  useDispatch,
-  toastSuccess,
-  toastError,
-} from "src/store";
-import { getActiveSP, setActiveSP } from "src/store/localStore";
+  getActiveSP,
+  removeAccountFilter,
+  setActiveSP,
+} from "src/store/localStore";
 import { postServiceProviders } from "src/api";

 import type { NaviItem } from "./items";
@@ -22,6 +21,7 @@ import { Scope, UserData } from "src/store/types";
 import { USER_ADMIN } from "src/api/constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import { Lcr } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 type CommonProps = {
  handleMenu: () => void;
@@ -63,6 +63,7 @@ export const Navi = ({
  handleMenu,
  handleLogout,
 }: NaviProps) => {
+  const { toastSuccess, toastError } = useToast();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const user = useSelectState("user");
@@ -76,7 +77,7 @@ export const Navi = ({

  const naviByoFiltered = useMemo(() => {
    return naviByo.filter(
-      (item) => !item.acl || (item.acl && accessControl[item.acl])
+      (item) => !item.acl || (item.acl && accessControl[item.acl]),
    );
  }, [accessControl, currentServiceProvider]);

@@ -100,7 +101,7 @@ export const Navi = ({
        toastSuccess(
          <>
            Added new service provider <strong>{name}</strong>
-          </>
+          </>,
        );
        dispatch({ type: "serviceProviders" });
        setSid(json.sid);
@@ -123,7 +124,7 @@ export const Navi = ({
    setSid(getActiveSP());
    if (sid) {
      const serviceProvider = serviceProviders.find(
-        (sp) => sp.service_provider_sid === sid
+        (sp) => sp.service_provider_sid === sid,
      );

      if (serviceProvider) {
@@ -166,6 +167,7 @@ export const Navi = ({
                onChange={(e) => {
                  setSid(e.target.value);
                  setActiveSP(e.target.value);
+                  removeAccountFilter();
                  navigate(ROUTE_LOGIN);
                }}
                disabled={user?.scope !== USER_ADMIN}
--- a/src/containers/internal/views/accounts/delete.tsx
+++ b/src/containers/internal/views/accounts/delete.tsx
@@ -75,19 +75,19 @@ export const DeleteAccount = ({
      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
      getFetch<MSTeamsTenant[]>(API_MS_TEAMS_TENANTS),
      getFetch<ApiKey[]>(
-        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`
+        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`,
      ),
    ]).then(([appsRes, phonesRes, teamsRes, apiKeysRes]) => {
      if (!ignore) {
        const used = {
          apps: appsRes.json.filter(
-            (app) => app.account_sid === account.account_sid
+            (app) => app.account_sid === account.account_sid,
          ),
          phones: phonesRes.json.filter(
-            (phone) => phone.account_sid === account.account_sid
+            (phone) => phone.account_sid === account.account_sid,
          ),
          teams: teamsRes.json.filter(
-            (team) => team.account_sid === account.account_sid
+            (team) => team.account_sid === account.account_sid,
          ),
          apiKeys: apiKeysRes.json,
        };
--- a/src/containers/internal/views/accounts/edit-sip-realm.tsx
+++ b/src/containers/internal/views/accounts/edit-sip-realm.tsx
@@ -44,8 +44,8 @@ export const EditSipRealm = () => {
      getAvailability(`${name}.${userData?.account?.root_domain}`)
        .then(({ json }) =>
          setIsValidDomain(
-            Boolean(json.available) && hasValue(name) && name.length != 0
-          )
+            Boolean(json.available) && hasValue(name) && name.length != 0,
+          ),
        )
        .catch((error) => {
          setErrorMessage(error.msg);
--- a/src/containers/internal/views/accounts/edit.tsx
+++ b/src/containers/internal/views/accounts/edit.tsx
@@ -4,7 +4,7 @@ import { useParams } from "react-router-dom";

 import { ApiKeys } from "src/containers/internal/api-keys";
 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { AccountForm } from "./form";

 import type { Account, Application, Limit, TtsCache } from "src/api/types";
@@ -14,19 +14,21 @@ import {
 } from "src/router/routes";
 import { useScopedRedirect } from "src/utils";
 import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditAccount = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Account>(
-    `Accounts/${params.account_sid}`
+    `Accounts/${params.account_sid}`,
  );
  const [limitsData, refetchLimits] = useApiData<Limit[]>(
-    `Accounts/${params.account_sid}/Limits`
+    `Accounts/${params.account_sid}/Limits`,
  );
  const [apps] = useApiData<Application[]>("Applications");
  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
-    `Accounts/${params.account_sid}/TtsCache`
+    `Accounts/${params.account_sid}/TtsCache`,
  );

  useScopedRedirect(
@@ -36,7 +38,7 @@ export const EditAccount = () => {
      : ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  /** Handle error toast at top level... */
--- a/src/containers/internal/views/accounts/form.tsx
+++ b/src/containers/internal/views/accounts/form.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { P, Button, ButtonGroup, MS, Icon, H1 } from "@jambonz/ui-kit";
 import { Link, useNavigate, useParams } from "react-router-dom";

-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  putAccount,
  postAccount,
@@ -14,7 +14,14 @@ import {
  postAccountBucketCredentialTest,
  deleteAccount,
 } from "src/api";
-import { ClipBoard, Icons, Modal, Section, Tooltip } from "src/components";
+import {
+  ClipBoard,
+  Icons,
+  Modal,
+  ScopedAccess,
+  Section,
+  Tooltip,
+} from "src/components";
 import {
  Selector,
  Checkzone,
@@ -40,6 +47,7 @@ import {
  PlanType,
  USER_ACCOUNT,
  WEBHOOK_METHODS,
+  STRIPE_PUBLISHABLE_KEY,
 } from "src/api/constants";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";

@@ -66,6 +74,8 @@ import dayjs from "dayjs";
 import { EditBoard } from "src/components/editboard";
 import { ModalLoader } from "src/components/modal";
 import { useAuth } from "src/router/auth";
+import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";

 type AccountFormProps = {
  apps?: Application[];
@@ -80,16 +90,20 @@ export const AccountForm = ({
  account,
  ttsCache,
 }: AccountFormProps) => {
+  const { toastError, toastSuccess } = useToast();
  const params = useParams();
  const navigate = useNavigate();
  const user = useSelectState("user");
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useApiData<Account[]>("Accounts");
-  const [invoice] = useApiData<Invoice>("Invoices");
+  // Dont get Invoices if the environment is self-hosted
+  const [invoice] = STRIPE_PUBLISHABLE_KEY
+    ? useApiData<Invoice>("Invoices")
+    : [undefined];
  const [userData] = useApiData<CurrentUserData>("Users/me");
  const [userCarriers] = useApiData<Carrier[]>(`VoipCarriers`);
  const [userSpeechs] = useApiData<SpeechCredential[]>(
-    `/Accounts/${params.account_sid}/SpeechCredentials`
+    `/Accounts/${params.account_sid}/SpeechCredentials`,
  );
  const [name, setName] = useState("");
  const [realm, setRealm] = useState("");
@@ -111,10 +125,13 @@ export const AccountForm = ({
  const [tmpBucketVendor, setTmpBucketVendor] = useState("");
  const [recordFormat, setRecordFormat] = useState("mp3");
  const [bucketRegion, setBucketRegion] = useState("us-east-1");
+  const [tmpBucketRegion, setTmpBucketRegion] = useState("");
  const [bucketName, setBucketName] = useState("");
  const [tmpBucketName, setTmpBucketName] = useState("");
  const [bucketAccessKeyId, setBucketAccessKeyId] = useState("");
+  const [tmpBucketAccessKeyId, setTmpBucketAccessKeyId] = useState("");
  const [bucketSecretAccessKey, setBucketSecretAccessKey] = useState("");
+  const [tmpBucketSecretAccessKey, setTmpBucketSecretAccessKey] = useState("");
  const [bucketCredentialChecked, setBucketCredentialChecked] = useState(false);
  const [bucketTags, setBucketTags] = useState<AwsTag[]>([]);
  const [bucketGoogleServiceKey, setBucketGoogleServiceKey] =
@@ -132,7 +149,10 @@ export const AccountForm = ({
  const deleteMessageRef = useRef<HTMLInputElement | null>(null);
  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
  const [azureConnectionString, setAzureConnectionString] = useState("");
+  const [tmpAzureConnectionString, setTmpAzureConnectionString] = useState("");
  const [endpoint, setEndpoint] = useState("");
+  const [tmpEndpoint, setTmpEndpoint] = useState("");
+  const [enableDebugLog, setEnableDebugLog] = useState(false);

  /** This lets us map and render the same UI for each... */
  const webhooks = [
@@ -183,7 +203,7 @@ export const AccountForm = ({

    if (deleteMessage !== "delete my account") {
      toastError(
-        "You must type the delete message correctly in order to delete your account."
+        "You must type the delete message correctly in order to delete your account.",
      );
      if (
        deleteMessageRef.current &&
@@ -271,6 +291,7 @@ export const AccountForm = ({
        endpoint: endpoint,
        access_key_id: bucketAccessKeyId,
        secret_access_key: bucketSecretAccessKey,
+        ...(bucketRegion && { region: bucketRegion }),
      }),
    };

@@ -281,7 +302,7 @@ export const AccountForm = ({
        } else {
          toastError(json.reason);
        }
-      }
+      },
    );
  };

@@ -306,7 +327,7 @@ export const AccountForm = ({
          return limit.quantity === ""
            ? deleteAccountLimit(sid, limit.category)
            : postAccountLimit(sid, limit);
-        })
+        }),
      )
        .then(() => {
          if (limits) {
@@ -357,18 +378,18 @@ export const AccountForm = ({
        filtered.find(
          (a) =>
            a.service_provider_sid !== account.data!.service_provider_sid &&
-            a.name === name
+            a.name === name,
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your accounts."
+          "The name you have entered is already in use on another one of your accounts.",
        );
        return;
      }

      if (filtered.find((a) => a.sip_realm === realm)) {
        setMessage(
-          "The SIP Realm you have entered is already in use on another one of your accounts."
+          "The SIP Realm you have entered is already in use on another one of your accounts.",
        );
        return;
      }
@@ -377,6 +398,7 @@ export const AccountForm = ({
    if (account && account.data) {
      putAccount(account.data.account_sid, {
        name,
+        enable_debug_log: enableDebugLog,
        ...(!ENABLE_HOSTED_SYSTEM && { sip_realm: realm || null }),
        webhook_secret: account.data.webhook_secret,
        siprec_hook_sid: recId || null,
@@ -418,6 +440,9 @@ export const AccountForm = ({
            access_key_id: bucketAccessKeyId || null,
            secret_access_key: bucketSecretAccessKey || null,
            ...(hasLength(bucketTags) && { tags: bucketTags }),
+            ...(bucketRegion && {
+              region: bucketRegion,
+            }),
          },
        }),
        ...(!bucketCredentialChecked && {
@@ -446,6 +471,7 @@ export const AccountForm = ({
        queue_event_hook: queueHook || null,
        registration_hook: regHook || null,
        service_provider_sid: currentServiceProvider.service_provider_sid,
+        enable_debug_log: enableDebugLog,
      })
        .then(({ json }) => {
          toastSuccess("Account created successfully");
@@ -461,6 +487,7 @@ export const AccountForm = ({
  /** Set current account data values if applicable -- e.g. "edit mode" */
  useEffect(() => {
    if (account && account.data) {
+      setEnableDebugLog(account.data.enable_debug_log);
      setName(account.data.name);

      if (account.data.sip_realm) {
@@ -513,30 +540,45 @@ export const AccountForm = ({
        setBucketName(account.data.bucket_credential?.name);
      }

-      if (account.data.bucket_credential?.access_key_id) {
+      if (tmpBucketAccessKeyId) {
+        setBucketAccessKeyId(tmpBucketAccessKeyId);
+      } else if (account.data.bucket_credential?.access_key_id) {
        setBucketAccessKeyId(account.data.bucket_credential?.access_key_id);
      }
-      if (account.data.bucket_credential?.secret_access_key) {
+      if (tmpBucketSecretAccessKey) {
+        setBucketSecretAccessKey(tmpBucketSecretAccessKey);
+      } else if (account.data.bucket_credential?.secret_access_key) {
        setBucketSecretAccessKey(
-          account.data.bucket_credential?.secret_access_key
+          account.data.bucket_credential?.secret_access_key,
        );
      }
-      if (account.data.bucket_credential?.region) {
+      if (tmpBucketRegion) {
+        setBucketRegion(tmpBucketRegion);
+      } else if (account.data.bucket_credential?.region) {
        setBucketRegion(account.data.bucket_credential?.region);
+      } else if (
+        account.data.bucket_credential?.vendor === BUCKET_VENDOR_S3_COMPATIBLE
+      ) {
+        setBucketRegion("");
      }
-      if (account.data.bucket_credential?.connection_string) {
+
+      if (tmpAzureConnectionString) {
+        setAzureConnectionString(tmpAzureConnectionString);
+      } else if (account.data.bucket_credential?.connection_string) {
        setAzureConnectionString(
-          account.data.bucket_credential.connection_string
+          account.data.bucket_credential.connection_string,
        );
      }
-      if (account.data.bucket_credential?.endpoint) {
+      if (tmpEndpoint) {
+        setEndpoint(tmpEndpoint);
+      } else if (account.data.bucket_credential?.endpoint) {
        setEndpoint(account.data.bucket_credential.endpoint);
      }
      if (account.data.record_all_calls) {
        setRecordAllCalls(account.data.record_all_calls ? true : false);
      }
      setBucketCredentialChecked(
-        hasValue(bucketVendor) && bucketVendor.length !== 0
+        hasValue(bucketVendor) && bucketVendor.length !== 0,
      );
      if (account.data.bucket_credential?.tags) {
        setBucketTags(account.data.bucket_credential?.tags);
@@ -548,12 +590,10 @@ export const AccountForm = ({
        setBucketGoogleServiceKey(tmpBucketGoogleServiceKey);
      } else if (account.data.bucket_credential?.service_key) {
        setBucketGoogleServiceKey(
-          JSON.parse(account.data.bucket_credential?.service_key)
+          JSON.parse(account.data.bucket_credential?.service_key),
        );
      }
-      setInitialCheckRecordAllCall(
-        hasValue(bucketVendor) && bucketVendor.length !== 0
-      );
+      setInitialCheckRecordAllCall(hasValue(account.data.bucket_credential));
    }
  }, [account]);

@@ -572,14 +612,14 @@ export const AccountForm = ({
          : { quantity: 0 };
        const callSessionRecord = products
          ? products.find(
-              (item) => item.name === "concurrent call session"
+              (item) => item.name === "concurrent call session",
            ) || { quantity: 0 }
          : { quantity: 0 };
        const quantity =
          (userData.account.device_to_call_ratio || 0) *
            (callSessionRecord.quantity || 0) +
          (registeredDeviceRecord.quantity || 0);
-        const { trial_end_date } = userData.account || {};
+        const { trial_end_date, is_active } = userData.account || {};
        switch (pType) {
          case PlanType.TRIAL:
            setSubscriptionDescription(
@@ -588,10 +628,10 @@ export const AccountForm = ({
              } simultaneous calls and ${quantity} registered devices.${
                trial_end_date
                  ? ` Your free trial will end on ${dayjs(
-                      trial_end_date
+                      trial_end_date,
                    ).format("MMM DD, YYYY")}.`
                  : ""
-              }`
+              }`,
            );
            break;
          case PlanType.PAID:
@@ -603,15 +643,21 @@ export const AccountForm = ({
                  CurrencySymbol[invoice.currency || "usd"]
                }${(invoice.total || 0) / 100} on ${dayjs
                  .unix(Number(invoice.next_payment_attempt))
-                  .format("MMM DD, YYYY")}.`
+                  .format("MMM DD, YYYY")}.`,
              );
            }

            break;
          case PlanType.FREE:
-            setSubscriptionDescription(
-              `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`
-            );
+            if (is_active) {
+              setSubscriptionDescription(
+                `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`,
+              );
+            } else {
+              setSubscriptionDescription(
+                "Your free trial has expired.  Please upgrade your subscription to a paid plan to continue service",
+              );
+            }
            break;
        }
        // Make sure Account page is alway scroll to top to see subscription
@@ -623,10 +669,10 @@ export const AccountForm = ({
  const updateBucketTags = (
    index: number,
    key: string,
-    value: typeof bucketTags[number][keyof AwsTag]
+    value: (typeof bucketTags)[number][keyof AwsTag],
  ) => {
    setBucketTags(
-      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b))
+      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b)),
    );
  };

@@ -900,7 +946,7 @@ export const AccountForm = ({
                    defaultOption="None"
                    application={[application.stateVal, application.stateSet]}
                    applications={apps.filter(
-                      (app) => app.account_sid === account.data!.account_sid
+                      (app) => app.account_sid === account.data!.account_sid,
                    )}
                  />
                </fieldset>
@@ -908,7 +954,7 @@ export const AccountForm = ({
            })}
          {webhooks.map((webhook) => {
            const selectOptions = WEBHOOK_METHODS.filter((wm) =>
-              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true
+              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true,
            );

            return (
@@ -1011,6 +1057,22 @@ export const AccountForm = ({
              } cached TTS prompts`}</MS>
            </fieldset>
          )}
+          <ScopedAccess scope={Scope.admin} user={user}>
+            <fieldset>
+              <label htmlFor="enable_debug_log" className="chk">
+                <input
+                  id="enable_debug_log"
+                  name="enable_debug_log"
+                  type="checkbox"
+                  onChange={(e) => setEnableDebugLog(e.target.checked)}
+                  checked={enableDebugLog}
+                />
+                <Tooltip text="You can enable debug log for calls only to this account">
+                  Enable debug log for this account
+                </Tooltip>
+              </label>
+            </fieldset>
+          </ScopedAccess>
          {!DISABLE_CALL_RECORDING && (
            <>
              <fieldset>
@@ -1048,6 +1110,18 @@ export const AccountForm = ({
                      onChange={(e) => {
                        setBucketVendor(e.target.value);
                        setTmpBucketVendor(e.target.value);
+                        if (
+                          e.target.value === BUCKET_VENDOR_AWS &&
+                          !regions?.aws.find((r) => r.value === bucketRegion)
+                        ) {
+                          setBucketRegion("us-east-1");
+                          setTmpBucketRegion("us-east-1");
+                        } else if (
+                          e.target.value === BUCKET_VENDOR_S3_COMPATIBLE
+                        ) {
+                          setBucketRegion("");
+                          setTmpBucketRegion("");
+                        }
                      }}
                    />
                  </div>
@@ -1065,6 +1139,18 @@ export const AccountForm = ({
                        value={endpoint}
                        onChange={(e) => {
                          setEndpoint(e.target.value);
+                          setTmpEndpoint(e.target.value);
+                        }}
+                      />
+                      <label htmlFor="endpoint">Region (Optional)</label>
+                      <input
+                        id="aws_compatible_region"
+                        type="text"
+                        name="aws_compatible_region"
+                        value={bucketRegion}
+                        onChange={(e) => {
+                          setBucketRegion(e.target.value);
+                          setTmpBucketRegion(e.target.value);
                        }}
                      />
                    </>
@@ -1112,7 +1198,10 @@ export const AccountForm = ({
                                  value: "",
                                },
                              ].concat(regions["aws"])}
-                              onChange={(e) => setBucketRegion(e.target.value)}
+                              onChange={(e) => {
+                                setBucketRegion(e.target.value);
+                                setTmpBucketRegion(e.target.value);
+                              }}
                            />
                          </>
                        )}
@@ -1128,6 +1217,7 @@ export const AccountForm = ({
                        value={bucketAccessKeyId}
                        onChange={(e) => {
                          setBucketAccessKeyId(e.target.value);
+                          setTmpBucketAccessKeyId(e.target.value);
                        }}
                      />
                      <label htmlFor="bucket_aws_secret_key">
@@ -1141,6 +1231,7 @@ export const AccountForm = ({
                        value={bucketSecretAccessKey}
                        onChange={(e) => {
                          setBucketSecretAccessKey(e.target.value);
+                          setTmpBucketSecretAccessKey(e.target.value);
                        }}
                      />
                    </>
@@ -1165,10 +1256,10 @@ export const AccountForm = ({
                          <code>
                            {JSON.stringify(
                              getObscuredGoogleServiceKey(
-                                bucketGoogleServiceKey
+                                bucketGoogleServiceKey,
                              ),
                              null,
-                              2
+                              2,
                            )}
                          </code>
                        </pre>
@@ -1189,6 +1280,7 @@ export const AccountForm = ({
                        value={azureConnectionString}
                        onChange={(e) => {
                          setAzureConnectionString(e.target.value);
+                          setTmpAzureConnectionString(e.target.value);
                        }}
                      />
                    </>
@@ -1198,10 +1290,10 @@ export const AccountForm = ({
                    bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE
                      ? "S3"
                      : bucketVendor === BUCKET_VENDOR_GOOGLE
-                      ? "Google Cloud Storage"
-                      : bucketVendor === BUCKET_VENDOR_AZURE
-                      ? "Azure Cloud Storage"
-                      : ""}{" "}
+                        ? "Google Cloud Storage"
+                        : bucketVendor === BUCKET_VENDOR_AZURE
+                          ? "Azure Cloud Storage"
+                          : ""}{" "}
                    Tags
                  </label>
                  {hasLength(bucketTags) &&
@@ -1241,7 +1333,7 @@ export const AccountForm = ({
                          type="button"
                          onClick={() => {
                            setBucketTags(
-                              bucketTags.filter((g2, i2) => i2 !== i)
+                              bucketTags.filter((g2, i2) => i2 !== i),
                            );
                          }}
                        >
--- a/src/containers/internal/views/accounts/index.tsx
+++ b/src/containers/internal/views/accounts/index.tsx
@@ -6,7 +6,7 @@ import { useServiceProviderData, deleteAccount } from "src/api";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
 import { Section, Icons, Spinner, SearchFilter } from "src/components";
 import { DeleteAccount } from "./delete";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  hasLength,
  hasValue,
@@ -17,8 +17,10 @@ import { USER_ACCOUNT } from "src/api/constants";

 import { Scope } from "src/store/types";
 import type { Account } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 export const Accounts = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const [accounts, refetch] = useServiceProviderData<Account[]>("Accounts");
  const [account, setAccount] = useState<Account | null>(null);
@@ -30,7 +32,7 @@ export const Accounts = () => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage all accounts"
+    "You do not have permissions to manage all accounts",
  );

  const handleDelete = () => {
@@ -40,7 +42,7 @@ export const Accounts = () => {
        user.account_sid !== account.account_sid
      ) {
        toastError(
-          "You do not have permissions to make changes to this Account"
+          "You do not have permissions to make changes to this Account",
        );
        return;
      }
@@ -52,7 +54,7 @@ export const Accounts = () => {
          toastSuccess(
            <>
              Deleted account <strong>{account.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
--- a/src/containers/internal/views/accounts/manage-payment-form.tsx
+++ b/src/containers/internal/views/accounts/manage-payment-form.tsx
@@ -10,11 +10,13 @@ import { postSubscriptions, useApiData } from "src/api";
 import { CurrentUserData, Subscription } from "src/api/types";
 import { Section } from "src/components";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { PaymentMethod } from "@stripe/stripe-js";
 import { ModalLoader } from "src/components/modal";
+import { useToast } from "src/components/toast/toast-provider";

 export const ManagePaymentForm = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const stripe = useStripe();
  const elements = useElements();
@@ -35,7 +37,7 @@ export const ManagePaymentForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
          );
        } else if (json.status === "action required") {
          if (stripe) {
--- a/src/containers/internal/views/accounts/subscription-form.tsx
+++ b/src/containers/internal/views/accounts/subscription-form.tsx
@@ -19,10 +19,11 @@ import {
  useStripe,
 } from "@stripe/react-stripe-js";
 import { PaymentMethod } from "@stripe/stripe-js";
-import { toastError, toastSuccess } from "src/store";
 import { ModalLoader } from "src/components/modal";
+import { useToast } from "src/components/toast/toast-provider";

 const SubscriptionForm = () => {
+  const { toastError, toastSuccess } = useToast();
  const [userData] = useApiData<CurrentUserData>("Users/me");
  const [priceInfo] = useApiData<PriceInfo[]>("/Prices");
  const [userStripeInfo] = useApiData<StripeCustomerId>("/StripeCustomerId");
@@ -33,7 +34,7 @@ const SubscriptionForm = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const isModifySubscription = location.pathname.includes(
-    "modify-subscription"
+    "modify-subscription",
  );
  const [billingCharge, setBillingCharge] = useState<Subscription | null>(null);
  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
@@ -69,7 +70,7 @@ const SubscriptionForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
          );
        } else if (json.status === "action required") {
          if (stripe) {
@@ -176,7 +177,7 @@ const SubscriptionForm = () => {
      .then(() => {
        toastSuccess("Downgrade to free plan completed successfully");
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
        );
      })
      .catch((error) => {
@@ -201,16 +202,16 @@ const SubscriptionForm = () => {
    })
      .then(() => {
        toastSuccess(
-          "Your subscription capacity has been successfully modified."
+          "Your subscription capacity has been successfully modified.",
        );
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
        );
      })
      .catch(() => {
        toastError(
          `The additional capacity you that you requested could not be granted due to a failure processing payment.
-          Please configure a valid credit card for your account and the upgrade will be automatically processed`
+          Please configure a valid credit card for your account and the upgrade will be automatically processed`,
        );
      })
      .finally(() => {
@@ -254,25 +255,44 @@ const SubscriptionForm = () => {
    },
  ]);
  const [originalServiceData, setOriginalServiceData] = useState<ServiceData[]>(
-    []
+    [],
  );

-  const initFeesAndCost = (priceData: PriceInfo[]) => {
+  const initFeesAndCost = (
+    priceData: PriceInfo[],
+    serviceData: ServiceData[],
+  ) => {
    serviceData.forEach((service) => {
      const record = priceData.find(
-        (item) => item.category === service.category
+        (item) => item.category === service.category,
      );

      if (record) {
        const price = record.prices.find(
-          (item) => item.currency === service.currency
+          (item) => item.currency === service.currency,
        );

        if (price) {
          let fees = 0;
          switch (price.billing_scheme) {
            case "per_unit":
-              fees = (price.unit_amount * 1) / 100;
+              fees = ((price.unit_amount || 0) * 1) / 100;
+              break;
+            case "tiered":
+              if (price.tiers && price.tiers.length) {
+                const tier = price.tiers.find(
+                  (item) => !item.up_to || item.up_to >= service.capacity,
+                );
+                if (tier) {
+                  if (typeof tier.flat_amount === "number") {
+                    fees = tier.flat_amount / 100;
+                  } else {
+                    fees = ((tier.unit_amount || 0) * 1) / 100;
+                  }
+                }
+                service.tiers = price.tiers;
+              }
+
              break;
            default:
              break;
@@ -283,6 +303,7 @@ const SubscriptionForm = () => {
          service.product_sid = record.product_sid;
          service.stripe_product_id = record.stripe_product_id;
          service.fees = fees;
+          service.cost = fees * service.capacity;
          service.feesLabel = `${
            CurrencySymbol[service.currency || "usd"]
          }${fees} per ${
@@ -294,12 +315,12 @@ const SubscriptionForm = () => {
      }
    });

-    setServiceData([...serviceData]);
+    return [...serviceData];
  };

  const getServicePrice = (
    service: ServiceData,
-    capacity: number
+    capacity: number,
  ): [number, string, number] => {
    let fees = 0;
    let feesLabel = "";
@@ -311,7 +332,7 @@ const SubscriptionForm = () => {
    } else if (service.billing_scheme === "tiered") {
      const filteredTiers = service.tiers
        ? service.tiers.filter(
-            (item) => !item.up_to || item.up_to >= capacityNum
+            (item) => !item.up_to || item.up_to >= capacityNum,
          )
        : [];
      if (filteredTiers.length) {
@@ -320,7 +341,7 @@ const SubscriptionForm = () => {
          fees = tier.flat_amount / 100;
          cost = fees;
        } else {
-          fees = tier.unit_amount / 100;
+          fees = (tier.unit_amount || 0) / 100;
          cost = fees * capacityNum;
        }
      }
@@ -360,24 +381,25 @@ const SubscriptionForm = () => {
  const updateServiceData = (
    index: number,
    key: string,
-    value: typeof serviceData[number][keyof ServiceData]
+    value: (typeof serviceData)[number][keyof ServiceData],
  ) => {
-    setServiceData(
-      serviceData.map((g, i) =>
-        i === index
-          ? {
-              ...g,
-              [key]: value,
-              ...(key === "capacity" && { cost: Number(value) * g.fees }),
-            }
-          : g
-      )
+    let serviceD = serviceData.map((g, i) =>
+      i === index
+        ? {
+            ...g,
+            [key]: value,
+          }
+        : g,
    );
+    if (key === "capacity" && priceInfo) {
+      serviceD = initFeesAndCost(priceInfo, serviceD);
+    }
+    setServiceData([...serviceD]);
  };

  useEffect(() => {
    if (priceInfo) {
-      initFeesAndCost(priceInfo);
+      setServiceData(initFeesAndCost(priceInfo, serviceData));
    }

    if (userData && priceInfo) {
@@ -389,7 +411,7 @@ const SubscriptionForm = () => {
    if (isModifySubscription && originalServiceData.length > 0) {
      setIsDisableSubmitButton(
        serviceData[0].capacity === originalServiceData[0].capacity &&
-          serviceData[1].capacity === originalServiceData[1].capacity
+          serviceData[1].capacity === originalServiceData[1].capacity,
      );
    }
    setTotal(serviceData.reduce((res, service) => res + service.cost || 0, 0));
@@ -506,7 +528,7 @@ const SubscriptionForm = () => {
                            updateServiceData(
                              idx,
                              "capacity",
-                              e.target.value ? Number(e.target.value) : ""
+                              e.target.value ? Number(e.target.value) : "",
                            );
                          }}
                        />
--- a/src/containers/internal/views/alerts/index.tsx
+++ b/src/containers/internal/views/alerts/index.tsx
@@ -8,7 +8,7 @@ import {
  PER_PAGE_SELECTION,
  USER_ACCOUNT,
 } from "src/api/constants";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { hasLength, hasValue } from "src/utils";
 import {
  AccountFilter,
@@ -27,8 +27,10 @@ import {
  setLocation,
 } from "src/store/localStore";
 import AlertDetailItem from "./alert-detail-item";
+import { useToast } from "src/components/toast/toast-provider";

 export const Alerts = () => {
+  const { toastError } = useToast();
  const user = useSelectState("user");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [accountSid, setAccountSid] = useState("");
@@ -47,7 +49,12 @@ export const Alerts = () => {
      count: Number(perPageFilter),
      ...(dateFilter === "today"
        ? { start: dayjs().startOf("date").toISOString() }
-        : { days: Number(dateFilter) }),
+        : dateFilter === "yesterday"
+          ? {
+              start: dayjs().subtract(1, "day").startOf("day").toISOString(),
+              end: dayjs().subtract(1, "day").endOf("day").toISOString(),
+            }
+          : { days: Number(dateFilter) }),
    };

    getAlerts(accountSid, payload)
@@ -63,10 +70,10 @@ export const Alerts = () => {
  };

  useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
+    if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
    if (getQueryFilter()) {
      const [date] = getQueryFilter().split("/");
-      setAccountSid(getAccountFilter() || accountSid);
-      if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
      setDateFilter(date);
    }
  }, [accountSid]);
@@ -103,7 +110,7 @@ export const Alerts = () => {
          id="date_filter"
          label="Date"
          filter={[dateFilter, setDateFilter]}
-          options={DATE_SELECTION.slice(0, 2)}
+          options={DATE_SELECTION}
        />
      </section>
      <Section {...(hasLength(alerts) && { slim: true })}>
--- a/src/containers/internal/views/applications/delete.tsx
+++ b/src/containers/internal/views/applications/delete.tsx
@@ -66,10 +66,10 @@ export const DeleteApplication = ({
            (account) =>
              account.device_calling_application_sid ===
                application.application_sid ||
-              account.siprec_hook_sid === application.application_sid
+              account.siprec_hook_sid === application.application_sid,
          ),
          teams: msteamRes.json.filter(
-            (team) => team.application_sid === application.application_sid
+            (team) => team.application_sid === application.application_sid,
          ),
        };
        const deletable =
--- a/src/containers/internal/views/applications/edit.tsx
+++ b/src/containers/internal/views/applications/edit.tsx
@@ -3,19 +3,21 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { ApplicationForm } from "./form";

 import type { Application } from "src/api/types";
 import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { Scope } from "src/store/types";
 import { ROUTE_INTERNAL_APPLICATIONS } from "src/router/routes";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditApplication = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Application>(
-    `Applications/${params.application_sid}`
+    `Applications/${params.application_sid}`,
  );

  useScopedRedirect(
@@ -23,7 +25,7 @@ export const EditApplication = () => {
    ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  useEffect(() => {
--- a/src/containers/internal/views/applications/form.tsx
+++ b/src/containers/internal/views/applications/form.tsx
@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

-import { toastError, toastSuccess, useSelectState } from "src/store";
-import { ClipBoard, Section } from "src/components";
+import { useSelectState } from "src/store";
+import { ClipBoard, Section, Tooltip } from "src/components";
 import {
  Selector,
  Checkzone,
  Passwd,
  Message,
  AccountSelect,
+  FileUpload,
 } from "src/components/forms";
 import {
  vendors,
  LANG_EN_US,
  VENDOR_GOOGLE,
  LANG_EN_US_STANDARD_C,
-  useSpeechVendors,
  VENDOR_CUSTOM,
 } from "src/vendor";
 import {
@@ -24,6 +24,8 @@ import {
  putApplication,
  useServiceProviderData,
  useApiData,
+  getAppEnvSchema,
+  getSPVoipCarriers,
 } from "src/api";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
@@ -49,19 +51,27 @@ import type {
  WebhookMethod,
  UseApiDataMap,
  SpeechCredential,
+  AppEnv,
 } from "src/api/types";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
-import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
+import {
+  hasLength,
+  hasValue,
+  isUserAccountScope,
+  useRedirect,
+} from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";
 import SpeechProviderSelection from "./speech-selection";
+import ObscureInput from "src/components/obscure-input";
+import { useToast } from "src/components/toast/toast-provider";

 type ApplicationFormProps = {
  application?: UseApiDataMap<Application>;
 };

 export const ApplicationForm = ({ application }: ApplicationFormProps) => {
+  const { toastSuccess, toastError } = useToast();
  const navigate = useNavigate();
-  const { synthesis, recognizers } = useSpeechVendors();
  const user = useSelectState("user");
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
@@ -79,11 +89,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const [tmpStatusWebhook, setTmpStatusWebhook] =
    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialStatusWebhook, setInitialStatusWebhook] = useState(false);
-  const [messageWebhook, setMessageWebhook] =
-    useState<WebHook>(DEFAULT_WEBHOOK);
-  const [tmpMessageWebhook, setTmpMessageWebhook] =
-    useState<WebHook>(DEFAULT_WEBHOOK);
-  const [initialMessageWebhook, setInitialMessageWebhook] = useState(false);
  const [synthVendor, setSynthVendor] =
    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
  const [synthLang, setSynthLang] = useState(LANG_EN_US);
@@ -129,6 +134,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    useState("");
  const [initalCheckFallbackSpeech, setInitalCheckFallbackSpeech] =
    useState(false);
+  const [appEnv, setAppEnv] = useState<AppEnv | null>(null);
+  const appEnvTimeoutRef = useRef<number | null>(null);
+  const [envVars, setEnvVars] = useState<Record<
+    string,
+    string | number | boolean
+  > | null>(null);

  /** This lets us map and render the same UI for each... */
  const webhooks = [
@@ -141,6 +152,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      tmpStateSet: setTmpCallWebhook,
      initialCheck: initialCallWebhook,
      required: true,
+      webhookEnv: appEnv,
    },
    {
      label: "Call status",
@@ -152,22 +164,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      initialCheck: initialStatusWebhook,
      required: true,
    },
-    {
-      label: "Messaging",
-      prefix: "message_webhook",
-      stateVal: messageWebhook,
-      tmpStateVal: tmpMessageWebhook,
-      stateSet: setMessageWebhook,
-      tmpStateSet: setTmpMessageWebhook,
-      initialCheck: initialMessageWebhook,
-      required: false,
-    },
  ];

  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an application."
+    "You must create an account before you can create an application.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -175,7 +177,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

    if (isUserAccountScope(accountSid, user)) {
      toastError(
-        "You do not have permissions to make changes to these Speech Credentials"
+        "You do not have permissions to make changes to these Speech Credentials",
      );
      return;
    }
@@ -189,11 +191,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            a.name === applicationName &&
            (!application ||
              !application.data ||
-              a.application_sid !== application.data.application_sid)
+              a.application_sid !== application.data.application_sid),
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your applications."
+          "The name you have entered is already in use on another one of your applications.",
        );
        return;
      }
@@ -204,7 +206,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      app_json: applicationJson || null,
      call_hook: callWebhook || null,
      account_sid: accountSid || null,
-      messaging_hook: messageWebhook || null,
      call_status_hook: statusWebhook || null,
      speech_synthesis_vendor: synthVendor || null,
      speech_synthesis_language: synthLang || null,
@@ -215,6 +216,25 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      speech_recognizer_label: recogLabel || null,
      record_all_calls: recordAllCalls ? 1 : 0,
      use_for_fallback_speech: useForFallbackSpeech ? 1 : 0,
+      env_vars: envVars
+        ? Object.keys(envVars).reduce((acc, key) => {
+            const value = envVars[key];
+            // Keep only values that:
+            // 1. Are defined in appEnv schema
+            // 2. Are not empty strings, undefined, or null
+            // 3. For booleans and numbers, keep them even if they're false or 0
+            if (
+              appEnv &&
+              appEnv[key] &&
+              (value === false ||
+                value === 0 ||
+                (value !== "" && value != null))
+            ) {
+              return { ...acc, [key]: value };
+            }
+            return acc;
+          }, {})
+        : null,
      fallback_speech_synthesis_vendor: useForFallbackSpeech
        ? fallbackSpeechSynthsisVendor || null
        : null,
@@ -244,7 +264,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          application.refetch();
          toastSuccess("Application updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`
+            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -273,7 +293,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          })
+          }),
        );
      setttsVendorOptions(vendors.concat(v));

@@ -285,7 +305,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          })
+          }),
        );
      setSttVendorOptions(vendors.concat(v2));

@@ -298,7 +318,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
        (c) =>
          c.vendor === synthVendor &&
          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_tts
+          c.use_for_tts,
      );
      let c2 = c1
        .filter((c) => c.label)
@@ -306,11 +326,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = fallbackSpeechSynthsisVendor
@@ -318,7 +338,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            (c) =>
              c.vendor === fallbackSpeechSynthsisVendor &&
              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_tts
+              c.use_for_tts,
          )
        : [];

@@ -328,17 +348,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );
      setFallbackTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = credentials.filter(
        (c) =>
          c.vendor === recogVendor &&
          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_stt
+          c.use_for_stt,
      );
      c2 = c1
        .filter((c) => c.label)
@@ -346,11 +366,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = fallbackSpeechRecognizerVendor
@@ -358,7 +378,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            (c) =>
              c.vendor === fallbackSpeechRecognizerVendor &&
              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_stt
+              c.use_for_stt,
          )
        : [];
      c2 = c1
@@ -367,11 +387,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setFallbackSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );
    }
  }, [
@@ -388,6 +408,53 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  }, [accountSid]);

+  useEffect(() => {
+    let label: string;
+    // Synthesis Label
+    label = application?.data?.speech_synthesis_label || "";
+    if (ttsLabelOptions && !ttsLabelOptions.find((l) => l.value === label)) {
+      label = ttsLabelOptions.length ? ttsLabelOptions[0].value : "";
+    }
+    setSynthLabel(label);
+
+    // fallback Synthesis Label
+    label = application?.data?.fallback_speech_synthesis_label || "";
+    if (
+      fallbackTtsLabelOptions &&
+      !fallbackTtsLabelOptions.find((l) => l.value === label)
+    ) {
+      label = fallbackTtsLabelOptions.length
+        ? fallbackTtsLabelOptions[0].value
+        : "";
+    }
+    setFallbackSpeechSynthsisLabel(label);
+
+    // regconizer label
+    label = application?.data?.speech_recognizer_label || "";
+    if (sttLabelOptions && !sttLabelOptions.find((l) => l.value === label)) {
+      label = sttLabelOptions.length ? sttLabelOptions[0].value : "";
+    }
+    setRecogLabel(label);
+
+    // fallback regconizer label
+    label = application?.data?.fallback_speech_recognizer_label || "";
+    if (
+      fallbackSttLabelOptions &&
+      !fallbackSttLabelOptions.find((l) => l.value === label)
+    ) {
+      label = fallbackSttLabelOptions.length
+        ? fallbackSttLabelOptions[0].value
+        : "";
+    }
+    setFallbackSpeechRecognizerLabel(label);
+  }, [
+    ttsLabelOptions,
+    sttLabelOptions,
+    fallbackTtsLabelOptions,
+    fallbackSttLabelOptions,
+    application,
+  ]);
+
  useEffect(() => {
    setLocation();
    if (application && application.data) {
@@ -399,7 +466,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      setTmpApplicationJson(applicationJson);
      setInitialApplicationJson(
        application.data.app_json != undefined &&
-          application.data.app_json.length !== 0
+          application.data.app_json.length !== 0,
      );

      if (application.data.call_hook) {
@@ -426,32 +493,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
        else setInitialStatusWebhook(false);
      }

-      if (application.data.messaging_hook) {
-        setMessageWebhook(application.data.messaging_hook);
-        setTmpMessageWebhook(application.data.messaging_hook);
-
-        if (
-          application.data.messaging_hook.username ||
-          application.data.messaging_hook.password
-        )
-          setInitialMessageWebhook(true);
-        else setInitialMessageWebhook(false);
-      }
-
      if (application.data.account_sid)
        setAccountSid(application.data.account_sid);

-      if (application.data.messaging_hook)
-        setMessageWebhook(application.data.messaging_hook);
-
      if (application.data.speech_synthesis_vendor)
        setSynthVendor(
-          application.data.speech_synthesis_vendor as keyof SynthesisVendors
+          application.data.speech_synthesis_vendor as keyof SynthesisVendors,
        );

      if (application.data.speech_synthesis_language)
        setSynthLang(
-          application.data.speech_synthesis_language as keyof RecognizerVendors
+          application.data.speech_synthesis_language as keyof RecognizerVendors,
        );

      if (application.data.speech_synthesis_voice)
@@ -459,59 +511,48 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_recognizer_vendor)
        setRecogVendor(
-          application.data.speech_recognizer_vendor as keyof RecognizerVendors
+          application.data.speech_recognizer_vendor as keyof RecognizerVendors,
        );

      if (application.data.speech_recognizer_language)
        setRecogLang(application.data.speech_recognizer_language);
-      if (application.data.speech_synthesis_label) {
-        setSynthLabel(application.data.speech_synthesis_label);
-      }
-      if (application.data.speech_recognizer_label) {
-        setRecogLabel(application.data.speech_recognizer_label);
-      }
+
      if (application.data.use_for_fallback_speech) {
        setUseForFallbackSpeech(application.data.use_for_fallback_speech > 0);
        setInitalCheckFallbackSpeech(
-          application.data.use_for_fallback_speech > 0
+          application.data.use_for_fallback_speech > 0,
        );
      }
      if (application.data.fallback_speech_recognizer_vendor) {
        setFallbackSpeechRecognizerVendor(
          application.data
-            .fallback_speech_recognizer_vendor as keyof RecognizerVendors
+            .fallback_speech_recognizer_vendor as keyof RecognizerVendors,
        );
      }
      if (application.data.fallback_speech_recognizer_language) {
        setFallbackSpeechRecognizerLanguage(
-          application.data.fallback_speech_recognizer_language
-        );
-      }
-      if (application.data.fallback_speech_recognizer_label) {
-        setFallbackSpeechRecognizerLabel(
-          application.data.fallback_speech_recognizer_label
+          application.data.fallback_speech_recognizer_language,
        );
      }
+
      if (application.data.fallback_speech_synthesis_vendor) {
        setFallbackSpeechSynthsisVendor(
          application.data
-            .fallback_speech_synthesis_vendor as keyof SynthesisVendors
+            .fallback_speech_synthesis_vendor as keyof SynthesisVendors,
        );
      }
      if (application.data.fallback_speech_synthesis_language) {
        setFallbackSpeechSynthsisLanguage(
-          application.data.fallback_speech_synthesis_language
+          application.data.fallback_speech_synthesis_language,
        );
      }
      if (application.data.fallback_speech_synthesis_voice) {
        setFallbackSpeechSynthsisVoice(
-          application.data.fallback_speech_synthesis_voice
+          application.data.fallback_speech_synthesis_voice,
        );
      }
-      if (application.data.fallback_speech_synthesis_label) {
-        setFallbackSpeechSynthsisLabel(
-          application.data.fallback_speech_synthesis_label
-        );
+      if (application.data.env_vars) {
+        setEnvVars(application.data.env_vars);
      }
    }
  }, [application]);
@@ -548,6 +589,97 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    setFallbackSpeechRecognizerLabel(tmp);
  };

+  const fetchAppEnvJambonzResources = async (appEnv: AppEnv) => {
+    if (appEnv) {
+      const promises = Object.entries(appEnv).map(async ([key, value]) => {
+        const { jambonzResource } = value;
+        switch (jambonzResource) {
+          case "carriers":
+            const carriers = await getSPVoipCarriers(
+              currentServiceProvider?.service_provider_sid || "",
+              {
+                page: 1,
+                page_size: 10000,
+                ...(user?.account_sid && {
+                  account_sid: user.account_sid,
+                }),
+              },
+            );
+            if (carriers.json.total) {
+              return {
+                key,
+                jambonzResourceOptions: carriers.json.data.map((carrier) => ({
+                  name: carrier.name,
+                  value: carrier.name,
+                })),
+              };
+            }
+            break;
+          default:
+            break;
+        }
+        return { key, jambonzResourceOptions: null };
+      });
+
+      const results = await Promise.all(promises);
+
+      // Merge the results back into appEnv
+      results.forEach(({ key, jambonzResourceOptions }) => {
+        if (jambonzResourceOptions) {
+          appEnv[key].jambonzResourceOptions = jambonzResourceOptions;
+        }
+      });
+    }
+
+    return appEnv;
+  };
+
+  useEffect(() => {
+    if (callWebhook && callWebhook.url) {
+      // Clear any existing timeout to prevent multiple requests
+      if (appEnvTimeoutRef.current) {
+        clearTimeout(appEnvTimeoutRef.current);
+        appEnvTimeoutRef.current = null;
+      }
+
+      appEnvTimeoutRef.current = setTimeout(() => {
+        getAppEnvSchema(callWebhook.url)
+          .then(({ json }) => {
+            // fetch app env jambonz_resource
+            fetchAppEnvJambonzResources(json).then((updatedEnv) => {
+              setAppEnv(updatedEnv);
+              const defaultEnvVars = Object.keys(updatedEnv).reduce(
+                (acc, key) => {
+                  const value = updatedEnv[key];
+                  if (value?.default) {
+                    return { ...acc, [key]: value.default };
+                  }
+                  return acc;
+                },
+                {},
+              );
+
+              setEnvVars((prev) => ({
+                ...defaultEnvVars,
+                ...(prev || {}),
+              }));
+            });
+            // Default value
+          })
+          .catch((error) => {
+            setMessage(error.msg);
+          });
+      }, 500);
+    }
+
+    return () => {
+      if (appEnvTimeoutRef.current) {
+        clearTimeout(appEnvTimeoutRef.current);
+        appEnvTimeoutRef.current = null;
+      }
+    };
+  }, [callWebhook]);
+
  return (
    <Section slim>
      <form
@@ -609,7 +741,29 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                      webhook.stateSet({
                        ...webhook.stateVal,
                        url: e.target.value,
+                        ...(e.target.value.startsWith("ws") && {
+                          method: "GET",
+                        }),
                      });
+                      if (
+                        e.target.value.startsWith("ws") &&
+                        webhook.prefix === "call_webhook"
+                      ) {
+                        const statusWebhook = webhooks.find(
+                          (w) => w.prefix === "status_webhook",
+                        );
+                        if (
+                          statusWebhook &&
+                          ((statusWebhook.stateVal?.url || "").length === 0 ||
+                            statusWebhook.stateVal?.url.startsWith("ws"))
+                        ) {
+                          statusWebhook.stateSet({
+                            ...statusWebhook.stateVal,
+                            url: e.target.value,
+                            method: "GET",
+                          });
+                        }
+                      }
                    }}
                  />
                </div>
@@ -625,6 +779,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                        method: e.target.value as WebhookMethod,
                      });
                    }}
+                    disabled={webhook.stateVal?.url.startsWith("ws")}
                    options={WEBHOOK_METHODS}
                  />
                </div>
@@ -676,6 +831,191 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                  }}
                />
              </Checkzone>
+
+              {webhook.webhookEnv &&
+                Object.keys(webhook.webhookEnv).length > 0 && (
+                  <>
+                    {Object.keys(webhook.webhookEnv).map((key) => {
+                      const envType = webhook.webhookEnv![key].type;
+                      const isBoolean = envType === "boolean";
+                      const isNumber = envType === "number";
+                      const defaultValue = webhook.webhookEnv![key].default;
+
+                      return (
+                        <div key={key}>
+                          {isBoolean ? (
+                            // Boolean input as checkbox
+                            <label htmlFor={`env_${key}`} className="chk">
+                              <input
+                                id={`env_${key}`}
+                                type="checkbox"
+                                name={`env_${key}`}
+                                required={webhook.webhookEnv![key].required}
+                                checked={
+                                  envVars && envVars[key] !== undefined
+                                    ? Boolean(envVars[key])
+                                    : Boolean(defaultValue)
+                                }
+                                onChange={(e) => {
+                                  setEnvVars((prev) => ({
+                                    ...(prev || {}),
+                                    [key]: e.target.checked,
+                                  }));
+                                }}
+                              />
+                              <Tooltip
+                                text={webhook.webhookEnv![key].description}
+                              >
+                                {key}
+                                {webhook.webhookEnv![key].required && (
+                                  <span>*</span>
+                                )}
+                              </Tooltip>
+                            </label>
+                          ) : (
+                            // Text or number input
+                            <>
+                              <label htmlFor={`env_${key}`}>
+                                <Tooltip
+                                  text={webhook.webhookEnv![key].description}
+                                >
+                                  {key}
+                                  {webhook.webhookEnv![key].required && (
+                                    <span>*</span>
+                                  )}
+                                </Tooltip>
+                              </label>
+                              {(() => {
+                                // Common props for both input types
+                                const commonProps = {
+                                  id: `env_${key}`,
+                                  name: `env_${key}`,
+                                  required: webhook.webhookEnv![key].required,
+                                  value:
+                                    envVars && envVars[key] !== undefined
+                                      ? String(envVars[key])
+                                      : defaultValue !== undefined
+                                        ? String(defaultValue)
+                                        : "",
+                                  onChange: (
+                                    e: React.ChangeEvent<
+                                      HTMLInputElement | HTMLSelectElement
+                                    >,
+                                  ) => {
+                                    // Convert to proper type based on schema
+                                    let newValue;
+                                    if (isNumber) {
+                                      newValue =
+                                        e.target.value === ""
+                                          ? ""
+                                          : Number(e.target.value);
+                                    } else {
+                                      newValue = e.target.value;
+                                    }
+
+                                    setEnvVars((prev) => ({
+                                      ...(prev || {}),
+                                      [key]: newValue,
+                                    }));
+                                  },
+                                };
+
+                                // Extra props only for regular input
+                                const inputSpecificProps = {
+                                  type: isNumber ? "number" : "text",
+                                };
+
+                                const isDropdown =
+                                  (webhook.webhookEnv![key].type === "string" &&
+                                    (webhook.webhookEnv![key].enum?.length ||
+                                      0) > 0) ||
+                                  hasLength(
+                                    webhook.webhookEnv![key]
+                                      .jambonzResourceOptions,
+                                  );
+
+                                const textAreaSpecificProps = {
+                                  rows: 6,
+                                  cols: 61,
+                                };
+
+                                // Choose component type based on obscure flag
+                                const componentType = webhook.webhookEnv![key]
+                                  .obscure
+                                  ? ObscureInput
+                                  : webhook.webhookEnv![key].uiHint || "input";
+                                if (isDropdown) {
+                                  const options =
+                                    webhook.webhookEnv![key]
+                                      .jambonzResourceOptions ||
+                                    webhook.webhookEnv![key].enum!.map(
+                                      (option) => ({
+                                        name: option,
+                                        value: option,
+                                      }),
+                                    );
+                                  return (
+                                    <Selector
+                                      {...commonProps}
+                                      options={options}
+                                    />
+                                  );
+                                }
+                                if (componentType === "filepicker") {
+                                  return (
+                                    <>
+                                      <FileUpload
+                                        id={`app_env_${key}`}
+                                        name={`app_env_${key}`}
+                                        handleFile={(file) => {
+                                          file
+                                            .text()
+                                            .then((content) => {
+                                              setEnvVars((prev) => ({
+                                                ...(prev || {}),
+                                                [key]: content,
+                                              }));
+                                            })
+                                            .catch((err) => {
+                                              toastError(
+                                                `Failed to read file: ${err.message}`,
+                                              );
+                                            });
+                                        }}
+                                        placeholder="Choose a file"
+                                        required={
+                                          webhook.webhookEnv![key].required &&
+                                          !hasValue(envVars?.[key])
+                                        }
+                                      />
+                                      {React.createElement("textarea", {
+                                        ...commonProps,
+                                        ...inputSpecificProps,
+                                        ...textAreaSpecificProps,
+                                      })}
+                                    </>
+                                  );
+                                }
+                                // Create the component with appropriate props
+                                return React.createElement(
+                                  componentType,
+                                  webhook.webhookEnv![key].obscure
+                                    ? commonProps
+                                    : {
+                                        ...commonProps,
+                                        ...inputSpecificProps,
+                                        ...(webhook.webhookEnv![key].uiHint ===
+                                          "textarea" && textAreaSpecificProps),
+                                      },
+                                );
+                              })()}
+                            </>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </>
+                )}
            </fieldset>
          );
        })}
@@ -683,16 +1023,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          serviceProviderSid={
            currentServiceProvider?.service_provider_sid || ""
          }
+          application_speech_synthesis_voice={
+            application?.data?.speech_synthesis_voice
+          }
          accountSid={accountSid}
          credentials={credentials}
-          synthesis={synthesis}
          ttsVendor={[synthVendor, setSynthVendor]}
          ttsVendorOptions={ttsVendorOptions}
          ttsVoice={[synthVoice, setSynthVoice]}
          ttsLang={[synthLang, setSynthLang]}
          ttsLabelOptions={ttsLabelOptions}
          ttsLabel={[synthLabel, setSynthLabel]}
-          recognizers={recognizers}
          sttVendor={[recogVendor, setRecogVendor]}
          sttVendorOptions={sttVendorOptions}
          sttLang={[recogLang, setRecogLang]}
@@ -715,8 +1056,10 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                currentServiceProvider?.service_provider_sid || ""
              }
              accountSid={accountSid}
+              application_speech_synthesis_voice={
+                application?.data?.fallback_speech_synthesis_voice
+              }
              credentials={credentials}
-              synthesis={synthesis}
              ttsVendor={[
                fallbackSpeechSynthsisVendor,
                setFallbackSpeechSynthsisVendor,
@@ -735,7 +1078,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                fallbackSpeechSynthsisLabel,
                setFallbackSpeechSynthsisLabel,
              ]}
-              recognizers={recognizers}
              sttVendor={[
                fallbackSpeechRecognizerVendor,
                setFallbackSpeechRecognizerVendor,
--- a/src/containers/internal/views/applications/index.tsx
+++ b/src/containers/internal/views/applications/index.tsx
@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from "react";
-import { H1, M, Button, Icon } from "@jambonz/ui-kit";
+import React, { useEffect, useState, useRef } from "react";
+import { H1, M, Button, Icon, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

-import { deleteApplication, useServiceProviderData, useApiData } from "src/api";
+import {
+  deleteApplication,
+  useServiceProviderData,
+  getApplications,
+} from "src/api";
 import {
  ROUTE_INTERNAL_APPLICATIONS,
  ROUTE_INTERNAL_ACCOUNTS,
@@ -13,53 +17,88 @@ import {
  Spinner,
  AccountFilter,
  SearchFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import { DeleteApplication } from "./delete";
-import { toastError, toastSuccess, useSelectState } from "src/store";
-import {
-  isUserAccountScope,
-  hasLength,
-  hasValue,
-  useFilteredResults,
-} from "src/utils";
+import { useSelectState } from "src/store";
+import { isUserAccountScope, hasLength, hasValue } from "src/utils";

 import type { Application, Account } from "src/api/types";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
-import { USER_ACCOUNT } from "src/api/constants";
+import { PER_PAGE_SELECTION, USER_ACCOUNT } from "src/api/constants";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 export const Applications = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [accountSid, setAccountSid] = useState("");
  const [application, setApplication] = useState<Application | null>(null);
-  const [apiUrl, setApiUrl] = useState("");
-  const [applications, refetch] = useApiData<Application[]>(apiUrl);
+  const [applications, setApplications] = useState<Application[] | null>(null);
  const [filter, setFilter] = useState("");

-  const filteredApplications = useFilteredResults<Application>(
-    filter,
-    applications
-  );
+  const [applicationsTotal, setApplicationsTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);
+
+  // Track previous values to detect changes
+  const prevValuesRef = useRef({
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });
+
+  const fetchApplications = (resetPage = false) => {
+    // Don't fetch if no account is selected
+    if (!accountSid) return;
+
+    setApplications(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
+    }
+
+    getApplications(accountSid, {
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(filter && { name: filter }),
+    })
+      .then(({ json }) => {
+        setApplications(json.data);
+        setApplicationsTotal(json.total);
+        setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+      })
+      .catch((error) => {
+        setApplications([]);
+        toastError(error.msg);
+      });
+  };

  const handleDelete = () => {
    if (application) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to make changes to this Application"
+          "You do not have permissions to make changes to this Application",
        );
        return;
      }
      deleteApplication(application.application_sid)
        .then(() => {
-          // getApplications();
-          refetch();
+          fetchApplications(false);
          setApplication(null);
          toastSuccess(
            <>
              Deleted application <strong>{application.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -68,18 +107,44 @@ export const Applications = () => {
    }
  };

+  // Set initial account
  useEffect(() => {
-    setLocation();
    if (user?.account_sid && user.scope === USER_ACCOUNT) {
      setAccountSid(user?.account_sid);
    } else {
-      setAccountSid(getAccountFilter() || accountSid);
+      setAccountSid(
+        getAccountFilter() || accountSid || accounts?.[0]?.account_sid || "",
+      );
    }
+    setLocation();
+  }, [user, accounts]);

-    if (accountSid) {
-      setApiUrl(`Accounts/${accountSid}/Applications`);
-    }
-  }, [accountSid, user]);
+  // This single effect handles all data fetching triggers
+  useEffect(() => {
+    const accSid = accountSid || getAccountFilter() || "";
+
+    if (!accSid) return;
+
+    // Determine if the change requires a page reset
+    const prevValues = prevValuesRef.current;
+    const isFilterChange =
+      prevValues.accountSid !== accountSid || prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== ""; // Skip initial render
+
+    // Update ref with current values for next comparison
+    prevValuesRef.current = {
+      accountSid: accSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with page reset if needed
+    fetchApplications(isFilterChange || isPageSizeChange);
+  }, [accountSid, filter, pageNumber, perPageFilter]);

  return (
    <>
@@ -100,6 +165,7 @@ export const Applications = () => {
        <SearchFilter
          placeholder="Filter applications"
          filter={[filter, setFilter]}
+          delay={1000}
        />
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
@@ -108,64 +174,67 @@ export const Applications = () => {
          />
        </ScopedAccess>
      </section>
-      <Section {...(hasLength(filteredApplications) && { slim: true })}>
+      <Section {...(hasLength(applications) && { slim: true })}>
        <div className="list">
          {!hasValue(applications) && hasLength(accounts) ? (
            <Spinner />
-          ) : hasLength(filteredApplications) ? (
-            filteredApplications.map((application) => {
-              return (
-                <div className="item" key={application.application_sid}>
-                  <div className="item__info">
-                    <div className="item__title">
-                      <Link
-                        to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
-                        title="Edit application"
-                        className="i"
-                      >
-                        <strong>{application.name}</strong>
-                        <Icons.ArrowRight />
-                      </Link>
-                    </div>
-                    <div className="item__meta">
-                      <div>
-                        <div
-                          className={`i txt--${
-                            application.account_sid ? "teal" : "grey"
-                          }`}
+          ) : hasLength(applications) ? (
+            applications
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((application) => {
+                return (
+                  <div className="item" key={application.application_sid}>
+                    <div className="item__info">
+                      <div className="item__title">
+                        <Link
+                          to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
+                          title="Edit application"
+                          className="i"
                        >
-                          <Icons.Activity />
-                          <span>
-                            {
-                              accounts?.find(
-                                (acct) =>
-                                  acct.account_sid === application.account_sid
-                              )?.name
-                            }
-                          </span>
+                          <strong>{application.name}</strong>
+                          <Icons.ArrowRight />
+                        </Link>
+                      </div>
+                      <div className="item__meta">
+                        <div>
+                          <div
+                            className={`i txt--${
+                              application.account_sid ? "teal" : "grey"
+                            }`}
+                          >
+                            <Icons.Activity />
+                            <span>
+                              {
+                                accounts?.find(
+                                  (acct) =>
+                                    acct.account_sid ===
+                                    application.account_sid,
+                                )?.name
+                              }
+                            </span>
+                          </div>
                        </div>
                      </div>
                    </div>
+                    <div className="item__actions">
+                      <Link
+                        to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
+                        title="Edit application"
+                      >
+                        <Icons.Edit3 />
+                      </Link>
+                      <button
+                        type="button"
+                        title="Delete application"
+                        onClick={() => setApplication(application)}
+                        className="btnty"
+                      >
+                        <Icons.Trash />
+                      </button>
+                    </div>
                  </div>
-                  <div className="item__actions">
-                    <Link
-                      to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
-                      title="Edit application"
-                    >
-                      <Icons.Edit3 />
-                    </Link>
-                    <button
-                      type="button"
-                      title="Delete application"
-                      onClick={() => setApplication(application)}
-                      className="btnty"
-                    >
-                      <Icons.Trash />
-                    </button>
-                  </div>
-                </div>
-              );
-            })
+                );
+              })
          ) : accountSid ? (
            <M>No applications.</M>
          ) : (
@@ -186,6 +255,26 @@ export const Applications = () => {
          </Button>
        </Section>
      )}
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {applicationsTotal} record
+            {applicationsTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(applications) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
      {application && (
        <DeleteApplication
          application={application}
--- a/src/containers/internal/views/applications/speech-selection.tsx
+++ b/src/containers/internal/views/applications/speech-selection.tsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import {
  getGoogleCustomVoices,
-  postSpeechServiceLanguages,
-  postSpeechServiceVoices,
+  getSpeechSupportedLanguagesAndVoices,
 } from "src/api";
-import { SpeechCredential } from "src/api/types";
+import { USER_ADMIN } from "src/api/constants";
+import {
+  SpeechCredential,
+  SpeechSupportedLanguagesAndVoices,
+} from "src/api/types";
 import { Selector } from "src/components/forms";
 import { SelectorOption } from "src/components/forms/selector";
+import { useToast } from "src/components/toast/toast-provider";
 import { useSelectState } from "src/store";
 import { hasLength } from "src/utils";
 import {
@@ -25,34 +29,40 @@ import {
  VENDOR_SONIOX,
  VENDOR_WELLSAID,
  VENDOR_WHISPER,
+  VENDOR_SPEECHMATICS,
+  VENDOR_PLAYHT,
+  VENDOR_CARTESIA,
+  VENDOR_VOXIST,
+  VENDOR_RIMELABS,
+  VENDOR_OPENAI,
+  VENDOR_INWORLD,
+  VENDOR_DEEPGRAM_FLUX,
+  VENDOR_RESEMBLE,
+  VENDOR_HOUNDIFY,
 } from "src/vendor";
 import {
  LabelOptions,
-  Language,
  RecognizerVendors,
  SynthesisVendors,
  VendorOptions,
-  Voice,
-  VoiceLanguage,
 } from "src/vendor/types";
 type SpeechProviderSelectionProbs = {
  accountSid: string;
  serviceProviderSid: string;
+  application_speech_synthesis_voice: string | null | undefined;
  credentials: SpeechCredential[] | undefined;
-  synthesis: SynthesisVendors | undefined;
  ttsVendor: [
    keyof SynthesisVendors,
-    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>
+    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>,
  ];
  ttsVendorOptions: VendorOptions[];
  ttsVoice: [string, React.Dispatch<React.SetStateAction<string>>];
  ttsLang: [string, React.Dispatch<React.SetStateAction<string>>];
  ttsLabelOptions: LabelOptions[];
  ttsLabel: [string, React.Dispatch<React.SetStateAction<string>>];
-  recognizers: RecognizerVendors | undefined;
  sttVendor: [
    keyof RecognizerVendors,
-    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>
+    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>,
  ];
  sttVendorOptions: VendorOptions[];
  sttLang: [string, React.Dispatch<React.SetStateAction<string>>];
@@ -63,21 +73,26 @@ type SpeechProviderSelectionProbs = {
 export const SpeechProviderSelection = ({
  accountSid,
  serviceProviderSid,
+  application_speech_synthesis_voice,
  credentials,
-  synthesis,
  ttsVendor: [synthVendor, setSynthVendor],
  ttsVendorOptions,
  ttsVoice: [synthVoice, setSynthVoice],
  ttsLang: [synthLang, setSynthLang],
  ttsLabelOptions,
  ttsLabel: [synthLabel, setSynthLabel],
-  recognizers,
  sttVendor: [recogVendor, setRecogVendor],
  sttVendorOptions,
  sttLang: [recogLang, setRecogLang],
  sttLabelOptions,
  sttLabel: [recogLabel, setRecogLabel],
 }: SpeechProviderSelectionProbs) => {
+  const { toastError } = useToast();
+  const user = useSelectState("user");
+  const [
+    synthesisSupportedLanguagesAndVoices,
+    setSynthesisSupportedLanguagesAndVoices,
+  ] = useState<SpeechSupportedLanguagesAndVoices | null>();
  const [selectedCredential, setSelectedCredential] = useState<
    SpeechCredential | undefined
  >();
@@ -87,381 +102,554 @@ export const SpeechProviderSelection = ({
  const [synthesisLanguageOptions, setSynthesisLanguageOptions] = useState<
    SelectorOption[]
  >([]);
+  const [synthesisModelOptions, setSynthesisModelOptions] = useState<
+    SelectorOption[]
+  >([]);
+  const [
+    synthesisGoogleCustomVoiceOptions,
+    setSynthesisGoogleCustomVoiceOptions,
+  ] = useState<SelectorOption[]>([]);
+  const [recogLanguageOptions, setRecogLanguageOptions] = useState<
+    SelectorOption[]
+  >([]);

-  const currentServiceProvider = useSelectState("currentServiceProvider");
-
-  const currentVendor = useRef(synthVendor);
+  const currentTtsVendor = useRef(synthVendor);
+  const currentSttVendor = useRef(recogVendor);
+  const shouldUpdateTtsVoice = useRef(false);
+  const shouldUpdateSttLanguage = useRef(false);
+  const ttsEffectTimer = useRef<number | null>(null);
+  const sttEffectTimer = useRef<number | null>(null);

+  // Get Synthesis languages and voices
  useEffect(() => {
-    currentVendor.current = synthVendor;
-    if (!synthesis) {
+    if (
+      !user ||
+      !synthVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
+    ) {
      return;
    }
-    const voiceOpts = synthesis[synthVendor as keyof SynthesisVendors]
-      .filter((lang: VoiceLanguage) => {
-        // ELEVENLABS has same voice for all lange, take voices from the 1st language
-        // Only first language has voices, the rest has empty voices
-        if (synthVendor === VENDOR_ELEVENLABS && lang.voices.length > 0) {
-          return true;
-        }
-        return lang.code === synthLang;
-      })
-      .flatMap((lang: VoiceLanguage) =>
-        lang.voices.map((voice: Voice) => ({
-          name: voice.name,
-          value: voice.value,
-        }))
-      ) as Voice[];
-    setSynthesisVoiceOptions(voiceOpts);
+    currentTtsVendor.current = synthVendor;
+    /** When Custom Vendor is used, user you have to input the lange and voice. */
+    if (synthVendor.toString().startsWith(VENDOR_CUSTOM)) {
+      setSynthVoice("");
+      return;
+    }
+    // just execute last change
+    if (ttsEffectTimer.current) {
+      clearTimeout(ttsEffectTimer.current);
+    }

-    const langOpts = synthesis[synthVendor as keyof SynthesisVendors].map(
-      (lang: VoiceLanguage) => ({
-        name: lang.name,
-        value: lang.code,
-      })
-    );
-    setSynthesisLanguageOptions(langOpts);
+    ttsEffectTimer.current = setTimeout(() => {
+      configSynthesis();
+    }, 200);
+  }, [
+    synthVendor,
+    synthLabel,
+    serviceProviderSid,
+    application_speech_synthesis_voice,
+  ]);

-    if (synthVendor === VENDOR_ELEVENLABS) {
-      postSpeechServiceVoices(
-        currentServiceProvider
-          ? currentServiceProvider.service_provider_sid
-          : "",
-        {
-          vendor: synthVendor,
-          label: synthLabel,
+  // Get Recognizer languages and voices
+  useEffect(() => {
+    /** When Custom Vendor is used, user you have to input the lange and voice. */
+    if (recogVendor.toString().startsWith(VENDOR_CUSTOM)) {
+      setRecogLang(LANG_EN_US);
+      return;
+    }
+    if (
+      !user ||
+      !recogVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
+    ) {
+      return;
+    }
+    currentSttVendor.current = recogVendor;
+    // just execute last change
+    if (sttEffectTimer.current) {
+      clearTimeout(sttEffectTimer.current);
+    }
+
+    sttEffectTimer.current = setTimeout(() => {
+      configRecognizer();
+    }, 200);
+  }, [recogVendor, recogLabel, serviceProviderSid]);
+
+  useEffect(() => {
+    if (credentials) {
+      setSelectedCredential(
+        credentials.find(
+          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel,
+        ),
+      );
+    }
+  }, [synthVendor, synthLabel, credentials]);
+
+  useEffect(() => {
+    if (!synthLabel && ttsLabelOptions?.length > 0) {
+      setSynthLabel(ttsLabelOptions[0].value);
+    }
+    if (!recogLabel && sttLabelOptions?.length > 0) {
+      setRecogLabel(sttLabelOptions[0].value);
+    }
+  }, [ttsLabelOptions, sttLabelOptions]);
+
+  useEffect(() => {
+    if (synthesisSupportedLanguagesAndVoices) {
+      // Extract Voice
+      const voicesOpts =
+        synthesisSupportedLanguagesAndVoices.tts?.find((lang) => {
+          if (synthVendor === VENDOR_ELEVENLABS && lang.voices.length > 0) {
+            return true;
+          }
+          return lang.value === synthLang;
+        })?.voices || [];
+
+      if (synthVendor === VENDOR_GOOGLE && synthesisGoogleCustomVoiceOptions) {
+        if (synthesisGoogleCustomVoiceOptions) {
+          setSynthesisVoiceOptions([
+            ...synthesisGoogleCustomVoiceOptions,
+            ...voicesOpts,
+          ]);
+        } else {
+          setSynthesisVoiceOptions(voicesOpts);
        }
-      ).then(({ json }) => {
-        // If after successfully fetching data, vendor is still good, then apply value
-        if (currentVendor.current !== VENDOR_ELEVENLABS) {
+        if (synthesisGoogleCustomVoiceOptions.length > 0) {
+          updateTtsVoice(synthLang, synthesisGoogleCustomVoiceOptions[0].value);
+        }
+      }
+      // PlayHT3.0 all voices are listed under english language, all voices can be used for multiple languages
+      else if (
+        synthVendor === VENDOR_PLAYHT &&
+        synthesisSupportedLanguagesAndVoices.tts.some(
+          (l) => l.value === "english",
+        )
+      ) {
+        setSynthesisVoiceOptions(
+          synthesisSupportedLanguagesAndVoices.tts.find(
+            (tts) => tts.value === "english",
+          )!.voices,
+        );
+      } else {
+        setSynthesisVoiceOptions(voicesOpts);
+      }
+    }
+  }, [
+    synthLang,
+    synthesisSupportedLanguagesAndVoices,
+    synthesisGoogleCustomVoiceOptions,
+  ]);
+
+  const configSynthesis = () => {
+    getSpeechSupportedLanguagesAndVoices(
+      serviceProviderSid,
+      synthVendor,
+      synthLabel,
+    )
+      .then(({ json }) => {
+        // while fetching data, user might change the vendor
+        if (currentTtsVendor.current !== synthVendor) {
          return;
        }
-        if (json.length > 0) {
-          setSynthesisVoiceOptions(json);
+        setSynthesisSupportedLanguagesAndVoices(json);
+        // Extract model
+        if (json.models && json.models.length) {
+          setSynthesisModelOptions(json.models);
+          if (
+            synthVendor === VENDOR_DEEPGRAM &&
+            (!application_speech_synthesis_voice ||
+              !json.models.some(
+                (m) => m.value === application_speech_synthesis_voice,
+              ))
+          ) {
+            setSynthVoice(json.models[0].value);
+          }
        }
+
+        if (json.tts && json.tts.length) {
+          // Extract Language
+          const langOpts = json.tts.map((lang) => ({
+            name: lang.name,
+            value: lang.value,
+          }));
+          setSynthesisLanguageOptions(langOpts);
+
+          // Default setting
+          const googleLang = json.tts.find((lang) => lang.value === synthLang);
+          if (
+            synthVendor === VENDOR_GOOGLE &&
+            (!googleLang ||
+              !googleLang.voices.find((v) => v.value === synthVoice))
+          ) {
+            updateTtsVoice(LANG_EN_US, LANG_EN_US_STANDARD_C);
+            return;
+          }
+          if (synthVendor === VENDOR_ELEVENLABS) {
+            // Samve Voices applied to all languages
+            // Voices are only available for the 1st language.
+            updateTtsVoice(ELEVENLABS_LANG_EN, json.tts[0].voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_WHISPER) {
+            const newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
+            updateTtsVoice(LANG_EN_US, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_PLAYHT) {
+            const newLang = json.tts.find(
+              (lang) => lang.value === LANG_EN_US || lang.value === "english",
+            );
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_CARTESIA) {
+            const newLang = json.tts.find((lang) => lang.value === "en");
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_RIMELABS) {
+            let newLang = json.tts.find((lang) => lang.value === "eng");
+            // If the new language doesn't map then default to the first one
+            if (!newLang) {
+              newLang = json.tts[0];
+            }
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_INWORLD) {
+            let newLang = json.tts.find((lang) => lang.value === "en");
+            // If the new language doesn't map then default to the first one
+            if (!newLang) {
+              newLang = json.tts[0];
+            }
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          /** Google and AWS have different language lists */
+          /** If the new language doesn't map then default to "en-US" */
+          let newLang = json.tts.find((lang) => lang.value === synthLang);
+
+          if (newLang) {
+            updateTtsVoice(synthLang, newLang.voices[0].value);
+            return;
+          }
+
+          newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
+
+          updateTtsVoice(LANG_EN_US, newLang!.voices[0].value);
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg);
      });

-      postSpeechServiceLanguages(
-        currentServiceProvider
-          ? currentServiceProvider.service_provider_sid
-          : "",
-        {
-          vendor: synthVendor,
-          label: synthLabel,
-        }
-      ).then(({ json }) => {
-        if (json.length > 0) {
-          setSynthesisLanguageOptions(json);
-        }
-      });
-    } else if (synthVendor === VENDOR_GOOGLE) {
+    if (synthVendor === VENDOR_GOOGLE) {
      getGoogleCustomVoices({
        ...(synthLabel && { label: synthLabel }),
        account_sid: accountSid,
        service_provider_sid: serviceProviderSid,
      }).then(({ json }) => {
        // If after successfully fetching data, vendor is still good, then apply value
-        if (currentVendor.current !== VENDOR_GOOGLE) {
+        if (currentTtsVendor.current !== VENDOR_GOOGLE) {
          return;
        }
        const customVOices = json.map((v) => ({
          name: `${v.name} (Custom)`,
          value: `custom_${v.google_custom_voice_sid}`,
        }));
-        const options = synthesis[synthVendor as keyof SynthesisVendors]
-          .filter((lang: VoiceLanguage) => {
-            return lang.code === synthLang;
-          })
-          .flatMap((lang: VoiceLanguage) =>
-            lang.voices.map((voice: Voice) => ({
-              name: voice.name,
-              value: voice.value,
-            }))
-          ) as Voice[];
-        setSynthesisVoiceOptions([...customVOices, ...options]);
-        if (customVOices.length > 0) {
-          setSynthVoice(customVOices[0].value);
-        }
+        setSynthesisGoogleCustomVoiceOptions(customVOices);
      });
    }
-  }, [synthVendor, synthesis, synthLabel, accountSid, serviceProviderSid]);
+  };

-  useEffect(() => {
-    if (credentials) {
-      setSelectedCredential(
-        credentials.find(
-          (c) => c.vendor === synthVendor && c.label === synthLabel
-        )
-      );
+  const updateTtsVoice = (language: string, voice: string) => {
+    if (shouldUpdateTtsVoice.current) {
+      setSynthLang(language);
+      setSynthVoice(voice);
+      shouldUpdateTtsVoice.current = false;
    }
-  }, [synthVendor, synthLabel, credentials]);
+  };
+
+  const configRecognizer = () => {
+    if (recogVendor === VENDOR_DEEPGRAM_FLUX) {
+      return;
+    }
+    getSpeechSupportedLanguagesAndVoices(
+      serviceProviderSid,
+      recogVendor,
+      recogLabel,
+    )
+      .then(({ json }) => {
+        // while fetching data, the user might change the vendor
+        if (currentSttVendor.current !== recogVendor) {
+          return;
+        }
+        // Extract Language
+        const langOpts = json.stt.map((lang) => ({
+          name: lang.name,
+          value: lang.value,
+        }));
+        setRecogLanguageOptions(langOpts);
+
+        /**When vendor is custom, Language is input by user */
+        if (
+          recogVendor.toString() === VENDOR_CUSTOM ||
+          !shouldUpdateSttLanguage.current
+        )
+          return;
+        shouldUpdateSttLanguage.current = false;
+        /** Google and AWS have different language lists */
+        /** If the new language doesn't map then default to "en-US" */
+        const newLang = json.stt.find((lang) => lang.value === recogLang);
+
+        if (
+          (recogVendor === VENDOR_GOOGLE || recogVendor === VENDOR_AWS) &&
+          !newLang
+        ) {
+          setRecogLang(LANG_EN_US);
+        } else if (recogVendor === VENDOR_COBALT && !newLang) {
+          setRecogLang(LANG_COBALT_EN_US);
+        } else if (langOpts.length && !newLang) {
+          setRecogLang(langOpts[0].value);
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+
  return (
    <>
-      {synthesis && (
-        <fieldset>
-          <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
-          <Selector
-            id="synthesis_vendor"
-            name="synthesis_vendor"
-            value={synthVendor}
-            options={ttsVendorOptions.filter(
-              (vendor) =>
-                vendor.value != VENDOR_DEEPGRAM &&
-                vendor.value != VENDOR_ASSEMBLYAI &&
-                vendor.value != VENDOR_SONIOX &&
-                vendor.value !== VENDOR_CUSTOM &&
-                vendor.value !== VENDOR_COBALT
-            )}
-            onChange={(e) => {
-              const vendor = e.target.value as keyof SynthesisVendors;
-              setSynthVendor(vendor);
-              setSynthLabel("");
-
-              /** When Custom Vendor is used, user you have to input the lange and voice. */
-              if (vendor.toString().startsWith(VENDOR_CUSTOM)) {
-                setSynthVoice("");
-                return;
-              }
-
-              /** When using Google and en-US, ensure "Standard-C" is used as default */
-              if (
-                e.target.value === VENDOR_GOOGLE &&
-                synthLang === LANG_EN_US
-              ) {
-                setSynthVoice(LANG_EN_US_STANDARD_C);
-                return;
-              }
-
-              if (vendor === VENDOR_ELEVENLABS) {
-                // Samve Voices applied to all languages
-                // Voices are only available for the 1st language.
-                setSynthLang(ELEVENLABS_LANG_EN);
-                setSynthVoice(synthesis[vendor][0].voices[0].value);
-                return;
-              }
-
-              if (vendor === VENDOR_WHISPER) {
-                const newLang = synthesis[vendor].find(
-                  (lang) => lang.code === LANG_EN_US
-                );
-                setSynthLang(LANG_EN_US);
-                setSynthVoice(newLang!.voices[0].value);
-                return;
-              }
-
-              /** Google and AWS have different language lists */
-              /** If the new language doesn't map then default to "en-US" */
-              let newLang = synthesis[vendor].find(
-                (lang) => lang.code === synthLang
-              );
-
-              if (newLang) {
-                setSynthVoice(newLang.voices[0].value);
-                return;
-              }
-
-              newLang = synthesis[vendor].find(
-                (lang) => lang.code === LANG_EN_US
-              );
-
-              setSynthLang(LANG_EN_US);
-              setSynthVoice(newLang!.voices[0].value);
-            }}
-          />
-          {hasLength(ttsLabelOptions) && ttsLabelOptions.length > 1 && (
-            <>
-              <label htmlFor="synthesis_label">Label</label>
-              <Selector
-                id="systhesis_label"
-                name="systhesis_label"
-                value={synthLabel}
-                options={ttsLabelOptions}
-                onChange={(e) => {
-                  setSynthLabel(e.target.value);
-                }}
-              />
-            </>
+      <fieldset>
+        <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
+        <Selector
+          id="synthesis_vendor"
+          name="synthesis_vendor"
+          value={synthVendor}
+          options={ttsVendorOptions.filter(
+            (vendor) =>
+              vendor.value !== VENDOR_ASSEMBLYAI &&
+              vendor.value !== VENDOR_VOXIST &&
+              vendor.value !== VENDOR_SONIOX &&
+              vendor.value !== VENDOR_SPEECHMATICS &&
+              vendor.value !== VENDOR_CUSTOM &&
+              vendor.value !== VENDOR_OPENAI &&
+              vendor.value !== VENDOR_DEEPGRAM_FLUX &&
+              vendor.value !== VENDOR_HOUNDIFY &&
+              vendor.value !== VENDOR_COBALT,
          )}
-          {synthVendor &&
-            !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
-            synthLang && (
-              <>
-                <label htmlFor="synthesis_lang">Language</label>
-                <Selector
-                  id="synthesis_lang"
-                  name="synthesis_lang"
-                  value={synthLang}
-                  options={synthesisLanguageOptions}
-                  onChange={(e) => {
-                    const language = e.target.value;
-                    setSynthLang(language);
-
-                    /** When using Google and en-US, ensure "Standard-C" is used as default */
-                    if (
-                      synthVendor === VENDOR_GOOGLE &&
-                      language === LANG_EN_US
-                    ) {
-                      setSynthVoice(LANG_EN_US_STANDARD_C);
-                      return;
-                    }
-
-                    const newLang = synthesis[
-                      synthVendor as keyof SynthesisVendors
-                    ].find((lang) => lang.code === language);
-
-                    setSynthVoice(newLang!.voices[0].value);
-                  }}
-                />
-                <label htmlFor="synthesis_voice">Voice</label>
-                {synthVendor === VENDOR_MICROSOFT &&
-                selectedCredential &&
-                selectedCredential.use_custom_tts ? (
-                  <input
-                    id="custom_microsoft_synthesis_voice"
-                    type="text"
-                    name="custom_microsoft_synthesis_voice"
-                    placeholder="Required"
-                    required
-                    value={synthVoice}
-                    onChange={(e) => {
-                      setSynthVoice(e.target.value);
-                    }}
-                  />
-                ) : (
-                  <Selector
-                    id="synthesis_voice"
-                    name="synthesis_voice"
-                    value={synthVoice}
-                    options={synthesisVoiceOptions}
-                    onChange={(e) => setSynthVoice(e.target.value)}
-                  />
-                )}
-              </>
-            )}
-          {synthVendor.toString().startsWith(VENDOR_CUSTOM) && (
+          onChange={(e) => {
+            const vendor = e.target.value as keyof SynthesisVendors;
+            shouldUpdateTtsVoice.current = true;
+            setSynthVendor(vendor);
+            setSynthLabel("");
+            setSynthesisLanguageOptions([]);
+            setSynthesisVoiceOptions([]);
+          }}
+        />
+        {hasLength(ttsLabelOptions) && (
+          <>
+            <label htmlFor="synthesis_label">Label</label>
+            <Selector
+              id="systhesis_label"
+              name="systhesis_label"
+              value={synthLabel}
+              options={ttsLabelOptions}
+              onChange={(e) => {
+                shouldUpdateTtsVoice.current = true;
+                setSynthLabel(e.target.value);
+              }}
+            />
+          </>
+        )}
+        {synthesisModelOptions && synthVendor === VENDOR_DEEPGRAM && (
+          <>
+            <label htmlFor="synthesis_lang">Model</label>
+            <Selector
+              id="synthesis_voice"
+              name="synthesis_voice"
+              value={synthVoice}
+              options={synthesisModelOptions}
+              onChange={(e) => setSynthVoice(e.target.value)}
+            />
+          </>
+        )}
+        {synthVendor &&
+          !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
+          synthVendor !== VENDOR_DEEPGRAM &&
+          synthLang && (
            <>
-              <label htmlFor="custom_vendor_synthesis_lang">Language</label>
-              <input
-                id="custom_vendor_synthesis_lang"
-                type="text"
-                name="custom_vendor_synthesis_lang"
-                placeholder="Required"
-                required
+              <label htmlFor="synthesis_lang">Language</label>
+              <Selector
+                id="synthesis_lang"
+                name="synthesis_lang"
                value={synthLang}
+                options={synthesisLanguageOptions.sort((a, b) =>
+                  a.name.localeCompare(b.name),
+                )}
                onChange={(e) => {
-                  setSynthLang(e.target.value);
+                  shouldUpdateTtsVoice.current = true;
+                  const language = e.target.value;
+                  setSynthLang(language);
+
+                  /** When using Google and en-US, ensure "Standard-C" is used as default */
+                  if (
+                    synthVendor === VENDOR_GOOGLE &&
+                    language === LANG_EN_US
+                  ) {
+                    setSynthVoice(LANG_EN_US_STANDARD_C);
+                    return;
+                  }
+
+                  const voices =
+                    synthesisSupportedLanguagesAndVoices?.tts.find(
+                      (lang) => lang.value === language,
+                    )?.voices || [];
+                  if (
+                    synthVendor === VENDOR_GOOGLE &&
+                    synthesisGoogleCustomVoiceOptions &&
+                    synthesisGoogleCustomVoiceOptions.length
+                  ) {
+                    setSynthesisVoiceOptions([
+                      ...synthesisGoogleCustomVoiceOptions,
+                      ...voices,
+                    ]);
+                  } else {
+                    setSynthesisVoiceOptions(voices);
+                  }
+
+                  setSynthVoice(voices[0].value);
                }}
              />
-
-              <label htmlFor="custom_vendor_synthesis_voice">Voice</label>
-              <input
-                id="custom_vendor_synthesis_voice"
-                type="text"
-                name="custom_vendor_synthesis_voice"
-                placeholder="Required"
-                required
-                value={synthVoice}
-                onChange={(e) => {
-                  setSynthVoice(e.target.value);
-                }}
-              />
-            </>
-          )}
-        </fieldset>
-      )}
-      {recognizers && (
-        <fieldset>
-          <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
-          <Selector
-            id="recognizer_vendor"
-            name="recognizer_vendor"
-            value={recogVendor}
-            options={sttVendorOptions.filter(
-              (vendor) =>
-                vendor.value != VENDOR_WELLSAID &&
-                vendor.value != VENDOR_ELEVENLABS &&
-                vendor.value != VENDOR_WHISPER &&
-                vendor.value !== VENDOR_CUSTOM
-            )}
-            onChange={(e) => {
-              const vendor = e.target.value as keyof RecognizerVendors;
-              setRecogVendor(vendor);
-              setRecogLabel("");
-
-              /**When vendor is custom, Language is input by user */
-              if (vendor.toString() === VENDOR_CUSTOM) return;
-
-              /** Google and AWS have different language lists */
-              /** If the new language doesn't map then default to "en-US" */
-              const newLang = recognizers[vendor].find(
-                (lang: Language) => lang.code === recogLang
-              );
-
-              if (
-                (vendor === VENDOR_GOOGLE || vendor === VENDOR_AWS) &&
-                !newLang
-              ) {
-                setRecogLang(LANG_EN_US);
-              }
-              // Default colbalt language
-              if (vendor === VENDOR_COBALT) {
-                setRecogLang(LANG_COBALT_EN_US);
-              }
-            }}
-          />
-          {hasLength(sttLabelOptions) && sttLabelOptions.length > 1 && (
-            <>
-              <label htmlFor="recog_label">Label</label>
-              <Selector
-                id="recog_label"
-                name="recog_label"
-                value={recogLabel}
-                options={sttLabelOptions}
-                onChange={(e) => {
-                  setRecogLabel(e.target.value);
-                }}
-              />
-            </>
-          )}
-          {recogVendor &&
-            !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
-            recogLang && (
-              <>
-                <label htmlFor="recognizer_lang">Language</label>
-                <Selector
-                  id="recognizer_lang"
-                  name="recognizer_lang"
-                  value={recogLang}
-                  options={recognizers[
-                    recogVendor as keyof RecognizerVendors
-                  ].map((lang: Language) => ({
-                    name: lang.name,
-                    value: lang.code,
-                  }))}
+              <label htmlFor="synthesis_voice">Voice</label>
+              {synthVendor === VENDOR_MICROSOFT &&
+              selectedCredential &&
+              selectedCredential.use_custom_tts ? (
+                <input
+                  id="custom_microsoft_synthesis_voice"
+                  type="text"
+                  name="custom_microsoft_synthesis_voice"
+                  placeholder="Required"
+                  required
+                  value={synthVoice}
                  onChange={(e) => {
-                    setRecogLang(e.target.value);
+                    setSynthVoice(e.target.value);
                  }}
                />
-              </>
-            )}
-          {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
+              ) : (
+                <Selector
+                  id="synthesis_voice"
+                  name="synthesis_voice"
+                  value={synthVoice}
+                  options={synthesisVoiceOptions.sort((a, b) =>
+                    a.name.localeCompare(b.name),
+                  )}
+                  onChange={(e) => setSynthVoice(e.target.value)}
+                />
+              )}
+            </>
+          )}
+        {synthVendor.toString().startsWith(VENDOR_CUSTOM) && (
+          <>
+            <label htmlFor="custom_vendor_synthesis_lang">Language</label>
+            <input
+              id="custom_vendor_synthesis_lang"
+              type="text"
+              name="custom_vendor_synthesis_lang"
+              placeholder="Required"
+              required
+              value={synthLang}
+              onChange={(e) => {
+                setSynthLang(e.target.value);
+              }}
+            />
+
+            <label htmlFor="custom_vendor_synthesis_voice">Voice</label>
+            <input
+              id="custom_vendor_synthesis_voice"
+              type="text"
+              name="custom_vendor_synthesis_voice"
+              placeholder="Required"
+              required
+              value={synthVoice}
+              onChange={(e) => {
+                setSynthVoice(e.target.value);
+              }}
+            />
+          </>
+        )}
+      </fieldset>
+      <fieldset>
+        <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
+        <Selector
+          id="recognizer_vendor"
+          name="recognizer_vendor"
+          value={recogVendor}
+          options={sttVendorOptions.filter(
+            (vendor) =>
+              vendor.value != VENDOR_WELLSAID &&
+              vendor.value != VENDOR_ELEVENLABS &&
+              vendor.value != VENDOR_WHISPER &&
+              vendor.value !== VENDOR_RESEMBLE &&
+              vendor.value !== VENDOR_CUSTOM,
+          )}
+          onChange={(e) => {
+            const vendor = e.target.value as keyof RecognizerVendors;
+            shouldUpdateSttLanguage.current = true;
+            setRecogVendor(vendor);
+            setRecogLabel("");
+
+            setRecogLanguageOptions([]);
+          }}
+        />
+        {hasLength(sttLabelOptions) && (
+          <>
+            <label htmlFor="recog_label">Label</label>
+            <Selector
+              id="recog_label"
+              name="recog_label"
+              value={recogLabel}
+              options={sttLabelOptions}
+              onChange={(e) => {
+                setRecogLabel(e.target.value);
+              }}
+            />
+          </>
+        )}
+        {recogVendor &&
+          !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
+          recogVendor !== VENDOR_DEEPGRAM_FLUX &&
+          recogLang && (
            <>
-              <label htmlFor="custom_vendor_recognizer_voice">Language</label>
-              <input
-                id="custom_vendor_recognizer_voice"
-                type="text"
-                name="custom_vendor_recognizer_voice"
-                placeholder="Required"
-                required
+              <label htmlFor="recognizer_lang">Language</label>
+              <Selector
+                id="recognizer_lang"
+                name="recognizer_lang"
                value={recogLang}
+                options={recogLanguageOptions}
                onChange={(e) => {
                  setRecogLang(e.target.value);
                }}
              />
            </>
          )}
-        </fieldset>
-      )}
+        {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
+          <>
+            <label htmlFor="custom_vendor_recognizer_voice">Language</label>
+            <input
+              id="custom_vendor_recognizer_voice"
+              type="text"
+              name="custom_vendor_recognizer_voice"
+              placeholder="Required"
+              required
+              value={recogLang}
+              onChange={(e) => {
+                setRecogLang(e.target.value);
+              }}
+            />
+          </>
+        )}
+      </fieldset>
    </>
  );
 };
--- a/src/containers/internal/views/carriers/delete.tsx
+++ b/src/containers/internal/views/carriers/delete.tsx
@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { P } from "@jambonz/ui-kit";

 import { Modal, ModalClose } from "src/components";
-import { getFetch } from "src/api";
+import { getFetch, getLcrRoutes, getLcrs } from "src/api";
 import { API_PHONE_NUMBERS } from "src/api/constants";
-import { formatPhoneNumber, hasLength } from "src/utils";
+import { formatPhoneNumber, hasLength, hasValue } from "src/utils";

-import type { Carrier, PhoneNumber } from "src/api/types";
+import type { Carrier, Lcr, PhoneNumber } from "src/api/types";

 type DeleteProps = {
  carrier: Carrier;
@@ -20,28 +20,64 @@ export const DeleteCarrier = ({
  handleSubmit,
 }: DeleteProps) => {
  const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[]>();
+  const [lcrs, setLcrs] = useState<Lcr[]>();

  useEffect(() => {
    let ignore = false;

-    getFetch<PhoneNumber[]>(API_PHONE_NUMBERS).then(({ json }) => {
+    Promise.all([
+      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
+      new Promise<Lcr[]>((resolve, reject) => {
+        getLcrs()
+          .then(({ json }) => {
+            Promise.all(
+              json.map((lcr: Lcr) =>
+                getLcrRoutes(lcr.lcr_sid!)
+                  .then(({ json }) => {
+                    if (
+                      json.some((route) =>
+                        route.lcr_carrier_set_entries?.some(
+                          (entry) =>
+                            entry.voip_carrier_sid === carrier.voip_carrier_sid,
+                        ),
+                      )
+                    ) {
+                      return lcr;
+                    }
+                  })
+                  .catch((error) => reject(error)),
+              ),
+            )
+              .then((lcrs) => {
+                resolve(lcrs as Lcr[]);
+              })
+              .catch((error) => reject(error));
+          })
+          .catch((error) => reject(error));
+      }),
+    ]).then(([numbers, fetchedLcrs]) => {
      if (!ignore) {
        setPhoneNumbers(
-          json.filter(
-            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid
-          )
+          numbers.json.filter(
+            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid,
+          ),
        );
+
+        // Only set LCRs if they are not empty
+        setLcrs(fetchedLcrs.filter((p) => hasValue(p)));
      }
    });

    return function cleanup() {
      ignore = true;
    };
-  }, []);
+  }, [carrier.voip_carrier_sid]);
+
+  const hasBlockingDependencies = hasLength(phoneNumbers) || hasLength(lcrs);

  return (
    <>
-      {phoneNumbers && !hasLength(phoneNumbers) && (
+      {phoneNumbers && lcrs && !hasBlockingDependencies && (
        <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
          <P>
            Are you sure you want to delete carrier{" "}
@@ -49,24 +85,49 @@ export const DeleteCarrier = ({
          </P>
        </Modal>
      )}
-      {hasLength(phoneNumbers) && (
+      {hasBlockingDependencies && (
        <ModalClose handleClose={handleCancel}>
          <P>
            In order to delete the carrier it cannot be in use by any{" "}
-            <span>Phone Numbers ({phoneNumbers.length})</span>.
+            {hasLength(phoneNumbers) && (
+              <span>Phone Numbers ({phoneNumbers.length})</span>
+            )}
+            {hasLength(phoneNumbers) && hasLength(lcrs) && " or "}
+            {hasLength(lcrs) && (
+              <span>Outbound call Routings ({lcrs.length})</span>
+            )}
+            .
          </P>
-          <ul className="m">
-            <li>
-              <strong>Phone Numbers:</strong>
-            </li>
-            {phoneNumbers.map((phone) => {
-              return (
-                <li className="txt--teal" key={phone.phone_number_sid}>
-                  {formatPhoneNumber(phone.number)}
-                </li>
-              );
-            })}
-          </ul>
+
+          {hasLength(phoneNumbers) && (
+            <ul className="m">
+              <li>
+                <strong>Phone Numbers:</strong>
+              </li>
+              {phoneNumbers.map((phone) => {
+                return (
+                  <li className="txt--teal" key={phone.phone_number_sid}>
+                    {formatPhoneNumber(phone.number)}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          {hasLength(lcrs) && (
+            <ul className="m">
+              <li>
+                <strong>Outbound Call Routing:</strong>
+              </li>
+              {lcrs.map((lcr) => {
+                return (
+                  <li className="txt--teal" key={lcr.lcr_sid}>
+                    {lcr.name || "Default route"}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
        </ModalClose>
      )}
    </>
--- a/src/containers/internal/views/carriers/edit.tsx
+++ b/src/containers/internal/views/carriers/edit.tsx
@@ -3,25 +3,27 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { CarrierForm } from "./form";

 import { Carrier, SipGateway, SmppGateway } from "src/api/types";
 import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { ROUTE_INTERNAL_CARRIERS } from "src/router/routes";
 import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditCarrier = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Carrier>(
-    `VoipCarriers/${params.voip_carrier_sid}`
+    `VoipCarriers/${params.voip_carrier_sid}`,
  );
  const [sipGateways, sipGatewaysRefetch] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`
+    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
  );
  const [smppGateways, smppGatewaysRefetch] = useApiData<SmppGateway[]>(
-    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`
+    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
  );

  useScopedRedirect(
@@ -29,7 +31,7 @@ export const EditCarrier = () => {
    ROUTE_INTERNAL_CARRIERS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  useEffect(() => {
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
--- a/src/containers/internal/views/carriers/gateways.tsx
+++ b/src/containers/internal/views/carriers/gateways.tsx
@@ -12,7 +12,7 @@ type GatewaysProps = {

 export const Gateways = ({ carrier }: GatewaysProps) => {
  const [gateways, , error] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`
+    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`,
  );

  const renderGateways = () => {
--- a/src/containers/internal/views/carriers/index.tsx
+++ b/src/containers/internal/views/carriers/index.tsx
@@ -1,15 +1,16 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
-import { Button, H1, Icon, M } from "@jambonz/ui-kit";
+import { Button, ButtonGroup, H1, Icon, M, MS } from "@jambonz/ui-kit";
 import {
  deleteCarrier,
  deleteSipGateway,
  deleteSmppGateway,
  getFetch,
+  getSPVoipCarriers,
  useApiData,
  useServiceProviderData,
 } from "src/api";
-import { toastSuccess, toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { ROUTE_INTERNAL_CARRIERS } from "src/router/routes";
 import {
  AccountFilter,
@@ -17,20 +18,18 @@ import {
  Section,
  Spinner,
  SearchFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Gateways } from "./gateways";
-import {
-  isUserAccountScope,
-  hasLength,
-  hasValue,
-  useFilteredResults,
-} from "src/utils";
+import { isUserAccountScope, hasLength, hasValue } from "src/utils";
 import {
  API_SIP_GATEWAY,
  API_SMPP_GATEWAY,
  CARRIER_REG_OK,
  ENABLE_HOSTED_SYSTEM,
+  PER_PAGE_SELECTION,
  USER_ACCOUNT,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";
@@ -44,37 +43,62 @@ import type {
 } from "src/api/types";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 export const Carriers = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const [userData] = useApiData<CurrentUserData>("Users/me");
  const currentServiceProvider = useSelectState("currentServiceProvider");
-  const [apiUrl, setApiUrl] = useState("");
  const [carrier, setCarrier] = useState<Carrier | null>(null);
-  const [carriers, refetch] = useApiData<Carrier[]>(apiUrl);
+  const [carriers, setCarriers] = useState<Carrier[] | null>(null);
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [accountSid, setAccountSid] = useState("");
  const [filter, setFilter] = useState("");

-  const carriersFiltered = useMemo(() => {
-    setAccountSid(getAccountFilter());
-    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
-      setAccountSid(user?.account_sid);
+  const [carriersTotal, setCarriersTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);
+
+  // Add a ref to track previous values
+  const prevValuesRef = useRef({
+    serviceProviderId: "",
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });
+
+  const fetchCarriers = (resetPage = false) => {
+    if (!currentServiceProvider) return;
+
+    setCarriers(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
    }

-    return carriers
-      ? carriers.filter((carrier) =>
-          accountSid
-            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null
-        )
-      : [];
-  }, [accountSid, carrier, carriers]);
-
-  const filteredCarriers = useFilteredResults<Carrier>(
-    filter,
-    carriersFiltered
-  );
+    getSPVoipCarriers(currentServiceProvider.service_provider_sid, {
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(filter && { name: filter }),
+      ...(accountSid && { account_sid: accountSid }),
+    })
+      .then(({ json }) => {
+        setCarriers(json.data);
+        setCarriersTotal(json.total);
+        setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+      })
+      .catch((error) => {
+        setCarriers([]);
+        toastError(error.msg);
+      });
+  };

  const handleDelete = () => {
    if (carrier) {
@@ -87,10 +111,10 @@ export const Carriers = () => {
        .then(() => {
          Promise.all([
            getFetch<SipGateway[]>(
-              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
+              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
            ),
            getFetch<SmppGateway[]>(
-              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
+              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
            ),
          ]).then(([sipGatewaysRes, smppGatewaysRes]) => {
            hasLength(sipGatewaysRes.json) &&
@@ -99,8 +123,8 @@ export const Carriers = () => {
                  g &&
                  g.sip_gateway_sid &&
                  deleteSipGateway(g.sip_gateway_sid).catch((error) =>
-                    toastError(error.msg)
-                  )
+                    toastError(error.msg),
+                  ),
              );
            hasLength(smppGatewaysRes.json) &&
              smppGatewaysRes.json.forEach(
@@ -108,16 +132,16 @@ export const Carriers = () => {
                  g &&
                  g.smpp_gateway_sid &&
                  deleteSmppGateway(g.smpp_gateway_sid).catch((error) =>
-                    toastError(error.msg)
-                  )
+                    toastError(error.msg),
+                  ),
              );
          });
          setCarrier(null);
-          refetch();
+          fetchCarriers(false);
          toastSuccess(
            <>
              Deleted Carrier <strong>{carrier.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -126,14 +150,45 @@ export const Carriers = () => {
    }
  };

+  // Initial account setup
  useEffect(() => {
-    setLocation();
-    if (currentServiceProvider) {
-      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
-      );
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+    } else {
+      setAccountSid(getAccountFilter());
    }
-  }, [user, currentServiceProvider, accountSid]);
+    setLocation();
+  }, [user, accounts]);
+
+  // Combined effect for all data fetching
+  useEffect(() => {
+    if (!currentServiceProvider) return;
+
+    const prevValues = prevValuesRef.current;
+    const currentSPId = currentServiceProvider.service_provider_sid;
+
+    // Determine if we should reset pagination
+    const isFilterOrProviderChange =
+      prevValues.serviceProviderId !== currentSPId ||
+      prevValues.accountSid !== accountSid ||
+      prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== "25"; // Skip initial render
+
+    // Update ref for next comparison
+    prevValuesRef.current = {
+      serviceProviderId: currentSPId,
+      accountSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with page reset if filters changed
+    fetchCarriers(isFilterOrProviderChange || isPageSizeChange);
+  }, [currentServiceProvider, accountSid, filter, pageNumber, perPageFilter]);

  return (
    <>
@@ -159,6 +214,7 @@ export const Carriers = () => {
        <SearchFilter
          placeholder="Filter carriers"
          filter={[filter, setFilter]}
+          delay={1000}
        />
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
@@ -169,12 +225,12 @@ export const Carriers = () => {
          />
        </ScopedAccess>
      </section>
-      <Section {...(hasLength(filteredCarriers) && { slim: true })}>
+      <Section {...(hasLength(carriers) && { slim: true })}>
        <div className="list">
          {!hasValue(carriers) && hasLength(accounts) ? (
            <Spinner />
-          ) : hasLength(filteredCarriers) ? (
-            filteredCarriers.map((carrier) => (
+          ) : hasLength(carriers) ? (
+            carriers.map((carrier) => (
              <div className="item" key={carrier.voip_carrier_sid}>
                <div className="item__info">
                  <div className="item__title">
@@ -274,6 +330,26 @@ export const Carriers = () => {
          Add carrier
        </Button>
      </Section>
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {carriersTotal} record
+            {carriersTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(carriers) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
      {carrier && (
        <DeleteCarrier
          carrier={carrier}
--- a/src/containers/internal/views/carriers/pcap.tsx
+++ b/src/containers/internal/views/carriers/pcap.tsx
@@ -6,9 +6,9 @@ import {
  getPcap,
  getServiceProviderPcap,
 } from "src/api";
-import { toastError } from "src/store";

 import type { DownloadedBlob } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 type PcapButtonProps = {
  accountSid: string;
@@ -21,6 +21,7 @@ export const PcapButton = ({
  serviceProviderSid,
  sipCallId,
 }: PcapButtonProps) => {
+  const { toastError } = useToast();
  const [pcap, setPcap] = useState<DownloadedBlob>();

  useEffect(() => {
--- a/src/containers/internal/views/carriers/register-status.tsx
+++ b/src/containers/internal/views/carriers/register-status.tsx
@@ -10,6 +10,13 @@ type CarrierProps = {
 };

 export const RegisterStatus = ({ carrier }: CarrierProps) => {
+  const getReason = () => {
+    return carrier.register_status.reason
+      ? typeof carrier.register_status.reason === "string"
+        ? carrier.register_status.reason
+        : "Not Started"
+      : "Not Started";
+  };
  const renderStatus = () => {
    return (
      <div
@@ -20,7 +27,7 @@ export const RegisterStatus = ({ carrier }: CarrierProps) => {
              : "jam"
            : "jean"
        }`}
-        title={carrier.register_status.reason || "Not Started"}
+        title={getReason()}
      >
        {carrier.register_status.status === CARRIER_REG_OK ? (
          <Icons.CheckCircle />
@@ -40,8 +47,7 @@ export const RegisterStatus = ({ carrier }: CarrierProps) => {
    <details className={carrier.register_status.status || "not-tested"}>
      <summary>{renderStatus()}</summary>
      <MS>
-        <strong>Reason:</strong>{" "}
-        {carrier.register_status.reason || "Not Started"}
+        <strong>Reason:</strong> {getReason()}
      </MS>
      <PcapButton
        accountSid={carrier.account_sid || ""}
--- a/src/containers/internal/views/clients/edit.tsx
+++ b/src/containers/internal/views/clients/edit.tsx
@@ -3,15 +3,16 @@ import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useApiData } from "src/api";
 import { Client } from "src/api/types";
-import { toastError } from "src/store";
 import ClientsForm from "./form";
 import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
+import { useToast } from "src/components/toast/toast-provider";

 export const ClientsEdit = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const navigate = useNavigate();
  const [data, refetch, error] = useApiData<Client>(
-    `Clients/${params.client_sid}`
+    `Clients/${params.client_sid}`,
  );

  /** Handle error toast at top level... */
--- a/src/containers/internal/views/clients/form.tsx
+++ b/src/containers/internal/views/clients/form.tsx
@@ -13,16 +13,18 @@ import { Section, Tooltip } from "src/components";
 import { AccountSelect, Message, Passwd } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import ClientsDelete from "./delete";
 import { hasValue } from "src/utils";
 import { IMessage } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";

 type ClientsFormProps = {
  client?: UseApiDataMap<Client>;
 };

 export const ClientsForm = ({ client }: ClientsFormProps) => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const navigate = useNavigate();
@@ -31,7 +33,7 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
  const [isActive, setIsActive] = useState(
-    client ? client.data?.is_active : true
+    client ? client.data?.is_active : true,
  );
  const [allowDirectAppCalling, setAllowDirectAppCalling] = useState(true);
  const [allowDirectQueueCalling, setAllowDirectQueueCalling] = useState(true);
--- a/src/containers/internal/views/clients/index.tsx
+++ b/src/containers/internal/views/clients/index.tsx
@@ -12,13 +12,16 @@ import {
  Spinner,
 } from "src/components";
 import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { Scope } from "src/store/types";
 import { hasLength, hasValue, useFilteredResults } from "src/utils";
 import ClientsDelete from "./delete";
 import { USER_ACCOUNT } from "src/api/constants";
+import { useToast } from "src/components/toast/toast-provider";
+import { getAccountFilter } from "src/store/localStore";

 export const Clients = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const [userData] = useApiData<CurrentUserData>("Users/me");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
@@ -32,6 +35,7 @@ export const Clients = () => {
  const [client, setClient] = useState<Client | null>();

  const tmpFilteredClients = useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
      setAccountSid(user?.account_sid);
      return clients;
@@ -40,7 +44,7 @@ export const Clients = () => {
    setSelectedAccount(
      accountSid
        ? accounts?.find((a: Account) => a.account_sid === accountSid)
-        : null
+        : null,
    );

    return clients
@@ -48,8 +52,8 @@ export const Clients = () => {
          return accountSid
            ? c.account_sid === accountSid
            : accounts
-            ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
-            : false;
+              ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
+              : false;
        })
      : [];
  }, [accountSid, clients, accounts]);
@@ -63,7 +67,7 @@ export const Clients = () => {
          toastSuccess(
            <>
              Deleted sip client <strong>{client.username}</strong>
-            </>
+            </>,
          );
          setClient(null);
          refetch();
@@ -179,7 +183,7 @@ export const Clients = () => {
                        <span>
                          {
                            accounts?.find(
-                              (acct) => acct.account_sid === c.account_sid
+                              (acct) => acct.account_sid === c.account_sid,
                            )?.name
                          }
                        </span>
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -27,7 +27,7 @@ type CardProps = {
    index1: number,
    index2: number,
    key: string,
-    value: unknown
+    value: unknown,
  ) => void;
  handleRouteDelete: (lr: LcrRoute, index: number) => void;
  carrierSelectorOptions: SelectorOption[];
@@ -141,7 +141,6 @@ export const Card = ({
        <Selector
          id={`lcr_carrier_set_entry_carrier_${index}`}
          name={`lcr_carrier_set_entry_carrier_${index}`}
-          placeholder="Carrier"
          value={
            lr.lcr_carrier_set_entries && lr.lcr_carrier_set_entries.length > 0
              ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
@@ -156,7 +155,7 @@ export const Card = ({
              index,
              0,
              "voip_carrier_sid",
-              e.target.value
+              e.target.value,
            );
          }}
        />
--- a/src/containers/internal/views/least-cost-routing/container.tsx
+++ b/src/containers/internal/views/least-cost-routing/container.tsx
@@ -4,8 +4,8 @@ import Card from "./card";
 import { hasLength } from "src/utils";
 import update from "immutability-helper";
 import { deleteLcrRoute } from "src/api";
-import { toastError, toastSuccess } from "src/store";
 import { SelectorOption } from "src/components/forms/selector";
+import { useToast } from "src/components/toast/toast-provider";

 type ContainerProps = {
  lcrRoute: [LcrRoute[], React.Dispatch<React.SetStateAction<LcrRoute[]>>];
@@ -16,6 +16,7 @@ export const Container = ({
  lcrRoute: [lcrRoutes, setLcrRoutes],
  carrierSelectorOptions,
 }: ContainerProps) => {
+  const { toastSuccess, toastError } = useToast();
  const moveCard = (dragIndex: number, hoverIndex: number) => {
    setLcrRoutes((prevCards) =>
      update(prevCards, {
@@ -23,13 +24,13 @@ export const Container = ({
          [dragIndex, 1],
          [hoverIndex, 0, prevCards[dragIndex]],
        ],
-      })
+      }),
    );
  };

  const updateLcrRoute = (index: number, key: string, value: unknown) => {
    setLcrRoutes(
-      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr))
+      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr)),
    );
  };

@@ -37,7 +38,7 @@ export const Container = ({
    index1: number,
    index2: number,
    key: string,
-    value: unknown
+    value: unknown,
  ) => {
    setLcrRoutes(
      lcrRoutes.map((lr, i) =>
@@ -51,11 +52,11 @@ export const Container = ({
                        ...entry,
                        [key]: value,
                      }
-                    : entry
+                    : entry,
              ),
            }
-          : lr
-      )
+          : lr,
+      ),
    );
  };

--- a/src/containers/internal/views/least-cost-routing/edit.tsx
+++ b/src/containers/internal/views/least-cost-routing/edit.tsx
@@ -7,10 +7,10 @@ import { useParams } from "react-router-dom";
 export const EditLcr = () => {
  const params = useParams();
  const [lcrData, lcrRefect, lcrError] = useApiData<Lcr>(
-    `Lcrs/${params.lcr_sid}`
+    `Lcrs/${params.lcr_sid}`,
  );
  const [lcrRouteData, lcrRouteRefect, lcrRouteError] = useApiData<LcrRoute[]>(
-    `LcrRoutes?lcr_sid=${params.lcr_sid}`
+    `LcrRoutes?lcr_sid=${params.lcr_sid}`,
  );
  return (
    <>
--- a/src/containers/internal/views/least-cost-routing/form.tsx
+++ b/src/containers/internal/views/least-cost-routing/form.tsx
@@ -2,12 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Button, ButtonGroup, Icon, MS, MXS } from "@jambonz/ui-kit";
 import { Icons, Section } from "src/components";
-import {
-  toastError,
-  toastSuccess,
-  useDispatch,
-  useSelectState,
-} from "src/store";
+import { useDispatch, useSelectState } from "src/store";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import { setLocation } from "src/store/localStore";
 import { AccountSelect, Message, Selector } from "src/components/forms";
@@ -35,6 +30,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Container from "./container";
 import { hasValue } from "src/utils";
+import { useToast } from "src/components/toast/toast-provider";

 type LcrFormProps = {
  lcrDataMap?: UseApiDataMap<Lcr>;
@@ -56,6 +52,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    ],
  };

+  const { toastSuccess, toastError } = useToast();
  const navigate = useNavigate();
  const dispatch = useDispatch();

@@ -85,7 +82,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    setLocation();
    if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers${accountSid ? `?account_sid=${accountSid}` : ""}`,
      );
    }
  }, [user, currentServiceProvider, accountSid]);
@@ -95,16 +92,8 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      setAccountSid(user?.account_sid);
    }

-    const carriersFiltered = carriers
-      ? carriers.filter((carrier) =>
-          accountSid
-            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null
-        )
-      : [];
-
-    const ret = carriersFiltered
-      ? carriersFiltered.map((c: Carrier, i) => {
+    const ret = carriers
+      ? carriers.map((c: Carrier, i) => {
          if (i === 0) {
            setDefaultCarrier(c.voip_carrier_sid);
          }
@@ -118,7 +107,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      setErrorMessage(
        accountSid
          ? "There are no available carriers defined for this account"
-          : "There are no available carriers"
+          : "There are no available carriers",
      );
    } else {
      setErrorMessage("");
@@ -126,11 +115,16 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    return ret;
  }, [accountSid, carriers]);

-  if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
-    setLcrName(lcrDataMap.data.name || "");
-    setIsActive(lcrDataMap.data.is_active);
-    setPreviousLcr(lcrDataMap.data);
-  }
+  useEffect(() => {
+    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
+      setLcrName(lcrDataMap.data.name || "");
+      setIsActive(lcrDataMap.data.is_active);
+      setPreviousLcr(lcrDataMap.data);
+      if (lcrDataMap.data.account_sid) {
+        setAccountSid(lcrDataMap.data.account_sid);
+      }
+    }
+  }, [lcrDataMap?.data, previouseLcr]);

  useMemo(() => {
    let default_lcr_route_sid = "";
@@ -149,7 +143,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          ) {
            setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
            setDefaultLcrCarrierSetEntrySid(
-              entry.lcr_carrier_set_entry_sid || null
+              entry.lcr_carrier_set_entry_sid || null,
            );
            default_lcr_route_sid = entry.lcr_route_sid || "";
            setDefaultLcrRoute(lr);
@@ -161,8 +155,8 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    if (lcrRouteDataMap && lcrRouteDataMap.data)
      setLcrRoutes(
        lcrRouteDataMap.data.filter(
-          (route) => route.lcr_route_sid !== default_lcr_route_sid
-        )
+          (route) => route.lcr_route_sid !== default_lcr_route_sid,
+        ),
      );
  }, [lcrRouteDataMap?.data]);

@@ -177,7 +171,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          (r) => ({
            ...r,
            voip_carrier_sid: defaultCarrier || carrierSelectorOptions[0].value,
-          })
+          }),
        ),
      },
    ];
@@ -235,7 +229,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
                navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
              } else {
                navigate(
-                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`
+                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`,
                );
              }
              // Update global state
@@ -301,7 +295,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          toastSuccess(
            <>
              Deleted least cost routing <strong>{lcrForDelete?.name}</strong>
-            </>
+            </>,
          );
          setLcrForDelete(null);
          if (user?.access === Scope.admin) {
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -14,7 +14,7 @@ import {
 } from "src/components";
 import { ScopedAccess } from "src/components/scoped-access";
 import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
-import { toastSuccess, toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 // import { getAccountFilter, setLocation } from "src/store/localStore";
 import { Scope } from "src/store/types";
 import {
@@ -25,14 +25,16 @@ import {
 } from "src/utils";
 import { USER_ACCOUNT } from "src/api/constants";
 import DeleteLcr from "./delete";
+import { useToast } from "src/components/toast/toast-provider";

 export const Lcrs = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  useScopedRedirect(
    Scope.admin,
    `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`,
    user,
-    "You do not have permissions to manage all outbound call routes"
+    "You do not have permissions to manage all outbound call routes",
  );
  const [lcrs, refetch] = useApiData<Lcr[]>("Lcrs");
  const [filter, setFilter] = useState("");
@@ -53,9 +55,9 @@ export const Lcrs = () => {
          accountSid
            ? lcr.account_sid === accountSid
            : currentServiceProvider?.service_provider_sid
-            ? lcr.service_provider_sid ==
-              currentServiceProvider.service_provider_sid
-            : lcr.account_sid === null
+              ? lcr.service_provider_sid ==
+                currentServiceProvider.service_provider_sid
+              : lcr.account_sid === null,
        )
      : [];
  }, [accountSid, lcrs]);
@@ -68,7 +70,7 @@ export const Lcrs = () => {
          toastSuccess(
            <>
              Deleted outbound call route <strong>{lcr?.name}</strong>
-            </>
+            </>,
          );
          setLcr(null);
          refetch();
@@ -156,7 +158,7 @@ export const Lcrs = () => {
                        <span>
                          {lcr.account_sid
                            ? accounts?.find(
-                                (acct) => acct.account_sid === lcr.account_sid
+                                (acct) => acct.account_sid === lcr.account_sid,
                              )?.name
                            : currentServiceProvider?.name}
                        </span>
--- a/src/containers/internal/views/least-cost-routing/styles.scss
+++ b/src/containers/internal/views/least-cost-routing/styles.scss
@@ -4,7 +4,9 @@
 }

 .lcr-card:hover {
-  box-shadow: -7px 7px 5px #d5d7db, -5px -5px 10px #ffffff;
+  box-shadow:
+    -7px 7px 5px #d5d7db,
+    -5px -5px 10px #ffffff;
  transform: translateY(-3px) translateX(-3px);
 }

--- a/src/containers/internal/views/ms-teams-tenants/edit.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/edit.tsx
@@ -3,15 +3,16 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
-import { toastError } from "src/store";
 import { MsTeamsTenantForm } from "./form";

 import type { MSTeamsTenant } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditMsTeamsTenant = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const [data, refetch, error] = useApiData<MSTeamsTenant>(
-    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`
+    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`,
  );

  useEffect(() => {
--- a/src/containers/internal/views/ms-teams-tenants/form.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/form.tsx
@@ -15,7 +15,7 @@ import {
  ApplicationSelect,
 } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_MS_TEAMS_TENANTS,
@@ -28,6 +28,7 @@ import type {
  MSTeamsTenant,
  UseApiDataMap,
 } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 type MsTeamsTenantFormProps = {
  msTeamsTenant?: UseApiDataMap<MSTeamsTenant>;
@@ -36,6 +37,7 @@ type MsTeamsTenantFormProps = {
 export const MsTeamsTenantForm = ({
  msTeamsTenant,
 }: MsTeamsTenantFormProps) => {
+  const { toastSuccess, toastError } = useToast();
  const navigate = useNavigate();
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
@@ -49,7 +51,7 @@ export const MsTeamsTenantForm = ({
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an Microsoft Teams Tenant."
+    "You must create an account before you can create an Microsoft Teams Tenant.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -63,7 +65,7 @@ export const MsTeamsTenantForm = ({
          ? msTeamsTenants.filter(
              (a) =>
                a.ms_teams_tenant_sid !==
-                msTeamsTenant.data!.ms_teams_tenant_sid
+                msTeamsTenant.data!.ms_teams_tenant_sid,
            )
          : msTeamsTenants;

@@ -156,7 +158,7 @@ export const MsTeamsTenantForm = ({
            applications={
              applications
                ? applications.filter(
-                    (application) => application.account_sid === accountSid
+                    (application) => application.account_sid === accountSid,
                  )
                : []
            }
--- a/src/containers/internal/views/ms-teams-tenants/index.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/index.tsx
@@ -13,7 +13,6 @@ import {
  withAccessControl,
  useFilteredResults,
 } from "src/utils";
-import { toastError, toastSuccess } from "src/store";
 import {
  Icons,
  Section,
@@ -29,13 +28,15 @@ import { DeleteMsTeamsTenant } from "./delete";

 import type { Account, MSTeamsTenant, Application } from "src/api/types";
 import type { ACLGetIMessage } from "src/utils/with-access-control";
+import { useToast } from "src/components/toast/toast-provider";

 export const MSTeamsTenants = () => {
+  const { toastSuccess, toastError } = useToast();
  const [msTeamsTenant, setMsTeamsTenant] = useState<MSTeamsTenant | null>(
-    null
+    null,
  );
  const [msTeamsTenants, refetch] = useApiData<MSTeamsTenant[]>(
-    "MicrosoftTeamsTenants"
+    "MicrosoftTeamsTenants",
  );
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useServiceProviderData<Application[]>("Applications");
@@ -45,14 +46,14 @@ export const MSTeamsTenants = () => {
  const msTeamsTenantsFiltered = useMemo(() => {
    return msTeamsTenants
      ? msTeamsTenants.filter(
-          (mst) => !accountSid || mst.account_sid === accountSid
+          (mst) => !accountSid || mst.account_sid === accountSid,
        )
      : [];
  }, [accountSid, msTeamsTenants]);

  const filteredMsTeamsTenants = useFilteredResults<MSTeamsTenant>(
    filter,
-    msTeamsTenantsFiltered
+    msTeamsTenantsFiltered,
  );

  const handleDelete = () => {
@@ -65,7 +66,7 @@ export const MSTeamsTenants = () => {
            <>
              Deleted Microsoft Teams Tenant{" "}
              <strong>{msTeamsTenant.tenant_fqdn}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -131,7 +132,8 @@ export const MSTeamsTenants = () => {
                            {
                              accounts?.find(
                                (acct) =>
-                                  acct.account_sid === msTeamsTenant.account_sid
+                                  acct.account_sid ===
+                                  msTeamsTenant.account_sid,
                              )?.name
                            }
                          </span>
@@ -148,7 +150,7 @@ export const MSTeamsTenants = () => {
                            {applications?.find(
                              (app) =>
                                app.application_sid ===
-                                msTeamsTenant.application_sid
+                                msTeamsTenant.application_sid,
                            )?.name || "None"}
                          </span>
                        </div>
@@ -217,5 +219,5 @@ const getAclIMessage: ACLGetIMessage = (currentServiceProvider) => {

 export default withAccessControl(
  "hasMSTeamsFqdn",
-  getAclIMessage
+  getAclIMessage,
 )(MSTeamsTenants);
--- a/src/containers/internal/views/phone-numbers/edit.tsx
+++ b/src/containers/internal/views/phone-numbers/edit.tsx
@@ -3,15 +3,16 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
-import { toastError } from "src/store";
 import { PhoneNumberForm } from "./form";

 import type { PhoneNumber } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditPhoneNumber = () => {
+  const { toastError } = useToast();
  const params = useParams();
  const [data, refetch, error] = useApiData<PhoneNumber>(
-    `PhoneNumbers/${params.phone_number_sid}`
+    `PhoneNumbers/${params.phone_number_sid}`,
  );

  useEffect(() => {
--- a/src/containers/internal/views/phone-numbers/form.tsx
+++ b/src/containers/internal/views/phone-numbers/form.tsx
@@ -10,9 +10,9 @@ import {
 import { Section } from "src/components";
 import {
  Message,
-  Selector,
  AccountSelect,
  ApplicationSelect,
+  TypeaheadSelector,
 } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import {
@@ -20,7 +20,6 @@ import {
  ROUTE_INTERNAL_CARRIERS,
  ROUTE_INTERNAL_PHONE_NUMBERS,
 } from "src/router/routes";
-import { toastError, toastSuccess } from "src/store";
 import { hasLength, useRedirect } from "src/utils";

 import type {
@@ -31,33 +30,36 @@ import type {
  UseApiDataMap,
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 type PhoneNumberFormProps = {
  phoneNumber?: UseApiDataMap<PhoneNumber>;
 };

 export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
+  const { toastSuccess, toastError } = useToast();
  const navigate = useNavigate();
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useServiceProviderData<Application[]>("Applications");
  const [phoneNumbers] = useServiceProviderData<PhoneNumber[]>("PhoneNumbers");
-  const [carriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
+  const [voipCarriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
  const [phoneNumberNum, setPhoneNumberNum] = useState("");
  const [accountSid, setAccountSid] = useState("");
  const [sipTrunkSid, setSipTrunkSid] = useState("");
  const [applicationSid, setApplicationSid] = useState("");
  const [message, setMessage] = useState("");
+  const [carriers, setCarriers] = useState<Carrier[]>(voipCarriers || []);

  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create a phone number."
+    "You must create an account before you can create a phone number.",
  );

  useRedirect<Carrier>(
-    carriers,
+    voipCarriers,
    ROUTE_INTERNAL_CARRIERS,
-    "You must create a SIP trunk before you can create a phone number."
+    "You must create a SIP trunk before you can create a phone number.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -69,7 +71,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
      const filtered =
        phoneNumber && phoneNumber.data
          ? phoneNumbers.filter(
-              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid
+              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid,
            )
          : phoneNumbers;

@@ -90,7 +92,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
          phoneNumber.refetch();
          toastSuccess("Phone number updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`
+            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -138,6 +140,20 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
    }
  }, [carriers, sipTrunkSid]);

+  // Filter carriers based on account_sid
+  useEffect(() => {
+    if (voipCarriers) {
+      setCarriers(
+        voipCarriers?.filter(
+          (carrier) =>
+            !accountSid ||
+            (carrier.is_active &&
+              (!carrier.account_sid || carrier.account_sid === accountSid)),
+        ),
+      );
+    }
+  }, [accountSid, voipCarriers]);
+
  return (
    <>
      <Section slim>
@@ -165,11 +181,17 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
              disabled={phoneNumber ? true : false}
            ></input>
          </fieldset>
+          <fieldset>
+            <AccountSelect
+              accounts={accounts}
+              account={[accountSid, setAccountSid]}
+            />
+          </fieldset>
          <fieldset>
            <label htmlFor="sip_trunk">
              Carrier <span>*</span>
            </label>
-            <Selector
+            <TypeaheadSelector
              id="sip_trunk"
              name="sip_trunk"
              required
@@ -188,21 +210,18 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
              disabled={phoneNumber ? true : false}
            />
          </fieldset>
-          <fieldset>
-            <AccountSelect
-              accounts={accounts}
-              account={[accountSid, setAccountSid]}
-            />
-          </fieldset>
+
          <fieldset>
            <ApplicationSelect
              defaultOption="Choose application"
              application={[applicationSid, setApplicationSid]}
              applications={
                applications
-                  ? applications.filter(
-                      (application) => application.account_sid === accountSid
-                    )
+                  ? applications
+                      .filter(
+                        (application) => application.account_sid === accountSid,
+                      )
+                      .sort((a, b) => a.name.localeCompare(b.name))
                  : []
              }
            />
--- a/src/containers/internal/views/phone-numbers/index.tsx
+++ b/src/containers/internal/views/phone-numbers/index.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Button, ButtonGroup, H1, Icon, MS } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

 import {
  deletePhoneNumber,
+  getPhoneNumbers,
  putPhoneNumber,
  useServiceProviderData,
 } from "src/api";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  Icons,
  Section,
@@ -15,34 +16,33 @@ import {
  ApplicationFilter,
  SearchFilter,
  AccountFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_CARRIERS,
  ROUTE_INTERNAL_PHONE_NUMBERS,
 } from "src/router/routes";
-import {
-  hasLength,
-  hasValue,
-  formatPhoneNumber,
-  useFilteredResults,
-} from "src/utils";
+import { hasLength, hasValue, formatPhoneNumber } from "src/utils";
 import { DeletePhoneNumber } from "./delete";

 import type { Account, PhoneNumber, Carrier, Application } from "src/api/types";
-import { USER_ACCOUNT } from "src/api/constants";
+import { PER_PAGE_SELECTION, USER_ACCOUNT } from "src/api/constants";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 export const PhoneNumbers = () => {
+  const { toastSuccess, toastError } = useToast();
  const user = useSelectState("user");
+  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useServiceProviderData<Application[]>("Applications");
  const [carriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
  const [phoneNumber, setPhoneNumber] = useState<PhoneNumber | null>(null);
-  const [phoneNumbers, refetch] =
-    useServiceProviderData<PhoneNumber[]>("PhoneNumbers");
+  const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[] | null>(null);
  const [selectedPhoneNumbers, setSelectedPhoneNumbers] = useState<
    PhoneNumber[]
  >([]);
@@ -51,20 +51,54 @@ export const PhoneNumbers = () => {
  const [applyMassEdit, setApplyMassEdit] = useState(false);
  const [filter, setFilter] = useState("");
  const [accountSid, setAccountSid] = useState("");
+  const [phoneNumbersTotal, setphoneNumbersTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);

-  const phoneNumbersFiltered = useMemo(() => {
-    setAccountSid(getAccountFilter());
-    return phoneNumbers
-      ? phoneNumbers.filter(
-          (phn) => !accountSid || phn.account_sid === accountSid
-        )
-      : [];
-  }, [accountSid, phoneNumbers]);
+  // Add ref to track previous values
+  const prevValuesRef = useRef({
+    serviceProviderId: "",
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });

-  const filteredPhoneNumbers = useFilteredResults<PhoneNumber>(
-    filter,
-    phoneNumbersFiltered
-  );
+  const fetchPhoneNumbers = (resetPage = false) => {
+    setPhoneNumbers(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
+    }
+
+    const accSid = accountSid || getAccountFilter() || "";
+
+    getPhoneNumbers({
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(accSid && { account_sid: accSid }),
+      ...(filter && { filter }),
+      ...(currentServiceProvider?.service_provider_sid && {
+        service_provider_sid: currentServiceProvider.service_provider_sid,
+      }),
+    })
+      .then(({ json }) => {
+        if (json) {
+          setPhoneNumbers(json.data);
+          setphoneNumbersTotal(json.total);
+          setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+        }
+      })
+      .catch((error) => {
+        setPhoneNumbers([]);
+        toastError(error.msg);
+      });
+  };

  const handleMassEdit = () => {
    Promise.all(
@@ -74,12 +108,14 @@ export const PhoneNumbers = () => {
        };

        return putPhoneNumber(phoneNumber.phone_number_sid, payload);
-      })
+      }),
    )
      .then(() => {
-        refetch();
+        fetchPhoneNumbers(false);
        setApplicationSid("");
        setApplyMassEdit(false);
+        setSelectAll(false);
+        setSelectedPhoneNumbers([]);
        toastSuccess("Number routing updated successfully");
      })
      .catch((error) => {
@@ -93,12 +129,12 @@ export const PhoneNumbers = () => {
    if (phoneNumber) {
      deletePhoneNumber(phoneNumber.phone_number_sid)
        .then(() => {
-          refetch();
+          fetchPhoneNumbers(false);
          setPhoneNumber(null);
          toastSuccess(
            <>
              Deleted phone number <strong>{phoneNumber.number}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -107,13 +143,44 @@ export const PhoneNumbers = () => {
    }
  };

+  // Initial account setup
  useEffect(() => {
-    setLocation();
    if (user?.account_sid && user.scope === USER_ACCOUNT) {
      setAccountSid(user?.account_sid);
+    } else {
+      setAccountSid(getAccountFilter() || accountSid);
    }
+    setLocation();
  }, [user]);

+  // Combined effect for all data fetching
+  useEffect(() => {
+    const prevValues = prevValuesRef.current;
+    const currentSPId = currentServiceProvider?.service_provider_sid;
+
+    // Detect changes that require page reset
+    const isFilterOrProviderChange =
+      prevValues.serviceProviderId !== currentSPId ||
+      prevValues.accountSid !== accountSid ||
+      prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== "25"; // Skip initial render
+
+    // Update ref for next comparison
+    prevValuesRef.current = {
+      serviceProviderId: currentSPId || "",
+      accountSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with appropriate reset parameter
+    fetchPhoneNumbers(isFilterOrProviderChange || isPageSizeChange);
+  }, [currentServiceProvider, accountSid, filter, pageNumber, perPageFilter]);
+
  return (
    <>
      <section className="mast">
@@ -133,6 +200,7 @@ export const PhoneNumbers = () => {
        <SearchFilter
          placeholder="Filter phone numbers"
          filter={[filter, setFilter]}
+          delay={1000}
        />
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
@@ -142,11 +210,11 @@ export const PhoneNumbers = () => {
          />
        </ScopedAccess>
      </section>
-      <Section {...(hasLength(filteredPhoneNumbers) && { slim: true })}>
+      <Section {...(hasLength(phoneNumbers) && { slim: true })}>
        <div className="list">
          {!hasValue(phoneNumbers) ? (
            <Spinner />
-          ) : hasLength(filteredPhoneNumbers) ? (
+          ) : hasLength(phoneNumbers) ? (
            <>
              <div className="item item--actions">
                {accountSid ? (
@@ -160,7 +228,7 @@ export const PhoneNumbers = () => {
                          onChange={(e) => {
                            if (e.target.checked) {
                              setSelectAll(true);
-                              setSelectedPhoneNumbers(filteredPhoneNumbers);
+                              setSelectedPhoneNumbers(phoneNumbers);
                            } else {
                              setSelectAll(false);
                              setSelectedPhoneNumbers([]);
@@ -177,17 +245,15 @@ export const PhoneNumbers = () => {
                          application={[applicationSid, setApplicationSid]}
                          applications={applications?.filter(
                            (application) =>
-                              application.account_sid === accountSid
+                              application.account_sid === accountSid,
                          )}
                          defaultOption="None"
                        />
                        <Button
                          small
                          onClick={() => {
-                            handleMassEdit();
-                            setSelectAll(false);
                            setApplyMassEdit(true);
-                            setSelectedPhoneNumbers([]);
+                            handleMassEdit();
                          }}
                        >
                          Apply
@@ -209,7 +275,7 @@ export const PhoneNumbers = () => {
                  </MS>
                )}
              </div>
-              {filteredPhoneNumbers.map((phoneNumber) => {
+              {phoneNumbers.map((phoneNumber) => {
                return (
                  <div className="item" key={phoneNumber.phone_number_sid}>
                    <div className="item__info">
@@ -224,7 +290,7 @@ export const PhoneNumbers = () => {
                              selectedPhoneNumbers.find(
                                (phone) =>
                                  phone.phone_number_sid ===
-                                  phoneNumber.phone_number_sid
+                                  phoneNumber.phone_number_sid,
                              )
                                ? true
                                : false
@@ -240,8 +306,8 @@ export const PhoneNumbers = () => {
                                  curr.filter(
                                    (phone) =>
                                      phone.phone_number_sid !==
-                                      phoneNumber.phone_number_sid
-                                  )
+                                      phoneNumber.phone_number_sid,
+                                  ),
                                );
                              }
                            }}
@@ -270,7 +336,8 @@ export const PhoneNumbers = () => {
                              {
                                accounts?.find(
                                  (acct) =>
-                                    acct.account_sid === phoneNumber.account_sid
+                                    acct.account_sid ===
+                                    phoneNumber.account_sid,
                                )?.name
                              }
                            </span>
@@ -287,7 +354,7 @@ export const PhoneNumbers = () => {
                              {applications?.find(
                                (app) =>
                                  app.application_sid ===
-                                  phoneNumber.application_sid
+                                  phoneNumber.application_sid,
                              )?.name || "None"}
                            </span>
                          </div>
@@ -344,6 +411,26 @@ export const PhoneNumbers = () => {
          </Button>
        )}
      </Section>
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {phoneNumbersTotal} record
+            {phoneNumbersTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(phoneNumbers) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
      {phoneNumber && (
        <DeletePhoneNumber
          phoneNumber={phoneNumber}
--- a/src/containers/internal/views/recent-calls/call-system-logs.tsx
+++ b/src/containers/internal/views/recent-calls/call-system-logs.tsx
@@ -0,0 +1,132 @@
+import dayjs from "dayjs";
+import React, { useEffect, useState } from "react";
+import { getRecentCallLog } from "src/api";
+import { RecentCall } from "src/api/types";
+import { Icons, Spinner } from "src/components";
+import { hasValue } from "src/utils";
+import utc from "dayjs/plugin/utc";
+import { useToast } from "src/components/toast/toast-provider";
+dayjs.extend(utc);
+
+type CallSystemLogsProps = {
+  call: RecentCall;
+};
+
+// Helper function to format logs
+const formatLog = (log: string): string => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const parsedLog = JSON.parse(log) as any;
+
+    const l = {
+      ...parsedLog,
+      time: dayjs(parsedLog.time).utc().format("YYYY-MM-DD HH:mm:ssZ"),
+    };
+    return JSON.stringify(l, null, 2);
+  } catch {
+    return log;
+  }
+};
+
+export default function CallSystemLogs({ call }: CallSystemLogsProps) {
+  const { toastError, toastSuccess } = useToast();
+  const [logs, setLogs] = useState<string[] | null>();
+  const [loading, setLoading] = useState(false);
+  const [count, setCount] = useState(0);
+  useEffect(() => {}, [call]);
+  const getLogs = () => {
+    setLoading(true);
+    setCount((prev) => prev + 1);
+    if (call && call.account_sid && call.call_sid) {
+      getRecentCallLog(call.account_sid, call.call_sid)
+        .then(({ json }) => {
+          setLogs(json);
+        })
+        .catch((err) => {
+          if (err.status === 404) {
+            toastError("There is no log for this call");
+          } else {
+            toastError(err.msg);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  };
+
+  const copyToClipboard = () => {
+    if (!logs) {
+      return;
+    }
+    const textToCopy = logs.map(formatLog).join("\n\n");
+
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => toastSuccess("Logs copied to clipboard"))
+      .catch(() => toastError("Failed to copy logs"));
+  };
+
+  const downloadLogs = () => {
+    if (!logs) {
+      return;
+    }
+    const textToDownload = logs.map(formatLog).join("\n\n");
+
+    const blob = new Blob([textToDownload], { type: "text/plain" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `${call.call_sid}.log`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+
+  return (
+    <>
+      <>
+        <div className="log-container">
+          <div className="log-buttons">
+            <button
+              onClick={getLogs}
+              className="log-retrieve-button"
+              title="Retrieve Logs"
+              disabled={loading}
+            >
+              <div style={{ display: "flex", gap: "5px" }}>
+                Retrieve Logs
+                {loading && <Spinner small />}
+              </div>
+            </button>
+            {hasValue(logs) && logs.length !== 0 && (
+              <>
+                <button
+                  onClick={copyToClipboard}
+                  className="log-button"
+                  title="Copy to clipboard"
+                >
+                  <Icons.Clipboard />
+                </button>
+                <button
+                  onClick={downloadLogs}
+                  className="log-button"
+                  title="Download logs"
+                >
+                  <Icons.Download />
+                </button>
+              </>
+            )}
+          </div>
+          <pre className="log-content">
+            {hasValue(logs) && logs.length !== 0
+              ? logs?.map((log, index) => (
+                  <div key={index}>{formatLog(log)}</div>
+                ))
+              : count !== 0 && logs === null
+                ? "No logs found"
+                : ""}
+          </pre>
+        </div>
+      </>
+    </>
+  );
+}
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -98,7 +98,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
        rootGroup.children = buildChildren(
          rootGroup.level + 1,
          rootGroup,
-          groups
+          groups,
        );
        setJaegerGroup(rootGroup);
      }
@@ -108,7 +108,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
  const buildChildren = (
    level: number,
    rootGroup: JaegerGroup,
-    groups: JaegerGroup[]
+    groups: JaegerGroup[],
  ): JaegerGroup[] => {
    return getGroupsByParent(rootGroup.spanId, groups).map((group) => {
      group.level = level;
--- a/src/containers/internal/views/recent-calls/details.tsx
+++ b/src/containers/internal/views/recent-calls/details.tsx
@@ -8,9 +8,10 @@ import type { RecentCall } from "src/api/types";
 import { Tabs, Tab } from "@jambonz/ui-kit";
 import CallDetail from "./call-detail";
 import CallTracing from "./call-tracing";
-import { DISABLE_JAEGER_TRACING } from "src/api/constants";
+import { AWS_REGION, DISABLE_JAEGER_TRACING } from "src/api/constants";
 import { Player } from "./player";
 import "./styles.scss";
+import CallSystemLogs from "./call-system-logs";

 type DetailsItemProps = {
  call: RecentCall;
@@ -78,6 +79,13 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
            <Tab id="tracing" label="Tracing">
              {open && <CallTracing call={call} />}
            </Tab>
+            {hasValue(AWS_REGION) ? (
+              <Tab id="logs" label="Logs">
+                {open && <CallSystemLogs call={call} />}
+              </Tab>
+            ) : (
+              <></>
+            )}
          </Tabs>
        )}
        {open && (
--- a/src/containers/internal/views/recent-calls/index.tsx
+++ b/src/containers/internal/views/recent-calls/index.tsx
@@ -8,7 +8,7 @@ import {
  PER_PAGE_SELECTION,
  USER_ACCOUNT,
 } from "src/api/constants";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  Section,
  AccountFilter,
@@ -28,6 +28,7 @@ import {
  getQueryFilter,
  setLocation,
 } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 const directionSelection = [
  { name: "either", value: "io" },
@@ -42,6 +43,7 @@ const statusSelection = [
 ];

 export const RecentCalls = () => {
+  const { toastError } = useToast();
  const user = useSelectState("user");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [accountSid, setAccountSid] = useState("");
@@ -63,7 +65,12 @@ export const RecentCalls = () => {
      count: Number(perPageFilter),
      ...(dateFilter === "today"
        ? { start: dayjs().startOf("date").toISOString() }
-        : { days: Number(dateFilter) }),
+        : dateFilter === "yesterday"
+          ? {
+              start: dayjs().subtract(1, "day").startOf("day").toISOString(),
+              end: dayjs().subtract(1, "day").endOf("day").toISOString(),
+            }
+          : { days: Number(dateFilter) }),
      ...(statusFilter !== "all" && { answered: statusFilter }),
      ...(directionFilter !== "io" && { direction: directionFilter }),
      ...(filter && { filter }),
@@ -82,10 +89,10 @@ export const RecentCalls = () => {
  };

  useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
+    if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
    if (getQueryFilter()) {
      const [date, direction, status] = getQueryFilter().split("/");
-      setAccountSid(getAccountFilter() || accountSid);
-      if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
      setDateFilter(date);
      setDirectionFilter(direction);
      setStatusFilter(status);
@@ -157,7 +164,10 @@ export const RecentCalls = () => {
          {!hasValue(calls) && hasLength(accounts) ? (
            <Spinner />
          ) : hasLength(calls) ? (
-            calls.map((call) => <DetailsItem key={call.call_sid} call={call} />)
+            //call.call_sid is null incase of failure, cannot be used as key
+            calls.map((call) => (
+              <DetailsItem key={call.sip_callid} call={call} />
+            ))
          ) : (
            <M>No data.</M>
          )}
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -3,6 +3,7 @@ import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
 import dayjs from "dayjs";
 import "./styles.scss";
 import { formattedDuration } from "./utils";
+import { getSpansByNameRegex } from "../utils";

 type JaegerDetailProps = {
  group: JaegerGroup;
@@ -65,6 +66,37 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
            </div>
          </div>
        ))}
+
+        {/* TTS Streaming Attrs */}
+        {group.children.length &&
+          getSpansByNameRegex(group.children, /tts-generation/)?.map((span) => {
+            return span.attributes.map((attribute) => {
+              if (
+                ![
+                  "tts.vendor",
+                  "tts.language",
+                  "tts.voice",
+                  "tts.cached",
+                  "engine",
+                  "voice",
+                ].includes(attribute.key)
+              ) {
+                return (
+                  <div
+                    key={attribute.key}
+                    className="spanDetailsWrapper__details"
+                  >
+                    <div className="spanDetailsWrapper__details_header">
+                      <strong>{attribute.key}</strong>:
+                    </div>
+                    <div className="spanDetailsWrapper__details_body">
+                      {extractSpanGroupValue(attribute.value)}
+                    </div>
+                  </div>
+                );
+              }
+            });
+          })}
      </div>
    </div>
  );
--- a/src/containers/internal/views/recent-calls/jaeger/styles.scss
+++ b/src/containers/internal/views/recent-calls/jaeger/styles.scss
@@ -4,7 +4,6 @@

 .barGroup {
  border-radius: ui-vars.$px01;
-  @include mixins.code();
  text-align: left;
  padding: ui-vars.$px03;
  color: ui-vars.$pink;
@@ -13,6 +12,7 @@
  margin-top: ui-vars.$px02;
  overflow-x: auto;
  overflow-y: scroll;
+  @include mixins.code();

  @media (max-width: 600px) {
    padding: 15px;
@@ -72,7 +72,6 @@

 .spanDetailsWrapper {
  border-radius: ui-vars.$px01;
-  @include mixins.code();
  text-align: left;
  padding: ui-vars.$px01;
  background-color: ui-vars.$white;
@@ -82,6 +81,7 @@
  max-width: ui-vars.$width-tablet-2;
  max-height: 500px;
  overflow-y: scroll;
+  @include mixins.code();

  &__detailsWrapper {
    height: 100%;
--- a/src/containers/internal/views/recent-calls/pcap.tsx
+++ b/src/containers/internal/views/recent-calls/pcap.tsx
@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from "react";

 import { getPcap } from "src/api";
-import { toastError } from "src/store";

 import type { DownloadedBlob, RecentCall } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";

 type PcapButtonProps = {
  call: RecentCall;
 };

 export const PcapButton = ({ call }: PcapButtonProps) => {
+  const { toastError } = useToast();
  const [pcap, setPcap] = useState<DownloadedBlob | null>(null);

  useEffect(() => {
--- a/src/containers/internal/views/recent-calls/player.tsx
+++ b/src/containers/internal/views/recent-calls/player.tsx
@@ -13,21 +13,23 @@ import {
  JaegerRoot,
  JaegerSpan,
  WaveSurferDtmfResult,
+  WaveSurferGatherSpeechVerbHookLatencyResult,
  WaveSurferSttResult,
+  WaveSurferTtsLatencyResult,
 } from "src/api/jaeger-types";
 import {
  getSpanAttributeByName,
-  getSpansByName,
  getSpansByNameRegex,
  getSpansFromJaegerRoot,
 } from "./utils";
-import { toastError, toastSuccess } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";

 type PlayerProps = {
  call: RecentCall;
 };

 export const Player = ({ call }: PlayerProps) => {
+  const { toastSuccess, toastError } = useToast();
  const { recording_url, call_sid } = call;
  const url =
    recording_url && recording_url.startsWith("http://")
@@ -42,6 +44,14 @@ export const Player = ({ call }: PlayerProps) => {
    useState<WaveSurferSttResult | null>();
  const [waveSurferDtmfData, setWaveSurferDtmfData] =
    useState<WaveSurferDtmfResult | null>();
+
+  const [waveSurferTtsLatencyData, setWaveSurferTtsLatencyData] =
+    useState<WaveSurferTtsLatencyResult | null>();
+
+  const [
+    waveSurferGatherSpeechVerbHookLatencyData,
+    setWaveSurferGatherSpeechVerbHookLatencyData,
+  ] = useState<WaveSurferGatherSpeechVerbHookLatencyResult | null>();
  const [regionChecked, setRegionChecked] = useState(false);

  const wavesurferId = `wavesurfer--${call_sid}`;
@@ -62,7 +72,7 @@ export const Player = ({ call }: PlayerProps) => {
        const [dtmfValue] = getSpanAttributeByName(s.attributes, "dtmf");
        const [durationValue] = getSpanAttributeByName(
          s.attributes,
-          "duration"
+          "duration",
        );
        if (dtmfValue && durationValue) {
          const start =
@@ -118,7 +128,7 @@ export const Player = ({ call }: PlayerProps) => {
  const getSilenceStartTime = (
    start: number,
    end: number,
-    channel: number
+    channel: number,
  ): number => {
    if (waveSurferRef.current) {
      const duration = waveSurferRef.current.getDecodedData()?.duration;
@@ -151,8 +161,9 @@ export const Player = ({ call }: PlayerProps) => {

  const drawSttRegionForSpan = (
    s: JaegerSpan,
+    allSpans: JaegerSpan[],
    startPoint: JaegerSpan,
-    channel = 0
+    channel = 0,
  ) => {
    if (waveSurferRegionsPluginRef.current) {
      const r = waveSurferRegionsPluginRef.current
@@ -165,7 +176,36 @@ export const Player = ({ call }: PlayerProps) => {
        const end =
          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;

-        const endSpeechTime = getSilenceStartTime(start, end, channel);
+        const verbHookSpans = getSpansByNameRegex(allSpans, /verb:hook/);
+        const verbHookSpan = verbHookSpans.find(
+          (v) => v.parentSpanId === s.spanId,
+        );
+
+        let verbHookDurantion = 0;
+        let latency = 0;
+        if (verbHookSpan) {
+          verbHookDurantion =
+            (verbHookSpan.endTimeUnixNano - verbHookSpan.startTimeUnixNano) /
+            1_000_000_000;
+        }
+
+        const [sttLatencyMs] = getSpanAttributeByName(
+          s.attributes,
+          "stt.latency_ms",
+        );
+        let endSpeechTime = 0;
+        if (!sttLatencyMs) {
+          endSpeechTime = getSilenceStartTime(start, end, channel);
+          latency = Number(
+            (end - endSpeechTime - verbHookDurantion).toFixed(2),
+          );
+        } else {
+          endSpeechTime =
+            end -
+            Number(sttLatencyMs.value.stringValue) / 1_000 -
+            verbHookDurantion;
+          latency = Number(sttLatencyMs.value.stringValue) / 1_000;
+        }

        const [sttResult] = getSpanAttributeByName(s.attributes, "stt.result");
        let att: WaveSurferSttResult;
@@ -177,12 +217,12 @@ export const Player = ({ call }: PlayerProps) => {
            transcript: data.alternatives[0].transcript,
            confidence: data.alternatives[0].confidence,
            language_code: data.language_code,
-            ...(endSpeechTime > 0 && { latency: end - endSpeechTime }),
+            latency,
          };

          const [sttResolve] = getSpanAttributeByName(
            s.attributes,
-            "stt.resolve"
+            "stt.resolve",
          );
          if (
            endSpeechTime > 0 &&
@@ -196,7 +236,7 @@ export const Player = ({ call }: PlayerProps) => {
              color: "rgba(255, 255, 0, 0.55)",
              drag: false,
              resize: false,
-              content: `${(end - endSpeechTime).toFixed(2)} sec`,
+              content: `${latency}s`,
            });

            changeRegionMouseStyle(latencyRegion, channel);
@@ -204,7 +244,7 @@ export const Player = ({ call }: PlayerProps) => {
        } else {
          const [sttResolve] = getSpanAttributeByName(
            s.attributes,
-            "stt.resolve"
+            "stt.resolve",
          );
          if (sttResolve && sttResolve.value.stringValue === "timeout") {
            att = {
@@ -242,32 +282,151 @@ export const Player = ({ call }: PlayerProps) => {
    }
  };

+  const drawTtsLatencyRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
+    if (waveSurferRegionsPluginRef.current) {
+      const r = waveSurferRegionsPluginRef.current
+        .getRegions()
+        .find((r) => r.id === s.spanId);
+      if (!r) {
+        const start =
+          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
+        let end =
+          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
+
+        const [ttsVendor] = getSpanAttributeByName(s.attributes, "tts.vendor");
+        const [ttsCache] = getSpanAttributeByName(s.attributes, "tts.cached");
+        const [streamLatency] = getSpanAttributeByName(
+          s.attributes,
+          "time_to_first_byte_ms",
+        );
+        if (streamLatency && streamLatency.value.stringValue) {
+          end = start + Number(streamLatency.value.stringValue) / 1_000;
+        }
+        if (ttsVendor && ttsCache && !Boolean(ttsCache.value.boolValue)) {
+          const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
+            id: s.spanId,
+            start: start,
+            end,
+            color: "rgba(255, 155, 0, 0.55)",
+            drag: false,
+            resize: false,
+            content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
+          });
+
+          changeRegionMouseStyle(latencyRegion, 1);
+
+          latencyRegion.on("click", () => {
+            setWaveSurferTtsLatencyData({
+              vendor: ttsVendor.value.stringValue,
+              latency: `${(end - start).toFixed(2)}s`,
+              isCached: String(ttsCache.value.boolValue),
+            });
+          });
+        }
+      }
+    }
+  };
+
+  const drawVerbHookDelayRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
+    if (waveSurferRegionsPluginRef.current) {
+      const r = waveSurferRegionsPluginRef.current
+        .getRegions()
+        .find((r) => r.id === s.spanId);
+
+      if (!r) {
+        const start =
+          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
+        const end =
+          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
+        const tmpEnd = end - start < 0.05 ? start + 0.05 : end;
+
+        const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
+          id: s.spanId,
+          start: start,
+          end: tmpEnd,
+          color: "rgba(255, 3, 180, 0.55)",
+          drag: false,
+          resize: false,
+          content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
+        });
+        const [statusCode] = getSpanAttributeByName(
+          s.attributes,
+          "http.statusCode",
+        );
+        changeRegionMouseStyle(latencyRegion, 0);
+        latencyRegion.on("click", () => {
+          setWaveSurferGatherSpeechVerbHookLatencyData({
+            statusCode: statusCode ? Number(statusCode.value.doubleValue) : 404,
+            latency: `${(end - start).toFixed(2)}s`,
+          });
+        });
+      }
+    }
+  };
+
+  function createMultiLineTextElement(text: string) {
+    const div = document.createElement("div");
+    div.style.paddingLeft = "10px";
+    div.style.paddingTop = "15px";
+    div.appendChild(document.createElement("br"));
+    div.appendChild(document.createTextNode(text));
+
+    return div;
+  }
+
  const buildWavesurferRegion = () => {
    if (jaegerRoot) {
      const spans = getSpansFromJaegerRoot(jaegerRoot);
-      const [startPoint] = getSpansByName(spans, "background-listen:listen");
+      const start = getSpansByNameRegex(spans, /background-record:listen/);
+      const startPoint = start ? start[0] : null;
      // there should be only one startPoint for background listen
      if (startPoint) {
        const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
        gatherSpans.forEach((s) => {
-          drawSttRegionForSpan(s, startPoint);
+          drawSttRegionForSpan(s, spans, startPoint);
        });

+        // Trasscription
        const transcribeSpans = getSpansByNameRegex(spans, /stt-listen:/);
        transcribeSpans.forEach((cs) => {
          // Channel start from 0
          const channel = Number(cs.name.split(":")[1]);
          drawSttRegionForSpan(
            cs,
+            spans,
            startPoint,
-            channel > 0 ? channel - 1 : channel
+            channel > 0 ? channel - 1 : channel,
          );
        });
-
+        // DTMF
        const dtmfSpans = getSpansByNameRegex(spans, /dtmf:/);
        dtmfSpans.forEach((ds) => {
          drawDtmfRegionForSpan(ds, startPoint);
        });
+        // TTS delay
+        const ttsSpans = getSpansByNameRegex(spans, /tts-generation/);
+        ttsSpans.forEach((tts) => {
+          drawTtsLatencyRegion(tts, startPoint);
+        });
+
+        // Gather verb hook delay
+        const verbHookSpans = getSpansByNameRegex(spans, /verb:hook/);
+        verbHookSpans
+          .filter((s) => {
+            const [httpBody] = getSpanAttributeByName(
+              s.attributes,
+              "http.body",
+            );
+            return (
+              httpBody.value.stringValue.includes(
+                '"reason":"speechDetected"',
+              ) ||
+              httpBody.value.stringValue.includes('"reason":"dtmfDetected"')
+            );
+          })
+          .forEach((s) => {
+            drawVerbHookDelayRegion(s, startPoint);
+          });
      }
    }
  };
@@ -388,8 +547,8 @@ export const Player = ({ call }: PlayerProps) => {
        idx <= 0
          ? 0
          : idx >= waveSurferRef.current.getDuration()
-          ? waveSurferRef.current.getDuration() - 1
-          : idx;
+            ? waveSurferRef.current.getDuration() - 1
+            : idx;
      waveSurferRef.current.setTime(value);
      setPlayBackTime(formatTime(value));
    }
@@ -487,7 +646,7 @@ export const Player = ({ call }: PlayerProps) => {
              }
            }}
          />
-          <div>Overlay STT and DTMF events</div>
+          <div>Show latencies</div>
        </label>
      </div>
      {waveSurferRegionData && (
@@ -583,6 +742,77 @@ export const Player = ({ call }: PlayerProps) => {
          </div>
        </ModalClose>
      )}
+      {waveSurferTtsLatencyData && (
+        <ModalClose handleClose={() => setWaveSurferTtsLatencyData(null)}>
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Tts Latency</strong>
+            </P>
+          </div>
+          <div className="spanDetailsWrapper">
+            <div className="spanDetailsWrapper__detailsWrapper">
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Vendor:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferTtsLatencyData.vendor}
+                </div>
+              </div>
+
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Latency:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferTtsLatencyData.latency}
+                </div>
+              </div>
+
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>From Cache:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferTtsLatencyData.isCached}
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalClose>
+      )}
+      {waveSurferGatherSpeechVerbHookLatencyData && (
+        <ModalClose
+          handleClose={() => setWaveSurferGatherSpeechVerbHookLatencyData(null)}
+        >
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Application Response Latency</strong>
+            </P>
+          </div>
+          <div className="spanDetailsWrapper">
+            <div className="spanDetailsWrapper__detailsWrapper">
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Status Code:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferGatherSpeechVerbHookLatencyData.statusCode}
+                </div>
+              </div>
+
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Latency:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferGatherSpeechVerbHookLatencyData.latency}
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalClose>
+      )}
      {deleteRecordUrl && (
        <Modal
          handleCancel={() => setDeleteRecordUrl("")}
--- a/src/containers/internal/views/recent-calls/styles.scss
+++ b/src/containers/internal/views/recent-calls/styles.scss
@@ -85,3 +85,82 @@
    margin-top: ui-vars.$px01;
  }
 }
+
+/* CallSystemLogs.css */
+
+/* Styles for the log container */
+.log-container {
+  border-radius: 8px;
+  position: relative;
+  background: #1a1a1a; /* Dark background for the container (optional, if you want the entire container dark) */
+  color: #ffffff; /* Ensure text is visible on dark background */
+}
+
+/* Styles for the log buttons container (optional, if you want to style it separately) */
+.log-buttons {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  display: flex;
+  gap: 12px;
+}
+
+/* Styles for the log content (pre element) */
+.log-content {
+  margin-top: 16px;
+  background: #1a1a1a; /* Darker background for the log content */
+
+  overflow: auto;
+  min-height: 250px;
+  max-height: 800px;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow for contrast */
+  color: #e0e0e0; /* Light gray text for visibility on dark background */
+}
+
+/* Optional: Style for individual log entries (divs within pre) */
+.log-content div {
+  margin-bottom: 10px;
+}
+
+/* Styles for log buttons */
+.log-button {
+  padding: 8px;
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background: #fff3f6; /* Light gray background for buttons, unchanged */
+  color: #da1c5c;
+  transition: transform 0.1s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.log-retrieve-button {
+  @extend .log-button;
+  border-radius: 8px;
+  width: auto;
+  height: 20px;
+}
+
+/* Hover state for buttons */
+.log-button:hover {
+  background: #d5d5d5;
+  transform: scale(1.05);
+}
+
+.log-fetch-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%; /* Adjust based on your layout */
+  gap: 10px;
+  padding: 20px;
+}
--- a/src/containers/internal/views/recent-calls/utils.ts
+++ b/src/containers/internal/views/recent-calls/utils.ts
@@ -11,12 +11,12 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
              !(
                attr.key.startsWith("telemetry") ||
                attr.key.startsWith("internal")
-              )
+              ),
          );
          value.attributes = attrs;
          spans.push(value);
        });
-      }
+      },
    );
  });
  spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
@@ -25,14 +25,14 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {

 export const getSpansByName = (
  spans: JaegerSpan[],
-  name: string
+  name: string,
 ): JaegerSpan[] => {
  return spans.filter((s) => s.name === name);
 };

 export const getSpansByNameRegex = (
  spans: JaegerSpan[],
-  pattern: RegExp
+  pattern: RegExp,
 ): JaegerSpan[] => {
  const matcher = new RegExp(pattern);
  return spans.filter((s) => matcher.test(s.name));
@@ -40,7 +40,7 @@ export const getSpansByNameRegex = (

 export const getSpanAttributeByName = (
  attr: JaegerAttribute[],
-  name: string
+  name: string,
 ): JaegerAttribute[] => {
  return attr.filter((a) => a.key === name);
 };
--- a/src/containers/internal/views/settings/admin-settings.tsx
+++ b/src/containers/internal/views/settings/admin-settings.tsx
@@ -7,14 +7,24 @@ import {
  postSystemInformation,
  deleteTtsCache,
 } from "src/api";
-import { PasswordSettings, SystemInformation, TtsCache } from "src/api/types";
-import { toastError, toastSuccess } from "src/store";
+import {
+  LogLevel,
+  PasswordSettings,
+  SystemInformation,
+  TtsCache,
+} from "src/api/types";
 import { Selector } from "src/components/forms";
-import { hasValue } from "src/utils";
-import { PASSWORD_LENGTHS_OPTIONS, PASSWORD_MIN } from "src/api/constants";
+import { hasValue, isvalidIpv4OrCidr } from "src/utils";
+import {
+  LOG_LEVEL_OPTIONS,
+  PASSWORD_LENGTHS_OPTIONS,
+  PASSWORD_MIN,
+} from "src/api/constants";
 import { Modal } from "src/components";
+import { useToast } from "src/components/toast/toast-provider";

 export const AdminSettings = () => {
+  const { toastSuccess, toastError } = useToast();
  const [passwordSettings, passwordSettingsFetcher] =
    useApiData<PasswordSettings>("PasswordSettings");
  const [systemInformation, systemInformationFetcher] =
@@ -25,9 +35,11 @@ export const AdminSettings = () => {
  const [requireDigit, setRequireDigit] = useState(false);
  const [requireSpecialCharacter, setRequireSpecialCharacter] = useState(false);
  const [domainName, setDomainName] = useState("");
+  const [privateNetworkCidr, setPrivateNetworkCidr] = useState("");
  const [sipDomainName, setSipDomainName] = useState("");
  const [monitoringDomainName, setMonitoringDomainName] = useState("");
  const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false);
+  const [logLevel, setLogLevel] = useState<LogLevel>("info");

  const handleClearCache = () => {
    deleteTtsCache()
@@ -44,10 +56,22 @@ export const AdminSettings = () => {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

+    if (privateNetworkCidr) {
+      const cidrs = privateNetworkCidr.split(",");
+      for (const cidr of cidrs) {
+        if (cidr && !isvalidIpv4OrCidr(cidr)) {
+          toastError(`Invalid private network CIDR "${cidr}"`);
+          return;
+        }
+      }
+    }
+
    const systemInformationPayload: Partial<SystemInformation> = {
-      domain_name: domainName,
-      sip_domain_name: sipDomainName,
-      monitoring_domain_name: monitoringDomainName,
+      domain_name: domainName || null,
+      sip_domain_name: sipDomainName || null,
+      monitoring_domain_name: monitoringDomainName || null,
+      private_network_cidr: privateNetworkCidr || null,
+      log_level: logLevel,
    };
    const passwordSettingsPayload: Partial<PasswordSettings> = {
      min_password_length: minPasswordLength,
@@ -61,7 +85,7 @@ export const AdminSettings = () => {
      .then(() => {
        passwordSettingsFetcher();
        systemInformationFetcher();
-        toastSuccess("Password settings successfully updated");
+        toastSuccess("Admin settings updated successfully");
      })
      .catch((error) => {
        toastError(error.msg);
@@ -72,17 +96,27 @@ export const AdminSettings = () => {
    if (hasValue(passwordSettings)) {
      setRequireDigit(passwordSettings.require_digit > 0 ? true : false);
      setRequireSpecialCharacter(
-        passwordSettings.require_special_character > 0 ? true : false
+        passwordSettings.require_special_character > 0 ? true : false,
      );
      if (passwordSettings.min_password_length) {
        setMinPasswordLength(passwordSettings.min_password_length);
      }
    }
-    if (hasValue(systemInformation)) {
+    if (systemInformation?.domain_name) {
      setDomainName(systemInformation.domain_name);
+    }
+    if (systemInformation?.sip_domain_name) {
      setSipDomainName(systemInformation.sip_domain_name);
+    }
+    if (systemInformation?.monitoring_domain_name) {
      setMonitoringDomainName(systemInformation.monitoring_domain_name);
    }
+    if (systemInformation?.private_network_cidr) {
+      setPrivateNetworkCidr(systemInformation.private_network_cidr);
+    }
+    if (systemInformation?.log_level) {
+      setLogLevel(systemInformation.log_level);
+    }
  }, [passwordSettings, systemInformation]);

  return (
@@ -107,6 +141,15 @@ export const AdminSettings = () => {
          value={sipDomainName}
          onChange={(e) => setSipDomainName(e.target.value)}
        />
+        <label htmlFor="name">Private Network CIDR</label>
+        <input
+          id="private_network_cidr"
+          type="text"
+          name="private_network_cidr"
+          placeholder="Private network CIDR"
+          value={privateNetworkCidr}
+          onChange={(e) => setPrivateNetworkCidr(e.target.value)}
+        />
        <label htmlFor="name">Monitoring Domain Name</label>
        <input
          id="monitor_domain_name"
@@ -116,6 +159,17 @@ export const AdminSettings = () => {
          value={monitoringDomainName}
          onChange={(e) => setMonitoringDomainName(e.target.value)}
        />
+
+        <label htmlFor="audio_format">Log Level</label>
+        <Selector
+          id={"audio_format"}
+          name={"audio_format"}
+          value={logLevel}
+          options={LOG_LEVEL_OPTIONS}
+          onChange={(e) => {
+            setLogLevel(e.target.value as LogLevel);
+          }}
+        />
      </fieldset>
      <fieldset>
        <label htmlFor="min_password_length">Min password length</label>
--- a/src/containers/internal/views/settings/index.tsx
+++ b/src/containers/internal/views/settings/index.tsx
@@ -27,7 +27,7 @@ export const Settings = ({ currentServiceProvider }: SettingsProps) => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage Settings"
+    "You do not have permissions to manage Settings",
  );

  return (
--- a/src/containers/internal/views/settings/service-provider-settings.tsx
+++ b/src/containers/internal/views/settings/service-provider-settings.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { P, Button, ButtonGroup } from "@jambonz/ui-kit";

-import { useDispatch, toastSuccess, toastError } from "src/store";
+import { useDispatch } from "src/store";
 import { hasLength } from "src/utils";
 import {
  putServiceProvider,
@@ -15,6 +15,7 @@ import { Checkzone, LocalLimits } from "src/components/forms";
 import { withSelectState } from "src/utils";
 import type { Limit, ServiceProvider } from "src/api/types";
 import { removeActiveSP } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 export type ServiceProviderSettingsProps = {
  serviceProviders: ServiceProvider[];
@@ -25,6 +26,7 @@ export const ServiceProviderSettings = ({
  serviceProviders,
  currentServiceProvider,
 }: ServiceProviderSettingsProps) => {
+  const { toastSuccess, toastError } = useToast();
  const dispatch = useDispatch();
  const [limits, refetchLimits] = useServiceProviderData<Limit[]>("Limits");
  const [name, setName] = useState("");
@@ -56,13 +58,13 @@ export const ServiceProviderSettings = ({
            return limit.quantity === ""
              ? deleteServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit.category
+                  limit.category,
                )
              : postServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit
+                  limit,
                );
-          })
+          }),
        )
          .then(() => {
            refetchLimits();
@@ -93,7 +95,7 @@ export const ServiceProviderSettings = ({
          <>
            Deleted service provider{" "}
            <strong>{currentServiceProvider.name}</strong>
-          </>
+          </>,
        );
        removeActiveSP();
      })
@@ -193,5 +195,5 @@ export const ServiceProviderSettings = ({
 };

 export default withSelectState(["serviceProviders", "currentServiceProvider"])(
-  ServiceProviderSettings
+  ServiceProviderSettings,
 );
--- a/src/containers/internal/views/speech-services/edit.tsx
+++ b/src/containers/internal/views/speech-services/edit.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { H1 } from "@jambonz/ui-kit";

 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { SpeechServiceForm } from "./form";

 import type { SpeechCredential } from "src/api/types";
@@ -11,6 +11,7 @@ import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { Scope } from "src/store/types";
 import { ROUTE_INTERNAL_SPEECH } from "src/router/routes";
 import { useParams } from "react-router-dom";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditSpeechService = () => {
  const params = useParams();
@@ -18,23 +19,24 @@ export const EditSpeechService = () => {
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [url, setUrl] = useState("");
  const [data, refetch, error] = useApiData<SpeechCredential>(url);
+  const { toastError } = useToast();

  useScopedRedirect(
    Scope.account,
    ROUTE_INTERNAL_SPEECH,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  const getUrlForSpeech = () => {
    if (user && user?.scope === USER_ACCOUNT) {
      setUrl(
-        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`
+        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`,
      );
    } else {
      setUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`,
      );
    }
  };
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
--- a/src/containers/internal/views/speech-services/index.tsx
+++ b/src/containers/internal/views/speech-services/index.tsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";

 import { USER_ACCOUNT } from "src/api/constants";
 import { AccountFilter, Icons, Section, Spinner } from "src/components";
-import { useSelectState, toastError, toastSuccess } from "src/store";
+import { useSelectState } from "src/store";
 import {
  deleteSpeechService,
  useServiceProviderData,
@@ -12,7 +12,6 @@ import {
 } from "src/api";
 import { ROUTE_INTERNAL_SPEECH } from "src/router/routes";
 import {
-  getHumanDateTime,
  isUserAccountScope,
  hasLength,
  hasValue,
@@ -27,8 +26,10 @@ import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
 import { VENDOR_CUSTOM } from "src/vendor";
+import { useToast } from "src/components/toast/toast-provider";

 export const SpeechServices = () => {
+  const { toastError, toastSuccess } = useToast();
  const user = useSelectState("user");
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [apiUrl, setApiUrl] = useState("");
@@ -49,27 +50,27 @@ export const SpeechServices = () => {
      ? credentials.filter((credential) =>
          accountSid
            ? credential.account_sid === accountSid
-            : credential.account_sid === null
+            : credential.account_sid === null,
        )
      : [];
  }, [accountSid, accounts, credentials]);

  const filteredCredentials = useFilteredResults<SpeechCredential>(
    filter,
-    credentialsFiltered
+    credentialsFiltered,
  );

  const handleDelete = () => {
    if (credential && currentServiceProvider) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to delete these Speech Credentials"
+          "You do not have permissions to delete these Speech Credentials",
        );
        return;
      }
      deleteSpeechService(
        currentServiceProvider.service_provider_sid,
-        credential.speech_credential_sid
+        credential.speech_credential_sid,
      )
        .then(() => {
          setCredential(null);
@@ -81,7 +82,7 @@ export const SpeechServices = () => {
                {credential.vendor}
                {credential.label ? ` (${credential.label})` : ""}
              </strong>{" "}
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -97,7 +98,7 @@ export const SpeechServices = () => {
      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
    } else {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`,
      );
    }
  }, [currentServiceProvider, accountSid]);
@@ -149,7 +150,7 @@ export const SpeechServices = () => {
                            Vendor:{" "}
                            {credential.vendor.startsWith(VENDOR_CUSTOM)
                              ? credential.vendor.substring(
-                                  VENDOR_CUSTOM.length + 1
+                                  VENDOR_CUSTOM.length + 1,
                                )
                              : credential.vendor}
                          </strong>
@@ -178,24 +179,6 @@ export const SpeechServices = () => {
                          <span>{getUsage(credential)}</span>
                        </div>
                      </div>
-                      <div>
-                        <div
-                          className={`i txt--${
-                            credential.last_used ? "teal" : "grey"
-                          }`}
-                        >
-                          {credential.last_used ? (
-                            <Icons.CheckCircle />
-                          ) : (
-                            <Icons.XCircle />
-                          )}
-                          <span>
-                            {credential.last_used
-                              ? getHumanDateTime(credential.last_used)
-                              : "Never used"}
-                          </span>
-                        </div>
-                      </div>
                      <div>
                        <CredentialStatus cred={credential} />
                      </div>
--- a/src/containers/internal/views/speech-services/status.tsx
+++ b/src/containers/internal/views/speech-services/status.tsx
@@ -37,8 +37,8 @@ export const CredentialStatus = ({
            status === CRED_OK
              ? "teal"
              : status === CRED_NOT_TESTED
-              ? "jean"
-              : "jam"
+                ? "jean"
+                : "jam"
          }`}
          title={status === CRED_NOT_TESTED ? notTestedTxt : reason}
        >
@@ -61,11 +61,11 @@ export const CredentialStatus = ({
  useEffect(() => {
    if (user && user.scope === USER_ACCOUNT) {
      setApiUrl(
-        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
+        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
      );
    } else if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
      );
    }
  }, [user, cred, currentServiceProvider]);
--- a/src/containers/internal/views/speech-services/utils.ts
+++ b/src/containers/internal/views/speech-services/utils.ts
@@ -14,7 +14,7 @@ export const getObscuredGoogleServiceKey = (key: GoogleServiceKey) => {
  return {
    ...key,
    private_key: `${keyHeader}${getObscuredSecret(
-      key.private_key.slice(keyHeader.length, key.private_key.length)
+      key.private_key.slice(keyHeader.length, key.private_key.length),
    )}`,
  };
 };
@@ -23,15 +23,15 @@ export const getUsage = (cred: SpeechCredential) => {
  return cred.use_for_tts && cred.use_for_stt
    ? "TTS/STT"
    : cred.use_for_tts
-    ? "TTS"
-    : cred.use_for_stt
-    ? "STT"
-    : "Not in use";
+      ? "TTS"
+      : cred.use_for_stt
+        ? "STT"
+        : "Not in use";
 };

 export const getStatus = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult
+  testResult: CredentialTestResult,
 ): CredentialStatus => {
  if (
    (cred.use_for_tts &&
@@ -60,7 +60,7 @@ export const getStatus = (

 export const getReason = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult
+  testResult: CredentialTestResult,
 ) => {
  const ok = "Connection test successful";

--- a/src/containers/internal/views/users/edit.tsx
+++ b/src/containers/internal/views/users/edit.tsx
@@ -5,11 +5,12 @@ import { useParams } from "react-router-dom";
 import { UserForm } from "./form";
 import { useApiData } from "src/api";
 import { User } from "src/api/types";
-import { toastError } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";

 export const EditUser = () => {
  const params = useParams();
  const [data, refetch, error] = useApiData<User>(`Users/${params.user_sid}`);
+  const { toastError } = useToast();

  /** Handle error toast at top level... */
  useEffect(() => {
--- a/src/containers/internal/views/users/form.tsx
+++ b/src/containers/internal/views/users/form.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
  deleteUser,
  postFetch,
@@ -38,12 +38,14 @@ import type {
 } from "src/api/types";
 import type { IMessage } from "src/store/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";

 type UserFormProps = {
  user?: UseApiDataMap<User>;
 };

 export const UserForm = ({ user }: UserFormProps) => {
+  const { toastSuccess, toastError } = useToast();
  const { signout } = useAuth();
  const navigate = useNavigate();
  const currentUser = useSelectState("user");
@@ -55,12 +57,13 @@ export const UserForm = ({ user }: UserFormProps) => {
  const [email, setEmail] = useState("");
  const [initialPassword, setInitialPassword] = useState("");
  const [scope, setScope] = useState<UserScopes | null>(
-    currentUser?.scope || null
+    currentUser?.scope || null,
  );
  const [isActive, setIsActive] = useState(true);
  const [forceChange, setForceChange] = useState(true);
  const [modal, setModal] = useState(false);
  const [accountSid, setAccountSid] = useState("");
+  const [isViewOnly, setIsViewOnly] = useState(false);

  const handleCancel = () => {
    setModal(false);
@@ -80,7 +83,7 @@ export const UserForm = ({ user }: UserFormProps) => {
          toastSuccess(
            <>
              Deleted user <strong>{user?.data?.name}</strong>
-            </>
+            </>,
          );
          handleSelfDetete();
        })
@@ -115,6 +118,7 @@ export const UserForm = ({ user }: UserFormProps) => {
        initial_password: initialPassword,
        force_change: forceChange,
        is_active: isActive,
+        is_view_only: isViewOnly,
        service_provider_sid:
          scope === USER_ADMIN && currentUser?.scope === USER_ADMIN
            ? null
@@ -145,6 +149,7 @@ export const UserForm = ({ user }: UserFormProps) => {
        initial_password: initialPassword || null,
        force_change: forceChange,
        is_active: isActive,
+        is_view_only: isViewOnly,
        service_provider_sid:
          scope === USER_ADMIN && currentUser?.scope === USER_ADMIN
            ? null
@@ -172,6 +177,7 @@ export const UserForm = ({ user }: UserFormProps) => {
      setName(user.data.name);
      setForceChange(!!user.data.force_change);
      setIsActive(!!user.data.is_active);
+      setIsViewOnly(!!user.data.is_view_only);
      setEmail(user.data.email);
      setScope(getUserScope(user.data));
      if (user.data.account_sid) {
@@ -202,7 +208,8 @@ export const UserForm = ({ user }: UserFormProps) => {
                options={
                  currentUser?.scope === USER_SP
                    ? USER_SCOPE_SELECTION.filter(
-                        (opt) => opt.value !== USER_ADMIN && opt.value !== "all"
+                        (opt) =>
+                          opt.value !== USER_ADMIN && opt.value !== "all",
                      )
                    : USER_SCOPE_SELECTION.filter((e) => e.value !== "all")
                }
@@ -252,6 +259,16 @@ export const UserForm = ({ user }: UserFormProps) => {
                />
                <div>User is active</div>
              </label>
+              <label htmlFor="is_view_only" className="chk">
+                <input
+                  id="is_view_only"
+                  name="is_view_only"
+                  type="checkbox"
+                  checked={isViewOnly}
+                  onChange={(e) => setIsViewOnly(e.target.checked)}
+                />
+                <div>View-only User</div>
+              </label>
            </fieldset>
          )}
          <fieldset>
@@ -282,6 +299,20 @@ export const UserForm = ({ user }: UserFormProps) => {
              onChange={(e) => setEmail(e.target.value)}
            />
          </fieldset>
+          {!user && (
+            <fieldset>
+              <label htmlFor="is_view_only" className="chk">
+                <input
+                  id="is_view_only"
+                  name="is_view_only"
+                  type="checkbox"
+                  checked={isViewOnly}
+                  onChange={(e) => setIsViewOnly(e.target.checked)}
+                />
+                <div>View-only User</div>
+              </label>
+            </fieldset>
+          )}
          <fieldset>
            <label htmlFor="initial_password">
              Temporary password
--- a/src/containers/internal/views/users/index.tsx
+++ b/src/containers/internal/views/users/index.tsx
@@ -60,7 +60,7 @@ export const Users = () => {

    if (scopeFilter !== "all" && accountSid) {
      return serviceProviderUsers?.filter(
-        (e) => e.scope === scopeFilter && accountSid === e.account_sid
+        (e) => e.scope === scopeFilter && accountSid === e.account_sid,
      );
    }

@@ -71,7 +71,7 @@ export const Users = () => {
  }, [accountSid, scopeFilter, users, accounts, currentServiceProvider]);

  const filteredUsers = useFilteredResults<User>(filter, usersFiltered)?.sort(
-    sortUsersAlpha
+    sortUsersAlpha,
  );

  useEffect(() => {
@@ -137,8 +137,8 @@ export const Users = () => {
                    {user.scope === USER_ADMIN
                      ? "All"
                      : user.account_name
-                      ? `Account: ${user.account_name}`
-                      : `Service Provider: ${user.service_provider_name}`}
+                        ? `Account: ${user.account_name}`
+                        : `Service Provider: ${user.service_provider_name}`}
                  </div>
                  <div className="item__actions">
                    <Link
--- a/src/containers/login/create-password.tsx
+++ b/src/containers/login/create-password.tsx
@@ -63,7 +63,7 @@ export const CreatePassword = () => {
              <li>Contain at least one special character</li>
            )}
          </ul>
-        </>
+        </>,
      );
      return;
    }
@@ -90,7 +90,7 @@ export const CreatePassword = () => {
            navigate(
              userData.scope !== USER_ACCOUNT
                ? ROUTE_INTERNAL_ACCOUNTS
-                : ROUTE_INTERNAL_APPLICATIONS
+                : ROUTE_INTERNAL_APPLICATIONS,
            );
          } else {
            setMessage(MSG_SOMETHING_WRONG);
--- a/src/containers/login/forgot-password.tsx
+++ b/src/containers/login/forgot-password.tsx
@@ -8,9 +8,10 @@ import { useNavigate } from "react-router-dom";
 import { MSG_SOMETHING_WRONG } from "src/constants";

 import { ROUTE_LOGIN } from "src/router/routes";
-import { toastSuccess } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";

 export const ForgotPassword = () => {
+  const { toastSuccess } = useToast();
  const [message, setMessage] = useState("");
  const [email, setEmail] = useState("");
  const navigate = useNavigate();
@@ -24,7 +25,7 @@ export const ForgotPassword = () => {
      .then((response) => {
        if (response.status === StatusCodes.NO_CONTENT) {
          toastSuccess(
-            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password."
+            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password.",
          );
          navigate(ROUTE_LOGIN);
        } else {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hoan Luu Huu	e6c5a18c87	fixed reg trunk validation cannot move tab and focus to missing fields (#574 ) * fixed reg trunk validation cannot move tab and focus to missing fields * fixed reg trunk validation cannot move tab and focus to missing fields * wip	2025-10-27 07:21:39 -04:00
Hoan Luu Huu	19742ab67e	fixed cannot saved auth trunk (#573 )	2025-10-24 07:22:36 -04:00
Hoan Luu Huu	53d0c0b510	Carrier change for trunk type (#564 ) * support carrier credential authentication * wip * wip * wip * wip * wip * change trunk type to selector * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip	2025-10-21 06:49:25 -04:00
Hoan Luu Huu	7a0eb71bae	support gladia stt (#572 )	2025-10-20 04:47:55 -04:00
Hoan Luu Huu	6aae8d9930	support soundhound stt (#567 ) * support houndify stt * wip * wip	2025-10-14 00:52:06 -04:00
Hoan Luu Huu	a70a1bf614	support elevenlabs different endpoint (#571 ) * support elevenlabs different endpoint * wip	2025-10-09 08:20:39 -04:00
Dave Horton	975a787f1e	review Preview now that Flux is GA (#570 )	2025-10-04 20:12:15 -04:00
Hoan Luu Huu	46e220f28b	support deepgram flux (#569 ) * support deepgram flux * wip	2025-10-03 10:10:13 -04:00
Hoan Luu Huu	6836a99635	add special field for Carriers in env vars (#561 ) * add special field for Carriers in env vars * wip * wip	2025-09-05 08:04:24 -04:00
Hoan Luu Huu	f7f4a2e7b1	cannot delete carrier because of undefined lcrs list (#563 )	2025-09-01 08:12:31 -04:00
Hoan Luu Huu	f1f8a7d808	support resemble tts (#559 ) * support resemble tts * wip	2025-08-13 08:17:18 -04:00
sathish kumar pasham	9dd9cf867a	556 resolve security vulnerabilities by upgrading the vite library (#557 )	2025-08-06 09:30:22 -04:00
Hoan Luu Huu	a372c09bc6	support deepgram EU-hosted STT (#555 ) * support deepgram EU-hosted STT * wip * fix review comment * wip * wip	2025-08-04 07:24:33 -04:00
Hoan Luu Huu	031e5e923e	support deepgram river (#547 )	2025-07-29 13:54:22 -04:00
Hoan Luu Huu	e02904f7f3	Draw STT latency to recording player by using stt metrics from opentelemetry (#551 ) * support showing stt latency from otel stt.latency_ms * wip	2025-07-29 09:57:35 -04:00
Dave Horton	7eaf25d13f	bump version	2025-07-15 11:42:26 -04:00
Hoan Luu Huu	6e4d663337	fixed deprecated api when migrating to sass 3 (#549 )	2025-07-15 08:27:02 -04:00
sathish kumar pasham	c0a40dd784	resolve security vulnerabilities (#546 )	2025-07-09 14:57:36 -04:00
Hoan Luu Huu	536bf0f471	support assemblyai v3 (#540 ) * support assemblyai v3 * wip	2025-07-01 15:48:17 -04:00
Sam Machin	aaf1ede5c2	Update form.tsx (#545 )	2025-07-01 07:57:05 -04:00
Hoan Luu Huu	24d646f705	support inworld tts (#537 ) * support inworld tts * wip	2025-06-27 07:13:51 -04:00
Hoan Luu Huu	c648afcb1a	support mod cartesia transcribe (#536 )	2025-06-17 20:53:45 +02:00
Hoan Luu Huu	4eca59d9bd	fix regression bug: new app does not save tts voice by default (#535 )	2025-06-06 14:50:34 +02:00
Hoan Luu Huu	4a293ae7da	appEnvs should support enum dropdown (#532 )	2025-06-02 07:41:18 -04:00
Hoan Luu Huu	03e52e3dc5	fixed Cannot delete Carrier, show message that there is link to LCR (#533 ) * fixed Cannot delete Carrier, show message that there is link to LCR * wip	2025-06-02 07:14:01 -04:00
Hoan Luu Huu	9ab592a898	fixed admin filter phone number by SP (#531 )	2025-05-30 07:24:31 -04:00
Hoan Luu Huu	1723326890	fix app crash when create new speech credential (#530 ) * fix app crash when create new speech credential * fix app crash when create new speech credential	2025-05-29 08:31:41 -04:00
Hoan Luu Huu	504825d699	fix app envs does not take default value and filepicker is required even value is available (#529 )	2025-05-28 19:58:21 -04:00
Hoan Luu Huu	e65d9b9db6	some S3 compatible storage systems have a region parameter (#524 ) * some S3 compatible storage systems have a region parameter * wip * wip * replace current toastMethod by new toastProvider * wip * fix failing testcase * wip	2025-05-28 10:03:39 -04:00
Hoan Luu Huu	10818493bc	support deepgram stt model (#528 ) * support deepgram stt model * wip * wip	2025-05-28 08:01:20 -04:00
Hoan Luu Huu	844eec953c	UI improvement. (#521 ) * don't remove service provider sid and filteredAccountSid when logout * support fetching applications with pagination * applications wip * support pagination for voip carriers * wip * support phone number pagination * wip * wip * wip * wip * wip * wip * wip * wip * wip	2025-05-28 07:28:52 -04:00
Hoan Luu Huu	19620116b5	support uiHInt property in env vars (#526 ) * support uiHInt property in env vars * wip * remove placeholder for app envs input	2025-05-25 19:34:29 -04:00
Hoan Luu Huu	36f22e2075	fix recordAllCalls show wrong bucket region (#522 )	2025-05-22 07:25:17 -04:00
Hoan Luu Huu	8b2bde4e11	support tier pricing (#520 )	2025-05-18 14:00:07 -04:00
Dave Horton	0c35321c1f	update version	2025-05-14 15:40:35 -04:00
Hoan Luu Huu	ce07e89da5	Add env var to defer full retrieval of phone numbers (#518 ) * Add env var to defer full retrieval of phone numbers * wip * wip * wip	2025-05-14 07:55:16 -04:00
Hoan Luu Huu	3e6ef5346e	fixed carrier sip proxy can't add port (#517 )	2025-05-13 07:51:36 -04:00
Vasudev Anubrolu	94a873cffb	feat/864-playht on prem conditional block (#515 ) * feat/864-playht on prem conditional block * feat/864 playht on prem condition for checkobox --------- Co-authored-by: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>	2025-05-10 10:35:41 -04:00
Hoan Luu Huu	020b11e8ef	support App envs obscured input text (#516 ) * support App envs obscured input text * wip	2025-05-10 09:13:23 -04:00
Hoan Luu Huu	46727f621b	fix enable recording feature replace obscurbed value to input text after user edit it and test (#514 )	2025-05-09 07:43:42 -04:00
Hoan Luu Huu	35f7661f45	fixed PUT of env_vars in Applications should not stringify (#513 )	2025-05-08 20:25:31 -04:00
Vasudev Anubrolu	0a91bb09a5	feat/864 playht on prem (#508 ) * feat/864 playht on prem * feat/864 playht on prem null check --------- Co-authored-by: vasudevan-Kore <vasudev.anubrolu@kore.com>	2025-05-08 12:26:39 -04:00
Hoan Luu Huu	70a0c2d7b2	support applicatin env vars (#509 ) * support applicatin env vars * wip * wip * wip * wip * wip	2025-05-08 08:41:05 -04:00
Hoan Luu Huu	db3a0cc646	support rimelabs arcana (#510 )	2025-05-07 07:26:57 -04:00
Sam Machin	94181873f3	Disable password managers on some password forms (#503 ) * Update index.tsx add the data-lpignore attribute to the password component and remove redundant {} on autoComplete * Update index.tsx * add other password managers and disable ignore on main login	2025-04-11 08:19:46 -04:00
rammohan-y	3437d7f3d7	Feat/371 view only user checkbox (#478 ) * feat/371 added read-only checkbox * wip * wip-2 * renamed is_read_only to is_view_only	2025-04-01 09:29:26 -04:00
rammohan-y	38128b1531	fixed error when selecting yesterday option from date filter, also added more options in the filter (#500 )	2025-04-01 09:21:03 -04:00
Hoan Luu Huu	f9e4c241f3	support openAi stt (#496 ) * support openAi stt * wip * wip * add back model selection to openai	2025-03-28 10:15:27 -04:00
Hoan Luu Huu	c4be87353c	fix: application synthsizer configuraiton is shown different than data stored in db when view application. (#493 )	2025-03-17 07:24:51 -04:00
Hoan Luu Huu	9c9699ea69	improvements when entering application call hook (#489 )	2025-03-10 09:26:27 -04:00
Hoan Luu Huu	e48fce08d4	support showing call cloudwatch logs (#490 ) * support showing call cloudwatch logs * wip * fix review comments * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip	2025-03-10 08:35:18 -04:00
Hoan Luu Huu	e36b031c76	filter carrier based on account_sid when creating phone number (#492 )	2025-03-06 07:41:50 -05:00
Hoan Luu Huu	bf87e4fb80	Feat/gh 482 (#488 ) * remove messaging hook from application * remove messaging hook from application	2025-02-26 19:02:54 -05:00
Hoan Luu Huu	b8140ba0d6	Support voip carrier sip proxy (#484 ) * Support voip carrier sip proxy * fixed review comment	2025-02-17 09:47:02 -05:00
Hoan Luu Huu	9fd847015e	rime labs support new voices (#483 )	2025-02-07 07:22:45 -05:00
Hoan Luu Huu	c237b7e7f2	support voxist stt (#480 )	2025-02-05 08:33:12 -05:00
Hoan Luu Huu	48b3e14076	support recents call dropdown filter to have yesterday option (#463 ) * support recents call dropdown filter to have yesterday option * fix review comment	2025-01-17 09:39:47 -05:00
rammohan-y	db08badb9b	Feat/473: TypeaheadSelector component (#474 ) * feat/473: introduced typeadhed-selector component and used in ApplicationSelect, AccountSelect components * making selectedIndex as 0 if it is below 0 * feat/473: fixed styles * made carrier selector as typeahead selector * converted account-filter to use typeahead-selector * styles refactoring * updated test cases * added typeahead test case * added more test cases for typeahead account filter * feat/473: introduced typeadhed-selector component and used in ApplicationSelect, AccountSelect components * making selectedIndex as 0 if it is below 0 * feat/473: fixed styles * made carrier selector as typeahead selector * converted account-filter to use typeahead-selector * styles refactoring * updated test cases * added typeahead test case * added more test cases for typeahead account filter	2025-01-16 08:18:40 -05:00
Dave Horton	423c8de513	update deps	2025-01-14 10:47:51 -05:00
Hoan Luu Huu	668a642b09	support custom tts streaming (#476 ) * support custom tts streaming * support custom tts streaming vendor * fix review comment	2025-01-14 08:36:46 -05:00
Hoan Luu Huu	411eb4ece8	support tts cartesia (#471 )	2024-12-19 18:41:53 -05:00
Hoan Luu Huu	8d4ffddddc	support carrier dtmf type selection (#465 ) * support carrier dtmf type selection * fix review comments	2024-11-26 20:24:26 -05:00
rammohan-y	294b7b2058	feat/940: Removed last_used column from speech services (#460 )	2024-11-22 07:59:13 -05:00
Hoan Luu Huu	e32664d0e0	fixed recents call show call from another account (#467 )	2024-11-13 21:25:48 -05:00
Hoan Luu Huu	ae8b4ae124	support add google voice cloning key (#461 ) * support add google voice cloning key * fix bugs on google voice cloning * wip * fixed google custom voice	2024-11-04 07:10:59 -05:00
Hoan Luu Huu	a586771ea6	support playht3.0 languages (#459 ) * support playht3.0 languages * wip	2024-10-16 07:21:36 -04:00
Hoan Luu Huu	7aaea04d3c	support speechmatics speechcredential (#458 ) * support speechmatics * support speechmatics regions * add env VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS	2024-10-11 08:58:23 -04:00
Hoan Luu Huu	f1d2ed8abd	allow system information contains log level and account has enable_debug_log (#457 ) * sip gateways support inbound pad crypto * allow system information contains log level and account has enable_debug_log * only admin can set account log level	2024-10-07 09:51:38 -04:00
Hoan Luu Huu	d7d61a769d	sorting application name in applications index, phone number application selection (#455 ) * sip gateways support inbound pad crypto * sorting application name in applications index, phone number application selection	2024-10-03 10:23:17 -04:00
Hoan Luu Huu	c9da7946f3	sip gateways support inbound pad crypto (#452 )	2024-09-11 09:37:02 +01:00
Hoan Luu Huu	5755cd8886	support admin settings private network CIDR (#447 ) * support admin settings private network CIDR * support admin settings private network CIDR * fix review comment	2024-08-14 18:30:24 -04:00
Hoan Luu Huu	786327a0b9	support deepgram on-prem (#444 )	2024-08-07 07:24:35 -04:00
Hoan Luu Huu	2c390715d8	Feat/rid of env (#443 ) * Get rid of VITE_API_BASE_URL * wip * wip	2024-07-15 08:58:22 -04:00
Hoan Luu Huu	dcdc2c0808	add use sips scheme to outbound tls gateway (#439 ) * add use sips scheme to outbound tls gateway * update license	2024-06-15 09:13:04 -04:00
Hoan Luu Huu	a3c48e7efb	support verbio speech (#434 )	2024-05-29 07:57:05 -04:00
Hoan Luu Huu	6b9167e6b8	support speech aws polly by roleArn (#428 ) * support speech aws polly by roleArn * add 3 types of aws poly credential * wip	2024-05-02 07:58:02 -04:00
Hoan Luu Huu	e7889e1ad3	fix send OPTIONS ping mess the layout (#431 )	2024-04-30 07:43:44 -04:00
Hoan Luu Huu	1111e93918	Send options ping sip gateway (#363 ) * wip * up options ping * update review comments	2024-04-15 07:19:35 -04:00
Hoan Luu Huu	4df5709c10	print streaming tts span details (#426 ) * print streaming tts span details * wip	2024-04-14 09:15:52 -04:00
Hoan Luu Huu	760ddd64bb	support mod_rimelabs_tts (#425 )	2024-04-12 07:11:44 -04:00
Hoan Luu Huu	bd8612bb67	fix playht voice engine is not correctly display (#424 )	2024-04-09 06:53:53 -04:00
Hoan Luu Huu	bc68eb8e71	support mod_playht_tts (#423 ) * support mod_playht_tts * wip * wip * fix code style	2024-04-08 10:24:06 -04:00
Dave Horton	ea2713a021	update deps (#422 ) * update deps * prettier * wip	2024-04-07 18:42:42 -04:00
Dave Horton	1d1909732f	Revert "register use tls (#418 )" This reverts commit `d3354bbe9d`.	2024-04-06 13:48:50 -04:00
Hoan Luu Huu	d3354bbe9d	register use tls (#418 ) * register use tls * update Use SIP over TLS label	2024-04-04 08:03:12 -04:00
Hoan Luu Huu	d95b8073d3	update azure speech regions (#416 )	2024-04-01 07:35:33 -04:00
Hoan Luu Huu	e8355a1dd3	issue 409, shoud not get Invoices in self-hosted system (#412 )	2024-03-19 07:23:10 -04:00
Hoan Luu Huu	8be61ddfad	remove use_stream in elevenlabs and whisper speech (#406 )	2024-02-20 08:01:12 -05:00
Dave Horton	05c1d9efaa	prettier fix	2024-02-12 09:03:12 -05:00
Dave Horton	01a5476dfe	update github actions	2024-02-12 08:57:49 -05:00
Hoan Luu Huu	9d2fee64e6	Support deepgram onprem (#398 ) * Support deepgram onprem * wip * wip	2024-02-12 08:52:54 -05:00
Hoan Luu Huu	3a87f5f1c2	support use_streaming elevenlabs and whisper (#396 )	2024-02-12 08:16:31 -05:00
Hoan Luu Huu	a991b56a4e	Fix/speech selection after updating application (#395 ) * fix speech selection show app languge and voice * wip * wip * wip * wip	2024-01-27 11:26:37 -05:00
Dave Horton	6e14207327	sync with change of property name to time_to_first_byte_ms (#394 )	2024-01-25 13:16:42 -05:00
Hoan Luu Huu	8d8d46e76e	draw tts region label to lower possition (#393 )	2024-01-24 19:48:56 -05:00
Hoan Luu Huu	7f72d739cd	Fix/tts region use tts_time_to_first_byte streaming api (#391 ) * tts region tts_time_to_first_byte_ms * wip	2024-01-24 10:19:46 -05:00
Hoan Luu Huu	c804d60664	wavesurfer region use s instead of sec (#390 )	2024-01-24 08:44:31 -05:00
Hoan Luu Huu	df3fc8f2b7	playback latency region on wavesurfer (#387 ) * playback latency region on wavesurfer * remove start-audio region	2024-01-22 20:31:02 -05:00
Hoan Luu Huu	65e5b511c3	gather speech verb hook latency (#383 ) * gather speech verb hook latency * wip	2024-01-17 12:37:36 -05:00
Hoan Luu Huu	dc519bdef9	fix remove speech label, cause application save wrong label (#384 ) * fix remove speech label, cause application save wrong label * fix microsoft custom_tts input	2024-01-17 09:17:25 -05:00
Hoan Luu Huu	af1ba3a15c	fix app cannot set elevenlab tts (#386 )	2024-01-17 07:30:36 -05:00
Hoan Luu Huu	67b7792d04	tts options should change if language is changed (#381 )	2024-01-14 21:48:43 -05:00
Hoan Luu Huu	c5e7eb0d23	fix stt/tts regoin on wrong position (#380 ) * fix stt/tts regoin on wrong position * wip * fix speech credentials does not choose default model * fix speech credentials does not choose default model	2024-01-13 11:08:07 -05:00
Hoan Luu Huu	6ddcb82adc	update jambonz cloud free plan subscription (#379 )	2024-01-12 09:24:10 -05:00
Hoan Luu Huu	8b9c7ca9c0	Feat/tts stt voices languages from api server (#376 ) * support fetching tts/stt language and voice from api server * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip	2024-01-12 07:34:22 -05:00
Hoan Luu Huu	353c7cfff8	update google tts language (#375 )	2024-01-05 07:18:39 -05:00
Hoan Luu Huu	7828dc3827	fix default value for elevenlab optimize_streaming_latency (#374 )	2024-01-03 07:21:29 -05:00
Hoan Luu Huu	213267f682	fix, change synthLange does not update synthVoice (#372 )	2023-12-27 09:37:19 -05:00
Hoan Luu Huu	cf056ae6f1	fix issue that when speech has label, save application should use the first label in the list (#371 )	2023-12-27 09:33:44 -05:00
Hoan Luu Huu	1c16d707ca	fix deepgram tts default model and update stt languages (#370 )	2023-12-26 18:48:59 -05:00
Hoan Luu Huu	2f2e58e180	support deepgram (#369 ) * support deepgram * wip	2023-12-26 07:53:13 -05:00
Hoan Luu Huu	eae674b992	fix application is blank page if choosing custom speech vendor (#361 )	2023-12-06 09:06:57 -05:00
Hoan Luu Huu	aa7889a0d8	tts latency feature (#359 ) * tts latency feature * fix review comment	2023-12-05 20:33:53 -05:00
Hoan Luu Huu	a892550b06	elevenlabs new model and options (#357 ) * elevenlabs new model and options * beautify * fix review comments	2023-11-30 10:20:35 -05:00
Hoan Luu Huu	053f8e509f	update azure voices (#356 )	2023-11-24 09:18:06 -05:00
Hoan Luu Huu	fc40695828	fix carrier registration status (#354 )	2023-11-23 22:01:37 -05:00