feat assembly ai

feat google custom voice (#338 )
2026-01-25 02:08:19 +00:00 · 2023-11-01 13:28:50 +07:00 · 2023-11-01 13:28:43 +07:00 · 2023-10-30 20:28:34 -04:00 · 2023-10-21 11:22:18 +02:00 · 2023-10-20 13:18:01 +02:00
91 changed files with 11263 additions and 5981 deletions
--- a/.env
+++ b/.env
@@ -9,4 +9,20 @@ VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
 ## disables Least cost routing feature
 #VITE_APP_LCR_DISABLED=true
 ## disables Jaeger Tracing feature
-#VITE_APP_JAEGER_TRACING_DISABLED=true
+#VITE_APP_JAEGER_TRACING_DISABLED=true
+## enable record All Calls feature
+#VITE_APP_DISABLE_CALL_RECORDING=true
+## enable Forgot password
+#VITE_APP_ENABLE_FORGOT_PASSWORD=true
+## enable hosted system
+#VITE_APP_ENABLE_HOSTED_SYSTEM=true
+## Google Client ID
+#VITE_APP_GOOGLE_CLIENT_ID=
+## Github Client ID
+#VITE_APP_GITHUB_CLIENT_ID=
+## Default jambonz service provider SID
+#VITE_APP_DEFAULT_SERVICE_PROVIDER_SID=
+## Base url for jambomz webapp
+#VITE_APP_BASE_URL="http://jambonz.one"
+## Strip publishable key
+#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -17,7 +17,7 @@ jobs:
      - name: prepare tag
        id: prepare_tag
        run: |
-          IMAGE_ID=$GITHUB_REPOSITORY
+          IMAGE_ID=jambonz/webapp

          # Strip git ref prefix from version
          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -9,9 +9,16 @@ API_PORT="${API_PORT:-3000}"
 API_VERSION="${API_VERSION:-v1}"
 API_BASE_URL=${API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}

+# Default to "false" if not set
+DISABLE_LCR=${DISABLE_LCR:-false}
+DISABLE_JAEGER_TRACING=${DISABLE_JAEGER_TRACING:-false}
+DISABLE_CUSTOM_SPEECH=${DISABLE_CUSTOM_SPEECH:-false}
+ENABLE_FORGOT_PASSWORD=${ENABLE_FORGOT_PASSWORD:-false}
+DISABLE_CALL_RECORDING=${DISABLE_CALL_RECORDING:-false}
+
 # Serialize window global to provide the API URL to static frontend dist
 # This is declared and utilized in the web app: src/api/constants.ts
-SCRIPT_TAG="<script>window.JAMBONZ = { API_BASE_URL: \"${API_BASE_URL}\" };</script>"
+SCRIPT_TAG="<script>window.JAMBONZ = {API_BASE_URL: \"${API_BASE_URL}\",DISABLE_LCR: \"${DISABLE_LCR}\",DISABLE_JAEGER_TRACING: \"${DISABLE_JAEGER_TRACING}\",DISABLE_CUSTOM_SPEECH: \"${DISABLE_CUSTOM_SPEECH}\",ENABLE_FORGOT_PASSWORD: \"${ENABLE_FORGOT_PASSWORD}\",DISABLE_CALL_RECORDING: \"${DISABLE_CALL_RECORDING}\"};</script>"
 sed -i -e "\@</head>@i\    $SCRIPT_TAG" ./dist/index.html

 # Start the frontend web app static server
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Simple provisioning webapp for jambonz."
+      content="Build innovative voice and collaboration services with jambonz, the open-source communication platform for conversational AI providers and CSPs."
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -46,7 +46,7 @@
      as="font"
      type="font/woff"
    />
-    <title>Jambonz Web App</title>
+    <title>Jambonz Portal | Jambonz CPaaS</title>
  </head>
  <body>
    <div id="root"></div>
--- 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.3",
+  "version": "0.8.4",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -41,15 +41,18 @@
    "deploy": "npm i && npm run build && npm run pm2"
  },
  "dependencies": {
-    "dayjs": "^1.11.5",
    "@jambonz/ui-kit": "^0.0.21",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^1.54.1",
+    "dayjs": "^1.11.5",
+    "immutability-helper": "^3.1.1",
    "react": "^18.0.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
    "react-dom": "^18.0.0",
    "react-feather": "^2.0.10",
    "react-router-dom": "^6.3.0",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
-    "immutability-helper": "^3.1.1"
+    "wavesurfer.js": "^7.3.4"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -31,9 +31,10 @@ app.get(
    for (let i = 0; i < 500; i++) {
      const attempted_at = new Date(start.getTime() + i * increment);
      const failed = 0 === i % 5;
+      const call_sid = nanoid();
      const call: RecentCall = {
        account_sid: req.params.account_sid,
-        call_sid: nanoid(),
+        call_sid,
        from: "15083084809",
        to: "18882349999",
        answered: !failed,
@@ -49,6 +50,7 @@ app.get(
        direction: 0 === i % 2 ? "inbound" : "outbound",
        trunk: 0 === i % 2 ? "twilio" : "user",
        trace_id: nanoid(),
+        recording_url: `http://127.0.0.1:3002/api/Accounts/${req.params.account_sid}/RecentCalls/${call_sid}/record`,
      };
      data.push(call);
    }
@@ -137,6 +139,24 @@ app.get(
  }
 );

+app.get(
+  "/api/Accounts/:account_sid/RecentCalls/:call_sid/record",
+  (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")
+    );
+
+    res
+      .status(200)
+      .set({
+        "Content-Type": "audio/wav",
+        "Content-Disposition": "attachment",
+      })
+      .send(wav); // server: Buffer => client: Blob
+  }
+);
+
 app.get(
  "/api/Accounts/:account_sid/RecentCalls/trace/:trace_id",
  (req: Request, res: Response) => {
--- a/server/example.mp3
+++ b/server/example.mp3
--- a/server/sample-jaeger.json
+++ b/server/sample-jaeger.json
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -1,4 +1,5 @@
 import type {
+  Currency,
  LimitField,
  LimitUnitOption,
  PasswordSettings,
@@ -13,6 +14,17 @@ import type {
 /** The API url is constructed with the docker containers `ip:port` */
 interface JambonzWindowObject {
  API_BASE_URL: string;
+  DISABLE_LCR: string;
+  DISABLE_JAEGER_TRACING: string;
+  DISABLE_CUSTOM_SPEECH: string;
+  ENABLE_FORGOT_PASSWORD: string;
+  ENABLE_HOSTED_SYSTEM: string;
+  DISABLE_CALL_RECORDING: string;
+  GITHUB_CLIENT_ID: string;
+  GOOGLE_CLIENT_ID: string;
+  BASE_URL: string;
+  DEFAULT_SERVICE_PROVIDER_SID: string;
+  STRIPE_PUBLISHABLE_KEY: string;
 }

 declare global {
@@ -29,24 +41,50 @@ export const API_BASE_URL =
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;

 /** Disable custom speech vendor*/
-export const DISABLE_CUSTOM_SPEECH: boolean = JSON.parse(
-  import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false"
-);
+export const DISABLE_CUSTOM_SPEECH: boolean =
+  window.JAMBONZ?.DISABLE_CUSTOM_SPEECH === "true" ||
+  JSON.parse(import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false");

 /** Enable Forgot Password */
-export const ENABLE_FORGOT_PASSWORD: boolean = JSON.parse(
-  import.meta.env.VITE_ENABLE_FORGOT_PASSWORD || "false"
-);
+export const ENABLE_FORGOT_PASSWORD: boolean =
+  window.JAMBONZ?.ENABLE_FORGOT_PASSWORD === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_ENABLE_FORGOT_PASSWORD || "false");

+/** Enable Cloud version */
+export const ENABLE_HOSTED_SYSTEM: boolean =
+  window.JAMBONZ?.ENABLE_HOSTED_SYSTEM === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_ENABLE_HOSTED_SYSTEM || "false");
 /** Disable Lcr */
-export const DISABLE_LCR: boolean = JSON.parse(
-  import.meta.env.VITE_APP_LCR_DISABLED || "false"
-);
+export const DISABLE_LCR: boolean =
+  window.JAMBONZ?.DISABLE_LCR === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_LCR_DISABLED || "false");

 /** Disable jaeger tracing */
-export const DISABLE_JAEGER_TRACING: boolean = JSON.parse(
-  import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false"
-);
+export const DISABLE_JAEGER_TRACING: boolean =
+  window.JAMBONZ?.DISABLE_JAEGER_TRACING === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false");
+
+/** Enable Record All Call Feature */
+export const DISABLE_CALL_RECORDING: boolean =
+  window.JAMBONZ?.DISABLE_CALL_RECORDING === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_DISABLE_CALL_RECORDING || "false");
+
+export const DEFAULT_SERVICE_PROVIDER_SID: string =
+  window.JAMBONZ?.DEFAULT_SERVICE_PROVIDER_SID ||
+  import.meta.env.VITE_APP_DEFAULT_SERVICE_PROVIDER_SID;
+
+export const GITHUB_CLIENT_ID: string =
+  window.JAMBONZ?.GITHUB_CLIENT_ID || import.meta.env.VITE_APP_GITHUB_CLIENT_ID;
+
+export const BASE_URL: string =
+  window.JAMBONZ?.BASE_URL || import.meta.env.VITE_APP_BASE_URL;
+
+export const GOOGLE_CLIENT_ID: string =
+  window.JAMBONZ?.GOOGLE_CLIENT_ID || import.meta.env.VITE_APP_GOOGLE_CLIENT_ID;
+
+export const STRIPE_PUBLISHABLE_KEY: string =
+  window.JAMBONZ?.STRIPE_PUBLISHABLE_KEY ||
+  import.meta.env.VITE_APP_STRIPE_PUBLISHABLE_KEY;

 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;
@@ -119,7 +157,63 @@ export const SIP_GATEWAY_PROTOCOL_OPTIONS = [
    value: "tls/srtp",
  },
 ];
+/**
+ * Record bucket type
+ */
+export const BUCKET_VENDOR_AWS = "aws_s3";
+export const BUCKET_VENDOR_S3_COMPATIBLE = "s3_compatible";
+export const BUCKET_VENDOR_GOOGLE = "google";
+export const BUCKET_VENDOR_AZURE = "azure";
+export const BUCKET_VENDOR_OPTIONS = [
+  {
+    name: "NONE",
+    value: "",
+  },
+  {
+    name: "AWS S3",
+    value: BUCKET_VENDOR_AWS,
+  },
+  {
+    name: "AWS S3 Compatible",
+    value: BUCKET_VENDOR_S3_COMPATIBLE,
+  },
+  {
+    name: "Azure Cloud Storage",
+    value: BUCKET_VENDOR_AZURE,
+  },
+  {
+    name: "Google Cloud Storage",
+    value: BUCKET_VENDOR_GOOGLE,
+  },
+];

+export const AUDIO_FORMAT_OPTIONS = [
+  {
+    name: "mp3",
+    value: "mp3",
+  },
+  {
+    name: "wav",
+    value: "wav",
+  },
+];
+
+export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";
+
+export const ELEVENLABS_MODEL_OPTIONS = [
+  { name: "Multilingual v2", value: "eleven_multilingual_v2" },
+  { name: "Multilingual v1", value: "eleven_multilingual_v1" },
+  { name: "English v1", value: "eleven_monolingual_v1" },
+];
+
+// Google Custom Voice reported usage options
+
+export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
+export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
+  { name: "REPORTED_USAGE_UNSPECIFIED", value: "REPORTED_USAGE_UNSPECIFIED" },
+  { name: "REALTIME", value: "REALTIME" },
+  { name: "OFFLINE", value: "OFFLINE" },
+];
 /** Password Length options */

 export const PASSWORD_MIN = 8;
@@ -211,6 +305,16 @@ export const DEFAULT_PSWD_SETTINGS: PasswordSettings = {
  require_special_character: 0,
 };

+export const PlanType = {
+  PAID: "paid",
+  TRIAL: "trial",
+  FREE: "free",
+};
+
+export const CurrencySymbol: Currency = {
+  usd: "$",
+};
+
 /** User scope values values */
 export const USER_ADMIN = "admin";
 export const USER_SP = "service_provider";
@@ -225,6 +329,9 @@ export const CRED_NOT_TESTED = "not tested";
 export const CARRIER_REG_OK = "ok";
 export const CARRIER_REG_FAIL = "fail";

+export const PRIVACY_POLICY = "https://jambonz.org/privacy";
+export const TERMS_OF_SERVICE = "https://jambonz.org/terms";
+
 /** API base paths */
 export const API_LOGIN = `${API_BASE_URL}/login`;
 export const API_LOGOUT = `${API_BASE_URL}/logout`;
@@ -245,3 +352,13 @@ export const API_SYSTEM_INFORMATION = `${API_BASE_URL}/SystemInformation`;
 export const API_LCRS = `${API_BASE_URL}/Lcrs`;
 export const API_LCR_ROUTES = `${API_BASE_URL}/LcrRoutes`;
 export const API_LCR_CARRIER_SET_ENTRIES = `${API_BASE_URL}/LcrCarrierSetEntries`;
+export const API_TTS_CACHE = `${API_BASE_URL}/TtsCache`;
+export const API_CLIENTS = `${API_BASE_URL}/Clients`;
+export const API_REGISTER = `${API_BASE_URL}/register`;
+export const API_ACTIVATION_CODE = `${API_BASE_URL}/ActivationCode`;
+export const API_AVAILABILITY = `${API_BASE_URL}/Availability`;
+export const API_PRICE = `${API_BASE_URL}/Prices`;
+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`;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -24,6 +24,16 @@ import {
  API_LCR_ROUTES,
  API_LCR_CARRIER_SET_ENTRIES,
  API_LCRS,
+  API_TTS_CACHE,
+  API_CLIENTS,
+  API_REGISTER,
+  API_ACTIVATION_CODE,
+  API_AVAILABILITY,
+  API_PRICE,
+  API_SUBSCRIPTIONS,
+  API_CHANGE_PASSWORD,
+  API_SIGNIN,
+  API_GOOGLE_CUSTOM_VOICES,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -69,8 +79,26 @@ import type {
  Lcr,
  LcrRoute,
  LcrCarrierSetEntry,
+  BucketCredential,
+  BucketCredentialTestResult,
+  Client,
+  RegisterRequest,
+  RegisterResponse,
+  ActivationCode,
+  CurrentUserData,
+  PriceInfo,
+  Subscription,
+  DeleteAccount,
+  ChangePassword,
+  SignIn,
+  GetVoices,
+  LanguageOption,
+  VoiceOption,
+  GetLanguages,
+  GoogleCustomVoice,
+  GoogleCustomVoicesQuery,
 } from "./types";
-import { StatusCodes } from "./types";
+import { Availability, StatusCodes } from "./types";
 import { JaegerRoot } from "./jaeger-types";

 /** Wrap all requests to normalize response handling */
@@ -82,6 +110,7 @@ const fetchTransport = <Type>(
    try {
      const response = await fetch(url, options);
      const transport: FetchTransport<Type> = {
+        headers: response.headers,
        status: response.status,
        json: <Type>{},
      };
@@ -157,7 +186,7 @@ const getAuthHeaders = () => {

  return {
    "Content-Type": "application/json",
-    Authorization: `Bearer ${token}`,
+    ...(token && { Authorization: `Bearer ${token}` }),
  };
 };

@@ -233,6 +262,17 @@ export const deleteFetch = <Type>(url: string) => {
  });
 };

+export const deleteFetchWithPayload = <Type, Payload>(
+  url: string,
+  payload: Payload
+) => {
+  return fetchTransport<Type>(url, {
+    method: "DELETE",
+    headers: getAuthHeaders(),
+    body: JSON.stringify(payload),
+  });
+};
+
 /** All APIs need a wrapper utility that uses the FetchTransport */

 export const postLogin = (payload: UserLoginPayload) => {
@@ -266,6 +306,16 @@ export const postAccount = (payload: Partial<Account>) => {
  return postFetch<SidResponse, Partial<Account>>(API_ACCOUNTS, payload);
 };

+export const postAccountBucketCredentialTest = (
+  sid: string,
+  payload: Partial<BucketCredential>
+) => {
+  return postFetch<BucketCredentialTestResult, Partial<BucketCredential>>(
+    `${API_ACCOUNTS}/${sid}/BucketCredentialTest`,
+    payload
+  );
+};
+
 export const postApplication = (payload: Partial<Application>) => {
  return postFetch<SidResponse, Partial<Application>>(
    API_APPLICATIONS,
@@ -286,6 +336,32 @@ 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,
@@ -393,6 +469,48 @@ export const postLcrCarrierSetEntry = (
    payload
  );
 };
+
+export const postClient = (payload: Partial<Client>) => {
+  return postFetch<SidResponse, Partial<Client>>(API_CLIENTS, payload);
+};
+
+export const postRegister = (payload: Partial<RegisterRequest>) => {
+  return postFetch<RegisterResponse, Partial<RegisterRequest>>(
+    API_REGISTER,
+    payload
+  );
+};
+
+export const postSipRealms = (accountSid: string, domain: string) => {
+  return postFetch<EmptyResponse>(
+    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`
+  );
+};
+
+export const postSubscriptions = (payload: Partial<Subscription>) => {
+  return postFetch<Subscription, Partial<Subscription>>(
+    API_SUBSCRIPTIONS,
+    payload
+  );
+};
+
+export const postChangepassword = (payload: Partial<ChangePassword>) => {
+  return postFetch<EmptyResponse, Partial<ChangePassword>>(
+    API_CHANGE_PASSWORD,
+    payload
+  );
+};
+
+export const postSignIn = (payload: Partial<SignIn>) => {
+  return postFetch<SignIn, Partial<SignIn>>(API_SIGNIN, payload);
+};
+
+export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
+  return postFetch<SidResponse, Partial<GoogleCustomVoice>>(
+    API_GOOGLE_CUSTOM_VOICES,
+    payload
+  );
+};
 /** Named wrappers for `putFetch` */

 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
@@ -506,6 +624,33 @@ export const putLcrCarrierSetEntries = (
  );
 };

+export const putClient = (sid: string, payload: Partial<Client>) => {
+  return putFetch<EmptyResponse, Partial<Client>>(
+    `${API_CLIENTS}/${sid}`,
+    payload
+  );
+};
+
+export const putActivationCode = (
+  code: string,
+  payload: Partial<ActivationCode>
+) => {
+  return putFetch<EmptyResponse, Partial<ActivationCode>>(
+    `${API_ACTIVATION_CODE}/${code}`,
+    payload
+  );
+};
+
+export const putGoogleCustomVoice = (
+  sid: string,
+  payload: Partial<GoogleCustomVoice>
+) => {
+  return putFetch<EmptyResponse, Partial<GoogleCustomVoice>>(
+    `${API_GOOGLE_CUSTOM_VOICES}/${sid}`,
+    payload
+  );
+};
+
 /** Named wrappers for `deleteFetch` */

 export const deleteUser = (sid: string) => {
@@ -520,8 +665,11 @@ export const deleteApiKey = (sid: string) => {
  return deleteFetch<EmptyResponse>(`${API_API_KEYS}/${sid}`);
 };

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

 export const deleteApplication = (sid: string) => {
@@ -577,6 +725,25 @@ export const deleteLcrRoute = (sid: string) => {
  return deleteFetch<EmptyResponse>(`${API_LCR_ROUTES}/${sid}`);
 };

+export const deleteTtsCache = () => {
+  return deleteFetch<EmptyResponse>(API_TTS_CACHE);
+};
+
+export const deleteAccountTtsCache = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_BASE_URL}/Accounts/${sid}/TtsCache`);
+};
+
+export const deleteClient = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_CLIENTS}/${sid}`);
+};
+
+export const deleteRecord = (url: string) => {
+  return deleteFetch<EmptyResponse>(url);
+};
+
+export const deleteGoogleCustomVoice = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_GOOGLE_CUSTOM_VOICES}/${sid}`);
+};
 /** Named wrappers for `getFetch` */

 export const getUser = (sid: string) => {
@@ -615,8 +782,33 @@ export const getLcrCarrierSetEtries = (sid: string) => {
  );
 };

+export const getClients = () => {
+  return getFetch<Client[]>(API_CLIENTS);
+};
+
+export const getClient = (sid: string) => {
+  return getFetch<Client[]>(`${API_CLIENTS}/${sid}`);
+};
+
+export const getAvailability = (domain: string) => {
+  return getFetch<Availability>(
+    `${API_AVAILABILITY}?type=subdomain&value=${domain}`
+  );
+};
+
+export const getGoogleCustomVoices = (
+  query: Partial<GoogleCustomVoicesQuery>
+) => {
+  const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
+  return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
+};
+
 /** Wrappers for APIs that can have a mock dev server response */

+export const getMe = () => {
+  return getFetch<CurrentUserData>(`${API_USERS}/me`);
+};
+
 export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
  const qryStr = getQuery<Partial<CallQuery>>(query);

@@ -635,11 +827,11 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
  );
 };

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

@@ -662,11 +854,15 @@ export const getServiceProviderRecentCall = (
  );
 };

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

@@ -680,6 +876,10 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  );
 };

+export const getPrice = () => {
+  return getFetch<PriceInfo[]>(API_PRICE);
+};
+
 /** Hooks for components to fetch data with refetch method */

 /** :GET /{apiPath} -- this is generic for any fetch of data collections */
--- a/src/api/jaeger-types.ts
+++ b/src/api/jaeger-types.ts
@@ -37,6 +37,18 @@ export interface JaegerAttribute {
  value: JaegerValue;
 }

+export interface WaveSurferSttResult {
+  vendor: string;
+  transcript: string;
+  confidence: number;
+  language_code: string;
+}
+
+export interface WaveSurferDtmfResult {
+  dtmf: string;
+  duration: string;
+}
+
 export interface JaegerValue {
  stringValue: string;
  doubleValue: string;
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -51,6 +51,7 @@ export enum StatusCodes {
 /** Fetch transport interfaces */

 export interface FetchTransport<Type> {
+  headers: Headers;
  status: StatusCodes;
  json: Type;
  blob?: Blob;
@@ -87,7 +88,7 @@ export interface SelectorOptions {
  value: string;
 }

-export interface Pcap {
+export interface DownloadedBlob {
  data_url: string;
  file_name: string;
 }
@@ -102,6 +103,11 @@ export interface CredentialTestResult {
  tts: CredentialTest;
 }

+export interface BucketCredentialTestResult {
+  status: CredentialStatus;
+  reason: string;
+}
+
 export interface LimitField {
  label: string;
  category: LimitCategories;
@@ -123,6 +129,10 @@ export interface SystemInformation {
  monitoring_domain_name: string;
 }

+export interface TtsCache {
+  size: number;
+}
+
 /** API responses/payloads */

 export interface User {
@@ -138,6 +148,7 @@ export interface User {
  service_provider_name?: string | null;
  initial_password?: string;
  permissions?: UserPermissions[];
+  provider?: null | string;
 }

 export interface UserLogin {
@@ -176,6 +187,8 @@ export interface UserJWT {

 export interface CurrentUserData {
  user: User;
+  account?: Account;
+  subscription?: null | Subscription;
 }

 export interface ServiceProvider {
@@ -235,6 +248,7 @@ export interface Smpp {
 export interface Account {
  name: string;
  sip_realm: null | string;
+  root_domain?: null | string;
  account_sid: string;
  webhook_secret: string;
  siprec_hook_sid: null | string;
@@ -242,7 +256,57 @@ export interface Account {
  registration_hook: null | WebHook;
  service_provider_sid: string;
  device_calling_application_sid: null | string;
-  lcr_sid: null | string;
+  record_all_calls: number;
+  record_format?: null | string;
+  bucket_credential: null | BucketCredential;
+  plan_type?: string;
+  device_to_call_ratio?: number;
+  trial_end_date?: null | string;
+}
+
+export interface Product {
+  price_id?: null | string;
+  product_sid?: null | string;
+  name?: string;
+  quantity?: number;
+}
+
+export interface Subscription {
+  action?: null | string;
+  payment_method_id?: null | string;
+  account_subscription_sid?: null | string;
+  stripe_customer_id?: null | string;
+  products?: null | Product[];
+  start_date?: string;
+  status?: string;
+  client_secret?: null | string;
+  last4?: null | string;
+  exp_month?: null | string;
+  exp_year?: null | string;
+  card_type?: null | string;
+  reason?: null | string;
+  dry_run?: boolean;
+  currency?: null | string;
+  prorated_cost?: number;
+  monthly_cost?: number;
+  next_invoice_date?: null | string;
+}
+
+export interface AwsTag {
+  Key: string;
+  Value: string;
+}
+
+export interface BucketCredential {
+  vendor: null | string;
+  region?: null | string;
+  name?: null | string;
+  access_key_id?: null | string;
+  secret_access_key?: null | string;
+  tags?: null | AwsTag[];
+  service_key?: null | string;
+  connection_string?: null | string;
+  endpoint?: null | string;
 }

 export interface Application {
@@ -256,8 +320,19 @@ export interface Application {
  speech_synthesis_voice: null | string;
  speech_synthesis_vendor: null | Lowercase<Vendor>;
  speech_synthesis_language: null | string;
+  speech_synthesis_label: null | string;
  speech_recognizer_vendor: null | Lowercase<Vendor>;
  speech_recognizer_language: null | string;
+  speech_recognizer_label: null | string;
+  record_all_calls: number;
+  use_for_fallback_speech: number;
+  fallback_speech_synthesis_vendor: null | string;
+  fallback_speech_synthesis_language: null | string;
+  fallback_speech_synthesis_voice: null | string;
+  fallback_speech_synthesis_label: null | string;
+  fallback_speech_recognizer_vendor: null | string;
+  fallback_speech_recognizer_language: null | string;
+  fallback_speech_recognizer_label: null | string;
 }

 export interface PhoneNumber {
@@ -294,6 +369,15 @@ export interface RecentCall {
  direction: string;
  trunk: string;
  trace_id: string;
+  recording_url?: string;
+}
+
+export interface GoogleCustomVoice {
+  google_custom_voice_sid?: string;
+  speech_credential_sid?: string;
+  name: string;
+  reported_usage: string;
+  model: string;
 }

 export interface SpeechCredential {
@@ -311,8 +395,10 @@ export interface SpeechCredential {
  secret_access_key: null | string;
  service_key: null | string;
  use_custom_tts: number;
+  custom_tts_endpoint_url: null | string;
  custom_tts_endpoint: null | string;
  use_custom_stt: number;
+  custom_stt_endpoint_url: null | string;
  custom_stt_endpoint: null | string;
  client_id: null | string;
  secret: null | string;
@@ -327,6 +413,9 @@ export interface SpeechCredential {
  auth_token: null | string;
  custom_stt_url: null | string;
  custom_tts_url: null | string;
+  label: null | string;
+  cobalt_server_uri: null | string;
+  model_id: null | string;
 }

 export interface Alert {
@@ -380,7 +469,6 @@ export interface PredefinedCarrier extends Carrier {
 export interface Gateway {
  voip_carrier_sid: string;
  ipv4: string;
-  port: number;
  netmask: number;
  inbound: number;
  outbound: number;
@@ -390,12 +478,15 @@ export interface SipGateway extends Gateway {
  sip_gateway_sid?: null | string;
  is_active: boolean;
  protocol?: string;
+  port: number | null;
+  pad_crypto?: boolean;
 }

 export interface SmppGateway extends Gateway {
  smpp_gateway_sid?: null | string;
  is_primary: boolean;
  use_tls: boolean;
+  port: number;
 }

 export interface Lcr {
@@ -425,6 +516,14 @@ export interface LcrCarrierSetEntry {
  priority: number;
 }

+export interface Client {
+  client_sid?: null | string;
+  account_sid: null | string;
+  username: null | string;
+  password?: null | string;
+  is_active: boolean;
+}
+
 export interface PageQuery {
  page: number;
  count: number;
@@ -437,6 +536,13 @@ export interface CallQuery extends PageQuery {
  answered?: string;
 }

+export interface GoogleCustomVoicesQuery {
+  speech_credential_sid?: string;
+  label?: string;
+  account_sid?: string;
+  service_provider_sid: string;
+}
+
 export interface PagedResponse<Type> {
  page_size: number;
  total: number;
@@ -467,3 +573,138 @@ export interface EmptyResponse {
 export interface TotalResponse {
  total: number;
 }
+
+export interface RegisterRequest {
+  service_provider_sid: string;
+  provider: string;
+  oauth2_code?: string;
+  oauth2_state?: string;
+  oauth2_client_id?: string;
+  oauth2_redirect_uri?: string;
+  locationBeforeAuth?: string;
+  name?: string;
+  email?: string;
+  password?: string;
+  email_activation_code?: string;
+  inviteCode?: string;
+}
+
+export interface RegisterResponse {
+  jwt: string;
+  user_sid: string;
+  account_sid: string;
+  root_domain: string;
+}
+
+export interface ActivationCode {
+  user_sid: string;
+  type: string;
+}
+
+export interface Availability {
+  available: boolean;
+}
+
+export interface Invoice {
+  total: number;
+  currency: null | string;
+  next_payment_attempt: null | string;
+}
+
+export type Currency = {
+  [key: string]: null | string;
+};
+
+export interface Recurring {
+  aggregate_usage: null | string;
+  interval: null | string;
+  interval_count: number;
+  trial_period_days: null | string;
+  usage_type: string;
+}
+
+export interface Price {
+  billing_scheme: string;
+  currency: string;
+  recurring: Recurring;
+  stripe_price_id: null | string;
+  tiers_mode: null | string;
+  type: null | string;
+  unit_amount: number;
+  unit_amount_decimal: null | string;
+}
+
+export interface PriceInfo {
+  category: null | string;
+  description: null | string;
+  name: null | string;
+  prices: Price[];
+  product_sid: null | string;
+  stripe_product_id: null | string;
+  unit_label: null | string;
+}
+
+export interface StripeCustomerId {
+  stripe_customer_id: null | string;
+}
+
+export interface Tier {
+  up_to: number;
+  flat_amount: number;
+  unit_amount: number;
+}
+
+export interface ServiceData {
+  category: null | string;
+  name: null | string;
+  service: null | string;
+  fees: number;
+  feesLabel: null | string;
+  cost: number;
+  capacity: number;
+  invalid: boolean;
+  currency: null | string;
+  min: number;
+  max: number;
+  dirty: boolean;
+  visible: boolean;
+  required: boolean;
+  billing_scheme?: null | string;
+  stripe_price_id?: null | string;
+  unit_label?: null | string;
+  product_sid?: null | string;
+  stripe_product_id?: null | string;
+  tiers?: Tier[];
+}
+
+export interface DeleteAccount {
+  password: string;
+}
+
+export interface ChangePassword {
+  old_password: null | string;
+  new_password: null | string;
+}
+
+export interface SignIn {
+  link?: null | string;
+  jwt?: null | string;
+  account_sid?: null | string;
+}
+
+export interface GetVoices {
+  vendor: string;
+  label: string;
+}
+
+export interface VoiceOption extends SelectorOptions {
+  [key: string]: unknown;
+}
+
+export interface GetLanguages extends GetVoices {
+  [key: string]: unknown;
+}
+
+export interface LanguageOption extends SelectorOptions {
+  [key: string]: unknown;
+}
--- a/src/components/account-filter.tsx
+++ b/src/components/account-filter.tsx
@@ -38,7 +38,7 @@ export const AccountFilter = ({

  return (
    <div className={classNames(classes)}>
-      <label htmlFor="account_filter">{label}:</label>
+      {label && <label htmlFor="account_filter">{label}:</label>}
      <div>
        <select
          id="account_filter"
--- a/src/components/domain-input/index.tsx
+++ b/src/components/domain-input/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Icons } from "../icons";
+import "./styles.scss";
+
+type DomainInputProbs = {
+  id?: string;
+  name?: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  root_domain: string;
+  placeholder?: string;
+  is_valid: boolean;
+};
+
+export const DomainInput = ({
+  id,
+  name,
+  value,
+  setValue,
+  root_domain,
+  is_valid,
+  placeholder,
+}: DomainInputProbs) => {
+  return (
+    <>
+      <div className="clipboard clipboard-domain">
+        <div className="input-container">
+          <input
+            id={id}
+            name={name}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <div className={`input-icon txt--${is_valid ? "teal" : "red"}`}>
+            {is_valid ? <Icons.CheckCircle /> : <Icons.XCircle />}
+          </div>
+        </div>
+        <div className="root-domain">
+          <p>{root_domain}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DomainInput;
--- a/src/components/domain-input/styles.scss
+++ b/src/components/domain-input/styles.scss
@@ -0,0 +1,55 @@
+@use "../../styles/vars";
+@use "../../styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.clipboard-domain {
+  display: flex;
+  align-items: center;
+
+  input[type="text"],
+  input[type="number"] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    width: 100%;
+    height: vars.$clipheight;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .internal form & {
+    max-width: calc(#{vars.$widthinput} - #{vars.$clipheight});
+  }
+
+  .input-icon {
+    position: absolute;
+    right: 5%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 0;
+  }
+
+  .root-domain {
+    height: vars.$clipheight;
+    border-bottom-right-radius: ui-vars.$px01;
+    border-top-right-radius: ui-vars.$px01;
+    border: 2px solid ui-vars.$grey;
+    border-left: 0;
+    background-color: ui-vars.$pink;
+    padding: ui-vars.$px01;
+    display: flex;
+    align-items: center;
+
+    &[disabled] {
+      @include mixins.disabled();
+    }
+  }
+}
--- a/src/components/editboard/index.tsx
+++ b/src/components/editboard/index.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icons } from "src/components/icons";
+
+type EditBoardProps = {
+  id?: string;
+  name?: string;
+  text: string;
+  path: string;
+  title?: string;
+};
+
+export const EditBoard = ({
+  text,
+  id = "",
+  name = "",
+  path,
+  title,
+}: EditBoardProps) => {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(path);
+  };
+
+  return (
+    <div className="clipboard inpbtn">
+      <input id={id} name={name} type="text" readOnly value={text} />
+      <button
+        className="btnty"
+        type="button"
+        title={title ? title : "Edit"}
+        onClick={handleClick}
+      >
+        <Icons.Edit />
+      </button>
+    </div>
+  );
+};
--- a/src/components/forms/checkzone/index.tsx
+++ b/src/components/forms/checkzone/index.tsx
@@ -7,6 +7,7 @@ type CheckzoneProps = {
  id?: string;
  name: string;
  label: string;
+  labelNode?: React.ReactNode;
  hidden?: boolean;
  children: React.ReactNode;
  initialCheck: boolean;
@@ -22,6 +23,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
      id,
      name,
      label,
+      labelNode,
      hidden = false,
      children,
      initialCheck,
@@ -47,21 +49,24 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
    return (
      <div className={classesTop}>
        <label>
-          <input
-            ref={ref}
-            type="checkbox"
-            name={name}
-            id={id || name}
-            onChange={(e) => {
-              setChecked(e.target.checked);
+          <div className="label-container">
+            <input
+              ref={ref}
+              type="checkbox"
+              name={name}
+              id={id || name}
+              onChange={(e) => {
+                setChecked(e.target.checked);

-              if (handleChecked) {
-                handleChecked(e);
-              }
-            }}
-            checked={checked}
-          />
-          <div>{label}</div>
+                if (handleChecked) {
+                  handleChecked(e);
+                }
+              }}
+              checked={checked}
+            />
+            {label && <div>{label}</div>}
+            {labelNode && labelNode}
+          </div>
        </label>
        {checked && <div className={classesIn}>{children}</div>}
      </div>
--- a/src/components/forms/checkzone/styles.scss
+++ b/src/components/forms/checkzone/styles.scss
@@ -9,11 +9,14 @@
  width: 100%;
  max-width: vars.$widthinput;

-  > label {
+  .label-container {
    display: flex;
-    align-items: center;
+    justify-content: center;
+  }

+  > label {
    input {
+      margin-top: ui-vars.$px01;
      margin-right: ui-vars.$px02;
    }
  }
@@ -35,6 +38,10 @@
      margin-top: ui-vars.$px01;
    }

+    > a {
+      width: 100%;
+    }
+
    &.active {
      cursor: auto;
      opacity: 1;
--- a/src/components/forms/selector/index.tsx
+++ b/src/components/forms/selector/index.tsx
@@ -42,7 +42,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
          {...restProps}
        >
          {options.map((option) => (
-            <option key={option.value} value={option.value}>
+            <option key={`${id}_${option.value}`} value={option.value}>
              {option.name}
            </option>
          ))}
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -42,6 +42,15 @@ import {
  Share2,
  ArrowUp,
  ArrowDown,
+  Play,
+  Pause,
+  ChevronsLeft,
+  ChevronsRight,
+  Download,
+  Smartphone,
+  Youtube,
+  Mail,
+  Tag,
 } from "react-feather";

 import type { Icon } from "react-feather";
@@ -94,4 +103,13 @@ export const Icons: IconMap = {
  Share2,
  ArrowUp,
  ArrowDown,
+  Play,
+  Pause,
+  ChevronsLeft,
+  ChevronsRight,
+  Download,
+  Smartphone,
+  Youtube,
+  Mail,
+  Tag,
 };
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { Button, ButtonGroup } from "@jambonz/ui-kit";

 import "./styles.scss";
+import { Spinner } from "../spinner";

 type ModalProps = {
  disabled?: boolean;
@@ -69,6 +70,7 @@ export const ModalForm = ({
        }}
      >
        <div className="modal__stuff">{children}</div>
+
        <ButtonGroup right>
          <Button
            small
@@ -114,3 +116,37 @@ export const ModalClose = ({ children, handleClose }: CloseProps) => {
    portal
  );
 };
+
+type LoaderProps = {
+  children: React.ReactNode;
+};
+
+export const ModalLoader = ({ children }: LoaderProps) => {
+  return ReactDOM.createPortal(
+    <div className="modal" role="presentation">
+      <div
+        className="modal__box"
+        role="presentation"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="modal__stuff"
+          role="presentation"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Spinner />
+        </div>
+      </div>
+    </div>,
+    portal
+  );
+};
--- a/src/components/search-filter/index.tsx
+++ b/src/components/search-filter/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";
@@ -7,14 +7,18 @@ import "./styles.scss";

 type SearchFilterProps = JSX.IntrinsicElements["input"] & {
  filter: [string, React.Dispatch<React.SetStateAction<string>>];
+  delay?: number | null;
 };

 export const SearchFilter = ({
  placeholder,
  filter: [filterValue, setFilterValue],
+  delay,
 }: SearchFilterProps) => {
  const [focus, setFocus] = useState(false);
+  const [tmpFilterValue, setTmpFilterValue] = useState(filterValue);
  const [appearance, setAppearance] = useState(false);
+  const typingTimeoutRef = useRef<number | null>(null);
  const classes = {
    "search-filter": true,
    focused: focus,
@@ -23,7 +27,18 @@ export const SearchFilter = ({

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFilterValue(e.target.value.toLowerCase());
+      setTmpFilterValue(e.target.value.toLowerCase());
+      if (delay) {
+        if (typingTimeoutRef.current) {
+          clearTimeout(typingTimeoutRef.current);
+        }
+
+        typingTimeoutRef.current = setTimeout(() => {
+          setFilterValue(e.target.value.toLowerCase());
+        }, delay);
+      } else {
+        setFilterValue(e.target.value.toLowerCase());
+      }

      if (e.target.value) {
        setAppearance(true);
@@ -51,7 +66,7 @@ export const SearchFilter = ({
        type="search"
        name="search_filter"
        placeholder={placeholder}
-        value={filterValue}
+        value={tmpFilterValue}
        onChange={handleChange}
        onFocus={() => {
          setFocus(true);
--- a/src/components/tooltip/index.tsx
+++ b/src/components/tooltip/index.tsx
@@ -9,14 +9,15 @@ import "./styles.scss";
 type TooltipProps = {
  text: IMessage;
  children: React.ReactNode;
+  subStyle?: string;
 };

-export const Tooltip = ({ text, children }: TooltipProps) => {
+export const Tooltip = ({ text, children, subStyle }: TooltipProps) => {
  return (
    <div className="tooltip">
      <div className="tooltip__reveal">{text}</div>
      {children}
-      <Icons.HelpCircle />
+      {subStyle === "info" ? <Icons.Info /> : <Icons.HelpCircle />}
    </div>
  );
 };
--- a/src/constants/index.tsx
+++ b/src/constants/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";

-export const TOAST_TIME = 3000;
+export const TOAST_TIME = 5000;
 export const SESS_FLASH_MSG = "SESS_FLASH_MSG";
 export const SESS_USER_SID = "SESS_USER_SID";
 export const SESS_OLD_PASSWORD = "SESS_OLD_PASSWORD";
@@ -13,16 +13,6 @@ export const MSG_PASSWD_MATCH = "Passwords do not match";
 export const MSG_SERVER_DOWN = "The server cannot be reached";
 export const MSG_LOGGED_OUT = "You've successfully logged out.";
 export const MSG_MUST_LOGIN = "You must log in to view that page";
-export const MSG_PASSWD_CRITERIA = (
-  <>
-    Password must:
-    <ul>
-      <li>Be at least 6 characters</li>
-      <li>Contain at least one letter</li>
-      <li>Contain at least one number</li>
-    </ul>
-  </>
-);
 export const MSG_REQUIRED_FIELDS = (
  <>
    Fields marked with an asterisk<span>*</span> are required.
--- a/src/containers/internal/navi/items.ts
+++ b/src/containers/internal/navi/items.ts
@@ -10,6 +10,7 @@ import {
  ROUTE_INTERNAL_PHONE_NUMBERS,
  ROUTE_INTERNAL_MS_TEAMS_TENANTS,
  ROUTE_INTERNAL_LEST_COST_ROUTING,
+  ROUTE_INTERNAL_CLIENTS,
 } from "src/router/routes";
 import { Icons } from "src/components";
 import { Scope, UserData } from "src/store/types";
@@ -17,7 +18,10 @@ import { Scope, UserData } from "src/store/types";
 import type { Icon } from "react-feather";
 import type { ACL } from "src/store/types";
 import { Lcr } from "src/api/types";
-import { DISABLE_LCR } from "src/api/constants";
+import {
+  DISABLE_LCR,
+  ENABLE_HOSTED_SYSTEM as ENABLE_HOSTED_SYSTEM,
+} from "src/api/constants";

 export interface NaviItem {
  label: string;
@@ -29,11 +33,17 @@ export interface NaviItem {
 }

 export const naviTop: NaviItem[] = [
-  {
-    label: "Users",
-    icon: Icons.UserCheck,
-    route: () => ROUTE_INTERNAL_USERS,
-  },
+  // User is not allowed in hosted app
+  ...(!ENABLE_HOSTED_SYSTEM
+    ? [
+        {
+          label: "Users",
+          icon: Icons.UserCheck,
+          route: () => ROUTE_INTERNAL_USERS,
+        },
+      ]
+    : []),
+
  {
    label: "Settings",
    icon: Icons.Settings,
@@ -53,6 +63,11 @@ export const naviTop: NaviItem[] = [
    scope: Scope.account,
    restrict: true,
  },
+  {
+    label: "Clients",
+    icon: Icons.Smartphone,
+    route: () => ROUTE_INTERNAL_CLIENTS,
+  },
  {
    label: "Applications",
    icon: Icons.Grid,
--- a/src/containers/internal/user-me/index.tsx
+++ b/src/containers/internal/user-me/index.tsx
@@ -1,18 +1,32 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";

 import { Icons } from "src/components";
-import { ROUTE_INTERNAL_USERS } from "src/router/routes";
+import {
+  ROUTE_INTERNAL_USERS,
+  ROUTE_REGISTER_SUB_DOMAIN,
+} from "src/router/routes";
 import { useApiData } from "src/api";
 import { useSelectState } from "src/store";

 import type { CurrentUserData } from "src/api/types";

 import "./styles.scss";
+import { ENABLE_HOSTED_SYSTEM } from "src/api/constants";
+import { setRootDomain } from "src/store/localStore";

 export const UserMe = () => {
  const user = useSelectState("user");
  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // If hosted platform is enabled, the account should have sip realm
+    if (ENABLE_HOSTED_SYSTEM && userData && !userData.account?.sip_realm) {
+      setRootDomain(userData?.account?.root_domain || "");
+      navigate(ROUTE_REGISTER_SUB_DOMAIN);
+    }
+  }, [userData]);

  return (
    <div className="user">
--- a/src/containers/internal/views/accounts/edit-sip-realm.tsx
+++ b/src/containers/internal/views/accounts/edit-sip-realm.tsx
@@ -0,0 +1,100 @@
+import { Button, ButtonGroup, H1, MS } from "@jambonz/ui-kit";
+import React, { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { getAvailability, postSipRealms, useApiData } from "src/api";
+import { CurrentUserData } from "src/api/types";
+import { Section } from "src/components";
+import DomainInput from "src/components/domain-input";
+import { Message } from "src/components/forms";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { hasValue } from "src/utils";
+
+export const EditSipRealm = () => {
+  const [name, setName] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const navigate = useNavigate();
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const typingTimeoutRef = useRef<number | null>(null);
+  const [isValidDomain, setIsValidDomain] = useState(false);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const rootDomain = userData?.account?.root_domain;
+    const account_sid = userData?.account?.account_sid;
+
+    postSipRealms(account_sid || "", `${name}.${rootDomain}`)
+      .then(() => {
+        navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${account_sid}/edit`);
+      })
+      .catch((error) => {
+        setErrorMessage(error.msg);
+      });
+  };
+
+  useEffect(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    if (!name || name.length < 3) {
+      setIsValidDomain(false);
+      return;
+    }
+    setIsValidDomain(false);
+    typingTimeoutRef.current = setTimeout(() => {
+      getAvailability(`${name}.${userData?.account?.root_domain}`)
+        .then(({ json }) =>
+          setIsValidDomain(
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
+        )
+        .catch((error) => {
+          setErrorMessage(error.msg);
+          setIsValidDomain(false);
+        });
+    }, 500);
+  }, [name]);
+
+  return (
+    <>
+      <H1 className="h2">Edit Sip Realm</H1>
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <fieldset>
+            <MS>
+              This is the domain name where your carrier will send calls, and
+              where you can register devices to.
+            </MS>
+            {errorMessage && <Message message={errorMessage} />}
+            <br />
+            <DomainInput
+              id="sip_realm"
+              name="sip_realm"
+              value={name}
+              setValue={setName}
+              placeholder="Your name here"
+              root_domain={`.${userData?.account?.root_domain || ""}`}
+              is_valid={isValidDomain}
+            />
+          </fieldset>
+          <fieldset>
+            <ButtonGroup left>
+              <Button
+                small
+                subStyle="grey"
+                as={Link}
+                to={`${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" small disabled={!isValidDomain}>
+                Change Sip Realm
+              </Button>
+            </ButtonGroup>
+          </fieldset>
+        </form>
+      </Section>
+    </>
+  );
+};
+
+export default EditSipRealm;
--- a/src/containers/internal/views/accounts/edit.tsx
+++ b/src/containers/internal/views/accounts/edit.tsx
@@ -7,7 +7,7 @@ import { useApiData } from "src/api";
 import { toastError, useSelectState } from "src/store";
 import { AccountForm } from "./form";

-import type { Account, Application, Limit } from "src/api/types";
+import type { Account, Application, Limit, TtsCache } from "src/api/types";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_APPLICATIONS,
@@ -25,6 +25,9 @@ export const EditAccount = () => {
    `Accounts/${params.account_sid}/Limits`
  );
  const [apps] = useApiData<Application[]>("Applications");
+  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
+    `Accounts/${params.account_sid}/TtsCache`
+  );

  useScopedRedirect(
    Scope.account,
@@ -50,6 +53,7 @@ export const EditAccount = () => {
        apps={apps}
        account={{ data, refetch, error }}
        limits={{ data: limitsData, refetch: refetchLimits }}
+        ttsCache={{ data: ttsCache, refetch: ttsCacheFetcher }}
      />
      <ApiKeys
        path={`Accounts/${params.account_sid}/ApiKeys`}
--- a/src/containers/internal/views/accounts/form.tsx
+++ b/src/containers/internal/views/accounts/form.tsx
--- a/src/containers/internal/views/accounts/index.tsx
+++ b/src/containers/internal/views/accounts/index.tsx
@@ -45,7 +45,7 @@ export const Accounts = () => {
        return;
      }

-      deleteAccount(account.account_sid)
+      deleteAccount(account.account_sid, {})
        .then(() => {
          refetch();
          setAccount(null);
@@ -71,7 +71,7 @@ export const Accounts = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter
          placeholder="Filter accounts"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/accounts/manage-payment-form.tsx
+++ b/src/containers/internal/views/accounts/manage-payment-form.tsx
@@ -0,0 +1,191 @@
+import { Button, ButtonGroup, H1, P } from "@jambonz/ui-kit";
+import {
+  PaymentElement,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+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 { PaymentMethod } from "@stripe/stripe-js";
+import { ModalLoader } from "src/components/modal";
+
+export const ManagePaymentForm = () => {
+  const user = useSelectState("user");
+  const stripe = useStripe();
+  const elements = useElements();
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [isChangePayment, setIsChangePayment] = useState(false);
+  const [isSavingNewCard, setIsSavingNewCard] = useState(false);
+  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
+  const navigate = useNavigate();
+
+  const createSubscription = async (paymentMethod: PaymentMethod) => {
+    const body: Subscription = {
+      action: "update-payment-method",
+      payment_method_id: paymentMethod.id,
+    };
+
+    postSubscriptions(body)
+      .then(({ json }) => {
+        if (json.status === "success") {
+          toastSuccess("Payment completed successfully");
+          navigate(
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          );
+        } else if (json.status === "action required") {
+          if (stripe) {
+            const location = window.location;
+            stripe
+              .confirmPayment({
+                clientSecret: json.client_secret || "",
+                confirmParams: {
+                  return_url: `${location.protocol}//${location.host}${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+                },
+              })
+              .then((error) => {
+                if (error) {
+                  toastError(error.error.message || "");
+                  return;
+                }
+              })
+              .finally(() => {
+                setIsSavingNewCard(false);
+                setIsShowModalLoader(false);
+              });
+          }
+        } else if (json.status === "card error") {
+          setIsSavingNewCard(false);
+          setIsShowModalLoader(false);
+          toastError(json.reason || "Something went wrong, please try again.");
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg || "Something went wrong, please try again.");
+      })
+      .finally(() => {
+        setIsSavingNewCard(false);
+        setIsShowModalLoader(false);
+      });
+  };
+
+  const handleSaveNewCard = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    const card = elements.getElement(PaymentElement);
+    if (!card) {
+      return;
+    }
+    const { error: elementsError } = await elements.submit();
+    if (elementsError) {
+      toastError(elementsError.message || "");
+      return;
+    }
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      element: card,
+    });
+
+    if (error) {
+      toastError(error.message || "Something went wrong, please try again.");
+      return;
+    }
+    setIsSavingNewCard(true);
+    setIsShowModalLoader(true);
+    createSubscription(paymentMethod);
+  };
+  return (
+    <>
+      <H1 className="h2">Manage Payment Information</H1>
+      {userData?.subscription && (
+        <Section>
+          <H1 className="h3">Current Payment Information</H1>
+          <div className="item__details">
+            <div className="pre-grid-white">
+              <div>Card Type:</div>
+              <div>{userData.subscription.card_type}</div>
+              <div>Card Number:</div>
+              <div>
+                {userData.subscription.last4
+                  ? `**** **** **** ${userData.subscription.last4}`
+                  : ""}
+              </div>
+              <div>Expiration:</div>
+              <div>
+                {userData.subscription.exp_year
+                  ? `${userData.subscription.exp_month}/${userData.subscription.exp_year}`
+                  : ""}
+              </div>
+            </div>
+          </div>
+          <ButtonGroup right>
+            <Button
+              type="button"
+              subStyle="grey"
+              as={Link}
+              to={`${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`}
+              small
+            >
+              Cancel
+            </Button>
+            <Button onClick={() => setIsChangePayment(true)} small>
+              Change Payment Info
+            </Button>
+          </ButtonGroup>
+        </Section>
+      )}
+      {isChangePayment && (
+        <Section>
+          <div className="grid--col4--users">
+            <H1 className="h3">New Payment Information</H1>
+            <div className="grid__row">
+              <div></div>
+              <div>
+                <PaymentElement
+                  options={{
+                    paymentMethodOrder: ["card"],
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+          <ButtonGroup right>
+            <Button
+              type="button"
+              subStyle="grey"
+              onClick={() => setIsChangePayment(false)}
+              small
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSaveNewCard}
+              disabled={!stripe || isSavingNewCard}
+              small
+            >
+              Save New Card
+            </Button>
+          </ButtonGroup>
+        </Section>
+      )}
+      {isShowModalLoader && (
+        <ModalLoader>
+          <P>
+            Your requested changes are being processed. Please do not leave the
+            page or hit the back button until complete.
+          </P>
+        </ModalLoader>
+      )}
+    </>
+  );
+};
+
+export default ManagePaymentForm;
--- a/src/containers/internal/views/accounts/manage-payment.tsx
+++ b/src/containers/internal/views/accounts/manage-payment.tsx
@@ -0,0 +1,23 @@
+import { Elements } from "@stripe/react-stripe-js";
+import { stripePromise } from "./subscription";
+import ManagePaymentForm from "./manage-payment-form";
+import React from "react";
+
+export const ManagePayment = () => {
+  return (
+    <>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          currency: "usd",
+          paymentMethodCreation: "manual",
+        }}
+      >
+        <ManagePaymentForm />
+      </Elements>
+    </>
+  );
+};
+
+export default ManagePayment;
--- a/src/containers/internal/views/accounts/subscription-form.tsx
+++ b/src/containers/internal/views/accounts/subscription-form.tsx
@@ -0,0 +1,633 @@
+import { Button, ButtonGroup, H1, P } from "@jambonz/ui-kit";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { postSubscriptions, useApiData } from "src/api";
+import { CurrencySymbol } from "src/api/constants";
+import {
+  CurrentUserData,
+  PriceInfo,
+  ServiceData,
+  StripeCustomerId,
+  Subscription,
+} from "src/api/types";
+import { Modal, Section } from "src/components";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { hasValue } from "src/utils";
+import {
+  PaymentElement,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import { PaymentMethod } from "@stripe/stripe-js";
+import { toastError, toastSuccess } from "src/store";
+import { ModalLoader } from "src/components/modal";
+
+const SubscriptionForm = () => {
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [priceInfo] = useApiData<PriceInfo[]>("/Prices");
+  const [userStripeInfo] = useApiData<StripeCustomerId>("/StripeCustomerId");
+  const [total, setTotal] = useState(0);
+  const [cardErrorCase, setCardErrorCase] = useState(false);
+  const [isReviewChanges, setIsReviewChanges] = useState(false);
+  const [isReturnToFreePlan, setIsReturnToFreePlan] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isModifySubscription = location.pathname.includes(
+    "modify-subscription"
+  );
+  const [billingCharge, setBillingCharge] = useState<Subscription | null>(null);
+  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
+  const [isDisableSubmitButton, setIsDisableSubmitButton] =
+    useState(isModifySubscription);
+
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const createSubscription = async (paymentMethod: PaymentMethod) => {
+    let body: Subscription = {};
+
+    if (cardErrorCase) {
+      body = {
+        action: "update-payment-method",
+        payment_method_id: paymentMethod.id,
+      };
+    } else {
+      body = {
+        action: "upgrade-to-paid",
+        payment_method_id: paymentMethod.id,
+        stripe_customer_id: userStripeInfo?.stripe_customer_id,
+        products: serviceData.map((service) => ({
+          price_id: service.stripe_price_id,
+          product_sid: service.product_sid,
+          quantity: service.capacity || 0,
+        })),
+      };
+    }
+
+    postSubscriptions(body)
+      .then(({ json }) => {
+        if (json.status === "success") {
+          toastSuccess("Payment completed successfully");
+          navigate(
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          );
+        } else if (json.status === "action required") {
+          if (stripe) {
+            const location = window.location;
+            stripe
+              .confirmPayment({
+                clientSecret: json.client_secret || "",
+                confirmParams: {
+                  return_url: `${location.protocol}//${location.host}${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+                },
+              })
+              .then((error) => {
+                if (error) {
+                  toastError(error.error.message || "");
+                  return;
+                }
+              })
+              .finally(() => {
+                setIsDisableSubmitButton(false);
+                setIsShowModalLoader(false);
+              });
+          }
+        } else if (json.status === "card error") {
+          setIsDisableSubmitButton(false);
+          setIsShowModalLoader(false);
+          setCardErrorCase(true);
+        }
+      })
+      .catch((error) => {
+        setIsDisableSubmitButton(false);
+        setIsShowModalLoader(false);
+        toastError(error.msg || "Something went wrong, please try again.");
+      });
+  };
+
+  const retrieveBillingChanges = async () => {
+    const updatedProducts = serviceData.map((product) => ({
+      price_id: product.stripe_price_id,
+      product_sid: product.product_sid,
+      quantity: product.capacity || 0,
+    }));
+
+    postSubscriptions({
+      action: "update-quantities",
+      dry_run: true,
+      products: updatedProducts,
+    })
+      .then(({ json }) => {
+        setBillingCharge(json);
+        setIsReviewChanges(true);
+      })
+      .catch((error) => {
+        toastError(error.msg || "Something went wrong, please try again.");
+        setIsDisableSubmitButton(false);
+      });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+
+    setIsDisableSubmitButton(true);
+    if (isModifySubscription) {
+      retrieveBillingChanges();
+      return;
+    }
+    setIsShowModalLoader(true);
+    const { error: elementsError } = await elements.submit();
+    if (elementsError) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      toastError(elementsError.message || "");
+      return;
+    }
+    const card = elements.getElement(PaymentElement);
+    if (!card) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      return;
+    }
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      element: card,
+    });
+    if (error) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      toastError(error.message || "");
+      return;
+    }
+
+    createSubscription(paymentMethod);
+  };
+
+  const handleReturnToFreePlan = () => {
+    setIsReturnToFreePlan(false);
+    setIsShowModalLoader(true);
+    const body: Subscription = {
+      action: "downgrade-to-free",
+    };
+
+    postSubscriptions(body)
+      .then(() => {
+        toastSuccess("Downgrade to free plan completed successfully");
+        navigate(
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+        );
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      })
+      .finally(() => setIsShowModalLoader(false));
+  };
+
+  const handleReviewChangeSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsShowModalLoader(true);
+
+    const updatedProducts = serviceData.map((product) => ({
+      price_id: product.stripe_price_id,
+      product_sid: product.product_sid,
+      quantity: product.capacity,
+    }));
+
+    postSubscriptions({
+      action: "update-quantities",
+      products: updatedProducts,
+    })
+      .then(() => {
+        toastSuccess(
+          "Your subscription capacity has been successfully modified."
+        );
+        navigate(
+          `${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`
+        );
+      })
+      .finally(() => {
+        setIsShowModalLoader(false);
+        setIsDisableSubmitButton(false);
+      });
+  };
+  // subscription categories
+  const [serviceData, setServiceData] = useState<ServiceData[]>([
+    {
+      category: "voice_call_session",
+      name: "concurrent call session",
+      service: "Maximum concurrent call sessions",
+      fees: 0,
+      feesLabel: "",
+      cost: 0,
+      capacity: 0,
+      invalid: false,
+      currency: "usd",
+      min: 5,
+      max: 1000,
+      dirty: false,
+      visible: true,
+      required: true,
+    },
+    {
+      category: "device",
+      name: "registered device",
+      service: "Additional device registrations",
+      fees: 0,
+      feesLabel: "",
+      cost: 0,
+      capacity: 0,
+      invalid: false,
+      currency: "usd",
+      min: 0,
+      max: 200,
+      dirty: false,
+      visible: false,
+      required: false,
+    },
+  ]);
+  const [originalServiceData, setOriginalServiceData] = useState<ServiceData[]>(
+    []
+  );
+
+  const initFeesAndCost = (priceData: PriceInfo[]) => {
+    serviceData.forEach((service) => {
+      const record = priceData.find(
+        (item) => item.category === service.category
+      );
+
+      if (record) {
+        const price = record.prices.find(
+          (item) => item.currency === service.currency
+        );
+
+        if (price) {
+          let fees = 0;
+          switch (price.billing_scheme) {
+            case "per_unit":
+              fees = (price.unit_amount * 1) / 100;
+              break;
+            default:
+              break;
+          }
+          service.billing_scheme = price.billing_scheme;
+          service.stripe_price_id = price.stripe_price_id;
+          service.unit_label = record.unit_label;
+          service.product_sid = record.product_sid;
+          service.stripe_product_id = record.stripe_product_id;
+          service.fees = fees;
+          service.feesLabel = `${
+            CurrencySymbol[service.currency || "usd"]
+          }${fees} per ${
+            record.unit_label?.slice(0, 3) === "per"
+              ? record.unit_label.slice(3)
+              : record.unit_label
+          }`;
+        }
+      }
+    });
+
+    setServiceData([...serviceData]);
+  };
+
+  const getServicePrice = (
+    service: ServiceData,
+    capacity: number
+  ): [number, string, number] => {
+    let fees = 0;
+    let feesLabel = "";
+    let cost = 0;
+    const capacityNum = capacity;
+    if (service.billing_scheme === "per_unit") {
+      fees = service.fees;
+      cost = fees * capacityNum;
+    } else if (service.billing_scheme === "tiered") {
+      const filteredTiers = service.tiers
+        ? service.tiers.filter(
+            (item) => !item.up_to || item.up_to >= capacityNum
+          )
+        : [];
+      if (filteredTiers.length) {
+        const tier = filteredTiers[0];
+        if (typeof tier.flat_amount === "number") {
+          fees = tier.flat_amount / 100;
+          cost = fees;
+        } else {
+          fees = tier.unit_amount / 100;
+          cost = fees * capacityNum;
+        }
+      }
+    }
+    feesLabel = `${CurrencySymbol[service.currency || "usd"]}${fees} per ${
+      service.unit_label && service.unit_label.slice(0, 3) === "per"
+        ? service.unit_label.slice(3)
+        : service.unit_label
+    }`;
+
+    return [fees, feesLabel, cost];
+  };
+
+  const setProductsInfo = (data: CurrentUserData) => {
+    const { products } = data.subscription || {};
+
+    const services = serviceData.map((service) => {
+      const { quantity } = products
+        ? products.find((item) => item.name === service.name) || {}
+        : { quantity: null };
+      const [fees, feesLabel, cost] = getServicePrice(service, quantity || 0);
+      return {
+        ...service,
+        capacity: quantity || 0,
+        invalid: false,
+        fees,
+        feesLabel,
+        cost,
+        visible: hasValue(quantity) && quantity > 0,
+      };
+    });
+
+    setServiceData(services);
+    setOriginalServiceData([...services]);
+  };
+
+  const updateServiceData = (
+    index: number,
+    key: string,
+    value: typeof serviceData[number][keyof ServiceData]
+  ) => {
+    setServiceData(
+      serviceData.map((g, i) =>
+        i === index
+          ? {
+              ...g,
+              [key]: value,
+              ...(key === "capacity" && { cost: Number(value) * g.fees }),
+            }
+          : g
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (priceInfo) {
+      initFeesAndCost(priceInfo);
+    }
+
+    if (userData && priceInfo) {
+      setProductsInfo(userData);
+    }
+  }, [priceInfo, userData]);
+
+  useEffect(() => {
+    if (isModifySubscription && originalServiceData.length > 0) {
+      setIsDisableSubmitButton(
+        serviceData[0].capacity === originalServiceData[0].capacity &&
+          serviceData[1].capacity === originalServiceData[1].capacity
+      );
+    }
+    setTotal(serviceData.reduce((res, service) => res + service.cost || 0, 0));
+  }, [serviceData]);
+
+  return (
+    <>
+      <H1 className="h2">
+        {isModifySubscription
+          ? "Configure Your Subscription"
+          : "Upgrade your Subscription"}
+      </H1>
+      {isShowModalLoader && (
+        <ModalLoader>
+          <P>
+            Your requested changes are being processed. Please do not leave the
+            page or hit the back button until complete.
+          </P>
+        </ModalLoader>
+      )}
+      {isReviewChanges && !isShowModalLoader && (
+        <Modal
+          handleCancel={() => {
+            setIsReviewChanges(false);
+            setIsDisableSubmitButton(false);
+          }}
+          handleSubmit={handleReviewChangeSubmit}
+        >
+          <H1 className="h4">Confirm Changes</H1>
+          <P>
+            By pressing{" "}
+            <span>
+              <strong>Confirm</strong>
+            </span>{" "}
+            below, your plan will be immediately adjusted to the following
+            levels:
+          </P>
+          <ul className="m">
+            <li>{`- ${serviceData[0].capacity} simultaneous calls`}</li>
+            {userData?.account && userData?.account.device_to_call_ratio && (
+              <li>{`- ${
+                userData?.account.device_to_call_ratio *
+                (serviceData[0].capacity + serviceData[1].capacity)
+              } registered devices`}</li>
+            )}
+          </ul>
+          <P>
+            {(billingCharge?.prorated_cost || 0) > 0 &&
+              `Your new monthly charge will be $${
+                (billingCharge?.monthly_cost || 0) / 100
+              }, and you will immediately be charged a one-time prorated amount of $${
+                (billingCharge?.prorated_cost || 0) / 100
+              } to cover the remainder of the current billing period.`}
+            {billingCharge?.prorated_cost === 0 &&
+              `Your monthly charge will be $${
+                (billingCharge.monthly_cost || 0) / 100
+              }.`}
+            {(billingCharge?.prorated_cost || 0) < 0 &&
+              `Your new monthly charge will be $${
+                (billingCharge?.monthly_cost || 0) / 100
+              }, and you will receive a credit of $${
+                -(billingCharge?.prorated_cost || 0) / 100
+              } on your next invoice to reflect changes made during the current billing period.`}
+          </P>
+        </Modal>
+      )}
+      {isReturnToFreePlan && !isShowModalLoader && (
+        <Modal
+          handleCancel={() => setIsReturnToFreePlan(false)}
+          handleSubmit={handleReturnToFreePlan}
+        >
+          <H1 className="h4">Return to Free Plan</H1>
+          <P>
+            Returning to the free plan will reduce your capacity to a maximum of
+            1 simultaneous call session and 1 registered device. Your current
+            plan and capacity will continue through the rest of the billing
+            cycle and your plan change will take effect at the beginning of the
+            next billing cycle. Are you sure you want to continue?
+          </P>
+        </Modal>
+      )}
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <div className="grid grid--col4--users">
+            <div className="grid__row grid__th">
+              <div>Service</div>
+              <div>Capacity</div>
+              <div>Price</div>
+              <div>Cost</div>
+            </div>
+
+            {serviceData &&
+              serviceData
+                .filter((service) => service.visible)
+                .map((service, idx) => (
+                  <React.Fragment key={`subscription-${idx}`}>
+                    <div className="grid__row">
+                      <div>
+                        <label htmlFor={service.name || ""}>
+                          {service.service}
+                          <span>*</span>
+                        </label>
+                      </div>
+                      <div>
+                        <input
+                          id="tech_prefix"
+                          name="tech_prefix"
+                          type="number"
+                          value={service.capacity}
+                          required
+                          min={service.min}
+                          max={service.max}
+                          onChange={(e) => {
+                            updateServiceData(
+                              idx,
+                              "capacity",
+                              e.target.value ? Number(e.target.value) : ""
+                            );
+                          }}
+                        />
+                      </div>
+
+                      <div>
+                        <em>{service.feesLabel}</em>
+                      </div>
+
+                      <div>
+                        <P>
+                          <strong>
+                            {CurrencySymbol[service.currency || "usd"]}
+                            {service.cost}
+                          </strong>
+                        </P>
+                      </div>
+                    </div>
+                  </React.Fragment>
+                ))}
+            {serviceData[0].capacity !== 0 && !serviceData[1].visible && (
+              <>
+                <div className="grid__row">
+                  <label htmlFor="max_concurrent_call_sessons">
+                    {`With ${
+                      serviceData[0].capacity
+                    } call sessions you can register ${
+                      serviceData[0].capacity *
+                      (userData?.account?.device_to_call_ratio || 0)
+                    } concurrent devices`}
+                  </label>
+
+                  <div>
+                    <Button
+                      mainStyle="hollow"
+                      onClick={() =>
+                        setServiceData((prev) => {
+                          prev[1].visible = true;
+                          return [...prev];
+                        })
+                      }
+                    >
+                      Would you like to purchase additional device
+                      registrations?
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="grid__row">
+              <div>
+                <label htmlFor="total">Total Monthly Cost</label>
+              </div>
+              <div></div>
+              <div></div>
+              <div>
+                <P>
+                  <strong>
+                    {CurrencySymbol[serviceData[0].currency || "usd"]}
+                    {total}
+                  </strong>
+                </P>
+              </div>
+            </div>
+            {!isModifySubscription && (
+              <fieldset>
+                <label htmlFor="total">Payment Information</label>
+                <div className="grid__row">
+                  <div></div>
+                  <div>
+                    <PaymentElement
+                      options={{
+                        paymentMethodOrder: ["card"],
+                      }}
+                    />
+                  </div>
+                </div>
+              </fieldset>
+            )}
+          </div>
+          <fieldset>
+            <>
+              <div className={isModifySubscription ? "mast" : ""}>
+                {isModifySubscription && (
+                  <ButtonGroup right>
+                    <Button
+                      type="button"
+                      subStyle="grey"
+                      mainStyle="hollow"
+                      onClick={() => setIsReturnToFreePlan(true)}
+                      small
+                    >
+                      Return to free plan
+                    </Button>
+                  </ButtonGroup>
+                )}
+
+                <ButtonGroup right>
+                  <Button
+                    subStyle="grey"
+                    as={Link}
+                    to={`${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`}
+                    small
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" disabled={isDisableSubmitButton} small>
+                    {isModifySubscription
+                      ? "Review Changes"
+                      : `Pay ${CurrencySymbol[serviceData[0].currency || "usd"]}
+                ${total} and Upgrade to Paid Plan`}
+                  </Button>
+                </ButtonGroup>
+              </div>
+            </>
+          </fieldset>
+        </form>
+      </Section>
+    </>
+  );
+};
+
+export default SubscriptionForm;
--- a/src/containers/internal/views/accounts/subscription.tsx
+++ b/src/containers/internal/views/accounts/subscription.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import {
+  ENABLE_HOSTED_SYSTEM,
+  STRIPE_PUBLISHABLE_KEY,
+} from "src/api/constants";
+
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import SubscriptionForm from "./subscription-form";
+
+export const stripePromise = ENABLE_HOSTED_SYSTEM
+  ? loadStripe(STRIPE_PUBLISHABLE_KEY)
+  : null;
+
+export const Subscription = () => {
+  return (
+    <>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          currency: "usd",
+          paymentMethodCreation: "manual",
+        }}
+      >
+        <SubscriptionForm />
+      </Elements>
+    </>
+  );
+};
+
+export default Subscription;
--- a/src/containers/internal/views/alerts/alert-detail-item.tsx
+++ b/src/containers/internal/views/alerts/alert-detail-item.tsx
@@ -0,0 +1,59 @@
+import dayjs from "dayjs";
+import React, { useState } from "react";
+import { Alert } from "src/api/types";
+import { Icons } from "src/components";
+
+type AlertDetailsItemProps = {
+  alert: Alert;
+};
+
+export const AlertDetailItem = ({ alert }: AlertDetailsItemProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="item">
+      <details
+        className="clean"
+        onToggle={(e: React.BaseSyntheticEvent) => {
+          if (e.target.open && !open) {
+            setOpen(e.target.open);
+          }
+        }}
+      >
+        <summary className="txt--jam">
+          <div className="item__info">
+            <div className="item__title">
+              <strong>
+                {dayjs(alert.time).format("YYYY MM.DD hh:mm:ss a")}
+              </strong>
+            </div>
+            <div className="item__meta">
+              <div>
+                <div className="i txt--teal">
+                  <Icons.AlertCircle />
+                  <span>{alert.message}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </summary>
+        <div className="item__details">
+          <div className="pre-grid">
+            {Object.keys(alert).map((key) => (
+              <React.Fragment key={key}>
+                <div>{key}:</div>
+                <div>
+                  {alert[key as keyof typeof alert]
+                    ? String(alert[key as keyof typeof alert])
+                    : "null"}
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </details>
+    </div>
+  );
+};
+
+export default AlertDetailItem;
--- a/src/containers/internal/views/alerts/index.tsx
+++ b/src/containers/internal/views/alerts/index.tsx
@@ -16,7 +16,6 @@ import {
  Section,
  SelectFilter,
  Spinner,
-  Icons,
 } from "src/components";

 import type { Account, Alert, PageQuery } from "src/api/types";
@@ -27,6 +26,7 @@ import {
  getQueryFilter,
  setLocation,
 } from "src/store/localStore";
+import AlertDetailItem from "./alert-detail-item";

 export const Alerts = () => {
  const user = useSelectState("user");
@@ -112,21 +112,7 @@ export const Alerts = () => {
            <Spinner />
          ) : hasLength(alerts) ? (
            alerts.map((alert) => (
-              <div className="item" key={`${alert.alert_type}-${alert.time}`}>
-                <div className="item__info">
-                  <div className="item__title txt--jam">
-                    <strong>
-                      {dayjs(alert.time).format("YYYY MM.DD hh:mm a")}
-                    </strong>
-                  </div>
-                  <div className="item__meta">
-                    <div className="i">
-                      <Icons.AlertCircle />
-                      <span>{alert.message}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <AlertDetailItem key={alert.time} alert={alert} />
            ))
          ) : (
            <M>No data.</M>
--- a/src/containers/internal/views/applications/form.tsx
+++ b/src/containers/internal/views/applications/form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

@@ -16,11 +16,7 @@ import {
  LANG_EN_US,
  VENDOR_GOOGLE,
  LANG_EN_US_STANDARD_C,
-  VENDOR_AWS,
-  VENDOR_WELLSAID,
  useSpeechVendors,
-  VENDOR_DEEPGRAM,
-  VENDOR_SONIOX,
  VENDOR_CUSTOM,
 } from "src/vendor";
 import {
@@ -33,15 +29,17 @@ import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_APPLICATIONS,
 } from "src/router/routes";
-import { DEFAULT_WEBHOOK, WEBHOOK_METHODS } from "src/api/constants";
+import {
+  DEFAULT_WEBHOOK,
+  DISABLE_CALL_RECORDING,
+  WEBHOOK_METHODS,
+} from "src/api/constants";

 import type {
  RecognizerVendors,
  SynthesisVendors,
-  Voice,
-  VoiceLanguage,
-  Language,
  VendorOptions,
+  LabelOptions,
 } from "src/vendor/types";

 import type {
@@ -55,6 +53,7 @@ import type {
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
 import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import SpeechProviderSelection from "./speech-selection";

 type ApplicationFormProps = {
  application?: UseApiDataMap<Application>;
@@ -64,6 +63,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const navigate = useNavigate();
  const { synthesis, recognizers } = useSpeechVendors();
  const user = useSelectState("user");
+  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useApiData<Application[]>("Applications");
  const [applicationName, setApplicationName] = useState("");
@@ -94,8 +94,41 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const [message, setMessage] = useState("");
  const [apiUrl, setApiUrl] = useState("");
  const [credentials] = useApiData<SpeechCredential[]>(apiUrl);
-  const [softTtsVendor, setSoftTtsVendor] = useState<VendorOptions[]>(vendors);
-  const [softSttVendor, setSoftSttVendor] = useState<VendorOptions[]>(vendors);
+  const [ttsVendorOptions, setttsVendorOptions] =
+    useState<VendorOptions[]>(vendors);
+  const [sttVendorOptions, setSttVendorOptions] =
+    useState<VendorOptions[]>(vendors);
+  const [recogLabel, setRecogLabel] = useState("");
+  const [ttsLabelOptions, setTtsLabelOptions] = useState<LabelOptions[]>([]);
+  const [sttLabelOptions, setSttLabelOptions] = useState<LabelOptions[]>([]);
+  const [fallbackTtsLabelOptions, setFallbackTtsLabelOptions] = useState<
+    LabelOptions[]
+  >([]);
+  const [fallbackSttLabelOptions, setFallbackSttLabelOptions] = useState<
+    LabelOptions[]
+  >([]);
+  const [synthLabel, setSynthLabel] = useState("");
+  const [recordAllCalls, setRecordAllCalls] = useState(false);
+
+  const [useForFallbackSpeech, setUseForFallbackSpeech] = useState(false);
+  const [fallbackSpeechSynthsisVendor, setFallbackSpeechSynthsisVendor] =
+    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
+  const [fallbackSpeechSynthsisLanguage, setFallbackSpeechSynthsisLanguage] =
+    useState(LANG_EN_US);
+  const [fallbackSpeechSynthsisVoice, setFallbackSpeechSynthsisVoice] =
+    useState(LANG_EN_US_STANDARD_C);
+  const [fallbackSpeechSynthsisLabel, setFallbackSpeechSynthsisLabel] =
+    useState("");
+  const [fallbackSpeechRecognizerVendor, setFallbackSpeechRecognizerVendor] =
+    useState<keyof RecognizerVendors>(VENDOR_GOOGLE);
+  const [
+    fallbackSpeechRecognizerLanguage,
+    setFallbackSpeechRecognizerLanguage,
+  ] = useState(LANG_EN_US);
+  const [fallbackSpeechRecognizerLabel, setFallbackSpeechRecognizerLabel] =
+    useState("");
+  const [initalCheckFallbackSpeech, setInitalCheckFallbackSpeech] =
+    useState(false);

  /** This lets us map and render the same UI for each... */
  const webhooks = [
@@ -166,7 +199,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      }
    }

-    const payload = {
+    const payload: Partial<Application> = {
      name: applicationName,
      app_json: applicationJson || null,
      call_hook: callWebhook || null,
@@ -175,9 +208,34 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      call_status_hook: statusWebhook || null,
      speech_synthesis_vendor: synthVendor || null,
      speech_synthesis_language: synthLang || null,
+      speech_synthesis_label: synthLabel || null,
      speech_synthesis_voice: synthVoice || null,
      speech_recognizer_vendor: recogVendor || null,
      speech_recognizer_language: recogLang || null,
+      speech_recognizer_label: recogLabel || null,
+      record_all_calls: recordAllCalls ? 1 : 0,
+      use_for_fallback_speech: useForFallbackSpeech ? 1 : 0,
+      fallback_speech_synthesis_vendor: useForFallbackSpeech
+        ? fallbackSpeechSynthsisVendor || null
+        : null,
+      fallback_speech_synthesis_language: useForFallbackSpeech
+        ? fallbackSpeechSynthsisLanguage || null
+        : null,
+      fallback_speech_synthesis_voice: useForFallbackSpeech
+        ? fallbackSpeechSynthsisVoice || null
+        : null,
+      fallback_speech_synthesis_label: useForFallbackSpeech
+        ? fallbackSpeechSynthsisLabel || null
+        : null,
+      fallback_speech_recognizer_vendor: useForFallbackSpeech
+        ? fallbackSpeechRecognizerVendor || null
+        : null,
+      fallback_speech_recognizer_language: useForFallbackSpeech
+        ? fallbackSpeechRecognizerLanguage || null
+        : null,
+      fallback_speech_recognizer_label: useForFallbackSpeech
+        ? fallbackSpeechRecognizerLabel || null
+        : null,
    };

    if (application && application.data) {
@@ -205,7 +263,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  };

-  useEffect(() => {
+  useMemo(() => {
    if (credentials && hasLength(credentials)) {
      const v = credentials
        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_tts)
@@ -217,7 +275,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            value: tv.vendor,
          })
        );
-      setSoftTtsVendor(vendors.concat(v));
+      setttsVendorOptions(vendors.concat(v));

      const v2 = credentials
        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_stt)
@@ -229,9 +287,100 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            value: tv.vendor,
          })
        );
-      setSoftSttVendor(vendors.concat(v2));
+      setSttVendorOptions(vendors.concat(v2));
+
+      const noneLabelObject = {
+        name: "None",
+        value: "",
+      };
+
+      let c1 = credentials.filter(
+        (c) =>
+          c.vendor === synthVendor &&
+          (!c.account_sid || c.account_sid === accountSid) &&
+          c.use_for_tts
+      );
+      let c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setTtsLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+
+      c1 = fallbackSpeechSynthsisVendor
+        ? credentials.filter(
+            (c) =>
+              c.vendor === fallbackSpeechSynthsisVendor &&
+              (!c.account_sid || c.account_sid === accountSid) &&
+              c.use_for_tts
+          )
+        : [];
+
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+      setFallbackTtsLabelOptions(
+        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
+      );
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setSttLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+
+      c1 = fallbackSpeechRecognizerVendor
+        ? credentials.filter(
+            (c) =>
+              c.vendor === fallbackSpeechRecognizerVendor &&
+              (!c.account_sid || c.account_sid === accountSid) &&
+              c.use_for_stt
+          )
+        : [];
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setFallbackSttLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
    }
-  }, [credentials]);
+  }, [
+    credentials,
+    synthVendor,
+    recogVendor,
+    fallbackSpeechRecognizerVendor,
+    fallbackSpeechSynthsisVendor,
+  ]);

  useEffect(() => {
    if (accountSid) {
@@ -243,6 +392,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    setLocation();
    if (application && application.data) {
      setApplicationName(application.data.name);
+      setRecordAllCalls(application.data.record_all_calls ? true : false);
      if (!applicationJson) {
        setApplicationJson(application.data.app_json || "");
      }
@@ -314,9 +464,90 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      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
+        );
+      }
+      if (application.data.fallback_speech_recognizer_vendor) {
+        setFallbackSpeechRecognizerVendor(
+          application.data
+            .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
+        );
+      }
+      if (application.data.fallback_speech_synthesis_vendor) {
+        setFallbackSpeechSynthsisVendor(
+          application.data
+            .fallback_speech_synthesis_vendor as keyof SynthesisVendors
+        );
+      }
+      if (application.data.fallback_speech_synthesis_language) {
+        setFallbackSpeechSynthsisLanguage(
+          application.data.fallback_speech_synthesis_language
+        );
+      }
+      if (application.data.fallback_speech_synthesis_voice) {
+        setFallbackSpeechSynthsisVoice(
+          application.data.fallback_speech_synthesis_voice
+        );
+      }
+      if (application.data.fallback_speech_synthesis_label) {
+        setFallbackSpeechSynthsisLabel(
+          application.data.fallback_speech_synthesis_label
+        );
+      }
    }
  }, [application]);

+  const swapPrimaryAndfalloverSpeech = () => {
+    let tmp;
+
+    tmp = synthVendor;
+    setSynthVendor(fallbackSpeechSynthsisVendor);
+    setFallbackSpeechSynthsisVendor(tmp);
+
+    tmp = synthLang;
+    setSynthLang(fallbackSpeechSynthsisLanguage);
+    setFallbackSpeechSynthsisLanguage(synthLang);
+
+    tmp = synthVoice;
+    setSynthVoice(fallbackSpeechSynthsisVoice);
+    setFallbackSpeechSynthsisVoice(tmp);
+
+    tmp = synthLabel;
+    setSynthLabel(fallbackSpeechSynthsisLabel);
+    setFallbackSpeechSynthsisLabel(tmp);
+
+    tmp = recogVendor;
+    setRecogVendor(fallbackSpeechRecognizerVendor);
+    setFallbackSpeechRecognizerVendor(tmp);
+
+    tmp = recogLang;
+    setRecogLang(fallbackSpeechRecognizerLanguage);
+    setFallbackSpeechRecognizerLanguage(tmp);
+
+    tmp = recogLabel;
+    setRecogLabel(fallbackSpeechRecognizerLabel);
+    setFallbackSpeechRecognizerLabel(tmp);
+  };
+
  return (
    <Section slim>
      <form className="form form--internal" onSubmit={handleSubmit}>
@@ -443,216 +674,89 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            </fieldset>
          );
        })}
-        {synthesis && (
-          <fieldset>
-            <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
-            <Selector
-              id="synthesis_vendor"
-              name="synthesis_vendor"
-              value={synthVendor}
-              options={softTtsVendor.filter(
-                (vendor) =>
-                  vendor.value != VENDOR_DEEPGRAM &&
-                  vendor.value != VENDOR_SONIOX &&
-                  vendor.value !== VENDOR_CUSTOM
-              )}
-              onChange={(e) => {
-                const vendor = e.target.value as keyof SynthesisVendors;
-                setSynthVendor(vendor);
+        <SpeechProviderSelection
+          serviceProviderSid={
+            currentServiceProvider?.service_provider_sid || ""
+          }
+          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]}
+          sttLabelOptions={sttLabelOptions}
+          sttLabel={[recogLabel, setRecogLabel]}
+        />

-                /** 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;
-                }
-
-                /** 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);
-              }}
+        <fieldset>
+          <Checkzone
+            hidden
+            name="cz_fallback_speech"
+            label="Use a fallback speech vendor if primary fails"
+            initialCheck={initalCheckFallbackSpeech}
+            handleChecked={(e) => {
+              setUseForFallbackSpeech(e.target.checked);
+            }}
+          >
+            <SpeechProviderSelection
+              serviceProviderSid={
+                currentServiceProvider?.service_provider_sid || ""
+              }
+              accountSid={accountSid}
+              credentials={credentials}
+              synthesis={synthesis}
+              ttsVendor={[
+                fallbackSpeechSynthsisVendor,
+                setFallbackSpeechSynthsisVendor,
+              ]}
+              ttsVendorOptions={ttsVendorOptions}
+              ttsVoice={[
+                fallbackSpeechSynthsisVoice,
+                setFallbackSpeechSynthsisVoice,
+              ]}
+              ttsLang={[
+                fallbackSpeechSynthsisLanguage,
+                setFallbackSpeechSynthsisLanguage,
+              ]}
+              ttsLabelOptions={fallbackTtsLabelOptions}
+              ttsLabel={[
+                fallbackSpeechSynthsisLabel,
+                setFallbackSpeechSynthsisLabel,
+              ]}
+              recognizers={recognizers}
+              sttVendor={[
+                fallbackSpeechRecognizerVendor,
+                setFallbackSpeechRecognizerVendor,
+              ]}
+              sttVendorOptions={sttVendorOptions}
+              sttLang={[
+                fallbackSpeechRecognizerLanguage,
+                setFallbackSpeechRecognizerLanguage,
+              ]}
+              sttLabelOptions={fallbackSttLabelOptions}
+              sttLabel={[
+                fallbackSpeechRecognizerLabel,
+                setFallbackSpeechRecognizerLabel,
+              ]}
            />
-            {synthVendor &&
-              !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
-              synthLang && (
-                <>
-                  <label htmlFor="synthesis_lang">Language</label>
-                  <Selector
-                    id="synthesis_lang"
-                    name="synthesis_lang"
-                    value={synthLang}
-                    options={synthesis[
-                      synthVendor as keyof SynthesisVendors
-                    ].map((lang: VoiceLanguage) => ({
-                      name: lang.name,
-                      value: lang.code,
-                    }))}
-                    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>
-                  <Selector
-                    id="synthesis_voice"
-                    name="synthesis_voice"
-                    value={synthVoice}
-                    options={
-                      synthesis[synthVendor as keyof SynthesisVendors]
-                        .filter(
-                          (lang: VoiceLanguage) => lang.code === synthLang
-                        )
-                        .flatMap((lang: VoiceLanguage) =>
-                          lang.voices.map((voice: Voice) => ({
-                            name: voice.name,
-                            value: voice.value,
-                          }))
-                        ) as Voice[]
-                    }
-                    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>
-        )}
-        {recognizers && (
-          <fieldset>
-            <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
-            <Selector
-              id="recognizer_vendor"
-              name="recognizer_vendor"
-              value={recogVendor}
-              options={softSttVendor.filter(
-                (vendor) =>
-                  vendor.value != VENDOR_WELLSAID &&
-                  vendor.value !== VENDOR_CUSTOM
-              )}
-              onChange={(e) => {
-                const vendor = e.target.value as keyof RecognizerVendors;
-                setRecogVendor(vendor);
-
-                /**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);
-                }
-              }}
-            />
-            {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,
-                    }))}
-                    onChange={(e) => {
-                      setRecogLang(e.target.value);
-                    }}
-                  />
-                </>
-              )}
-            {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>
-        )}
+            <fieldset>
+              <Button
+                type="button"
+                small
+                onClick={swapPrimaryAndfalloverSpeech}
+              >
+                Swap primary and fallback
+              </Button>
+            </fieldset>
+          </Checkzone>
+        </fieldset>
        {(import.meta.env.INITIAL_APP_JSON_ENABLED === undefined ||
          import.meta.env.INITIAL_APP_JSON_ENABLED) && (
          <fieldset>
@@ -683,6 +787,23 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            </Checkzone>
          </fieldset>
        )}
+        {!DISABLE_CALL_RECORDING &&
+          accounts?.filter((a) => a.account_sid === accountSid).length &&
+          !accounts?.filter((a) => a.account_sid === accountSid)[0]
+            .record_all_calls && (
+            <fieldset>
+              <label htmlFor="record_all_call" className="chk">
+                <input
+                  id="record_all_call"
+                  name="record_all_call"
+                  type="checkbox"
+                  onChange={(e) => setRecordAllCalls(e.target.checked)}
+                  checked={recordAllCalls}
+                />
+                <div>Record all calls</div>
+              </label>
+            </fieldset>
+          )}
        {message && <fieldset>{<Message message={message} />}</fieldset>}
        <fieldset>
          <ButtonGroup left>
--- a/src/containers/internal/views/applications/index.tsx
+++ b/src/containers/internal/views/applications/index.tsx
@@ -96,7 +96,7 @@ export const Applications = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter
          placeholder="Filter applications"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/applications/speech-selection.tsx
+++ b/src/containers/internal/views/applications/speech-selection.tsx
@@ -0,0 +1,444 @@
+import React, { useEffect, useState } from "react";
+import {
+  getGoogleCustomVoices,
+  postSpeechServiceLanguages,
+  postSpeechServiceVoices,
+} from "src/api";
+import { SpeechCredential } from "src/api/types";
+import { Selector } from "src/components/forms";
+import { SelectorOption } from "src/components/forms/selector";
+import { useSelectState } from "src/store";
+import { hasLength } from "src/utils";
+import {
+  ELEVENLABS_LANG_EN,
+  LANG_COBALT_EN_US,
+  LANG_EN_US,
+  LANG_EN_US_STANDARD_C,
+  VENDOR_AWS,
+  VENDOR_COBALT,
+  VENDOR_CUSTOM,
+  VENDOR_DEEPGRAM,
+  VENDOR_ELEVENLABS,
+  VENDOR_GOOGLE,
+  VENDOR_MICROSOFT,
+  VENDOR_SONIOX,
+  VENDOR_WELLSAID,
+} from "src/vendor";
+import {
+  LabelOptions,
+  Language,
+  RecognizerVendors,
+  SynthesisVendors,
+  VendorOptions,
+  Voice,
+  VoiceLanguage,
+} from "src/vendor/types";
+type SpeechProviderSelectionProbs = {
+  accountSid: string;
+  serviceProviderSid: string;
+  credentials: SpeechCredential[] | undefined;
+  synthesis: SynthesisVendors | undefined;
+  ttsVendor: [
+    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>>
+  ];
+  sttVendorOptions: VendorOptions[];
+  sttLang: [string, React.Dispatch<React.SetStateAction<string>>];
+  sttLabelOptions: LabelOptions[];
+  sttLabel: [string, React.Dispatch<React.SetStateAction<string>>];
+};
+
+export const SpeechProviderSelection = ({
+  accountSid,
+  serviceProviderSid,
+  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 [selectedCredential, setSelectedCredential] = useState<
+    SpeechCredential | undefined
+  >();
+  const [synthesisVoiceOptions, setSynthesisVoiceOptions] = useState<
+    SelectorOption[]
+  >([]);
+  const [synthesisLanguageOptions, setSynthesisLanguageOptions] = useState<
+    SelectorOption[]
+  >([]);
+
+  const currentServiceProvider = useSelectState("currentServiceProvider");
+
+  useEffect(() => {
+    if (!synthesis) {
+      return;
+    }
+    let options = synthesis[synthVendor as keyof SynthesisVendors]
+      .filter((lang: VoiceLanguage) => {
+        // ELEVENLABS has same voice for all lange, take voices from the 1st language
+        if (synthVendor === VENDOR_ELEVENLABS) {
+          return true;
+        }
+        return lang.code === synthLang;
+      })
+      .flatMap((lang: VoiceLanguage) =>
+        lang.voices.map((voice: Voice) => ({
+          name: voice.name,
+          value: voice.value,
+        }))
+      ) as Voice[];
+    setSynthesisVoiceOptions(options);
+
+    options = synthesis[synthVendor as keyof SynthesisVendors].map(
+      (lang: VoiceLanguage) => ({
+        name: lang.name,
+        value: lang.code,
+      })
+    );
+    setSynthesisLanguageOptions(options);
+
+    if (synthVendor === VENDOR_ELEVENLABS) {
+      postSpeechServiceVoices(
+        currentServiceProvider
+          ? currentServiceProvider.service_provider_sid
+          : "",
+        {
+          vendor: synthVendor,
+          label: synthLabel,
+        }
+      ).then(({ json }) => {
+        if (json.length > 0) {
+          setSynthesisVoiceOptions(json);
+        }
+      });
+
+      postSpeechServiceLanguages(
+        currentServiceProvider
+          ? currentServiceProvider.service_provider_sid
+          : "",
+        {
+          vendor: synthVendor,
+          label: synthLabel,
+        }
+      ).then(({ json }) => {
+        if (json.length > 0) {
+          setSynthesisLanguageOptions(json);
+        }
+      });
+    } else if (synthVendor === VENDOR_GOOGLE) {
+      getGoogleCustomVoices({
+        ...(synthLabel && { label: synthLabel }),
+        account_sid: accountSid,
+        service_provider_sid: serviceProviderSid,
+      }).then(({ json }) => {
+        const customVOices = json.map((v) => ({
+          name: `${v.name} (Custom)`,
+          value: `custom_${v.google_custom_voice_sid}`,
+        }));
+        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);
+        }
+      });
+    }
+  }, [synthVendor, synthesis, synthLabel, accountSid, serviceProviderSid]);
+
+  useEffect(() => {
+    if (credentials) {
+      setSelectedCredential(
+        credentials.find(
+          (c) => c.vendor === synthVendor && c.label === synthLabel
+        )
+      );
+    }
+  }, [synthVendor, synthLabel, credentials]);
+  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_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) {
+                const newLang = synthesis[vendor].find(
+                  (lang) => lang.code === ELEVENLABS_LANG_EN
+                );
+                setSynthLang(ELEVENLABS_LANG_EN);
+                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);
+                }}
+              />
+            </>
+          )}
+          {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) && (
+            <>
+              <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>
+      )}
+      {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_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,
+                  }))}
+                  onChange={(e) => {
+                    setRecogLang(e.target.value);
+                  }}
+                />
+              </>
+            )}
+          {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>
+      )}
+    </>
+  );
+};
+
+export default SpeechProviderSelection;
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
@@ -22,6 +22,7 @@ import {
  FQDN,
  FQDN_TOP_LEVEL,
  INVALID,
+  IP,
  NETMASK_OPTIONS,
  SIP_GATEWAY_PROTOCOL_OPTIONS,
  TCP_MAX_PORT,
@@ -47,6 +48,8 @@ import {
  hasLength,
  isValidPort,
  disableDefaultTrunkRouting,
+  hasValue,
+  isNotBlank,
 } from "src/utils";

 import type {
@@ -236,7 +239,20 @@ export const CarrierForm = ({
    value: typeof sipGateways[number][keyof SipGateway]
  ) => {
    setSipGateways(
-      sipGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
+      sipGateways.map((g, i) =>
+        i === index
+          ? {
+              ...g,
+              [key]: value,
+              // If Change to ipv4 and port is null, change port to 5060
+              ...(key === "ipv4" &&
+                value &&
+                typeof value === "string" &&
+                getIpValidationType(value) === IP &&
+                g.port === null && { port: 5060 }),
+            }
+          : g
+      )
    );
  };

@@ -320,10 +336,13 @@ export const CarrierForm = ({
      const gateway = sipGateways[i];
      const type = getIpValidationType(gateway.ipv4);

+      /** DH: unclear why we had this restriction, removing for now
      if (type === FQDN_TOP_LEVEL) {
        refSipIp.current[i].focus();
        return "When using an FQDN, you must use a subdomain (e.g. sip.example.com).";
      } else if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
+      */
+      if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
        refSipIp.current[i].focus();
        return "A fully qualified domain name may only be used for outbound calls.";
      } else if (type === INVALID) {
@@ -409,7 +428,9 @@ export const CarrierForm = ({
    /** When to switch to `sip` tab */

    const emptySipIp = sipGateways.find((g) => g.ipv4.trim() === "");
-    const invalidSipPort = sipGateways.find((g) => !isValidPort(g.port));
+    const invalidSipPort = sipGateways.find(
+      (g) => hasValue(g.port) && !isValidPort(g.port)
+    );
    const sipGatewayValidation = getSipValidation();

    /** Empty SIP gateway */
@@ -776,7 +797,7 @@ export const CarrierForm = ({
                  Does your carrier require authentication on outbound calls?
                </MS>
                <label htmlFor="sip_username">
-                  Username {sipPass || sipRegister ? <span>*</span> : ""}
+                  Auth username {sipPass || sipRegister ? <span>*</span> : ""}
                </label>
                <input
                  id="sip_username"
@@ -831,7 +852,7 @@ export const CarrierForm = ({
                      required={sipRegister}
                      onChange={(e) => setSipRealm(e.target.value)}
                    />
-                    <label htmlFor="from_user">SIP from user</label>
+                    <label htmlFor="from_user">Username</label>
                    <input
                      id="from_user"
                      name="from_user"
@@ -962,13 +983,21 @@ export const CarrierForm = ({
                          type="number"
                          min="0"
                          max={TCP_MAX_PORT}
-                          placeholder={DEFAULT_SIP_GATEWAY.port.toString()}
-                          value={g.port}
+                          placeholder={
+                            g.protocol === "tls" || g.protocol === "tls/srtp"
+                              ? ""
+                              : DEFAULT_SIP_GATEWAY.port?.toString()
+                          }
+                          value={g.port === null ? "" : g.port}
                          onChange={(e) => {
                            updateSipGateways(
                              i,
                              "port",
-                              Number(e.target.value)
+                              g.outbound > 0 &&
+                                !isNotBlank(e.target.value) &&
+                                getIpValidationType(g.ipv4) !== IP
+                                ? null
+                                : Number(e.target.value)
                            );
                          }}
                          ref={(ref: HTMLInputElement) =>
@@ -1064,6 +1093,29 @@ export const CarrierForm = ({
                          <div>Outbound</div>
                        </label>
                      </div>
+                      {g.outbound > 0 && g.protocol === "tls/srtp" && (
+                        <div>
+                          <label
+                            htmlFor={`sip_pad_crypto_${i}`}
+                            className="chk"
+                          >
+                            <input
+                              id={`sip_pad_crypto_${i}`}
+                              name={`sip_pad_crypto_${i}`}
+                              type="checkbox"
+                              checked={g.pad_crypto ? true : false}
+                              onChange={(e) => {
+                                updateSipGateways(
+                                  i,
+                                  "pad_crypto",
+                                  e.target.checked
+                                );
+                              }}
+                            />
+                            <div>Pad crypto</div>
+                          </label>
+                        </div>
+                      )}
                    </div>

                    <button
--- a/src/containers/internal/views/carriers/index.tsx
+++ b/src/containers/internal/views/carriers/index.tsx
@@ -30,16 +30,24 @@ import {
  API_SIP_GATEWAY,
  API_SMPP_GATEWAY,
  CARRIER_REG_OK,
+  ENABLE_HOSTED_SYSTEM,
  USER_ACCOUNT,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";

-import type { Account, Carrier, SipGateway, SmppGateway } from "src/api/types";
+import type {
+  Account,
+  Carrier,
+  CurrentUserData,
+  SipGateway,
+  SmppGateway,
+} from "src/api/types";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";

 export const Carriers = () => {
  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);
@@ -130,7 +138,16 @@ export const Carriers = () => {
  return (
    <>
      <section className="mast">
-        <H1 className="h2">Carriers</H1>
+        <div>
+          <H1 className="h2">Carriers</H1>
+          {ENABLE_HOSTED_SYSTEM && (
+            <M>
+              Have your carrier send calls to{" "}
+              <span>{userData?.account?.sip_realm}</span>
+            </M>
+          )}
+        </div>
+
        <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
          {" "}
          <Icon>
@@ -138,7 +155,7 @@ export const Carriers = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter
          placeholder="Filter carriers"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/carriers/pcap.tsx
+++ b/src/containers/internal/views/carriers/pcap.tsx
@@ -8,7 +8,7 @@ import {
 } from "src/api";
 import { toastError } from "src/store";

-import type { Pcap } from "src/api/types";
+import type { DownloadedBlob } from "src/api/types";

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

  useEffect(() => {
+    if (!sipCallId) return;
    const p = accountSid
      ? getRecentCall(accountSid, sipCallId)
      : getServiceProviderRecentCall(serviceProviderSid, sipCallId);
    p.then(({ json }) => {
      if (json.total > 0) {
        const p1 = accountSid
-          ? getPcap(accountSid, sipCallId)
-          : getServiceProviderPcap(serviceProviderSid, sipCallId);
+          ? getPcap(accountSid, sipCallId, "register")
+          : getServiceProviderPcap(serviceProviderSid, sipCallId, "register");
        p1.then(({ blob }) => {
          if (blob) {
            setPcap({
--- a/src/containers/internal/views/clients/add.tsx
+++ b/src/containers/internal/views/clients/add.tsx
@@ -0,0 +1,14 @@
+import { H1 } from "@jambonz/ui-kit";
+import React from "react";
+import ClientsForm from "./form";
+
+export const ClientsAdd = () => {
+  return (
+    <>
+      <H1 className="h2">Add sip client</H1>
+      <ClientsForm />
+    </>
+  );
+};
+
+export default ClientsAdd;
--- a/src/containers/internal/views/clients/delete.tsx
+++ b/src/containers/internal/views/clients/delete.tsx
@@ -0,0 +1,28 @@
+import { P } from "@jambonz/ui-kit";
+import React from "react";
+import { Client } from "src/api/types";
+import { Modal } from "src/components";
+
+type ClientsDeleteProps = {
+  client: Client;
+  handleCancel: () => void;
+  handleSubmit: () => void;
+};
+export const ClientsDelete = ({
+  client,
+  handleCancel,
+  handleSubmit,
+}: ClientsDeleteProps) => {
+  return (
+    <>
+      <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
+        <P>
+          Are you sure you want to delete the sip client{" "}
+          <strong>{client.username}</strong>?
+        </P>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientsDelete;
--- a/src/containers/internal/views/clients/edit.tsx
+++ b/src/containers/internal/views/clients/edit.tsx
@@ -0,0 +1,30 @@
+import { H1 } from "@jambonz/ui-kit";
+import React, { useEffect } from "react";
+import { 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";
+
+export const ClientsEdit = () => {
+  const params = useParams();
+  const [data, refetch, error] = useApiData<Client>(
+    `Clients/${params.client_sid}`
+  );
+
+  /** Handle error toast at top level... */
+  useEffect(() => {
+    if (error) {
+      toastError(error.msg);
+    }
+  }, [error]);
+
+  return (
+    <>
+      <H1 className="h2">Edit sip client</H1>
+      <ClientsForm client={{ data, refetch, error }} />
+    </>
+  );
+};
+
+export default ClientsEdit;
--- a/src/containers/internal/views/clients/form.tsx
+++ b/src/containers/internal/views/clients/form.tsx
@@ -0,0 +1,213 @@
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  deleteClient,
+  postClient,
+  putClient,
+  useServiceProviderData,
+} from "src/api";
+import { USER_ACCOUNT } from "src/api/constants";
+import { Account, Client, UseApiDataMap } from "src/api/types";
+import { Section } 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 ClientsDelete from "./delete";
+import { hasValue } from "src/utils";
+import { IMessage } from "src/store/types";
+
+type ClientsFormProps = {
+  client?: UseApiDataMap<Client>;
+};
+
+export const ClientsForm = ({ client }: ClientsFormProps) => {
+  const user = useSelectState("user");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const navigate = useNavigate();
+
+  const [accountSid, setAccountSid] = useState("");
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const [isActive, setIsActive] = useState(true);
+  const [modal, setModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!client) {
+      postClient({
+        account_sid: accountSid,
+        username: username,
+        password: password,
+        is_active: isActive,
+      })
+        .then(() => {
+          toastSuccess("Client created successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    } else {
+      putClient(client.data?.client_sid || "", {
+        account_sid: accountSid,
+        username: username,
+        ...(password && { password: password }),
+        is_active: isActive,
+      })
+        .then(() => {
+          toastSuccess("Client updated successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  const handleCancel = () => {
+    setModal(false);
+  };
+
+  const handleDelete = () => {
+    if (client) {
+      deleteClient(client.data?.client_sid || "")
+        .then(() => {
+          toastSuccess("Client deleted successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (client && client.data) {
+      if (client.data.username) {
+        setUsername(client.data.username);
+      }
+
+      if (client.data.account_sid) {
+        setAccountSid(client.data.account_sid);
+      }
+
+      if (client.data.password) {
+        setPassword(client.data.password);
+      }
+
+      setIsActive(client.data.is_active);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    const acc = accounts?.find((a) => a.account_sid === accountSid);
+    if (!accountSid || !accounts || !acc) return;
+    if (!acc?.sip_realm) {
+      setErrorMessage(`Sip realm is not set for the account.`);
+    } else {
+      setErrorMessage("");
+    }
+  }, [accountSid]);
+  return (
+    <>
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <fieldset>
+            <MS>{MSG_REQUIRED_FIELDS}</MS>
+            {errorMessage && <Message message={errorMessage} />}
+          </fieldset>
+          <fieldset>
+            <div className="multi">
+              <div className="inp">
+                <label htmlFor="lcr_name">
+                  User Name<span>*</span>
+                </label>
+                <input
+                  id="client_username"
+                  name="client_username"
+                  type="text"
+                  placeholder="user name"
+                  value={username}
+                  required={true}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </div>
+            </div>
+            <label htmlFor="is_active" className="chk">
+              <input
+                id="is_active"
+                name="is_active"
+                type="checkbox"
+                checked={isActive}
+                onChange={(e) => setIsActive(e.target.checked)}
+              />
+              <div>Active</div>
+            </label>
+          </fieldset>
+          <fieldset>
+            <label htmlFor="password">
+              Password{!hasValue(client) && <span>*</span>}
+            </label>
+            <Passwd
+              id="password"
+              required={!hasValue(client)}
+              name="password"
+              value={password}
+              placeholder="Password"
+              setValue={setPassword}
+            />
+          </fieldset>
+          {user?.scope !== USER_ACCOUNT && (
+            <fieldset>
+              <AccountSelect
+                accounts={accounts}
+                account={[accountSid, setAccountSid]}
+                label="Used by"
+                required={true}
+                defaultOption={false}
+                disabled={hasValue(client)}
+              />
+            </fieldset>
+          )}
+          <fieldset>
+            <ButtonGroup left className={client && "btns--spaced"}>
+              <Button
+                small
+                subStyle="grey"
+                as={Link}
+                to={ROUTE_INTERNAL_CLIENTS}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" small disabled={errorMessage !== ""}>
+                Save
+              </Button>
+              {client && client.data && (
+                <Button
+                  small
+                  type="button"
+                  subStyle="grey"
+                  onClick={() => setModal(true)}
+                >
+                  Delete User
+                </Button>
+              )}
+            </ButtonGroup>
+          </fieldset>
+        </form>
+      </Section>
+      {client && client.data && modal && (
+        <ClientsDelete
+          client={client.data}
+          handleCancel={handleCancel}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default ClientsForm;
--- a/src/containers/internal/views/clients/index.tsx
+++ b/src/containers/internal/views/clients/index.tsx
@@ -0,0 +1,229 @@
+import { Button, H1, Icon, M } from "@jambonz/ui-kit";
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { deleteClient, useApiData, useServiceProviderData } from "src/api";
+import { Account, Client, CurrentUserData } from "src/api/types";
+import {
+  AccountFilter,
+  Icons,
+  ScopedAccess,
+  SearchFilter,
+  Section,
+  Spinner,
+} from "src/components";
+import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
+import { toastError, toastSuccess, 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";
+
+export const Clients = () => {
+  const user = useSelectState("user");
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const [clients, refetch] = useApiData<Client[]>("Clients");
+
+  const [accountSid, setAccountSid] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<
+    Account | null | undefined
+  >(null);
+  const [filter, setFilter] = useState("");
+  const [client, setClient] = useState<Client | null>();
+
+  const tmpFilteredClients = useMemo(() => {
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+      return clients;
+    }
+
+    setSelectedAccount(
+      accountSid
+        ? accounts?.find((a: Account) => a.account_sid === accountSid)
+        : null
+    );
+
+    return clients
+      ? clients.filter((c) => {
+          return accountSid
+            ? c.account_sid === accountSid
+            : accounts
+            ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
+            : false;
+        })
+      : [];
+  }, [accountSid, clients, accounts]);
+
+  const filteredClients = useFilteredResults(filter, tmpFilteredClients);
+
+  const handleDelete = () => {
+    if (client) {
+      deleteClient(client.client_sid || "")
+        .then(() => {
+          toastSuccess(
+            <>
+              Deleted sip client <strong>{client.username}</strong>
+            </>
+          );
+          setClient(null);
+          refetch();
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  return (
+    <>
+      <section className="mast">
+        <div>
+          <H1 className="h2">SIP client credentials</H1>
+          {user?.scope === USER_ACCOUNT ? (
+            userData?.account?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{userData?.account?.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : selectedAccount ? (
+            selectedAccount?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{selectedAccount.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add sip client">
+          {" "}
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Link>
+      </section>
+
+      <section className="filters filters--multi">
+        <SearchFilter
+          placeholder="Filter clients"
+          filter={[filter, setFilter]}
+        />
+        <ScopedAccess user={user} scope={Scope.admin}>
+          <AccountFilter
+            account={[accountSid, setAccountSid]}
+            accounts={accounts}
+            label=""
+            defaultOption
+          />
+        </ScopedAccess>
+      </section>
+      <Section {...(hasLength(filteredClients) && { slim: true })}>
+        <div className="list">
+          {!hasValue(filteredClients) && hasLength(accounts) ? (
+            <Spinner />
+          ) : hasLength(filteredClients) ? (
+            filteredClients.map((c) => (
+              <div className="item" key={c.client_sid}>
+                <div className="item__info">
+                  <div className="item__title">
+                    <Link
+                      to={`${ROUTE_INTERNAL_CLIENTS}/${c.client_sid}/edit`}
+                      title="Edit outbound call routes"
+                      className="i"
+                    >
+                      <strong>{c.username}</strong>
+                      <Icons.ArrowRight />
+                    </Link>
+                  </div>
+                  <div className="item__meta">
+                    <div>
+                      <div
+                        className={`i txt--${c.is_active ? "teal" : "grey"}`}
+                      >
+                        {c.is_active ? (
+                          <Icons.CheckCircle />
+                        ) : (
+                          <Icons.XCircle />
+                        )}
+                        <span>{c.is_active ? "Active" : "Inactive"}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className={`i txt--${c.account_sid ? "teal" : "grey"}`}
+                      >
+                        <Icons.Activity />
+                        <span>
+                          {
+                            accounts?.find(
+                              (acct) => acct.account_sid === c.account_sid
+                            )?.name
+                          }
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="item__actions">
+                  <Link
+                    to={`${ROUTE_INTERNAL_CLIENTS}/${c.client_sid}/edit`}
+                    title="Edit Client"
+                  >
+                    <Icons.Edit3 />
+                  </Link>
+                  <button
+                    type="button"
+                    title="Delete client"
+                    onClick={() => setClient(c)}
+                    className="btnty"
+                  >
+                    <Icons.Trash />
+                  </button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <M>No sip clients.</M>
+          )}
+        </div>
+      </Section>
+      <Section clean>
+        <Button small as={Link} to={`${ROUTE_INTERNAL_CLIENTS}/add`}>
+          Add sip client
+        </Button>
+      </Section>
+      {client && (
+        <ClientsDelete
+          client={client}
+          handleCancel={() => setClient(null)}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default Clients;
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -122,6 +122,7 @@ export const Card = ({
      className={`lcr lcr--route lcr-card lcr-card-${
        isDragging ? "disappear" : "appear"
      }`}
+      // eslint-disable-next-line react/no-unknown-property
      handler-id={handlerId}
    >
      <div>
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -99,7 +99,7 @@ export const Lcrs = () => {
          multiple carriers available.
        </M>
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter placeholder="Filter lcrs" filter={[filter, setFilter]} />
        <ScopedAccess user={user} scope={Scope.admin}>
          <AccountFilter
@@ -183,7 +183,7 @@ export const Lcrs = () => {
                  <div className="item__actions">
                    <Link
                      to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`}
-                      title="Edit carrier"
+                      title="Edit Client"
                    >
                      <Icons.Edit3 />
                    </Link>
--- a/src/containers/internal/views/ms-teams-tenants/index.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/index.tsx
@@ -89,7 +89,7 @@ export const MSTeamsTenants = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter
          placeholder="Filter ms teams tenants"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/phone-numbers/index.tsx
+++ b/src/containers/internal/views/phone-numbers/index.tsx
@@ -129,7 +129,7 @@ export const PhoneNumbers = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
        <SearchFilter
          placeholder="Filter phone numbers"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/recent-calls/call-detail.tsx
+++ b/src/containers/internal/views/recent-calls/call-detail.tsx
@@ -15,7 +15,7 @@ export const CallDetail = ({ call }: CallDetailProps) => {
              <div>{key}:</div>
              <div>
                {call[key as keyof typeof call]
-                  ? call[key as keyof typeof call].toString()
+                  ? String(call[key as keyof typeof call])
                  : "null"}
              </div>
            </React.Fragment>
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Bar } from "./jaeger/bar";
 import { JaegerGroup, JaegerRoot, JaegerSpan } from "src/api/jaeger-types";
 import { getJaegerTrace } from "src/api";
-import { toastError } from "src/store";
 import { RecentCall } from "src/api/types";
+import { getSpansFromJaegerRoot } from "./utils";

 function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
@@ -34,30 +34,6 @@ export const CallTracing = ({ call }: CallTracingProps) => {
  const [jaegerGroup, setJaegerGroup] = useState<JaegerGroup>();
  const windowSize = useWindowSize();

-  const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
-    setJaegerRoot(trace);
-    const spans: JaegerSpan[] = [];
-    trace.resourceSpans.forEach((resourceSpan) => {
-      resourceSpan.instrumentationLibrarySpans.forEach(
-        (instrumentationLibrarySpan) => {
-          instrumentationLibrarySpan.spans.forEach((value) => {
-            const attrs = value.attributes.filter(
-              (attr) =>
-                !(
-                  attr.key.startsWith("telemetry") ||
-                  attr.key.startsWith("internal")
-                )
-            );
-            value.attributes = attrs;
-            spans.push(value);
-          });
-        }
-      );
-    });
-    spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
-    return spans;
-  };
-
  const getGroupsByParent = (spanId: string, groups: JaegerGroup[]) => {
    groups.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
    return groups.filter((value) => value.parentSpanId === spanId);
@@ -87,6 +63,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
  };

  const buildSpans = (root: JaegerRoot) => {
+    setJaegerRoot(root);
    const spans = getSpansFromJaegerRoot(root);
    const rootSpan = getRootSpan(spans);
    if (rootSpan) {
@@ -142,15 +119,11 @@ export const CallTracing = ({ call }: CallTracingProps) => {

  useEffect(() => {
    if (call.trace_id && call.trace_id != "00000000000000000000000000000000") {
-      getJaegerTrace(call.account_sid, call.trace_id)
-        .then(({ json }) => {
-          if (json) {
-            buildSpans(json);
-          }
-        })
-        .catch((error) => {
-          toastError(error.msg);
-        });
+      getJaegerTrace(call.account_sid, call.trace_id).then(({ json }) => {
+        if (json) {
+          buildSpans(json);
+        }
+      });
    }
  }, []);

--- a/src/containers/internal/views/recent-calls/details.tsx
+++ b/src/containers/internal/views/recent-calls/details.tsx
@@ -2,13 +2,15 @@ import React, { useState } from "react";
 import dayjs from "dayjs";

 import { Icons } from "src/components";
-import { formatPhoneNumber } from "src/utils";
+import { formatPhoneNumber, hasValue } from "src/utils";
 import { PcapButton } from "./pcap";
 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 { Player } from "./player";
+import "./styles.scss";

 type DetailsItemProps = {
  call: RecentCall;
@@ -18,6 +20,12 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
  const [open, setOpen] = useState(false);
  const [activeTab, setActiveTab] = useState("");

+  const transformRecentCall = (call: RecentCall): RecentCall => {
+    const newCall = { ...call };
+    delete newCall.recording_url;
+    return newCall;
+  };
+
  return (
    <div className="item">
      <details
@@ -32,7 +40,7 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
          <div className="item__info">
            <div className="item__title">
              <strong>
-                {dayjs(call.attempted_at).format("YYYY MM.DD hh:mm a")}
+                {dayjs(call.attempted_at).format("YYYY MM.DD hh:mm:ss a")}
              </strong>
              <span className="i txt--dark">
                {call.direction === "inbound" ? (
@@ -61,27 +69,26 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
        </summary>
        {call.trace_id === "00000000000000000000000000000000" ||
        DISABLE_JAEGER_TRACING ? (
-          <CallDetail call={call} />
+          <CallDetail call={transformRecentCall(call)} />
        ) : (
          <Tabs active={[activeTab, setActiveTab]}>
            <Tab id="details" label="Details">
-              <CallDetail call={call} />
+              <CallDetail call={transformRecentCall(call)} />
            </Tab>
            <Tab id="tracing" label="Tracing">
-              <CallTracing call={call} />
+              {open && <CallTracing call={call} />}
            </Tab>
          </Tabs>
        )}
        {open && (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              width: "300px",
-            }}
-          >
-            <PcapButton call={call} />
-          </div>
+          <>
+            <div className="footer">
+              {hasValue(call.recording_url) && <Player call={call} />}
+              <div className="footer__buttons">
+                <PcapButton call={call} />
+              </div>
+            </div>
+          </>
        )}
      </details>
    </div>
--- a/src/containers/internal/views/recent-calls/index.tsx
+++ b/src/containers/internal/views/recent-calls/index.tsx
@@ -15,6 +15,7 @@ import {
  Spinner,
  Pagination,
  SelectFilter,
+  SearchFilter,
 } from "src/components";
 import { hasLength, hasValue } from "src/utils";
 import { DetailsItem } from "./details";
@@ -47,6 +48,7 @@ export const RecentCalls = () => {
  const [dateFilter, setDateFilter] = useState("today");
  const [directionFilter, setDirectionFilter] = useState("io");
  const [statusFilter, setStatusFilter] = useState("all");
+  const [filter, setFilter] = useState("");

  const [pageNumber, setPageNumber] = useState(1);
  const [perPageFilter, setPerPageFilter] = useState("25");
@@ -64,6 +66,7 @@ export const RecentCalls = () => {
        : { days: Number(dateFilter) }),
      ...(statusFilter !== "all" && { answered: statusFilter }),
      ...(directionFilter !== "io" && { direction: directionFilter }),
+      ...(filter && { filter }),
    };

    getRecentCalls(accountSid, payload)
@@ -94,7 +97,14 @@ export const RecentCalls = () => {
    if (accountSid) {
      handleFilterChange();
    }
-  }, [accountSid, pageNumber, dateFilter, directionFilter, statusFilter]);
+  }, [
+    accountSid,
+    pageNumber,
+    dateFilter,
+    directionFilter,
+    statusFilter,
+    filter,
+  ]);

  /** Reset page number when filters change */
  useEffect(() => {
@@ -136,6 +146,11 @@ export const RecentCalls = () => {
          filter={[statusFilter, setStatusFilter]}
          options={statusSelection}
        />
+        <SearchFilter
+          placeholder="Filter"
+          filter={[filter, setFilter]}
+          delay={1000}
+        />
      </section>
      <Section {...(hasLength(calls) && { slim: true })}>
        <div className="list">
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -44,14 +44,17 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
              .format("DD/MM/YY HH:mm:ss.SSS")}
          </div>
        </div>
-        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">
-            <strong>Duration:</strong>
+        {!(group.name && group.name.startsWith("dtmf:")) && (
+          <div className="spanDetailsWrapper__details">
+            <div className="spanDetailsWrapper__details_header">
+              <strong>Duration:</strong>
+            </div>
+            <div className="spanDetailsWrapper__details_body">
+              {formattedDuration(group.durationMs)}
+            </div>
          </div>
-          <div className="spanDetailsWrapper__details_body">
-            {formattedDuration(group.durationMs)}
-          </div>
-        </div>
+        )}
+
        {group.attributes.map((attribute) => (
          <div key={attribute.key} className="spanDetailsWrapper__details">
            <div className="spanDetailsWrapper__details_header">
--- a/src/containers/internal/views/recent-calls/pcap.tsx
+++ b/src/containers/internal/views/recent-calls/pcap.tsx
@@ -3,28 +3,30 @@ import React, { useEffect, useState } from "react";
 import { getPcap } from "src/api";
 import { toastError } from "src/store";

-import type { Pcap, RecentCall } from "src/api/types";
+import type { DownloadedBlob, RecentCall } from "src/api/types";

 type PcapButtonProps = {
  call: RecentCall;
 };

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

  useEffect(() => {
-    getPcap(call.account_sid, call.sip_callid)
-      .then(({ blob }) => {
-        if (blob) {
-          setPcap({
-            data_url: URL.createObjectURL(blob),
-            file_name: `callid-${call.sip_callid}.pcap`,
-          });
-        }
-      })
-      .catch((error) => {
-        toastError(error.msg);
-      });
+    if (!pcap) {
+      getPcap(call.account_sid, call.sip_callid, "invite")
+        .then(({ blob }) => {
+          if (blob) {
+            setPcap({
+              data_url: URL.createObjectURL(blob),
+              file_name: `callid-${call.sip_callid}.pcap`,
+            });
+          }
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
  }, []);

  if (pcap) {
--- a/src/containers/internal/views/recent-calls/player.tsx
+++ b/src/containers/internal/views/recent-calls/player.tsx
@@ -0,0 +1,525 @@
+import React from "react";
+
+import WaveSurfer from "wavesurfer.js";
+import { useEffect, useRef, useState } from "react";
+import { Icon, P } from "@jambonz/ui-kit";
+import { Icons, Modal, ModalClose } from "src/components";
+import { deleteRecord, getBlob, getJaegerTrace } from "src/api";
+import { DownloadedBlob, RecentCall } from "src/api/types";
+import RegionsPlugin, { Region } from "wavesurfer.js/dist/plugins/regions";
+import TimelinePlugin from "wavesurfer.js/dist/plugins/timeline";
+import { API_BASE_URL } from "src/api/constants";
+import {
+  JaegerRoot,
+  JaegerSpan,
+  WaveSurferDtmfResult,
+  WaveSurferSttResult,
+} from "src/api/jaeger-types";
+import {
+  getSpanAttributeByName,
+  getSpansByName,
+  getSpansByNameRegex,
+  getSpansFromJaegerRoot,
+} from "./utils";
+import { toastError, toastSuccess } from "src/store";
+
+type PlayerProps = {
+  call: RecentCall;
+};
+
+export const Player = ({ call }: PlayerProps) => {
+  const { recording_url, call_sid } = call;
+  const url =
+    recording_url && recording_url.startsWith("http://")
+      ? recording_url
+      : `${API_BASE_URL}${recording_url}`;
+  const JUMP_DURATION = 15; //seconds
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [playBackTime, setPlayBackTime] = useState("");
+  const [jaegerRoot, setJeagerRoot] = useState<JaegerRoot>();
+  const [waveSurferRegionData, setWaveSurferRegionData] =
+    useState<WaveSurferSttResult | null>();
+  const [waveSurferDtmfData, setWaveSurferDtmfData] =
+    useState<WaveSurferDtmfResult | null>();
+  const [regionChecked, setRegionChecked] = useState(false);
+
+  const wavesurferId = `wavesurfer--${call_sid}`;
+  const waveSurferRef = useRef<WaveSurfer | null>(null);
+  const waveSurferRegionsPluginRef = useRef<RegionsPlugin | null>();
+
+  const [record, setRecord] = useState<DownloadedBlob | null>(null);
+
+  const [deleteRecordUrl, setDeleteRecordUrl] = useState("");
+
+  const drawDtmfRegionForSpan = (s: JaegerSpan, startPoint: JaegerSpan) => {
+    if (waveSurferRegionsPluginRef.current) {
+      waveSurferRef.current;
+      const r = waveSurferRegionsPluginRef.current
+        .getRegions()
+        .find((r) => r.id === s.spanId);
+      if (!r) {
+        const [dtmfValue] = getSpanAttributeByName(s.attributes, "dtmf");
+        const [durationValue] = getSpanAttributeByName(
+          s.attributes,
+          "duration"
+        );
+        if (dtmfValue && durationValue) {
+          const start =
+            (s.startTimeUnixNano - startPoint.startTimeUnixNano) /
+            1_000_000_000;
+          const duration =
+            Number(durationValue.value.stringValue.replace("ms", "")) / 1_000;
+          // as duration of DTMF is short, cannot be shown in wavesurfer,
+          // adjust region width here.
+          const delta = duration <= 0.1 ? 0.1 : duration;
+          const end = start + delta;
+
+          const region = waveSurferRegionsPluginRef.current.addRegion({
+            id: s.spanId,
+            start,
+            end,
+            color: "rgba(138, 43, 226, 0.15)",
+            drag: false,
+            resize: false,
+          });
+          changeRegionMouseStyle(region);
+
+          const att: WaveSurferDtmfResult = {
+            dtmf: dtmfValue.value.stringValue,
+            duration: durationValue.value.stringValue,
+          };
+
+          region.on("click", () => {
+            setWaveSurferDtmfData(att);
+          });
+        }
+      }
+    }
+  };
+
+  const changeRegionMouseStyle = (region: Region, channel = 0) => {
+    region.element.style.display = regionChecked ? "" : "none";
+    region.element.style.height = "49%";
+    region.element.style.top = channel === 0 ? "0" : "51%";
+
+    region.element.addEventListener("mouseenter", () => {
+      region.element.style.cursor = "pointer"; // Change to your desired cursor style
+    });
+
+    region.element.addEventListener("mouseleave", () => {
+      region.element.style.cursor = "default";
+    });
+  };
+
+  const drawSttRegionForSpan = (
+    s: JaegerSpan,
+    startPoint: JaegerSpan,
+    channel = 0
+  ) => {
+    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 +
+          0.05; // add magic 0.01 second in each region start time to isolate 2 near regions
+        const end =
+          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
+
+        const region = waveSurferRegionsPluginRef.current.addRegion({
+          id: s.spanId,
+          start,
+          end,
+          color: "rgba(255, 0, 0, 0.15)",
+          drag: false,
+          resize: false,
+        });
+
+        changeRegionMouseStyle(region, channel);
+        const [sttResult] = getSpanAttributeByName(s.attributes, "stt.result");
+        let att: WaveSurferSttResult;
+        if (sttResult) {
+          const data = JSON.parse(sttResult.value.stringValue);
+          att = {
+            vendor: data.vendor.name,
+            transcript: data.alternatives[0].transcript,
+            confidence: data.alternatives[0].confidence,
+            language_code: data.language_code,
+          };
+        } else {
+          const [sttResolve] = getSpanAttributeByName(
+            s.attributes,
+            "stt.resolve"
+          );
+          if (sttResolve && sttResolve.value.stringValue === "timeout") {
+            att = {
+              vendor: "",
+              transcript: "None (speech session timeout)",
+              confidence: 0,
+              language_code: "",
+            };
+          } else {
+            att = {
+              vendor: "",
+              transcript:
+                "None (call disconnected or speech session terminated)",
+              confidence: 0,
+              language_code: "",
+            };
+          }
+        }
+
+        region.on("click", () => {
+          setWaveSurferRegionData(att);
+        });
+      }
+    }
+  };
+
+  const buildWavesurferRegion = () => {
+    if (jaegerRoot) {
+      const spans = getSpansFromJaegerRoot(jaegerRoot);
+      const [startPoint] = getSpansByName(spans, "background-listen:listen");
+      // there should be only one startPoint for background listen
+      if (startPoint) {
+        const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
+        gatherSpans.forEach((s) => {
+          drawSttRegionForSpan(s, startPoint);
+        });
+
+        const transcribeSpans = getSpansByNameRegex(spans, /stt-listen:/);
+        transcribeSpans.forEach((cs) => {
+          // Channel start from 0
+          const channel = Number(cs.name.split(":")[1]);
+          drawSttRegionForSpan(
+            cs,
+            startPoint,
+            channel > 0 ? channel - 1 : channel
+          );
+        });
+
+        const dtmfSpans = getSpansByNameRegex(spans, /dtmf:/);
+        dtmfSpans.forEach((ds) => {
+          drawDtmfRegionForSpan(ds, startPoint);
+        });
+      }
+    }
+  };
+
+  const handleDeleteRecordSubmit = () => {
+    if (deleteRecordUrl) {
+      deleteRecord(deleteRecordUrl)
+        .then(() => {
+          setDeleteRecordUrl("");
+          toastSuccess("Successfully deleted record");
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  useEffect(() => {
+    buildWavesurferRegion();
+  }, [jaegerRoot, isReady]);
+
+  useEffect(() => {
+    getBlob(url).then(({ blob, headers }) => {
+      if (blob) {
+        const ext = headers.get("Content-Type") === "audio/wav" ? "wav" : "mp3";
+        setRecord({
+          data_url: URL.createObjectURL(blob),
+          file_name: `callid-${call_sid}.${ext}`,
+        });
+      }
+    });
+
+    if (call.trace_id && call.trace_id != "00000000000000000000000000000000") {
+      getJaegerTrace(call.account_sid, call.trace_id).then(({ json }) => {
+        if (json) {
+          setJeagerRoot(json);
+        }
+      });
+    }
+  }, []);
+
+  function formatTime(seconds: number) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+
+    return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+
+  useEffect(() => {
+    if (waveSurferRef.current !== null || !record) return;
+    waveSurferRegionsPluginRef.current = RegionsPlugin.create();
+    waveSurferRef.current = WaveSurfer.create({
+      container: `#${wavesurferId}`,
+      waveColor: "#da1c5c",
+      progressColor: "grey",
+      height: 50,
+      cursorWidth: 1,
+      cursorColor: "lightgray",
+      normalize: true,
+      autoScroll: true,
+      splitChannels: [],
+      minPxPerSec: 100,
+      plugins: [
+        waveSurferRegionsPluginRef.current,
+        TimelinePlugin.create({
+          timeInterval: 0.2,
+          primaryLabelInterval: 5,
+          secondaryLabelInterval: 1,
+          style: {
+            fontSize: "15px",
+            color: "#000000",
+            fontWeight: "bold",
+          },
+        }),
+      ],
+    });
+
+    waveSurferRef.current.load(record?.data_url);
+    // All event should be after load
+    waveSurferRef.current.on("finish", () => {
+      setIsPlaying(false);
+    });
+
+    waveSurferRef.current.on("play", () => {
+      setIsPlaying(true);
+    });
+
+    waveSurferRef.current.on("pause", () => {
+      setIsPlaying(false);
+    });
+
+    waveSurferRef.current.on("ready", () => {
+      setIsReady(true);
+      setPlayBackTime(formatTime(waveSurferRef.current?.getDuration() || 0));
+    });
+
+    waveSurferRef.current.on("audioprocess", () => {
+      setPlayBackTime(formatTime(waveSurferRef.current?.getCurrentTime() || 0));
+    });
+  }, [record]);
+
+  const togglePlayback = () => {
+    if (waveSurferRef.current) {
+      if (!isPlaying) {
+        waveSurferRef.current.play();
+      } else {
+        waveSurferRef.current.pause();
+      }
+    }
+  };
+
+  const setPlaybackJump = (delta: number) => {
+    if (waveSurferRef.current) {
+      const idx = waveSurferRef.current.getCurrentTime() + delta;
+      const value =
+        idx <= 0
+          ? 0
+          : idx >= waveSurferRef.current.getDuration()
+          ? waveSurferRef.current.getDuration() - 1
+          : idx;
+      waveSurferRef.current.setTime(value);
+      setPlayBackTime(formatTime(value));
+    }
+  };
+
+  if (!record) return null;
+
+  return (
+    <>
+      <div className="media-container">
+        <div id={wavesurferId} />
+        <div className="media-container__center">
+          <strong>{playBackTime}</strong>
+        </div>
+        <div className="controll-btn-container">
+          <div className="controll-btn-container__placeholder"></div>
+          <div className="controll-btn-container__center">
+            <button
+              className="btnty"
+              type="button"
+              onClick={() => {
+                setPlaybackJump(-JUMP_DURATION);
+              }}
+              title="Jump left"
+              disabled={!isReady}
+            >
+              <Icon>
+                <Icons.ChevronsLeft />
+              </Icon>
+            </button>
+            <button
+              className="btnty"
+              type="button"
+              onClick={togglePlayback}
+              title="play/pause"
+              disabled={!isReady}
+            >
+              <Icon>{isPlaying ? <Icons.Pause /> : <Icons.Play />}</Icon>
+            </button>
+
+            <button
+              className="btnty"
+              type="button"
+              onClick={() => {
+                setPlaybackJump(JUMP_DURATION);
+              }}
+              title="Jump right"
+              disabled={!isReady}
+            >
+              <Icon>
+                <Icons.ChevronsRight />
+              </Icon>
+            </button>
+          </div>
+
+          <div className="controll-btn-container__right">
+            <a
+              href={record.data_url}
+              download={record.file_name}
+              className="btnty"
+              title="Download record file"
+            >
+              <Icon>
+                <Icons.Download />
+              </Icon>
+            </a>
+
+            <button
+              type="button"
+              onClick={() => {
+                setDeleteRecordUrl(url || "");
+              }}
+              title="Delete record file"
+            >
+              <Icon>
+                <Icons.Trash2 />
+              </Icon>
+            </button>
+          </div>
+        </div>
+        <label htmlFor="is_active" className="chk">
+          <input
+            id={`is_active${call.call_sid}`}
+            name="is_active"
+            type="checkbox"
+            checked={regionChecked}
+            onChange={(e) => {
+              setRegionChecked(e.target.checked);
+              if (waveSurferRegionsPluginRef.current) {
+                const regionsList =
+                  waveSurferRegionsPluginRef.current.getRegions();
+                for (const [, region] of Object.entries(regionsList)) {
+                  region.element.style.display = e.target.checked ? "" : "none";
+                }
+              }
+            }}
+          />
+          <div>Overlay STT and DTMF events</div>
+        </label>
+      </div>
+      {waveSurferRegionData && (
+        <ModalClose handleClose={() => setWaveSurferRegionData(null)}>
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Speech to text result</strong>
+            </P>
+          </div>
+          <div className="spanDetailsWrapper">
+            <div className="spanDetailsWrapper__detailsWrapper">
+              {waveSurferRegionData.vendor && (
+                <div className="spanDetailsWrapper__details">
+                  <div className="spanDetailsWrapper__details_header">
+                    <strong>Vendor:</strong>
+                  </div>
+                  <div className="spanDetailsWrapper__details_body">
+                    {waveSurferRegionData.vendor}
+                  </div>
+                </div>
+              )}
+              {waveSurferRegionData.confidence !== 0 && (
+                <div className="spanDetailsWrapper__details">
+                  <div className="spanDetailsWrapper__details_header">
+                    <strong>Confidence:</strong>
+                  </div>
+                  <div className="spanDetailsWrapper__details_body">
+                    {waveSurferRegionData.confidence}
+                  </div>
+                </div>
+              )}
+              {waveSurferRegionData.language_code && (
+                <div className="spanDetailsWrapper__details">
+                  <div className="spanDetailsWrapper__details_header">
+                    <strong>Language code:</strong>
+                  </div>
+                  <div className="spanDetailsWrapper__details_body">
+                    {waveSurferRegionData.language_code}
+                  </div>
+                </div>
+              )}
+              {waveSurferRegionData.transcript && (
+                <div className="spanDetailsWrapper__details">
+                  <div className="spanDetailsWrapper__details_header">
+                    <strong>Transcript:</strong>
+                  </div>
+                  <div className="spanDetailsWrapper__details_body">
+                    {waveSurferRegionData.transcript}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </ModalClose>
+      )}
+      {waveSurferDtmfData && (
+        <ModalClose handleClose={() => setWaveSurferDtmfData(null)}>
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Dtmf result</strong>
+            </P>
+          </div>
+          <div className="spanDetailsWrapper">
+            <div className="spanDetailsWrapper__detailsWrapper">
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Dtmf:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferDtmfData.dtmf}
+                </div>
+              </div>
+
+              <div className="spanDetailsWrapper__details">
+                <div className="spanDetailsWrapper__details_header">
+                  <strong>Duration:</strong>
+                </div>
+                <div className="spanDetailsWrapper__details_body">
+                  {waveSurferDtmfData.duration}
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalClose>
+      )}
+      {deleteRecordUrl && (
+        <Modal
+          handleCancel={() => setDeleteRecordUrl("")}
+          handleSubmit={handleDeleteRecordSubmit}
+        >
+          <P>
+            Are you sure you want to delete the record for call{" "}
+            <strong>{call_sid}</strong>?
+          </P>
+        </Modal>
+      )}
+    </>
+  );
+};
--- a/src/containers/internal/views/recent-calls/styles.scss
+++ b/src/containers/internal/views/recent-calls/styles.scss
@@ -0,0 +1,87 @@
+@use "src/styles/vars";
+@use "src/styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+
+.wavesuffer {
+  position: relative;
+}
+
+.footer {
+  display: grid;
+  width: 100%;
+  margin-top: ui-vars.$px02;
+
+  &__buttons {
+    padding: ui-vars.$px02;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: ui-vars.$px02;
+  }
+}
+
+.controll-btn-container {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 13px;
+
+  &__center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    button:not(:last-child) {
+      margin-right: ui-vars.$px01;
+    }
+
+    button {
+      background-color: transparent;
+      width: auto;
+      height: auto;
+      border: 0;
+      padding: 0;
+    }
+    .ico {
+      color: ui-vars.$white;
+      @include mixins.icosize();
+    }
+  }
+
+  &__right {
+    a:not(:last-child) {
+      margin-right: ui-vars.$px01;
+    }
+
+    button {
+      background-color: transparent;
+      width: auto;
+      height: auto;
+      border: 0;
+      padding: 0;
+    }
+    .ico {
+      color: ui-vars.$white;
+      @include mixins.icosize();
+    }
+  }
+
+  &__placeholder {
+    flex: 1;
+  }
+}
+
+.media-container {
+  overflow-x: auto;
+  border: 1px solid black;
+  border-radius: ui-vars.$px01;
+  padding: 13px;
+  position: relative;
+
+  &__center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-gap: ui-vars.$px01;
+    margin-top: ui-vars.$px01;
+  }
+}
--- a/src/containers/internal/views/recent-calls/utils.ts
+++ b/src/containers/internal/views/recent-calls/utils.ts
@@ -0,0 +1,46 @@
+import { JaegerAttribute, JaegerRoot, JaegerSpan } from "src/api/jaeger-types";
+
+export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
+  const spans: JaegerSpan[] = [];
+  trace.resourceSpans.forEach((resourceSpan) => {
+    resourceSpan.instrumentationLibrarySpans.forEach(
+      (instrumentationLibrarySpan) => {
+        instrumentationLibrarySpan.spans.forEach((value) => {
+          const attrs = value.attributes.filter(
+            (attr) =>
+              !(
+                attr.key.startsWith("telemetry") ||
+                attr.key.startsWith("internal")
+              )
+          );
+          value.attributes = attrs;
+          spans.push(value);
+        });
+      }
+    );
+  });
+  spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
+  return spans;
+};
+
+export const getSpansByName = (
+  spans: JaegerSpan[],
+  name: string
+): JaegerSpan[] => {
+  return spans.filter((s) => s.name === name);
+};
+
+export const getSpansByNameRegex = (
+  spans: JaegerSpan[],
+  pattern: RegExp
+): JaegerSpan[] => {
+  const matcher = new RegExp(pattern);
+  return spans.filter((s) => matcher.test(s.name));
+};
+
+export const getSpanAttributeByName = (
+  attr: JaegerAttribute[],
+  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
@@ -1,22 +1,25 @@
 import React, { useEffect, useState } from "react";

-import { ButtonGroup, Button } from "@jambonz/ui-kit";
+import { ButtonGroup, Button, MS, P } from "@jambonz/ui-kit";
 import {
  useApiData,
  postPasswordSettings,
  postSystemInformation,
+  deleteTtsCache,
 } from "src/api";
-import { PasswordSettings, SystemInformation } from "src/api/types";
+import { PasswordSettings, SystemInformation, TtsCache } from "src/api/types";
 import { toastError, toastSuccess } from "src/store";
 import { Selector } from "src/components/forms";
 import { hasValue } from "src/utils";
 import { PASSWORD_LENGTHS_OPTIONS, PASSWORD_MIN } from "src/api/constants";
+import { Modal } from "src/components";

 export const AdminSettings = () => {
  const [passwordSettings, passwordSettingsFetcher] =
    useApiData<PasswordSettings>("PasswordSettings");
-  const [systemInformatin, systemInformationFetcher] =
+  const [systemInformation, systemInformationFetcher] =
    useApiData<SystemInformation>("SystemInformation");
+  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>("TtsCache");
  // Min value is 8
  const [minPasswordLength, setMinPasswordLength] = useState(PASSWORD_MIN);
  const [requireDigit, setRequireDigit] = useState(false);
@@ -24,6 +27,19 @@ export const AdminSettings = () => {
  const [domainName, setDomainName] = useState("");
  const [sipDomainName, setSipDomainName] = useState("");
  const [monitoringDomainName, setMonitoringDomainName] = useState("");
+  const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false);
+
+  const handleClearCache = () => {
+    deleteTtsCache()
+      .then(() => {
+        ttsCacheFetcher();
+        setClearTtsCacheFlag(false);
+        toastSuccess("Tts Cache successfully cleaned");
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
@@ -62,12 +78,12 @@ export const AdminSettings = () => {
        setMinPasswordLength(passwordSettings.min_password_length);
      }
    }
-    // if (hasValue(systemInformatin)) {
-    //   setDomainName(systemInformatin.domain_name);
-    //   setSipDomainName(systemInformatin.sip_domain_name);
-    //   setMonitoringDomainName(systemInformatin.monitoring_domain_name);
-    // }
-  }, [passwordSettings, systemInformatin]); //
+    if (hasValue(systemInformation)) {
+      setDomainName(systemInformation.domain_name);
+      setSipDomainName(systemInformation.sip_domain_name);
+      setMonitoringDomainName(systemInformation.monitoring_domain_name);
+    }
+  }, [passwordSettings, systemInformation]);

  return (
    <>
@@ -132,6 +148,23 @@ export const AdminSettings = () => {
          <div>Password require special character</div>
        </label>
      </fieldset>
+      <fieldset>
+        <ButtonGroup left>
+          <Button
+            onClick={(e: React.FormEvent) => {
+              e.preventDefault();
+              setClearTtsCacheFlag(true);
+            }}
+            small
+            disabled={!ttsCache || ttsCache.size === 0}
+          >
+            Clear TTS Cache
+          </Button>
+        </ButtonGroup>
+        <MS>{`There are ${
+          ttsCache ? ttsCache.size : 0
+        } cached TTS prompts`}</MS>
+      </fieldset>
      <fieldset>
        <ButtonGroup left>
          <Button onClick={handleSubmit} small>
@@ -139,6 +172,14 @@ export const AdminSettings = () => {
          </Button>
        </ButtonGroup>
      </fieldset>
+      {clearTtsCacheFlag && (
+        <Modal
+          handleSubmit={handleClearCache}
+          handleCancel={() => setClearTtsCacheFlag(false)}
+        >
+          <P>Are you sure you want to clean TTS cache?</P>
+        </Modal>
+      )}
    </>
  );
 };
--- a/src/containers/internal/views/speech-services/delete.tsx
+++ b/src/containers/internal/views/speech-services/delete.tsx
@@ -19,7 +19,11 @@ export const DeleteSpeechService = ({
  return (
    <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
      <P>
-        Are you sure you want to delete the <strong>{credential.vendor}</strong>{" "}
+        Are you sure you want to delete the{" "}
+        <strong>
+          {credential.vendor}
+          {credential.label ? ` (${credential.label})` : ""}
+        </strong>{" "}
        speech service?
      </P>
    </Modal>
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
@@ -1,19 +1,24 @@
 import React, { Fragment, useEffect, useState } from "react";
-import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
+import { Button, ButtonGroup, Icon, MS, MXS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

 import { ROUTE_INTERNAL_SPEECH } from "src/router/routes";
-import { Section } from "src/components";
+import { Icons, Section, Tooltip } from "src/components";
 import {
  FileUpload,
  Selector,
  Passwd,
  AccountSelect,
  Checkzone,
+  Message,
 } from "src/components/forms";
 import { toastError, toastSuccess, useSelectState } from "src/store";
 import {
+  deleteGoogleCustomVoice,
+  getGoogleCustomVoices,
+  postGoogleCustomVoice,
  postSpeechService,
+  putGoogleCustomVoice,
  putSpeechService,
  useServiceProviderData,
 } from "src/api";
@@ -30,20 +35,36 @@ import {
  VENDOR_NVIDIA,
  VENDOR_SONIOX,
  VENDOR_CUSTOM,
+  VENDOR_COBALT,
+  VENDOR_ELEVENLABS,
+  VENDOR_ASSEMBLYAI,
 } from "src/vendor";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import {
  checkSelectOptions,
  getObscuredSecret,
  isUserAccountScope,
+  isNotBlank,
+  hasLength,
 } from "src/utils";
 import { getObscuredGoogleServiceKey } from "./utils";
 import { CredentialStatus } from "./status";

 import type { RegionVendors, GoogleServiceKey, Vendor } from "src/vendor/types";
-import type { Account, SpeechCredential, UseApiDataMap } from "src/api/types";
+import type {
+  Account,
+  GoogleCustomVoice,
+  SpeechCredential,
+  UseApiDataMap,
+} from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
-import { DISABLE_CUSTOM_SPEECH } from "src/api/constants";
+import {
+  DEFAULT_ELEVENLABS_MODEL,
+  DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+  DISABLE_CUSTOM_SPEECH,
+  ELEVENLABS_MODEL_OPTIONS,
+  GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+} from "src/api/constants";

 type SpeechServiceFormProps = {
  credential?: UseApiDataMap<SpeechCredential>;
@@ -75,11 +96,20 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
  const [sttApiKey, setSttApiKey] = useState("");
  const [ttsRegion, setTtsRegion] = useState("");
  const [ttsApiKey, setTtsApiKey] = useState("");
+  const [ttsModelId, setTtsModelId] = useState(DEFAULT_ELEVENLABS_MODEL);
  const [instanceId, setInstanceId] = useState("");
+  const [initialCheckCustomTts, setInitialCheckCustomTts] = useState(false);
+  const [initialCheckCustomStt, setInitialCheckCustomStt] = useState(false);
+  const [initialCheckOnpremAzureService, setInitialCheckOnpremAzureService] =
+    useState(false);
  const [useCustomTts, setUseCustomTts] = useState(false);
  const [useCustomStt, setUseCustomStt] = useState(false);
+  const [customTtsEndpointUrl, setCustomTtsEndpointUrl] = useState("");
+  const [tmpCustomTtsEndpointUrl, setTmpCustomTtsEndpointUrl] = useState("");
  const [customTtsEndpoint, setCustomTtsEndpoint] = useState("");
  const [tmpCustomTtsEndpoint, setTmpCustomTtsEndpoint] = useState("");
+  const [customSttEndpointUrl, setCustomSttEndpointUrl] = useState("");
+  const [tmpCustomSttEndpointUrl, setTmpCustomSttEndpointUrl] = useState("");
  const [customSttEndpoint, setCustomSttEndpoint] = useState("");
  const [tmpCustomSttEndpoint, setTmpCustomSttEndpoint] = useState("");
  const [rivaServerUri, setRivaServerUri] = useState("");
@@ -99,6 +129,11 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
  const [onPremNuanceSttCheck, setOnPremNuanceSttCheck] = useState(false);
  const [tmpOnPremNuanceSttUrl, setTmpOnPremNuanceSttUrl] = useState("");
  const [onPremNuanceSttUrl, setOnPremNuanceSttUrl] = useState("");
+  const [cobaltServerUri, setCobaltServerUri] = useState("");
+  const [label, setLabel] = useState("");
+  const [useCustomVoicesCheck, setUseCustomVoicesCheck] = useState(false);
+  const [customVoices, setCustomVoices] = useState<GoogleCustomVoice[]>([]);
+  const [customVoicesMessage, setCustomVoicesMessage] = useState("");

  const handleFile = (file: File) => {
    const handleError = () => {
@@ -126,6 +161,62 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      });
  };

+  const handlePutGoogleCustomVoices = () => {
+    if (!credential || !credential.data) {
+      return;
+    }
+    if (useCustomVoicesCheck) {
+      Promise.all(
+        customVoices.map((v) => {
+          if (v.google_custom_voice_sid) {
+            const sid = v.google_custom_voice_sid;
+            delete v.google_custom_voice_sid;
+            return putGoogleCustomVoice(sid, v);
+          } else {
+            return postGoogleCustomVoice({
+              ...v,
+              speech_credential_sid: credential.data?.speech_credential_sid,
+            });
+          }
+        })
+      )
+        .then(() => {
+          toastSuccess("Speech credential updated successfully");
+          credential.refetch();
+          navigate(
+            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`
+          );
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    } else if (useCustomVoicesCheck && customVoices.length > 0) {
+      Promise.all(
+        customVoices.map((v) => {
+          if (v.google_custom_voice_sid) {
+            return deleteGoogleCustomVoice(v.google_custom_voice_sid);
+          }
+        })
+      )
+        .then(() => {
+          toastSuccess("Speech credential updated successfully");
+          credential.refetch();
+          navigate(
+            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`
+          );
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    } else {
+      toastSuccess("Speech credential updated successfully");
+      credential.refetch();
+      navigate(
+        `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`
+      );
+    }
+  };
+
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

@@ -143,14 +234,16 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
        service_provider_sid: currentServiceProvider.service_provider_sid,
        use_for_tts: ttsCheck ? 1 : 0,
        use_for_stt: sttCheck ? 1 : 0,
-        ...(vendor === VENDOR_AWS && {
-          aws_region: region || null,
-        }),
+        label: label || null,
        ...(vendor === VENDOR_MICROSOFT && {
          region: region || null,
-          use_custom_tts: useCustomTts ? 1 : 0,
+          use_custom_tts:
+            useCustomTts || isNotBlank(customTtsEndpointUrl) ? 1 : 0,
+          custom_tts_endpoint_url: customTtsEndpointUrl || null,
          custom_tts_endpoint: customTtsEndpoint || null,
-          use_custom_stt: useCustomStt ? 1 : 0,
+          use_custom_stt:
+            useCustomStt || isNotBlank(customSttEndpointUrl) ? 1 : 0,
+          custom_stt_endpoint_url: customSttEndpointUrl || null,
          custom_stt_endpoint: customSttEndpoint || null,
        }),
        ...(vendor === VENDOR_IBM && {
@@ -177,6 +270,12 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
          nuance_tts_uri: onPremNuanceTtsUrl || null,
          nuance_stt_uri: onPremNuanceSttUrl || null,
        }),
+        ...(vendor === VENDOR_COBALT && {
+          cobalt_server_uri: cobaltServerUri || null,
+        }),
+        ...(vendor === VENDOR_ELEVENLABS && {
+          model_id: ttsModelId || null,
+        }),
      };

      if (credential && credential.data) {
@@ -189,11 +288,15 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
        )
          .then(() => {
            if (credential && credential.data) {
-              toastSuccess("Speech credential updated successfully");
-              credential.refetch();
-              navigate(
-                `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`
-              );
+              if (credential.data.vendor === VENDOR_GOOGLE) {
+                handlePutGoogleCustomVoices();
+              } else {
+                toastSuccess("Speech credential updated successfully");
+                credential.refetch();
+                navigate(
+                  `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`
+                );
+              }
            }
          })
          .catch((error) => {
@@ -206,19 +309,38 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            vendor === VENDOR_GOOGLE ? JSON.stringify(googleServiceKey) : null,
          access_key_id: vendor === VENDOR_AWS ? accessKeyId : null,
          secret_access_key: vendor === VENDOR_AWS ? secretAccessKey : null,
-          api_key:
-            vendor === VENDOR_MICROSOFT ||
-            vendor === VENDOR_WELLSAID ||
-            vendor === VENDOR_DEEPGRAM ||
-            vendor === VENDOR_SONIOX
-              ? apiKey
-              : null,
+          ...(apiKey && {
+            api_key:
+              vendor === VENDOR_MICROSOFT ||
+              vendor === VENDOR_WELLSAID ||
+              vendor === VENDOR_DEEPGRAM ||
+              vendor === VENDOR_ASSEMBLYAI ||
+              vendor === VENDOR_SONIOX ||
+              vendor === VENDOR_ELEVENLABS
+                ? apiKey
+                : null,
+          }),
          riva_server_uri: vendor == VENDOR_NVIDIA ? rivaServerUri : null,
        })
-          .then(() => {
-            toastSuccess("Speech credential created successfully");
-            navigate(ROUTE_INTERNAL_SPEECH);
-            setAccountFilter(accountSid);
+          .then(({ json }) => {
+            if (vendor === VENDOR_GOOGLE && useCustomVoicesCheck) {
+              Promise.all(
+                customVoices.map((v) =>
+                  postGoogleCustomVoice({
+                    ...v,
+                    speech_credential_sid: json.sid,
+                  })
+                )
+              ).then(() => {
+                toastSuccess("Speech credential created successfully");
+                navigate(ROUTE_INTERNAL_SPEECH);
+                setAccountFilter(accountSid);
+              });
+            } else {
+              toastSuccess("Speech credential created successfully");
+              navigate(ROUTE_INTERNAL_SPEECH);
+              setAccountFilter(accountSid);
+            }
          })
          .catch((error) => {
            toastError(error.msg);
@@ -330,13 +452,26 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      if (credential.data.riva_server_uri) {
        setRivaServerUri(credential.data.riva_server_uri);
      }
-
      setUseCustomTts(credential.data.use_custom_tts > 0 ? true : false);
      setUseCustomStt(credential.data.use_custom_stt > 0 ? true : false);
+
+      setCustomTtsEndpointUrl(credential.data.custom_tts_endpoint_url || "");
+      setCustomSttEndpointUrl(credential.data.custom_stt_endpoint_url || "");
+      setTmpCustomTtsEndpointUrl(credential.data.custom_tts_endpoint_url || "");
+      setTmpCustomSttEndpointUrl(credential.data.custom_stt_endpoint_url || "");
+
      setCustomTtsEndpoint(credential.data.custom_tts_endpoint || "");
      setCustomSttEndpoint(credential.data.custom_stt_endpoint || "");
      setTmpCustomTtsEndpoint(credential.data.custom_tts_endpoint || "");
      setTmpCustomSttEndpoint(credential.data.custom_stt_endpoint || "");
+
+      setInitialCheckCustomTts(isNotBlank(credential.data.custom_tts_endpoint));
+      setInitialCheckCustomStt(isNotBlank(credential.data.custom_stt_endpoint));
+      setInitialCheckOnpremAzureService(
+        isNotBlank(credential.data.custom_tts_endpoint_url) ||
+          isNotBlank(credential.data.custom_stt_endpoint_url)
+      );
+
      setCustomVendorName(
        credential.data.vendor.startsWith(VENDOR_CUSTOM)
          ? credential.data.vendor.substring(VENDOR_CUSTOM.length + 1)
@@ -347,9 +482,44 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      setTmpCustomVendorSttUrl(credential.data.custom_stt_url || "");
      setCustomVendorTtsUrl(credential.data.custom_tts_url || "");
      setTmpCustomVendorTtsUrl(credential.data.custom_tts_url || "");
+      if (credential.data.label) {
+        setLabel(credential.data.label);
+      }
+      if (credential.data.cobalt_server_uri) {
+        setCobaltServerUri(credential.data.cobalt_server_uri);
+      }
+      if (credential.data.model_id) {
+        setTtsModelId(credential.data.model_id);
+      }
+    }
+    if (credential?.data?.vendor === VENDOR_GOOGLE) {
+      // let try to check if there is custom voices
+      getGoogleCustomVoices({
+        speech_credential_sid: credential.data.speech_credential_sid,
+      }).then(({ json }) => {
+        setCustomVoices(json);
+        setUseCustomVoicesCheck(json.length > 0);
+      });
    }
  }, [credential]);

+  const updateCustomVoices = (
+    index: number,
+    key: string,
+    value: typeof customVoices[number][keyof GoogleCustomVoice]
+  ) => {
+    setCustomVoices((prev) =>
+      prev.map((g, i) =>
+        i === index
+          ? {
+              ...g,
+              [key]: value,
+            }
+          : g
+      )
+    );
+  };
+
  return (
    <Section slim>
      <form className="form form--internal" onSubmit={handleSubmit}>
@@ -416,9 +586,27 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            disabled={credential ? true : false}
          />
        </fieldset>
+        <fieldset>
+          <label htmlFor="speech_label">
+            Label
+            <Tooltip text="Assign a label only if you need to create multiple speech services from the same vendor. Then use the label in your application to specify which service to use.">
+              {" "}
+            </Tooltip>
+          </label>
+          <input
+            id="speech_label"
+            type="text"
+            name="speech_label"
+            value={label}
+            disabled={credential ? true : false}
+            onChange={(e) => setLabel(e.target.value)}
+          />
+        </fieldset>
        {vendor && (
          <fieldset>
            {vendor !== VENDOR_DEEPGRAM &&
+              vendor !== VENDOR_ASSEMBLYAI &&
+              vendor !== VENDOR_COBALT &&
              vendor !== VENDOR_SONIOX &&
              vendor != VENDOR_CUSTOM && (
                <label htmlFor="use_for_tts" className="chk">
@@ -432,18 +620,20 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                  <div>Use for text-to-speech</div>
                </label>
              )}
-            {vendor !== VENDOR_WELLSAID && vendor !== VENDOR_CUSTOM && (
-              <label htmlFor="use_for_stt" className="chk">
-                <input
-                  id="use_for_stt"
-                  name="use_for_stt"
-                  type="checkbox"
-                  onChange={(e) => setSttCheck(e.target.checked)}
-                  defaultChecked={sttCheck}
-                />
-                <div>Use for speech-to-text</div>
-              </label>
-            )}
+            {vendor !== VENDOR_WELLSAID &&
+              vendor !== VENDOR_CUSTOM &&
+              vendor !== VENDOR_ELEVENLABS && (
+                <label htmlFor="use_for_stt" className="chk">
+                  <input
+                    id="use_for_stt"
+                    name="use_for_stt"
+                    type="checkbox"
+                    onChange={(e) => setSttCheck(e.target.checked)}
+                    defaultChecked={sttCheck}
+                  />
+                  <div>Use for speech-to-text</div>
+                </label>
+              )}
            {vendor === VENDOR_CUSTOM && (
              <Fragment>
                <Checkzone
@@ -511,6 +701,24 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            )}
          </fieldset>
        )}
+        {vendor === VENDOR_COBALT && (
+          <fieldset>
+            <label htmlFor="cobalt_server_url">
+              Server URI<span>*</span>
+            </label>
+            <input
+              id="cobalt_server_url"
+              type="text"
+              name="cobalt_server_url"
+              placeholder="Required"
+              required
+              value={cobaltServerUri}
+              onChange={(e) => {
+                setCobaltServerUri(e.target.value);
+              }}
+            />
+          </fieldset>
+        )}
        {vendor === VENDOR_CUSTOM && (
          <fieldset>
            <label htmlFor="custom_vendor_auth_token">
@@ -556,6 +764,166 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                </pre>
              </fieldset>
            )}
+            {ttsCheck && vendor === VENDOR_GOOGLE && (
+              <fieldset>
+                <label htmlFor="use_custom_voice" className="chk">
+                  <input
+                    id="use_custom_voice"
+                    name="use_custom_voice"
+                    type="checkbox"
+                    onChange={(e) => {
+                      if (customVoices.length === 0) {
+                        setCustomVoices([
+                          {
+                            name: "",
+                            reported_usage:
+                              DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+                            model: "",
+                          },
+                        ]);
+                      }
+                      setUseCustomVoicesCheck(e.target.checked);
+                    }}
+                    checked={useCustomVoicesCheck}
+                  />
+                  <div>Use custom voices</div>
+                </label>
+                {useCustomVoicesCheck && (
+                  <fieldset>
+                    <label htmlFor="sip_gateways">Custom Voices</label>
+                    <MXS>
+                      <em>At least one Custom voice is required.</em>
+                    </MXS>
+                    {customVoicesMessage && (
+                      <Message message={customVoicesMessage} />
+                    )}
+                    {hasLength(customVoices) &&
+                      customVoices.map((v, i) => (
+                        <div key={`custom_voice_${i}`} className="customVoice">
+                          <div>
+                            <div>
+                              <label htmlFor="custom_voice_name">
+                                Name / Reported Usage
+                              </label>
+                            </div>
+                          </div>
+
+                          <div>
+                            <div>
+                              <input
+                                id={`sip_ip_${i}`}
+                                name={`sip_ip_${i}`}
+                                type="text"
+                                placeholder="Assigned Name"
+                                required
+                                value={v.name}
+                                onChange={(e) => {
+                                  updateCustomVoices(i, "name", e.target.value);
+                                }}
+                              />
+                            </div>
+
+                            <div>
+                              <Selector
+                                id={"google_custom_voices_reported_usage"}
+                                name={"google_custom_voices_reported_usage"}
+                                value={v.reported_usage}
+                                options={GOOGLE_CUSTOM_VOICES_REPORTED_USAGE}
+                                onChange={(e) => {
+                                  updateCustomVoices(
+                                    i,
+                                    "reported_usage",
+                                    e.target.value
+                                  );
+                                }}
+                              />
+                            </div>
+                          </div>
+
+                          <div>
+                            <div>
+                              <label htmlFor="custom_voice_name">Model</label>
+                            </div>
+                          </div>
+
+                          <div>
+                            <div>
+                              <input
+                                id={`sip_ip_${i}`}
+                                name={`sip_ip_${i}`}
+                                type="text"
+                                placeholder="Model"
+                                required
+                                value={v.model}
+                                style={{ maxWidth: "100%" }}
+                                onChange={(e) => {
+                                  updateCustomVoices(
+                                    i,
+                                    "model",
+                                    e.target.value
+                                  );
+                                }}
+                              />
+                            </div>
+                          </div>
+
+                          <button
+                            className="btnty"
+                            title="Delete custom voice"
+                            type="button"
+                            onClick={() => {
+                              setCustomVoicesMessage("");
+                              if (customVoices.length === 1) {
+                                setCustomVoicesMessage(
+                                  "You must provide at least one custom voice."
+                                );
+                                return;
+                              }
+                              if (v.google_custom_voice_sid) {
+                                deleteGoogleCustomVoice(
+                                  v.google_custom_voice_sid
+                                ).finally(() => {
+                                  credential?.refetch();
+                                });
+                              }
+                              setCustomVoices((prev) =>
+                                prev.filter((_, idx) => idx !== i)
+                              );
+                            }}
+                          >
+                            <Icon>
+                              <Icons.Trash2 />
+                            </Icon>
+                          </button>
+                        </div>
+                      ))}
+                    <ButtonGroup left>
+                      <button
+                        className="btnty"
+                        type="button"
+                        title="Add Voice"
+                        onClick={() => {
+                          setCustomVoicesMessage("");
+                          setCustomVoices((prev) => [
+                            ...prev,
+                            {
+                              name: "",
+                              reported_usage:
+                                DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+                              model: "",
+                            },
+                          ]);
+                        }}
+                      >
+                        <Icon subStyle="teal">
+                          <Icons.Plus />
+                        </Icon>
+                      </button>
+                    </ButtonGroup>
+                  </fieldset>
+                )}
+              </fieldset>
+            )}
          </>
        )}
        {vendor === VENDOR_NUANCE && (
@@ -695,9 +1063,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            />
          </fieldset>
        )}
-        {(vendor === VENDOR_MICROSOFT ||
-          vendor === VENDOR_WELLSAID ||
+        {(vendor === VENDOR_WELLSAID ||
          vendor === VENDOR_DEEPGRAM ||
+          vendor === VENDOR_ASSEMBLYAI ||
+          vendor == VENDOR_ELEVENLABS ||
          vendor === VENDOR_SONIOX) && (
          <fieldset>
            <label htmlFor={`${vendor}_apikey`}>
@@ -714,9 +1083,24 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            />
          </fieldset>
        )}
+        {vendor == VENDOR_ELEVENLABS && (
+          <fieldset>
+            <label htmlFor={`${vendor}_apikey`}>Model</label>
+            <Selector
+              id={"audio_format"}
+              name={"audio_format"}
+              value={ttsModelId}
+              options={ELEVENLABS_MODEL_OPTIONS}
+              onChange={(e) => {
+                setTtsModelId(e.target.value);
+              }}
+            />
+          </fieldset>
+        )}
        {regions &&
          regions[vendor as keyof RegionVendors] &&
-          vendor !== VENDOR_IBM && (
+          vendor !== VENDOR_IBM &&
+          vendor !== VENDOR_MICROSOFT && (
            <fieldset>
              <label htmlFor="region">
                Region<span>*</span>
@@ -813,76 +1197,184 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
        {vendor === VENDOR_MICROSOFT && (
          <React.Fragment>
            <fieldset>
-              <label htmlFor="use_custom_tts" className="chk">
-                <input
-                  id="use_custom_tts"
-                  name="use_custom_tts"
-                  type="checkbox"
-                  onChange={(e) => {
-                    setUseCustomTts(e.target.checked);
-
-                    if (e.target.checked && tmpCustomTtsEndpoint) {
-                      setCustomTtsEndpoint(tmpCustomTtsEndpoint);
-                    }
-
-                    if (!e.target.checked) {
-                      setTmpCustomTtsEndpoint(customTtsEndpoint);
-                      setCustomTtsEndpoint("");
-                    }
-                  }}
-                  checked={useCustomTts}
+              <Checkzone
+                hidden
+                name="use_hosted_azure_service"
+                label="Use hosted Azure service"
+                initialCheck={!initialCheckOnpremAzureService}
+                handleChecked={(e) => {
+                  setInitialCheckOnpremAzureService(!e.target.checked);
+                }}
+              >
+                {regions && (
+                  <>
+                    <label htmlFor="region">
+                      Region<span>*</span>
+                    </label>
+                    <Selector
+                      id="region"
+                      name="region"
+                      value={region}
+                      required
+                      options={[
+                        {
+                          name: "Select a region",
+                          value: "",
+                        },
+                      ].concat(regions[vendor as keyof RegionVendors])}
+                      onChange={(e) => setRegion(e.target.value)}
+                    />
+                  </>
+                )}
+                <label htmlFor={`${vendor}_apikey`}>
+                  API key<span>*</span>
+                </label>
+                <Passwd
+                  id={`${vendor}_apikey`}
+                  required
+                  name={`${vendor}_apikey`}
+                  placeholder="API key"
+                  value={apiKey ? getObscuredSecret(apiKey) : apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  disabled={credential ? true : false}
                />
-                <div>Use for custom voice</div>
-              </label>
-              <label htmlFor="use_custom_tts">
-                Custom voice endpoint{useCustomTts && <span>*</span>}
-              </label>
-              <input
-                id="custom_tts_endpoint"
-                required={useCustomTts}
-                disabled={!useCustomTts}
-                type="text"
-                name="custom_tts_endpoint"
-                placeholder="Custom voice endpoint"
-                value={customTtsEndpoint}
-                onChange={(e) => setCustomTtsEndpoint(e.target.value)}
-              />
+              </Checkzone>
+
+              <Checkzone
+                hidden
+                name="use_azure_docker_container_on_prem"
+                label="Use Azure Docker container (on-prem)"
+                initialCheck={initialCheckOnpremAzureService}
+                handleChecked={(e) => {
+                  setInitialCheckOnpremAzureService(e.target.checked);
+
+                  if (e.target.checked && tmpCustomTtsEndpointUrl) {
+                    setCustomTtsEndpointUrl(tmpCustomTtsEndpointUrl);
+                  }
+
+                  if (!e.target.checked) {
+                    setTmpCustomTtsEndpointUrl(customTtsEndpointUrl);
+                    setCustomTtsEndpointUrl("");
+                  }
+
+                  if (e.target.checked && tmpCustomSttEndpointUrl) {
+                    setCustomSttEndpointUrl(tmpCustomSttEndpointUrl);
+                  }
+
+                  if (!e.target.checked) {
+                    setTmpCustomSttEndpointUrl(customSttEndpointUrl);
+                    setCustomSttEndpointUrl("");
+                  }
+                }}
+              >
+                <label htmlFor="container_url_for_tts">
+                  Container URL for TTS<span>*</span>
+                </label>
+                <input
+                  id="container_url_for_tts"
+                  required
+                  type="text"
+                  name="container_url_for_tts"
+                  placeholder="Container URL for TTS"
+                  value={customTtsEndpointUrl}
+                  onChange={(e) => setCustomTtsEndpointUrl(e.target.value)}
+                />
+                <label htmlFor="container_url_for_stt">
+                  Container URL for STT<span>*</span>
+                </label>
+                <input
+                  id="container_url_for_stt"
+                  required
+                  type="text"
+                  name="container_url_for_stt"
+                  placeholder="Container URL for STT"
+                  value={customSttEndpointUrl}
+                  onChange={(e) => setCustomSttEndpointUrl(e.target.value)}
+                />
+                <label htmlFor={`${vendor}_apikey`}>
+                  Subscription key (if required)
+                </label>
+                <Passwd
+                  id={`${vendor}_apikey`}
+                  name={`${vendor}_apikey`}
+                  placeholder="API key"
+                  value={apiKey ? getObscuredSecret(apiKey) : apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  disabled={credential ? true : false}
+                />
+              </Checkzone>
            </fieldset>
            <fieldset>
-              <label htmlFor="use_custom_stt" className="chk">
+              <Checkzone
+                hidden
+                name="use_custom_tts_endpoint_id"
+                label="I want to use a custom voice for TTS"
+                initialCheck={initialCheckCustomTts}
+                handleChecked={(e) => {
+                  setUseCustomTts(e.target.checked);
+
+                  if (e.target.checked && tmpCustomTtsEndpoint) {
+                    setCustomTtsEndpoint(tmpCustomTtsEndpoint);
+                  }
+
+                  if (!e.target.checked) {
+                    setTmpCustomTtsEndpoint(customTtsEndpoint);
+                    setCustomTtsEndpoint("");
+                  }
+                }}
+              >
+                <label htmlFor="use_custom_tts_id">
+                  Custom voice deployment ID<span>*</span>
+                  <Tooltip text="This is the value shown as the deploymentId parameter in the custom URL generated when you deploy a custom voice">
+                    {" "}
+                  </Tooltip>
+                </label>
                <input
-                  id="use_custom_stt"
-                  name="use_custom_stt"
-                  type="checkbox"
-                  onChange={(e) => {
-                    setUseCustomStt(e.target.checked);
-
-                    if (e.target.checked && tmpCustomSttEndpoint) {
-                      setCustomSttEndpoint(tmpCustomSttEndpoint);
-                    }
-
-                    if (!e.target.checked) {
-                      setTmpCustomSttEndpoint(customSttEndpoint);
-                      setCustomSttEndpoint("");
-                    }
-                  }}
-                  checked={useCustomStt}
+                  id="custom_tts_endpoint_id"
+                  required
+                  disabled={initialCheckOnpremAzureService}
+                  type="text"
+                  name="custom_tts_endpoint_id"
+                  placeholder="Custom voice endpoint id"
+                  value={customTtsEndpoint}
+                  onChange={(e) => setCustomTtsEndpoint(e.target.value)}
                />
-                <div>Use for custom speech model</div>
-              </label>
-              <label htmlFor="use_custom_stt">
-                Custom speech endpoint id{useCustomStt && <span>*</span>}
-              </label>
-              <input
-                id="custom_stt_endpoint"
-                required={useCustomStt}
-                disabled={!useCustomStt}
-                type="text"
-                name="custom_stt_endpoint"
-                placeholder="Custom speech endpoint ID"
-                value={customSttEndpoint}
-                onChange={(e) => setCustomSttEndpoint(e.target.value)}
-              />
+              </Checkzone>
+              <Checkzone
+                hidden
+                name="use_custom_stt_endpoint_id"
+                label="I want to use a custom speech model for STT"
+                initialCheck={initialCheckCustomStt}
+                handleChecked={(e) => {
+                  setUseCustomStt(e.target.checked);
+
+                  if (e.target.checked && tmpCustomSttEndpoint) {
+                    setCustomSttEndpoint(tmpCustomSttEndpoint);
+                  }
+
+                  if (!e.target.checked) {
+                    setTmpCustomSttEndpoint(customSttEndpoint);
+                    setCustomSttEndpoint("");
+                  }
+                }}
+              >
+                <label htmlFor="use_custom_stt_id">
+                  Custom speech endpoint ID<span>*</span>
+                  <Tooltip text="This is the value shown as the Endpoint ID when you deploy a custom speech model">
+                    {" "}
+                  </Tooltip>
+                </label>
+                <input
+                  id="custom_stt_endpoint_id"
+                  required={useCustomStt}
+                  disabled={initialCheckOnpremAzureService}
+                  type="text"
+                  name="custom_stt_endpoint_id"
+                  placeholder="Custom speech endpoint ID"
+                  value={customSttEndpoint}
+                  onChange={(e) => setCustomSttEndpoint(e.target.value)}
+                />
+              </Checkzone>
            </fieldset>
          </React.Fragment>
        )}
--- a/src/containers/internal/views/speech-services/index.tsx
+++ b/src/containers/internal/views/speech-services/index.tsx
@@ -76,7 +76,11 @@ export const SpeechServices = () => {
          refetch();
          toastSuccess(
            <>
-              Deleted speech service <strong>{credential.vendor}</strong>
+              Deleted speech service{" "}
+              <strong>
+                {credential.vendor}
+                {credential.label ? ` (${credential.label})` : ""}
+              </strong>{" "}
            </>
          );
        })
@@ -108,7 +112,7 @@ export const SpeechServices = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--ender">
+      <section className="filters filters--multi">
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
            account={[accountSid, setAccountSid]}
@@ -195,6 +199,14 @@ export const SpeechServices = () => {
                      <div>
                        <CredentialStatus cred={credential} />
                      </div>
+                      {credential.label && (
+                        <div>
+                          <div className="i txt--teal">
+                            <Icons.Tag />
+                            <span>{credential.label}</span>
+                          </div>
+                        </div>
+                      )}
                    </div>
                  </div>
                  <ScopedAccess
--- a/src/containers/internal/views/users/index.tsx
+++ b/src/containers/internal/views/users/index.tsx
@@ -88,7 +88,7 @@ export const Users = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--mix">
+      <section className="filters filters--multi">
        <section>
          <SearchFilter
            placeholder="Filter users"
--- a/src/containers/login/create-password.tsx
+++ b/src/containers/login/create-password.tsx
@@ -17,7 +17,6 @@ import {
  MSG_SOMETHING_WRONG,
  MSG_CAPSLOCK,
  MSG_PASSWD_MATCH,
-  MSG_PASSWD_CRITERIA,
 } from "src/constants";

 import type { IMessage } from "src/store/types";
@@ -50,7 +49,22 @@ export const CreatePassword = () => {
    }

    if (passwdSettings && !isValidPasswd(password, passwdSettings)) {
-      setMessage(MSG_PASSWD_CRITERIA);
+      setMessage(
+        <>
+          Password must:
+          <ul>
+            <li>
+              Be at least {passwdSettings.min_password_length} characters long
+            </li>
+            {passwdSettings.require_digit && (
+              <li>Contain at least one number</li>
+            )}
+            {passwdSettings.require_special_character && (
+              <li>Contain at least one special character</li>
+            )}
+          </ul>
+        </>
+      );
      return;
    }

--- a/src/containers/login/forgot-password.tsx
+++ b/src/containers/login/forgot-password.tsx
@@ -8,6 +8,7 @@ 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";

 export const ForgotPassword = () => {
  const [message, setMessage] = useState("");
@@ -22,6 +23,9 @@ export const ForgotPassword = () => {
    postForgotPassword({ email })
      .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."
+          );
          navigate(ROUTE_LOGIN);
        } else {
          setMessage(MSG_SOMETHING_WRONG);
--- a/src/containers/login/login.tsx
+++ b/src/containers/login/login.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Button, H1 } from "@jambonz/ui-kit";
 import { useLocation, Navigate, Link } from "react-router-dom";

-import { toastError, toastSuccess, useSelectState } from "src/store";
-import { useAuth } from "src/router/auth";
+import { toastError, toastSuccess } from "src/store";
+import { getToken, parseJwt, useAuth } from "src/router/auth";
 import {
  SESS_FLASH_MSG,
  SESS_OLD_PASSWORD,
@@ -13,15 +13,26 @@ import { Passwd, Message } from "src/components/forms";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_CREATE_PASSWORD,
-  ROUTE_INTERNAL_APPLICATIONS,
  ROUTE_FORGOT_PASSWORD,
+  ROUTE_REGISTER,
 } from "src/router/routes";
-import { USER_ACCOUNT, ENABLE_FORGOT_PASSWORD } from "src/api/constants";
+import {
+  USER_ACCOUNT,
+  ENABLE_FORGOT_PASSWORD,
+  ENABLE_HOSTED_SYSTEM,
+} from "src/api/constants";
+import { Icons } from "src/components";
+import { v4 as uuid } from "uuid";
+import { setLocationBeforeOauth, setOauthState } from "src/store/localStore";
+import { getGithubOauthUrl, getGoogleOauthUrl } from "./utils";
+import { UserData } from "src/store/types";

 export const Login = () => {
+  const state = uuid();
+  setOauthState(state);
+  setLocationBeforeOauth("/sign-in");
  const { signin, authorized } = useAuth();
  const location = useLocation();
-  const user = useSelectState("user");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");
@@ -56,13 +67,13 @@ export const Login = () => {
        />
      );
    }
-
+    const userData: UserData = parseJwt(getToken());
    return (
      <Navigate
        to={
-          user?.scope !== USER_ACCOUNT
+          userData?.scope !== USER_ACCOUNT
            ? ROUTE_INTERNAL_ACCOUNTS
-            : ROUTE_INTERNAL_APPLICATIONS
+            : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
        }
        state={{ from: location }}
        replace
@@ -91,13 +102,36 @@ export const Login = () => {
        />
        {message && <Message message={message} />}
        <Button type="submit">Log in</Button>
-        {ENABLE_FORGOT_PASSWORD && (
-          <div>
-            <Link to={ROUTE_FORGOT_PASSWORD} title="Forgot Password">
-              <p>Forgot Password</p>
-            </Link>
+        {(ENABLE_FORGOT_PASSWORD || ENABLE_HOSTED_SYSTEM) && (
+          <div className={ENABLE_HOSTED_SYSTEM ? "mast" : ""}>
+            {ENABLE_HOSTED_SYSTEM && (
+              <Link to={ROUTE_REGISTER} title="Forgot Password">
+                <p>Register</p>
+              </Link>
+            )}
+            {ENABLE_FORGOT_PASSWORD && (
+              <Link to={ROUTE_FORGOT_PASSWORD} title="Forgot Password">
+                <p>Forgot Password</p>
+              </Link>
+            )}
          </div>
        )}
+        {ENABLE_HOSTED_SYSTEM && (
+          <>
+            <a href={getGoogleOauthUrl(state)} className="btn btn--hollow">
+              <div className="mast">
+                <Icons.Youtube />
+                <span>Sign In With Google</span>
+              </div>
+            </a>
+            <a href={getGithubOauthUrl(state)} className="btn btn--hollow">
+              <div className="mast">
+                <Icons.GitHub />
+                <span>Sign In With Github</span>
+              </div>
+            </a>
+          </>
+        )}
      </form>
    </>
  );
--- a/src/containers/login/oauth-callback.tsx
+++ b/src/containers/login/oauth-callback.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getMe, postRegister } from "src/api";
+import {
+  DEFAULT_SERVICE_PROVIDER_SID,
+  GITHUB_CLIENT_ID,
+  GOOGLE_CLIENT_ID,
+  BASE_URL,
+} from "src/api/constants";
+import { Spinner } from "src/components";
+import { setToken } from "src/router/auth";
+import {
+  ROUTE_INTERNAL_ACCOUNTS,
+  ROUTE_LOGIN,
+  ROUTE_REGISTER,
+  ROUTE_REGISTER_SUB_DOMAIN,
+} from "src/router/routes";
+import { toastError } from "src/store";
+import {
+  getLocationBeforeOauth,
+  getOauthState,
+  removeLocationBeforeOauth,
+  removeOauthState,
+  setRootDomain,
+} from "src/store/localStore";
+
+export const OauthCallback = () => {
+  const queryParams = new URLSearchParams(location.search);
+  const code = queryParams.get("code");
+  const newState = queryParams.get("state");
+  const originalState = getOauthState();
+  const previousLocation = getLocationBeforeOauth();
+  const { provider } = useParams();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (provider !== "github" && provider !== "google") {
+      toastError(`${provider} is not a valid OAuth provider`);
+      navigate(ROUTE_LOGIN);
+      return;
+    }
+    if (!code || !originalState || !newState || newState !== originalState) {
+      toastError("Invalid state");
+      navigate(ROUTE_LOGIN);
+    }
+
+    let oauth2_client_id;
+    let oauth2_redirect_uri;
+
+    if (provider === "github") {
+      oauth2_client_id = GITHUB_CLIENT_ID;
+      oauth2_redirect_uri = `${BASE_URL}/oauth-callback/github`;
+    } else if (provider === "google") {
+      oauth2_client_id = GOOGLE_CLIENT_ID;
+      oauth2_redirect_uri = `${BASE_URL}/oauth-callback/google`;
+    }
+
+    removeOauthState();
+    removeLocationBeforeOauth();
+
+    postRegister({
+      service_provider_sid: DEFAULT_SERVICE_PROVIDER_SID,
+      provider,
+      oauth2_code: code || "",
+      oauth2_state: originalState,
+      oauth2_client_id,
+      oauth2_redirect_uri,
+      locationBeforeAuth: previousLocation,
+    })
+      .then(({ json }) => {
+        setToken(json.jwt);
+        setRootDomain(json.root_domain);
+        if (previousLocation === "/register") {
+          navigate(ROUTE_REGISTER_SUB_DOMAIN);
+        } else {
+          getMe()
+            .then(({ json: me }) => {
+              if (!me.account?.sip_realm) {
+                navigate(ROUTE_REGISTER_SUB_DOMAIN);
+              } else {
+                navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${json.account_sid}/edit`);
+              }
+            })
+            .catch((error) => {
+              toastError(error.msg);
+            });
+        }
+      })
+      .catch(() => {
+        navigate(ROUTE_REGISTER);
+      });
+  }, []);
+  return <Spinner />;
+};
+
+export default OauthCallback;
--- a/src/containers/login/register-email.tsx
+++ b/src/containers/login/register-email.tsx
@@ -0,0 +1,67 @@
+import { Button, H1 } from "@jambonz/ui-kit";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { postRegister } from "src/api";
+import { DEFAULT_SERVICE_PROVIDER_SID } from "src/api/constants";
+import { Passwd } from "src/components/forms";
+import { ROUTE_LOGIN, ROUTE_REGISTER_EMAIL_VERIFY } from "src/router/routes";
+import { generateActivationCode } from "./utils";
+import { setToken } from "src/router/auth";
+import { toastError } from "src/store";
+import { setRootDomain } from "src/store/localStore";
+
+export const RegisterEmail = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const email_activation_code = generateActivationCode();
+    postRegister({
+      service_provider_sid: DEFAULT_SERVICE_PROVIDER_SID,
+      provider: "local",
+      email,
+      password,
+      email_activation_code,
+      inviteCode: undefined, // reserved for inviteCode.
+    })
+      .then(({ json }) => {
+        setToken(json.jwt);
+        setRootDomain(json.root_domain);
+        navigate(ROUTE_REGISTER_EMAIL_VERIFY);
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+  return (
+    <>
+      <H1 className="h2">Register</H1>
+
+      <form className="form form--login" onSubmit={handleSubmit}>
+        <input
+          required
+          type="text"
+          name="email"
+          placeholder="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <Passwd
+          required
+          name="password"
+          value={password}
+          placeholder="Password"
+          setValue={setPassword}
+        />
+        <Button type="submit">Continue →</Button>
+        <Link to={ROUTE_LOGIN} title="Go back">
+          <p>Go back</p>
+        </Link>
+      </form>
+    </>
+  );
+};
+
+export default RegisterEmail;
--- a/src/containers/login/register-verify-email.tsx
+++ b/src/containers/login/register-verify-email.tsx
@@ -0,0 +1,54 @@
+import { Button, H1, MS } from "@jambonz/ui-kit";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { putActivationCode } from "src/api";
+import { getToken, parseJwt } from "src/router/auth";
+import {
+  ROUTE_REGISTER_EMAIL,
+  ROUTE_REGISTER_SUB_DOMAIN,
+} from "src/router/routes";
+import { toastError } from "src/store";
+import { UserData } from "src/store/types";
+
+export const EmailVerify = () => {
+  const [code, setCode] = useState("");
+  const userData: UserData = parseJwt(getToken());
+  const navigate = useNavigate();
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    putActivationCode(code, {
+      user_sid: userData.user_sid,
+      type: "email",
+    })
+      .then(() => {
+        navigate(ROUTE_REGISTER_SUB_DOMAIN);
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+  return (
+    <>
+      <H1 className="h2">Register</H1>
+
+      <form className="form form--login" onSubmit={handleSubmit}>
+        <MS>Please enter the code we just sent to your email</MS>
+        <input
+          required
+          type="text"
+          name="code"
+          placeholder="Verification Code"
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+        />
+        <Button type="submit">Continue →</Button>
+        <Link to={ROUTE_REGISTER_EMAIL} title="Go back">
+          <p>Go back</p>
+        </Link>
+      </form>
+    </>
+  );
+};
+
+export default EmailVerify;
--- a/src/containers/login/register.tsx
+++ b/src/containers/login/register.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { getGithubOauthUrl, getGoogleOauthUrl } from "./utils";
+import { v4 as uuid } from "uuid";
+import { setLocationBeforeOauth, setOauthState } from "src/store/localStore";
+import { Icons } from "src/components";
+import { Button, H1 } from "@jambonz/ui-kit";
+import { PRIVACY_POLICY, TERMS_OF_SERVICE } from "src/api/constants";
+import { Checkzone } from "src/components/forms";
+import { Link } from "react-router-dom";
+import { ROUTE_REGISTER_EMAIL } from "src/router/routes";
+
+export const Register = () => {
+  const state = uuid();
+  setOauthState(state);
+  setLocationBeforeOauth("/register");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+  return (
+    <>
+      <H1 className="h2">Register</H1>
+
+      <form className="form form--login" onSubmit={handleSubmit}>
+        <Checkzone
+          hidden
+          name="is_accepted"
+          label=""
+          labelNode={
+            <div>
+              I accept the
+              <a href={TERMS_OF_SERVICE}>
+                <span> Terms of Service </span>
+              </a>
+              and have read the
+              <a href={PRIVACY_POLICY}>
+                <span> Privacy Policy</span>
+              </a>
+            </div>
+          }
+          initialCheck={false}
+        >
+          <Button as={Link} to={ROUTE_REGISTER_EMAIL} mainStyle="hollow">
+            <div className="mast">
+              <Icons.Mail />
+              <span>Sign Up With Email</span>
+            </div>
+          </Button>
+          <a href={getGoogleOauthUrl(state)} className="btn btn--hollow">
+            <div className="mast">
+              <Icons.Youtube />
+              <span>Sign Up With Google</span>
+            </div>
+          </a>
+          <a href={getGithubOauthUrl(state)} className="btn btn--hollow">
+            <div className="mast">
+              <Icons.GitHub />
+              <span>Sign Up With Github</span>
+            </div>
+          </a>
+        </Checkzone>
+      </form>
+    </>
+  );
+};
+
+export default Register;
--- a/src/containers/login/reset-password.tsx
+++ b/src/containers/login/reset-password.tsx
@@ -0,0 +1,97 @@
+import { Button, H1 } from "@jambonz/ui-kit";
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { postChangepassword, postSignIn } from "src/api";
+import { Message, Passwd } from "src/components/forms";
+import { setToken } from "src/router/auth";
+import { ROUTE_LOGIN } from "src/router/routes";
+import { toastError, toastSuccess } from "src/store";
+
+export const ResetPassword = () => {
+  const params = useParams();
+  const resetId = params.id;
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const [isDisableSubmitButton, setIsDisableSubmitButton] = useState(false);
+  const [message, setMessage] = useState("");
+  const navigate = useNavigate();
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage("");
+    if (newPassword !== confirmNewPassword) {
+      setMessage(
+        "The confirmation password does not match the new password. Please ensure both passwords are identical."
+      );
+      return;
+    }
+    if (newPassword.length < 6) {
+      setMessage("The password must be at least 7 characters long.");
+      return;
+    }
+
+    if (!/[a-zA-Z]/.test(newPassword)) {
+      setMessage("Password must contain a letter.");
+    }
+
+    setIsDisableSubmitButton(true);
+    postChangepassword({
+      old_password: resetId,
+      new_password: newPassword,
+    })
+      .then(() => {
+        toastSuccess("New password was successfully set.");
+        setToken("");
+        navigate(ROUTE_LOGIN);
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+
+  useEffect(() => {
+    postSignIn({
+      link: resetId,
+    })
+      .then(({ json }) => {
+        setToken(json.jwt || "");
+      })
+      .catch((error) => toastError(error.msg));
+  }, []);
+  return (
+    <>
+      <H1 className="h2">Reset Password</H1>
+      <form className="form form--login" onSubmit={handleSubmit}>
+        <label htmlFor="new_password">New password</label>
+        <Passwd
+          id="new_password"
+          name="new_password"
+          value={newPassword}
+          placeholder="New password"
+          required
+          onChange={(e) => {
+            setNewPassword(e.target.value);
+          }}
+        />
+
+        <label htmlFor="confirm_new_password">Confirm new password</label>
+        <Passwd
+          id="confirm_new_password"
+          name="confirm_new_password"
+          value={confirmNewPassword}
+          placeholder="Confirm new password"
+          required
+          onChange={(e) => {
+            setConfirmNewPassword(e.target.value);
+          }}
+        />
+
+        {message && <Message message={message} />}
+        <Button type="submit" disabled={isDisableSubmitButton}>
+          Save
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default ResetPassword;
--- a/src/containers/login/sub-domain.tsx
+++ b/src/containers/login/sub-domain.tsx
@@ -0,0 +1,83 @@
+import { Button, H1, MS } from "@jambonz/ui-kit";
+import React, { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { getAvailability, postSipRealms } from "src/api";
+import DomainInput from "src/components/domain-input";
+import { Message } from "src/components/forms";
+import { getToken, parseJwt } from "src/router/auth";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { getRootDomain } from "src/store/localStore";
+import { UserData } from "src/store/types";
+import { hasValue } from "src/utils";
+
+export const RegisterChooseSubdomain = () => {
+  const [name, setName] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isValidDomain, setIsValidDomain] = useState(false);
+  const rootDomain = getRootDomain();
+  const userData: UserData = parseJwt(getToken());
+  const navigate = useNavigate();
+  const typingTimeoutRef = useRef<number | null>(null);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrorMessage("");
+
+    postSipRealms(userData.account_sid || "", `${name}.${rootDomain}`)
+      .then(() => {
+        navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`);
+      })
+      .catch((error) => {
+        setErrorMessage(error.msg);
+      });
+  };
+
+  useEffect(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    if (!name || name.length < 3) {
+      setIsValidDomain(false);
+      return;
+    }
+    setIsValidDomain(false);
+    typingTimeoutRef.current = setTimeout(() => {
+      getAvailability(`${name}.${rootDomain}`)
+        .then(({ json }) =>
+          setIsValidDomain(
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
+        )
+        .catch((error) => {
+          setErrorMessage(error.msg);
+          setIsValidDomain(false);
+        });
+    }, 500);
+  }, [name]);
+  return (
+    <>
+      <H1 className="h2">Choose a subdomain</H1>
+
+      <form className="form form--login" onSubmit={handleSubmit}>
+        {errorMessage && <Message message={errorMessage} />}
+        <MS>
+          This will be the FQDN where your carrier will send calls, and where
+          you can register devices to. This can be changed at any time.
+        </MS>
+        <DomainInput
+          id="subdomain"
+          name="subdomain"
+          value={name}
+          setValue={setName}
+          placeholder="Your name here"
+          root_domain={rootDomain ? `.${rootDomain}` : ""}
+          is_valid={isValidDomain}
+        />
+        <Button type="submit" disabled={!isValidDomain}>
+          Complete Registration →
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterChooseSubdomain;
--- a/src/containers/login/utils.ts
+++ b/src/containers/login/utils.ts
@@ -0,0 +1,24 @@
+import {
+  GITHUB_CLIENT_ID,
+  GOOGLE_CLIENT_ID,
+  BASE_URL,
+} from "src/api/constants";
+
+export const getGithubOauthUrl = (state: string) => {
+  return `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&state=${state}&scope=user:email&allow_signup=false`;
+};
+
+export const getGoogleOauthUrl = (state: string) => {
+  return `https://accounts.google.com/o/oauth2/v2/auth?scope=email+profile&access_type=offline&include_granted_scopes=true&response_type=code&state=${state}&redirect_uri=${BASE_URL}/oauth-callback/google&client_id=${GOOGLE_CLIENT_ID}`;
+};
+
+const length = 6;
+const digit = () => Math.floor(Math.random() * 10);
+
+export function generateActivationCode() {
+  let activationCode = "";
+  for (let i = 0; i < length; i++) {
+    activationCode += digit();
+  }
+  return activationCode;
+}
--- a/src/router/auth.tsx
+++ b/src/router/auth.tsx
@@ -4,13 +4,13 @@
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";

-import { postLogin, postLogout } from "src/api";
+import { getMe, postLogin, postLogout } from "src/api";
 import { StatusCodes } from "src/api/types";
 import {
  ROUTE_CREATE_PASSWORD,
  ROUTE_INTERNAL_ACCOUNTS,
-  ROUTE_INTERNAL_APPLICATIONS,
  ROUTE_LOGIN,
+  ROUTE_REGISTER_SUB_DOMAIN,
 } from "./routes";
 import {
  SESS_OLD_PASSWORD,
@@ -23,8 +23,13 @@ import {
 } from "src/constants";

 import type { UserLogin } from "src/api/types";
-import { USER_ACCOUNT } from "src/api/constants";
+import { ENABLE_HOSTED_SYSTEM, USER_ACCOUNT } from "src/api/constants";
 import type { UserData } from "src/store/types";
+import { toastError } from "src/store";
+import {
+  removeLocationBeforeOauth,
+  removeOauthState,
+} from "src/store/localStore";

 interface SignIn {
  (username: string, password: string): Promise<UserLogin>;
@@ -103,7 +108,23 @@ export const useProvideAuth = (): AuthStateContext => {
            setToken(token);
            userData = parseJwt(token);

-            if (response.json.force_change) {
+            if (ENABLE_HOSTED_SYSTEM) {
+              getMe()
+                .then(({ json }) => {
+                  if (!json.account?.sip_realm) {
+                    navigate(ROUTE_REGISTER_SUB_DOMAIN);
+                  } else {
+                    navigate(
+                      userData.scope !== USER_ACCOUNT
+                        ? ROUTE_INTERNAL_ACCOUNTS
+                        : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
+                    );
+                  }
+                })
+                .catch((error) => {
+                  toastError(error.msg);
+                });
+            } else if (response.json.force_change) {
              sessionStorage.setItem(SESS_USER_SID, response.json.user_sid);
              sessionStorage.setItem(SESS_OLD_PASSWORD, password);
              navigate(ROUTE_CREATE_PASSWORD);
@@ -111,7 +132,7 @@ export const useProvideAuth = (): AuthStateContext => {
              navigate(
                userData.scope !== USER_ACCOUNT
                  ? ROUTE_INTERNAL_ACCOUNTS
-                  : ROUTE_INTERNAL_APPLICATIONS
+                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
              );
            }

@@ -131,19 +152,23 @@ export const useProvideAuth = (): AuthStateContext => {
          }

          reject(MSG_SOMETHING_WRONG);
+        })
+        .finally(() => {
+          removeOauthState();
+          removeLocationBeforeOauth();
        });
    });
  };

  const signout = () => {
-    window.location.href = ROUTE_LOGIN;
    return new Promise((resolve, reject) => {
      postLogout()
        .then((response) => {
-          if (response.status === StatusCodes.OK) {
+          if (response.status === StatusCodes.NO_CONTENT) {
            localStorage.clear();
            sessionStorage.clear();
            sessionStorage.setItem(SESS_FLASH_MSG, MSG_LOGGED_OUT);
+            window.location.href = ROUTE_LOGIN;
            resolve(response.json);
          }
        })
@@ -151,6 +176,7 @@ export const useProvideAuth = (): AuthStateContext => {
          localStorage.clear();
          sessionStorage.clear();
          sessionStorage.setItem(SESS_FLASH_MSG, MSG_LOGGED_OUT);
+          window.location.href = ROUTE_LOGIN;
          if (error) {
            reject(error);
          }
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -6,7 +6,10 @@ import { useSelectState } from "src/store";
 import { Login, Layout as LoginLayout } from "src/containers/login";
 import { Layout as InternalLayout } from "src/containers/internal";
 import { NotFound } from "src/containers/notfound";
-import { ENABLE_FORGOT_PASSWORD } from "src/api/constants";
+import {
+  ENABLE_HOSTED_SYSTEM,
+  ENABLE_FORGOT_PASSWORD,
+} from "src/api/constants";

 /** Login */
 import CreatePassword from "src/containers/login/create-password";
@@ -42,6 +45,18 @@ import MSTeamsTenantsEdit from "src/containers/internal/views/ms-teams-tenants/e
 import Lcrs from "src/containers/internal/views/least-cost-routing";
 import LcrsAdd from "src/containers/internal/views/least-cost-routing/add";
 import LcrsEdit from "src/containers/internal/views/least-cost-routing/edit";
+import Clients from "src/containers/internal/views/clients";
+import ClientsAdd from "src/containers/internal/views/clients/add";
+import ClientsEdit from "src/containers/internal/views/clients/edit";
+import OauthCallback from "src/containers/login/oauth-callback";
+import Register from "src/containers/login/register";
+import RegisterEmail from "src/containers/login/register-email";
+import EmailVerify from "src/containers/login/register-verify-email";
+import RegisterChooseSubdomain from "src/containers/login/sub-domain";
+import Subscription from "src/containers/internal/views/accounts/subscription";
+import ManagePayment from "src/containers/internal/views/accounts/manage-payment";
+import EditSipRealm from "src/containers/internal/views/accounts/edit-sip-realm";
+import ResetPassword from "src/containers/login/reset-password";

 export const Router = () => {
  const toast = useSelectState("toast");
@@ -62,9 +77,29 @@ export const Router = () => {
            }
          />
          {ENABLE_FORGOT_PASSWORD && (
-            <Route path="forgot-password" element={<ForgotPassword />} />
+            <>
+              <Route path="forgot-password" element={<ForgotPassword />} />
+              <Route path="reset-password/:id" element={<ResetPassword />} />
+            </>
+          )}
+          {ENABLE_HOSTED_SYSTEM && (
+            <>
+              <Route path="register" element={<Register />} />
+              <Route path="register/email" element={<RegisterEmail />} />
+              <Route
+                path="register/email/verify-your-email"
+                element={<EmailVerify />}
+              />
+              <Route
+                path="register/choose-a-subdomain"
+                element={<RegisterChooseSubdomain />}
+              />
+              <Route
+                path="oauth-callback/:provider"
+                element={<OauthCallback />}
+              />
+            </>
          )}
-
          {/* 404 page not found */}
          <Route path="*" element={<NotFound />} />
        </Route>
@@ -87,6 +122,26 @@ export const Router = () => {
                    path="accounts/:account_sid/edit"
                    element={<AccountEdit />}
                  />
+                  {ENABLE_HOSTED_SYSTEM && (
+                    <>
+                      <Route
+                        path="accounts/:account_sid/subscription"
+                        element={<Subscription />}
+                      />
+                      <Route
+                        path="accounts/:account_sid/manage-payment"
+                        element={<ManagePayment />}
+                      />
+                      <Route
+                        path="accounts/:account_sid/modify-subscription"
+                        element={<Subscription />}
+                      />
+                      <Route
+                        path="accounts/:account_sid/sip-realm/edit"
+                        element={<EditSipRealm />}
+                      />
+                    </>
+                  )}
                  <Route path="applications" element={<Applications />} />
                  <Route path="applications/add" element={<ApplicationAdd />} />
                  <Route
@@ -138,6 +193,13 @@ export const Router = () => {
                    element={<LcrsEdit />}
                  />

+                  <Route path="clients" element={<Clients />} />
+                  <Route path="clients/add" element={<ClientsAdd />} />
+                  <Route
+                    path="clients/:client_sid/edit"
+                    element={<ClientsEdit />}
+                  />
+
                  {/* 404 page not found */}
                  <Route path="*" element={<NotFound />} />
                </Route>
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,9 +1,14 @@
 export const ROUTE_LOGIN = "/";
+export const ROUTE_REGISTER = "/register";
+export const ROUTE_REGISTER_EMAIL = "/register/email";
+export const ROUTE_REGISTER_EMAIL_VERIFY = "/register/email/verify-your-email";
+export const ROUTE_REGISTER_SUB_DOMAIN = "/register/choose-a-subdomain";
 export const ROUTE_CREATE_PASSWORD = "/create-password";
 export const ROUTE_FORGOT_PASSWORD = "/forgot-password";
 export const ROUTE_INTERNAL_USERS = "/internal/users";
 export const ROUTE_INTERNAL_SETTINGS = "/internal/settings";
 export const ROUTE_INTERNAL_ACCOUNTS = "/internal/accounts";
+export const ROUTE_INTERNAL_CLIENTS = "/internal/clients";
 export const ROUTE_INTERNAL_APPLICATIONS = "/internal/applications";
 export const ROUTE_INTERNAL_RECENT_CALLS = "/internal/recent-calls";
 export const ROUTE_INTERNAL_ALERTS = "/internal/alerts";
--- a/src/store/localStore.ts
+++ b/src/store/localStore.ts
@@ -58,6 +58,48 @@ export const removeQueryFilter = () => {
  return localStorage.removeItem(storeQueryFilter);
 };

+/**Oauth2 */
+const oauthStateKey = "oauth-state";
+export const getOauthState = () => {
+  return localStorage.getItem(oauthStateKey) || "";
+};
+
+export const setOauthState = (token: string) => {
+  localStorage.setItem(oauthStateKey, token);
+};
+
+export const removeOauthState = () => {
+  return localStorage.removeItem(oauthStateKey);
+};
+
+const locationBeforeOauthKey = "location-before-oauth";
+
+export const getLocationBeforeOauth = () => {
+  return localStorage.getItem(locationBeforeOauthKey) || "";
+};
+
+export const setLocationBeforeOauth = (token: string) => {
+  localStorage.setItem(locationBeforeOauthKey, token);
+};
+
+export const removeLocationBeforeOauth = () => {
+  return localStorage.removeItem(locationBeforeOauthKey);
+};
+
+// Email register
+const rootDomainKey = "root-domain";
+export const setRootDomain = (domain: string) => {
+  return localStorage.setItem(rootDomainKey, domain);
+};
+
+export const getRootDomain = () => {
+  return localStorage.getItem(rootDomainKey);
+};
+
+export const removeRootDomain = () => {
+  return localStorage.removeItem(rootDomainKey);
+};
+
 /**
 * Methods to get/set the location from local storage
 */
--- a/src/styles/_filters.scss
+++ b/src/styles/_filters.scss
@@ -19,14 +19,45 @@
      grid-gap: ui-vars.$px02;
    }
  }
-
+  > :first-child {
+    margin-left: auto;
+  }
  &--multi {
    overflow-x: auto;
    white-space: nowrap;
    grid-gap: ui-vars.$px02;

-    > :first-child {
-      margin-left: auto;
+    @media (max-width: 1400px) {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 1000px) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 500px) {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      > * {
+        justify-self: end;
+      }
    }
  }

--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -64,6 +64,9 @@ fieldset {
    > button {
      width: 100%;
    }
+    > a {
+      width: 100%;
+    }

    .msg {
      width: 100%;
@@ -224,7 +227,7 @@ fieldset {
    }

    &:nth-child(2) {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
      margin-top: ui-vars.$px02;

      > div:last-child {
@@ -287,3 +290,57 @@ fieldset {
    }
  }
 }
+
+.bucket_tag {
+  @extend .lcr;
+}
+
+.customVoice {
+  padding: ui-vars.$px02;
+  border-radius: ui-vars.$px01;
+  border: 2px solid ui-vars.$grey;
+  max-width: ui-vars.$width-mobile;
+  position: relative;
+
+  > div {
+    display: grid;
+    grid-gap: ui-vars.$px02;
+    align-items: center;
+
+    &:nth-child(1) {
+      grid-template-columns: [col] 100%;
+    }
+
+    &:nth-child(2) {
+      grid-template-columns: [col] calc(40% - #{ui-vars.$px02 * 2}) [col] 60%;
+      margin-top: ui-vars.$px02;
+    }
+
+    &:nth-child(3) {
+      grid-template-columns: [col] 100%;
+      margin-top: ui-vars.$px02;
+    }
+
+    &:nth-child(4) {
+      grid-template-columns: [col] 100%;
+      margin-top: ui-vars.$px02;
+    }
+  }
+
+  > button {
+    position: absolute;
+    right: 0;
+    bottom: 50%;
+    transform: translate3d(50%, 50%, 0);
+
+    @include mixins.small() {
+      top: auto;
+      bottom: auto;
+      transform: none;
+      position: relative;
+      margin-top: ui-vars.$px02;
+      display: flex;
+      margin-left: auto;
+    }
+  }
+}
--- a/src/styles/_grid.scss
+++ b/src/styles/_grid.scss
@@ -34,7 +34,6 @@
      padding-right: ui-vars.$px02;
    }
  }
-
  &__empty {
    display: flex;
  }
@@ -112,4 +111,18 @@
      }
    }
  }
+
+  &--col4--users {
+    .grid__row {
+      grid-template-columns: [col] 30% [col] 40% [col] 25% [col] 5%;
+      grid-template-rows: [row] auto [row] auto [row] [row] auto;
+      display: grid;
+      justify-content: space-between;
+
+      > div:last-child {
+        text-align: left;
+        padding-right: 0;
+      }
+    }
+  }
 }
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -173,6 +173,13 @@ details {
  margin-top: ui-vars.$px02;
 }

+.pre-grid-white {
+  @extend .pre-grid;
+  background-color: ui-vars.$white;
+  color: ui-vars.$dark;
+  font-size: 1.2em;
+}
+
 .pcap {
  margin-top: ui-vars.$px02;
 }
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -41,6 +41,10 @@ export const hasLength = <Type>(
  return hasValue(variable) && variable.length > minlength;
 };

+export const isNotBlank = (variable: string | null | undefined) => {
+  return hasValue(variable) && variable.length > 0;
+};
+
 export const isObject = (obj: unknown) => {
  /** null | undefined | Array will be "object" so exclude them */
  return typeof obj === "object" && hasValue(obj) && !Array.isArray(obj);
--- a/src/vendor/index.tsx
+++ b/src/vendor/index.tsx
@@ -8,6 +8,8 @@ import type {
 } from "./types";

 export const LANG_EN_US = "en-US";
+export const ELEVENLABS_LANG_EN = "en";
+export const LANG_COBALT_EN_US = "en_US-8khz";
 export const LANG_EN_US_STANDARD_C = "en-US-Standard-C";
 export const VENDOR_GOOGLE = "google";
 export const VENDOR_AWS = "aws";
@@ -19,6 +21,9 @@ export const VENDOR_IBM = "ibm";
 export const VENDOR_NVIDIA = "nvidia";
 export const VENDOR_SONIOX = "soniox";
 export const VENDOR_CUSTOM = "custom";
+export const VENDOR_COBALT = "cobalt";
+export const VENDOR_ELEVENLABS = "elevenlabs";
+export const VENDOR_ASSEMBLYAI = "assemblyai";

 export const vendors: VendorOptions[] = [
  {
@@ -61,7 +66,19 @@ export const vendors: VendorOptions[] = [
    name: "Custom",
    value: VENDOR_CUSTOM,
  },
-];
+  {
+    name: "Cobalt",
+    value: VENDOR_COBALT,
+  },
+  {
+    name: "ElevenLabs",
+    value: VENDOR_ELEVENLABS,
+  },
+  {
+    name: "AssemblyAI",
+    value: VENDOR_ASSEMBLYAI,
+  },
+].sort((a, b) => a.name.localeCompare(b.name)) as VendorOptions[];

 export const useRegionVendors = () => {
  const [regions, setRegions] = useState<RegionVendors>();
@@ -115,6 +132,8 @@ export const useSpeechVendors = () => {
      import("./speech-recognizer/ibm-speech-recognizer-lang"),
      import("./speech-recognizer/nvidia-speech-recognizer-lang"),
      import("./speech-recognizer/soniox-speech-recognizer-lang"),
+      import("./speech-recognizer/cobalt-speech-recognizer-lang"),
+      import("./speech-recognizer/assemblyai-speech-recognizer-lang"),
      import("./speech-synthesis/aws-speech-synthesis-lang"),
      import("./speech-synthesis/google-speech-synthesis-lang"),
      import("./speech-synthesis/ms-speech-synthesis-lang"),
@@ -122,6 +141,7 @@ export const useSpeechVendors = () => {
      import("./speech-synthesis/nuance-speech-synthesis-lang"),
      import("./speech-synthesis/ibm-speech-synthesis-lang"),
      import("./speech-synthesis/nvidia-speech-synthesis-lang"),
+      import("./speech-synthesis/elevellabs-speech-synthesis-lang"),
    ]).then(
      ([
        { default: awsRecognizer },
@@ -132,6 +152,8 @@ export const useSpeechVendors = () => {
        { default: ibmRecognizer },
        { default: nvidiaRecognizer },
        { default: sonioxRecognizer },
+        { default: cobaltRecognizer },
+        { default: assemblyaiRecognizer },
        { default: awsSynthesis },
        { default: googleSynthesis },
        { default: msSynthesis },
@@ -139,6 +161,7 @@ export const useSpeechVendors = () => {
        { default: nuanceSynthesis },
        { default: ibmSynthesis },
        { default: nvidiaynthesis },
+        { default: elevenLabsSynthesis },
      ]) => {
        if (!ignore) {
          setSpeech({
@@ -150,6 +173,7 @@ export const useSpeechVendors = () => {
              nuance: nuanceSynthesis,
              ibm: ibmSynthesis,
              nvidia: nvidiaynthesis,
+              elevenlabs: elevenLabsSynthesis,
            },
            recognizers: {
              aws: awsRecognizer,
@@ -160,6 +184,8 @@ export const useSpeechVendors = () => {
              ibm: ibmRecognizer,
              nvidia: nvidiaRecognizer,
              soniox: sonioxRecognizer,
+              cobalt: cobaltRecognizer,
+              assemblyai: assemblyaiRecognizer,
            },
          });
        }
--- a/src/vendor/speech-recognizer/assemblyai-speech-recognizer-lang.ts
+++ b/src/vendor/speech-recognizer/assemblyai-speech-recognizer-lang.ts
@@ -0,0 +1,26 @@
+import type { Language } from "../types";
+
+export const languages: Language[] = [
+  { name: "Global English", code: "en" },
+  { name: "Australian English", code: "en_au" },
+  { name: "British English", code: "en_uk" },
+  { name: "US English", code: "en_us" },
+  { name: "Spanish", code: "es" },
+  { name: "French", code: "fr" },
+  { name: "German", code: "de" },
+  { name: "Italian", code: "it" },
+  { name: "Portuguese", code: "pt" },
+  { name: "Dutch", code: "nl" },
+  { name: "Hindi", code: "hi" },
+  { name: "Japanese", code: "ja" },
+  { name: "Chinese", code: "zh" },
+  { name: "Finnish", code: "fi" },
+  { name: "Korean", code: "ko" },
+  { name: "Polish", code: "pl" },
+  { name: "Russian", code: "ru" },
+  { name: "Turkish", code: "tr" },
+  { name: "Ukrainian", code: "uk" },
+  { name: "Vietnamese", code: "vi" },
+];
+
+export default languages;
--- a/src/vendor/speech-recognizer/cobalt-speech-recognizer-lang.ts
+++ b/src/vendor/speech-recognizer/cobalt-speech-recognizer-lang.ts
@@ -0,0 +1,30 @@
+import type { Language } from "../types";
+
+export const languages: Language[] = [
+  {
+    name: "English US",
+    code: "en_US-8khz",
+  },
+  {
+    name: "English UK",
+    code: "en_UK-8khz",
+  },
+  {
+    name: "Spanish",
+    code: "es_xx-8khz",
+  },
+  {
+    name: "French",
+    code: "fr_fr-8khz",
+  },
+  {
+    name: "Russian",
+    code: "ru_ru-8khz",
+  },
+  {
+    name: "Portuguese",
+    code: "pt_br-8khz",
+  },
+];
+
+export default languages;
--- a/src/vendor/speech-synthesis/elevellabs-speech-synthesis-lang.ts
+++ b/src/vendor/speech-synthesis/elevellabs-speech-synthesis-lang.ts
@@ -0,0 +1,196 @@
+import type { VoiceLanguage } from "../types";
+
+export const languages: VoiceLanguage[] = [
+  {
+    code: "ar",
+    name: "Arabic",
+    voices: [
+      {
+        value: "pNInz6obpgDQGcFmaJgB",
+        name: "Adam - american, deep, middle aged, male, narration",
+      },
+      {
+        value: "ErXwobaYiN019PkySvjV",
+        name: "Antoni - american, well-rounded, young, male, narration",
+      },
+      {
+        value: "VR6AewLTigWG4xSOukaG",
+        name: "Arnold - american, crisp, middle aged, male, narration",
+      },
+      {
+        value: "EXAVITQu4vr4xnSDxMaL",
+        name: "Bella - american, soft, young, female, narration",
+      },
+      {
+        value: "N2lVS1w4EtoT3dr4eOWO",
+        name: "Callum - american, hoarse, middle aged, male, video games",
+      },
+      {
+        value: "IKne3meq5aSn9XLyUdCD",
+        name: "Charlie - australian, casual, middle aged, male, conversational",
+      },
+      {
+        value: "XB0fDUnXU5powFXDhCwa",
+        name: "Charlotte - english-swedish, seductive, middle aged, female, video games",
+      },
+      {
+        value: "2EiwWnXFnvU5JabPnv8n",
+        name: "Clyde - american, war veteran, middle aged, male, video games",
+      },
+      {
+        value: "onwK4e9ZLuTAKqWW03F9",
+        name: "Daniel - british, deep, middle aged, male, news presenter",
+      },
+      {
+        value: "CYw3kZ02Hs0563khs1Fj",
+        name: "Dave - british-essex, conversational, young, male, video games",
+      },
+      {
+        value: "AZnzlk1XvdvUeBnXmlld",
+        name: "Domi - american, strong, young, female, narration",
+      },
+      {
+        value: "ThT5KcBeYPX3keUQqHPh",
+        name: "Dorothy - british, pleasant, young, female, children's stories",
+      },
+      {
+        value: "MF3mGyEYCl7XYWbV9V6O",
+        name: "Elli - american, emotional, young, female, narration",
+      },
+      {
+        value: "LcfcDJNUP1GQjkzn1xUU",
+        name: "Emily - american, calm, young, female, meditation",
+      },
+      {
+        value: "g5CIjZEefAph4nQFvHAz",
+        name: "Ethan - american, undefined, young, male, ASMR",
+      },
+      {
+        value: "D38z5RcWu1voky8WS1ja",
+        name: "Fin - irish, sailor, old, male, video games",
+      },
+      {
+        value: "jsCqWAovK2LkecY7zXl4",
+        name: "Freya - american, undefined, young, female, undefined",
+      },
+      {
+        value: "jBpfuIE2acCO8z3wKNLl",
+        name: "Gigi - american, childlish, young, female, animation",
+      },
+      {
+        value: "zcAOhNBS3c14rBihAFp1",
+        name: "Giovanni - english-italian, foreigner, young, male, audiobook",
+      },
+      {
+        value: "z9fAnlkpzviPz146aGWa",
+        name: "Glinda - american, witch, middle aged, female, video games",
+      },
+      {
+        value: "oWAxZDx7w5VEj9dCyTzz",
+        name: "Grace - american-southern, undefined, young, female, audiobook ",
+      },
+      {
+        value: "SOYHLrjzK2X1ezoPC6cr",
+        name: "Harry - american, anxious, young, male, video games",
+      },
+      {
+        value: "ZQe5CZNOzWyzPSCn5a3c",
+        name: "James - australian, calm , old, male, news",
+      },
+      {
+        value: "bVMeCyTHy58xNoL34h3p",
+        name: "Jeremy - american-irish, excited, young, male, narration",
+      },
+      {
+        value: "t0jbNlBVZ17f02VDIeMI",
+        name: "Jessie - american, raspy , old, male, video games",
+      },
+      {
+        value: "Zlb1dXrM653N07WRdFW3",
+        name: "Joseph - british, undefined, middle aged, male, news",
+      },
+      {
+        value: "TxGEqnHWrfWFTfGW9XjX",
+        name: "Josh - american, deep, young, male, narration",
+      },
+      {
+        value: "TX3LPaxmHKxFdv7VOQHJ",
+        name: "Liam - american, undefined, young, male, narration",
+      },
+      {
+        value: "XrExE9yKIg1WjnnlVkGX",
+        name: "Matilda - american, warm, young, female, audiobook",
+      },
+      {
+        value: "Yko7PKHZNXotIFUBG7I9",
+        name: "Matthew - british, undefined, middle aged, male, audiobook",
+      },
+      {
+        value: "flq6f7yk4E4fJM5XTYuZ",
+        name: "Michael - american, undefined, old, male, audiobook",
+      },
+      {
+        value: "zrHiDhphv9ZnVXBqCLjz",
+        name: "Mimi - english-swedish, childish, young, female, animation",
+      },
+      {
+        value: "piTKgcLEGmPE4e6mEKli",
+        name: "Nicole - american, whisper, young, female, audiobook",
+      },
+      {
+        value: "ODq5zmih8GrVes37Dizd",
+        name: "Patrick - american, shouty, middle aged, male, video games",
+      },
+      {
+        value: "21m00Tcm4TlvDq8ikWAM",
+        name: "Rachel - american, calm, young, female, narration",
+      },
+      {
+        value: "wViXBPUzp2ZZixB1xQuM",
+        name: "Ryan - american, soldier, middle aged, male, audiobook",
+      },
+      {
+        value: "yoZ06aMxZJJ28mfd3POQ",
+        name: "Sam - american, raspy, young, male, narration",
+      },
+      {
+        value: "pMsXgVXv3BLzUgSXRplE",
+        name: "Serena - american, pleasant, middle aged, female, interactive",
+      },
+      {
+        value: "GBv7mTt0atIp3Br8iCZE",
+        name: "Thomas - american, calm, young, male, meditation",
+      },
+    ],
+  },
+  { code: "bg", name: "Bulgarian", voices: [] },
+  { code: "zh", name: "Chinese", voices: [] },
+  { code: "hr", name: "Croatian", voices: [] },
+  { code: "cs", name: "Czech", voices: [] },
+  { code: "da", name: "Danish", voices: [] },
+  { code: "nl", name: "Dutch", voices: [] },
+  { code: "en", name: "English", voices: [] },
+  { code: "fil", name: "Filipino", voices: [] },
+  { code: "fi", name: "Finnish", voices: [] },
+  { code: "fr", name: "French", voices: [] },
+  { code: "de", name: "German", voices: [] },
+  { code: "el", name: "Greek", voices: [] },
+  { code: "hi", name: "Hindi", voices: [] },
+  { code: "id", name: "Indonesian", voices: [] },
+  { code: "it", name: "Italian", voices: [] },
+  { code: "ja", name: "Japanese", voices: [] },
+  { code: "ko", name: "Korean", voices: [] },
+  { code: "ms", name: "Malay", voices: [] },
+  { code: "pl", name: "Polish", voices: [] },
+  { code: "pt", name: "Portuguese", voices: [] },
+  { code: "ro", name: "Romanian", voices: [] },
+  { code: "ru", name: "Russian", voices: [] },
+  { code: "sk", name: "Slovak", voices: [] },
+  { code: "es", name: "Spanish", voices: [] },
+  { code: "sv", name: "Swedish", voices: [] },
+  { code: "ta", name: "Tamil", voices: [] },
+  { code: "tr", name: "Turkish", voices: [] },
+  { code: "uk", name: "Ukrainian", voices: [] },
+];
+
+export default languages;
--- a/src/vendor/speech-synthesis/google-speech-synthesis-lang.ts
+++ b/src/vendor/speech-synthesis/google-speech-synthesis-lang.ts
@@ -28,6 +28,8 @@ export const languages: VoiceLanguage[] = [
    voices: [
      { value: "da-DK-Standard-A", name: "Standard-A (Female)" },
      { value: "da-DK-Wavenet-A", name: "Wavenet-A (Female)" },
+      { value: "da-DK-Neural2-D", name: "Neural2-D (Female)" },
+      { value: "da-DK-Neural2-F", name: "Neural2-F (Male)" },
    ],
  },
  {
@@ -58,6 +60,14 @@ export const languages: VoiceLanguage[] = [
      { value: "en-AU-Wavenet-B", name: "Wavenet-B (Male)" },
      { value: "en-AU-Wavenet-C", name: "Wavenet-C (Female)" },
      { value: "en-AU-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "en-AU-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "en-AU-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "en-AU-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "en-AU-Neural2-D", name: "Neural2-D (Male)" },
+      { value: "en-AU-Polyglot-1", name: "Polyglot-1 (Male)" },
+      { value: "en-AU-News-E", name: "News-E (Female)" },
+      { value: "en-AU-News-F", name: "News-F (Female)" },
+      { value: "en-AU-News-G", name: "News-G (Male)" },
    ],
  },
  {
@@ -86,6 +96,18 @@ export const languages: VoiceLanguage[] = [
      { value: "en-GB-Wavenet-B", name: "Wavenet-B (Male)" },
      { value: "en-GB-Wavenet-C", name: "Wavenet-C (Female)" },
      { value: "en-GB-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "en-GB-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "en-GB-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "en-GB-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "en-GB-Neural2-D", name: "Neural2-D (Male)" },
+      { value: "en-GB-Neural2-F", name: "Neural2-F (Female)" },
+      { value: "en-GB-News-G", name: "News-G (Female)" },
+      { value: "en-GB-News-H", name: "News-H (Female)" },
+      { value: "en-GB-News-I", name: "News-I (Female)" },
+      { value: "en-GB-News-J", name: "News-J (Male)" },
+      { value: "en-GB-News-K", name: "News-K (Male)" },
+      { value: "en-GB-News-L", name: "News-L (Male)" },
+      { value: "en-GB-News-M", name: "News-M (Male)" },
    ],
  },
  {
@@ -102,6 +124,22 @@ export const languages: VoiceLanguage[] = [
      { value: "en-US-Wavenet-D", name: "Wavenet-D (Male)" },
      { value: "en-US-Wavenet-E", name: "Wavenet-E (Female)" },
      { value: "en-US-Wavenet-F", name: "Wavenet-F (Female)" },
+      { value: "en-US-Neural2-A", name: "Neural2-A (Male)" },
+      { value: "en-US-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "en-US-Neural2-D", name: "Neural2-D (Male)" },
+      { value: "en-US-Neural2-E", name: "Neural2-E (Female)" },
+      { value: "en-US-Neural2-F", name: "Neural2-F (Female)" },
+      { value: "en-US-Neural2-G", name: "Neural2-G (Female)" },
+      { value: "en-US-Neural2-H", name: "Neural2-H (Female)" },
+      { value: "en-US-Neural2-I", name: "Neural2-I (Male)" },
+      { value: "en-US-Neural2-J", name: "Neural2-J (Male)" },
+      { value: "en-US-Studio-M", name: "Studio-M (Male)" },
+      { value: "en-US-Studio-O", name: "Studio-M (Female)" },
+      { value: "en-US-Polyglot-1", name: "Polyglot-1 (Male)" },
+      { value: "en-US-News-K", name: "News-K (Female)" },
+      { value: "en-US-News-L", name: "News-L (Female)" },
+      { value: "en-US-News-M", name: "News-M (Male)" },
+      { value: "en-US-News-N", name: "News-N (Male)" },
    ],
  },
  {
@@ -110,6 +148,8 @@ export const languages: VoiceLanguage[] = [
    voices: [
      { value: "fil-PH-Standard-A", name: "Standard-A (Female)" },
      { value: "fil-PH-Wavenet-A", name: "Wavenet-A (Female)" },
+      { value: "fil-ph-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "fil-ph-Neural2-D", name: "Neural2-A (Male)" },
    ],
  },
  {
@@ -132,6 +172,10 @@ export const languages: VoiceLanguage[] = [
      { value: "fr-CA-Wavenet-B", name: "Wavenet-B (Male)" },
      { value: "fr-CA-Wavenet-C", name: "Wavenet-C (Female)" },
      { value: "fr-CA-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "fr-CA-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "fr-CA-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "fr-CA-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "fr-CA-Neural2-D", name: "Neural2-D (Male)" },
    ],
  },
  {
@@ -148,6 +192,12 @@ export const languages: VoiceLanguage[] = [
      { value: "fr-FR-Wavenet-C", name: "Wavenet-C (Female)" },
      { value: "fr-FR-Wavenet-D", name: "Wavenet-D (Male)" },
      { value: "fr-FR-Wavenet-E", name: "Wavenet-E (Female)" },
+      { value: "fr-FR-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "fr-FR-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "fr-FR-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "fr-FR-Neural2-D", name: "Neural2-D (Male)" },
+      { value: "fr-FR-Neural2-E", name: "Neural2-E (Female)" },
+      { value: "fr-FR-Polyglot-1", name: "Polyglot-1 (Male)" },
    ],
  },
  {
@@ -164,6 +214,11 @@ export const languages: VoiceLanguage[] = [
      { value: "de-DE-Wavenet-D", name: "Wavenet-D (Male)" },
      { value: "de-DE-Wavenet-E", name: "Wavenet-E (Male)" },
      { value: "de-DE-Wavenet-F", name: "Wavenet-F (Female)" },
+      { value: "de-DE-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "de-DE-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "de-DE-Neural2-D", name: "Neural2-D (Male)" },
+      { value: "de-DE-Neural2-F", name: "Neural2-F (Female)" },
+      { value: "de-DE-Polyglot-1", name: "Polyglot-1 (Male)" },
    ],
  },
  {
@@ -186,6 +241,10 @@ export const languages: VoiceLanguage[] = [
      { value: "hi-IN-Wavenet-B", name: "Wavenet-B (Male)" },
      { value: "hi-IN-Wavenet-C", name: "Wavenet-C (Male)" },
      { value: "hi-IN-Wavenet-D", name: "Wavenet-D (Female)" },
+      { value: "hi-IN-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "hi-IN-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "hi-IN-Neural2-C", name: "Neural2-C (Male)" },
+      { value: "hi-IN-Neural2-D", name: "Neural2-D (Female)" },
    ],
  },
  {
@@ -222,6 +281,8 @@ export const languages: VoiceLanguage[] = [
      { value: "it-IT-Wavenet-B", name: "Wavenet-B (Female)" },
      { value: "it-IT-Wavenet-C", name: "Wavenet-C (Male)" },
      { value: "it-IT-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "it-IT-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "it-IT-Neural2-C", name: "Neural2-C (Male)" },
    ],
  },
  {
@@ -236,6 +297,9 @@ export const languages: VoiceLanguage[] = [
      { value: "ja-JP-Wavenet-B", name: "Wavenet-B (Female)" },
      { value: "ja-JP-Wavenet-C", name: "Wavenet-C (Male)" },
      { value: "ja-JP-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "ja-JP-Neural2-B", name: "Neural2-B (Female)" },
+      { value: "ja-JP-Neural2-C", name: "Neural2-C (Male)" },
+      { value: "ja-JP-Neural2-D", name: "Neural2-D (Male)" },
    ],
  },
  {
@@ -250,6 +314,9 @@ export const languages: VoiceLanguage[] = [
      { value: "ko-KR-Wavenet-B", name: "Wavenet-B (Female)" },
      { value: "ko-KR-Wavenet-C", name: "Wavenet-C (Male)" },
      { value: "ko-KR-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "ko-KR-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "ko-KR-Neural2-B", name: "Neural2-B (Female)" },
+      { value: "ko-KR-Neural2-C", name: "Neural2-C (Male)" },
    ],
  },
  {
@@ -316,6 +383,9 @@ export const languages: VoiceLanguage[] = [
    voices: [
      { value: "pt-BR-Standard-A", name: "Standard-A (Female)" },
      { value: "pt-BR-Wavenet-A", name: "Wavenet-A (Female)" },
+      { value: "pt-BR-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "pt-BR-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "pt-BR-Neural2-C", name: "Neural2-C (Female)" },
    ],
  },
  {
@@ -359,7 +429,31 @@ export const languages: VoiceLanguage[] = [
  {
    code: "es-ES",
    name: "Spanish (Spain)",
-    voices: [{ value: "es-ES-Standard-A", name: "Standard-A (Female)" }],
+    voices: [
+      { value: "es-ES-Standard-A", name: "Standard-A (Female)" },
+      { value: "es-ES-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "es-ES-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "es-ES-Neural2-C", name: "Neural2-C (Female)" },
+      { value: "es-ES-Neural2-D", name: "Neural2-D (Female)" },
+      { value: "es-ES-Neural2-E", name: "Neural2-E (Female)" },
+      { value: "es-ES-Neural2-F", name: "Neural2-F (Male)" },
+      { value: "es-ES-Polyglot-1", name: "Polyglot-1 (Male)" },
+    ],
+  },
+  {
+    code: "es-US",
+    name: "Spanish (US)",
+    voices: [
+      { value: "es-US-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "es-US-Neural2-B", name: "Neural2-B (Male)" },
+      { value: "es-US-Neural2-C", name: "Neural2-C (Male)" },
+      { value: "es-US-Studio-B", name: "Studio-B (Male)" },
+      { value: "es-US-Polyglot-1", name: "Polyglot-1 (Male)" },
+      { value: "es-US-News-D", name: "News-D (Male)" },
+      { value: "es-US-News-E", name: "News-E (Male)" },
+      { value: "es-US-News-F", name: "News-F (Female)" },
+      { value: "es-US-News-G", name: "News-G (Female)" },
+    ],
  },
  {
    code: "sv-SE",
@@ -393,6 +487,11 @@ export const languages: VoiceLanguage[] = [
      { value: "uk-UA-Wavenet-A", name: "Wavenet-A (Female)" },
    ],
  },
+  {
+    code: "th-TH",
+    name: "Thai (Thailand)",
+    voices: [{ value: "th-TH-Neural2-C", name: "Neural2-C (Female)" }],
+  },
  {
    code: "vi-VN",
    name: "Vietnamese (Vietnam)",
@@ -405,6 +504,8 @@ export const languages: VoiceLanguage[] = [
      { value: "vi-VN-Wavenet-B", name: "Wavenet-B (Male)" },
      { value: "vi-VN-Wavenet-C", name: "Wavenet-C (Female)" },
      { value: "vi-VN-Wavenet-D", name: "Wavenet-D (Male)" },
+      { value: "vi-VN-Neural2-A", name: "Neural2-A (Female)" },
+      { value: "vi-VN-Neural2-D", name: "Neural2-D (Male)" },
    ],
  },
 ];
--- a/src/vendor/types.ts
+++ b/src/vendor/types.ts
@@ -8,13 +8,21 @@ export type Vendor =
  | "IBM"
  | "Nvidia"
  | "Soniox"
-  | "Custom";
+  | "Cobalt"
+  | "Custom"
+  | "ElevenLabs"
+  | "assemblyai";

 export interface VendorOptions {
  name: Vendor;
  value: Lowercase<Vendor>;
 }

+export interface LabelOptions {
+  name: string;
+  value: string;
+}
+
 export interface Region {
  name: string;
  value: string;
@@ -65,6 +73,8 @@ export interface RecognizerVendors {
  ibm: Language[];
  nvidia: Language[];
  soniox: Language[];
+  cobalt: Language[];
+  assemblyai: Language[];
 }

 export interface SynthesisVendors {
@@ -75,6 +85,7 @@ export interface SynthesisVendors {
  nuance: VoiceLanguage[];
  ibm: VoiceLanguage[];
  nvidia: VoiceLanguage[];
+  elevenlabs: VoiceLanguage[];
 }

 export interface MSRawSpeech {
Author	SHA1	Message	Date
Quan HL	0c4eca378c	feat assembly ai	2023-11-01 13:28:50 +07:00
Quan HL	3f4879094f	feat assembly ai	2023-11-01 13:28:43 +07:00
Hoan Luu Huu	e2157ce50e	feat google custom voice (#338 ) * feat google custom voice * google custom voice * wip * wip * wip	2023-10-30 20:28:34 -04:00
Dave Horton	a382f21f86	#335 - allow top level fqdn for outbound gateway (#336 )	2023-10-21 11:22:18 +02:00
Hoan Luu Huu	a20e1513bc	remove warning message if there is no device call application (#334 )	2023-10-20 13:18:01 +02:00
Hoan Luu Huu	af8c09587c	fix wrong css for filter on each component (#333 )	2023-10-20 08:16:00 +02:00
Hoan Luu Huu	3a19ff6840	upgrade wavesuffer to 7.3.4 (#329 ) * upgrade wavesuffer to 7.3.4 * fix typo issue for wavesurfer * fix * fix	2023-10-18 19:54:59 +02:00
Hoan Luu Huu	729cefb06c	fix css for recent calls in small screen (#331 )	2023-10-16 12:51:49 +02:00
Hoan Luu Huu	26e3856603	add elevenlabs (#330 ) * add elevenlabs * wip * wip * fix review comments * fetch voice and language for eleven labs * fix revciew comment * fix revciew comment * fix revciew comment * fixed review comment	2023-10-16 10:21:19 +02:00
Hoan Luu Huu	f5302583b5	fix cobalt default language (#326 )	2023-09-27 07:50:11 -04:00
Hoan Luu Huu	b5c27bb096	add cobalt stt (#324 ) * add cobalt stt * update languages for cobalt * update languages for cobalt	2023-09-26 08:42:34 -04:00
Hoan Luu Huu	4a2c36ebba	allow sip port is null (#323 ) * allow sip port is null * fix port placeholder when protocol is tls or tls/srtp	2023-09-18 20:15:53 -04:00
Hoan Luu Huu	62234f9f64	pad crypto sip gateway (#322 )	2023-09-18 07:59:07 -04:00
Anton Voylenko	9ddafee2cc	feat: support s3 compatible storage (#318 ) * feat: support s3 compatible storage * reorder vendor list	2023-09-12 12:28:03 -04:00
Hoan Luu Huu	24fc9d1bff	feat: custom Microsoft need to have input text for tts voice (#316 ) * feat: custom Microsoft need to have input text for tts voice * fix	2023-09-08 08:15:44 -04:00
Hoan Luu Huu	08ab494cef	feat azure fromhost (#302 ) * feat azure fromhost * wip * wip * wip * wip * fix review comment * fix review comment * wip * wip	2023-08-30 21:07:03 -04:00
Hoan Luu Huu	75e7785061	fix choose speech dedential by label (#315 )	2023-08-30 09:22:39 -04:00
Hoan Luu Huu	72de9178a2	support delete record file (#313 ) * support delete record file * fix	2023-08-23 19:58:59 -04:00
Hoan Luu Huu	9741e5601f	feat fallback speech vendor (#310 ) * feat fallback speech vendor * fix * fix * fix * wip * wip	2023-08-22 08:08:22 -04:00
Hoan Luu Huu	346ac66440	support azure storage (#312 )	2023-08-22 07:50:38 -04:00
Hoan Luu Huu	843d1eda1e	feat support multiple speech credential with different labels but same vendor (#305 ) * feat support multiple speech credential with different labels but same vendor * fix * fix review comment * fix review comment * fix label tooltip * fixed	2023-08-15 09:00:00 -04:00
Hoan Luu Huu	27f02c2bb3	update preview description (#301 )	2023-08-04 09:51:01 -04:00
Hoan Luu Huu	bb18556a6c	allow only card type in stripe PaymentElement (#299 )	2023-08-04 06:57:10 -04:00
Hoan Luu Huu	393dd7374f	fix clients make user confuse (#298 ) * fix clients make user confuse * fix	2023-08-03 21:13:04 -04:00
Hoan Luu Huu	4ad2154337	fix choose/edit sub domain (#295 ) * fix choose/edit sub domain * add carrier instructions to send call to sip-realm	2023-08-02 07:42:33 -04:00
Hoan Luu Huu	08d1293e34	feat: add login with google and github (#278 ) * feat: add login with google and github * feat: hosted version * add register pages * feat: add verify email code page * register by email * fix login * fix logout * add all stripe pages * subscription delete account * fix edit account and edit sip realm * when user account login, remove cancel in edit page * remove name * update .env configuraiton vars	2023-07-30 22:33:58 -04:00
Hoan Luu Huu	4eb2281b9a	add polyglot for google (#288 ) * add polyglot for google * add news voice	2023-07-29 08:00:44 -04:00
Hoan Luu Huu	61bd1f9bab	feat: google storage for record all call (#292 ) * feat: google storage for record all call * fix * wip * wip * wip * wip * fix * fix * fix * fix * fix	2023-07-28 12:03:54 -04:00
Hoan Luu Huu	16629ba508	fix clients (#289 )	2023-07-25 09:00:46 -04:00
Hoan Luu Huu	63f8a82443	only download jaeger trace when open detail for recent call (#287 )	2023-07-17 19:14:55 -04:00
Hoan Luu Huu	9ce1d83c8f	fix: update name for carrier register authentication fields (#283 )	2023-07-03 15:25:22 +01:00
Hoan Luu Huu	961b7ecccb	recent call filter (#282 ) * recent call filter * fix review comment * fix eslint	2023-07-03 15:06:09 +01:00
Dave Horton	3fb63c82ac	update version	2023-06-28 09:28:46 +01:00
Hoan Luu Huu	cb2d5926b2	Fix/alerts (#276 ) * improve alert view * improve alert view	2023-06-18 11:05:26 +01:00
Hoan Luu Huu	595e900468	fix showing client password (#274 ) * fix showing client password * fix client password validation	2023-06-15 20:53:13 -04:00
Hoan Luu Huu	0dd9548600	feat: clients (#272 ) * feat: clients * fix typo * fix reivew comments * add error message if account miss realm or device calling app * fix: remove Showed By	2023-06-15 07:37:10 -04:00
Hoan Luu Huu	96ffce8cd1	feat: provision record all call (#254 )	2023-06-13 09:03:44 -04:00
Hoan Luu Huu	b1fe033c12	feat/ update google tts voice for neutral and studio (#271 )	2023-06-13 07:42:19 -04:00
Hoan Luu Huu	a8d12546d9	filter by from and to (#269 )	2023-06-09 13:43:13 -04:00
EgleH	724d86821d	hint passwordSettings to user when creating password (#267 ) Co-authored-by: eglehelms <e.helms@cognigy.com>	2023-06-08 07:24:29 -04:00
Hoan Luu Huu	f91bbe9245	clean tts cache for account (#264 )	2023-06-02 07:39:48 -04:00
Hoan Luu Huu	91625612d5	feat: add seconds to recent call sumary (#261 )	2023-06-01 08:23:00 -04:00
Hoan Luu Huu	fbe71925b4	feat: admin clear cache (#263 ) * feat: admin clear cache * feat: admin clear cache	2023-06-01 07:49:26 -04:00
Dave Horton	377fd40e2c	fix docker publish	2023-05-27 10:52:04 -04:00
Hoan Luu Huu	af37066201	fix: download pcap (#258 )	2023-05-24 07:56:15 -04:00
Dave Horton	fffd86619d	disabling lcr, jaeger, and custom speech for k8s (#256 ) * disabling lcr, jaeger, and custom speech for k8s * fix syntax error in entrypoint.sh	2023-05-22 15:03:43 -04:00
Dave Horton	77c270e078	fix docker build	2023-05-15 14:24:20 -04:00
Dave Horton	54ff53817f	fix error when register status call-id is empty (#253 )	2023-05-12 10:55:00 -04:00