upgrade node image

2026-01-25 02:08:19 +00:00 · 2023-02-20 16:14:47 +01:00
120 changed files with 8609 additions and 16152 deletions
--- a/.env
+++ b/.env
@@ -2,27 +2,4 @@ VITE_API_BASE_URL=http://127.0.0.1:3000/v1
 VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1

 ## enables choosing units and lisenced account call limits
-# VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
-
-# disables controls for default application routing to carrier for SP and account level users
-#VITE_APP_DISABLE_DEFAULT_TRUNK_ROUTING=true
-## disables Least cost routing feature
-#VITE_APP_LCR_DISABLED=true
-## disables Jaeger Tracing feature
-#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"
+# VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -2,8 +2,16 @@ name: Docker

 on:
  push:
+    # Publish `main` as Docker `latest` image.
+    branches:
+      - main
+
+    # Publish `v1.2.3` tags as releases.
    tags:
-      - "*"
+      - v*
+
+env:
+  IMAGE_NAME: webapp

 jobs:
  push:
@@ -11,13 +19,20 @@ jobs:
    if: github.event_name == 'push'

    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v2

-      - name: prepare tag
-        id: prepare_tag
+      - name: Build image
+        run: docker build . --file Dockerfile --tag $IMAGE_NAME
+
+      - name: Log into registry
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      - name: Push image
        run: |
-          IMAGE_ID=jambonz/webapp
+          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
+
+          # Change all uppercase to lowercase
+          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')

          # Strip git ref prefix from version
          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
@@ -31,21 +46,5 @@ jobs:
          echo IMAGE_ID=$IMAGE_ID
          echo VERSION=$VERSION

-          echo "image_id=$IMAGE_ID" >> $GITHUB_OUTPUT
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.prepare_tag.outputs.image_id }}:${{ steps.prepare_tag.outputs.version }}
-          build-args: |
-            GITHUB_REPOSITORY=$GITHUB_REPOSITORY
-            GITHUB_REF=$GITHUB_REF
+          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
+          docker push $IMAGE_ID:$VERSION
--- a/4
+++ b/4
@@ -1,4 +1,4 @@
-FROM node:18.15-alpine3.16 as builder
+FROM node:18.14.0-alpine3.16 as builder
 RUN apk update && apk add --no-cache python3 make g++
 COPY . /opt/app
 WORKDIR /opt/app/
@@ -6,7 +6,7 @@ RUN npm install
 RUN npm run build
 RUN npm prune

-FROM node:18.14.1-alpine as webapp
+FROM node:18.9.0-alpine as webapp
 RUN apk add curl
 WORKDIR /opt/app
 COPY . /opt/app
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -9,16 +9,9 @@ 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}\",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>"
+SCRIPT_TAG="<script>window.JAMBONZ = { API_BASE_URL: \"${API_BASE_URL}\" };</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="Build innovative voice and collaboration services with jambonz, the open-source communication platform for conversational AI providers and CSPs."
+      content="Simple provisioning webapp for jambonz."
    />
    <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 Portal | Jambonz CPaaS</title>
+    <title>Jambonz Web App</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.5",
+  "version": "v1.0.0",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -41,18 +41,12 @@
    "deploy": "npm i && npm run build && npm run pm2"
  },
  "dependencies": {
-    "@jambonz/ui-kit": "^0.0.21",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.1",
    "dayjs": "^1.11.5",
-    "immutability-helper": "^3.1.1",
+    "@jambonz/ui-kit": "^0.0.21",
    "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",
-    "wavesurfer.js": "^7.3.4"
+    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
@@ -60,7 +54,6 @@
    "@types/node": "^18.6.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
-    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.30.6",
    "@typescript-eslint/parser": "^5.30.6",
    "@vitejs/plugin-react": "^1.3.0",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -31,10 +31,9 @@ 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,
+        call_sid: nanoid(),
        from: "15083084809",
        to: "18882349999",
        answered: !failed,
@@ -49,8 +48,6 @@ app.get(
        remote_host: "3.55.24.34",
        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);
    }
@@ -139,35 +136,6 @@ 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) => {
-    const json = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "sample-jaeger.json"),
-      { encoding: "utf8" }
-    );
-    res.status(200).json(JSON.parse(json));
-  }
-);
-
 /** Alerts mock API responses for local dev */
 app.get("/api/Accounts/:account_sid/Alerts", (req: Request, res: Response) => {
  const data: Alert[] = [];
--- 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,6 +1,4 @@
 import type {
-  Currency,
-  ElevenLabsOptions,
  LimitField,
  LimitUnitOption,
  PasswordSettings,
@@ -15,17 +13,6 @@ 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 {
@@ -41,52 +28,6 @@ export const API_BASE_URL =
 /** Serves mock API responses from a local dev API server */
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;

-/** Disable custom speech vendor*/
-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 =
-  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 =
-  window.JAMBONZ?.DISABLE_LCR === "true" ||
-  JSON.parse(import.meta.env.VITE_APP_LCR_DISABLED || "false");
-
-/** Disable jaeger tracing */
-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;

@@ -113,7 +54,7 @@ export const DEFAULT_SIP_GATEWAY: SipGateway = {
  ipv4: "",
  port: 5060,
  netmask: 32,
-  is_active: true,
+  is_active: false,
  inbound: 1,
  outbound: 0,
 };
@@ -128,6 +69,7 @@ export const DEFAULT_SMPP_GATEWAY: SmppGateway = {
  inbound: 1,
  outbound: 1,
 };
+
 /** Netmask Bits */
 export const NETMASK_BITS = Array(32)
  .fill(0)
@@ -139,87 +81,6 @@ export const NETMASK_OPTIONS = NETMASK_BITS.map((bit) => ({
  value: bit.toString(),
 }));

-/** SIP Gateway Protocol */
-export const SIP_GATEWAY_PROTOCOL_OPTIONS = [
-  {
-    name: "UDP",
-    value: "udp",
-  },
-  {
-    name: "TCP",
-    value: "tcp",
-  },
-  {
-    name: "TLS",
-    value: "tls",
-  },
-  {
-    name: "TLS/SRTP",
-    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 DEFAULT_WHISPER_MODEL = "tts-1";
-
-// 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" },
-];
-// Eleven Labs options
-export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
-  optimize_streaming_latency: 3,
-  voice_settings: {
-    stability: 0.5,
-    similarity_boost: 0.5,
-    use_speaker_boost: true,
-  },
-};
 /** Password Length options */

 export const PASSWORD_MIN = 8;
@@ -311,16 +172,6 @@ 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";
@@ -331,16 +182,8 @@ export const CRED_OK = "ok";
 export const CRED_FAIL = "fail";
 export const CRED_NOT_TESTED = "not tested";

-/** Voip Carrier Register result status values */
-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`;
 export const API_SBCS = `${API_BASE_URL}/Sbcs`;
 export const API_USERS = `${API_BASE_URL}/Users`;
 export const API_API_KEYS = `${API_BASE_URL}/ApiKeys`;
@@ -353,18 +196,3 @@ export const API_CARRIERS = `${API_BASE_URL}/VoipCarriers`;
 export const API_SMPP_GATEWAY = `${API_BASE_URL}/SmppGateways`;
 export const API_SIP_GATEWAY = `${API_BASE_URL}/SipGateways`;
 export const API_PASSWORD_SETTINGS = `${API_BASE_URL}/PasswordSettings`;
-export const API_FORGOT_PASSWORD = `${API_BASE_URL}/forgot-password`;
-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
@@ -17,23 +17,7 @@ import {
  API_SMPP_GATEWAY,
  API_SIP_GATEWAY,
  API_PASSWORD_SETTINGS,
-  API_FORGOT_PASSWORD,
  USER_ACCOUNT,
-  API_LOGOUT,
-  API_SYSTEM_INFORMATION,
-  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 {
@@ -74,29 +58,8 @@ import type {
  Limit,
  LimitCategories,
  PasswordSettings,
-  ForgotPassword,
-  SystemInformation,
-  Lcr,
-  LcrRoute,
-  LcrCarrierSetEntry,
-  BucketCredential,
-  BucketCredentialTestResult,
-  Client,
-  RegisterRequest,
-  RegisterResponse,
-  ActivationCode,
-  CurrentUserData,
-  PriceInfo,
-  Subscription,
-  DeleteAccount,
-  ChangePassword,
-  SignIn,
-  GoogleCustomVoice,
-  GoogleCustomVoicesQuery,
-  SpeechSupportedLanguagesAndVoices,
 } from "./types";
-import { Availability, StatusCodes } from "./types";
-import { JaegerRoot } from "./jaeger-types";
+import { StatusCodes } from "./types";

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

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

@@ -259,17 +221,6 @@ 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) => {
@@ -282,10 +233,6 @@ export const postLogin = (payload: UserLoginPayload) => {
  });
 };

-export const postLogout = () => {
-  return postFetch<undefined>(API_LOGOUT);
-};
-
 /** Named wrappers for `postFetch` */

 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
@@ -303,16 +250,6 @@ 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,
@@ -409,89 +346,6 @@ export const postPasswordSettings = (payload: Partial<PasswordSettings>) => {
    payload
  );
 };
-
-export const postForgotPassword = (payload: Partial<ForgotPassword>) => {
-  return postFetch<EmptyResponse, Partial<ForgotPassword>>(
-    API_FORGOT_PASSWORD,
-    payload
-  );
-};
-
-export const postSystemInformation = (payload: Partial<SystemInformation>) => {
-  return postFetch<SystemInformation, Partial<SystemInformation>>(
-    API_SYSTEM_INFORMATION,
-    payload
-  );
-};
-
-export const postLcr = (payload: Partial<Lcr>) => {
-  return postFetch<SidResponse, Partial<Lcr>>(API_LCRS, payload);
-};
-
-export const postLcrCreateRoutes = (
-  sid: string,
-  payload: Partial<LcrRoute[]>
-) => {
-  return postFetch<EmptyResponse, Partial<LcrRoute[]>>(
-    `${API_LCRS}/${sid}/Routes`,
-    payload
-  );
-};
-
-export const postLcrRoute = (payload: Partial<LcrRoute>) => {
-  return postFetch<SidResponse, Partial<LcrRoute>>(API_LCR_ROUTES, payload);
-};
-
-export const postLcrCarrierSetEntry = (
-  payload: Partial<LcrCarrierSetEntry>
-) => {
-  return postFetch<SidResponse, Partial<LcrCarrierSetEntry>>(
-    API_LCR_CARRIER_SET_ENTRIES,
-    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>) => {
@@ -584,64 +438,6 @@ export const putSmppGateway = (sid: string, payload: Partial<SmppGateway>) => {
  );
 };

-export const putLcr = (sid: string, payload: Partial<Lcr>) => {
-  return putFetch<EmptyResponse, Partial<Lcr>>(`${API_LCRS}/${sid}`, payload);
-};
-
-export const putLcrUpdateRoutes = (
-  sid: string,
-  payload: Partial<LcrRoute[]>
-) => {
-  return putFetch<EmptyResponse, Partial<LcrRoute[]>>(
-    `${API_LCRS}/${sid}/Routes`,
-    payload
-  );
-};
-
-export const putLcrRoutes = (sid: string, payload: Partial<LcrRoute>) => {
-  return putFetch<EmptyResponse, Partial<LcrRoute>>(
-    `${API_LCR_ROUTES}/${sid}`,
-    payload
-  );
-};
-
-export const putLcrCarrierSetEntries = (
-  sid: string,
-  payload: Partial<LcrCarrierSetEntry>
-) => {
-  return putFetch<EmptyResponse, Partial<LcrCarrierSetEntry>>(
-    `${API_LCR_CARRIER_SET_ENTRIES}/${sid}`,
-    payload
-  );
-};
-
-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) => {
@@ -656,11 +452,8 @@ export const deleteApiKey = (sid: string) => {
  return deleteFetch<EmptyResponse>(`${API_API_KEYS}/${sid}`);
 };

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

 export const deleteApplication = (sid: string) => {
@@ -708,33 +501,6 @@ export const deleteAccountLimit = (sid: string, cat: LimitCategories) => {
  );
 };

-export const deleteLcr = (sid: string) => {
-  return deleteFetch<EmptyResponse>(`${API_LCRS}/${sid}`);
-};
-
-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) => {
@@ -751,55 +517,8 @@ export const getAccountWebhook = (sid: string) => {
  );
 };

-export const getLcrs = () => {
-  return getFetch<Lcr[]>(API_LCRS);
-};
-
-export const getLcr = (sid: string) => {
-  return getFetch<Lcr>(`${API_LCRS}/${sid}`);
-};
-
-export const getLcrRoutes = (sid: string) => {
-  return getFetch<LcrRoute[]>(`${API_LCR_ROUTES}?lcr_sid=${sid}`);
-};
-
-export const getLcrRoute = (sid: string) => {
-  return getFetch<LcrRoute>(`${API_LCR_ROUTES}/${sid}`);
-};
-
-export const getLcrCarrierSetEtries = (sid: string) => {
-  return getFetch<LcrCarrierSetEntry[]>(
-    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`
-  );
-};
-
-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);

@@ -818,42 +537,11 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
  );
 };

-export const getPcap = (sid: string, sipCallId: string, method: string) => {
+export const getPcap = (sid: string, sipCallId: string) => {
  return getBlob(
    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-  );
-};
-
-export const getJaegerTrace = (sid: string, traceId: string) => {
-  return getFetch<JaegerRoot>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/trace/${traceId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`
-  );
-};
-
-export const getServiceProviderRecentCall = (
-  sid: string,
-  sipCallId: string
-) => {
-  return getFetch<TotalResponse>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`
-  );
-};
-
-export const getServiceProviderPcap = (
-  sid: string,
-  sipCallId: string,
-  method: string
-) => {
-  return getBlob(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/pcap`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/pcap`
  );
 };

@@ -867,26 +555,6 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  );
 };

-export const getPrice = () => {
-  return getFetch<PriceInfo[]>(API_PRICE);
-};
-
-export const getSpeechSupportedLanguagesAndVoices = (
-  sid: string | undefined,
-  vendor: string,
-  label: string
-) => {
-  const userData = parseJwt(getToken());
-  const apiUrl =
-    (userData.scope === USER_ACCOUNT
-      ? `${API_ACCOUNTS}/${userData.account_sid}`
-      : `${API_SERVICE_PROVIDERS}/${sid}`) +
-    `/SpeechCredentials/speech/supportedLanguagesAndVoices?vendor=${vendor}${
-      label ? `&label=${label}` : ""
-    }`;
-  return getFetch<SpeechSupportedLanguagesAndVoices>(apiUrl);
-};
-
 /** 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
@@ -1,87 +0,0 @@
-export interface JaegerRoot {
-  resourceSpans: JaegerResourceSpan[];
-}
-
-export interface JaegerResourceSpan {
-  resource: JaegerResource;
-  instrumentationLibrarySpans: InstrumentationLibrarySpan[];
-}
-
-export interface JaegerResource {
-  attributes: JaegerAttribute[];
-}
-
-export interface InstrumentationLibrarySpan {
-  instrumentationLibrary: InstrumentationLibrary;
-  spans: JaegerSpan[];
-}
-
-export interface InstrumentationLibrary {
-  name: string;
-  version: string;
-}
-
-export interface JaegerSpan {
-  traceId: string;
-  spanId: string;
-  parentSpanId: string;
-  name: string;
-  kind: string;
-  startTimeUnixNano: number;
-  endTimeUnixNano: number;
-  attributes: JaegerAttribute[];
-}
-
-export interface JaegerAttribute {
-  key: string;
-  value: JaegerValue;
-}
-
-export interface WaveSurferSttResult {
-  vendor: string;
-  transcript: string;
-  confidence: number;
-  language_code: string;
-  latency?: number;
-}
-
-export interface WaveSurferTtsLatencyResult {
-  vendor: string;
-  latency: string;
-  isCached: string;
-}
-
-export interface WaveSurferGatherSpeechVerbHookLatencyResult {
-  statusCode: number;
-  latency: string;
-}
-
-export interface WaveSurferDtmfResult {
-  dtmf: string;
-  duration: string;
-}
-
-export interface JaegerValue {
-  stringValue: string;
-  doubleValue: string;
-  boolValue: string;
-}
-
-export interface JaegerGroup {
-  level: number;
-  startPx: number;
-  endPx: number;
-  durationPx: number;
-  startMs: number;
-  endMs: number;
-  durationMs: number;
-  traceId: string;
-  spanId: string;
-  parentSpanId: string;
-  name: string;
-  kind: string;
-  startTimeUnixNano: number;
-  endTimeUnixNano: number;
-  attributes: JaegerAttribute[];
-  children: JaegerGroup[];
-}
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1,4 +1,4 @@
-import type { Language, Model, Vendor, VoiceLanguage } from "src/vendor/types";
+import type { Vendor } from "src/vendor/types";

 /** Simple types */

@@ -51,7 +51,6 @@ export enum StatusCodes {
 /** Fetch transport interfaces */

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

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

-export interface BucketCredentialTestResult {
-  status: CredentialStatus;
-  reason: string;
-}
-
 export interface LimitField {
  label: string;
  category: LimitCategories;
@@ -119,20 +113,6 @@ export interface PasswordSettings {
  require_special_character: number;
 }

-export interface ForgotPassword {
-  email: string;
-}
-
-export interface SystemInformation {
-  domain_name: string;
-  sip_domain_name: string;
-  monitoring_domain_name: string;
-}
-
-export interface TtsCache {
-  size: number;
-}
-
 /** API responses/payloads */

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

 export interface UserLogin {
@@ -187,15 +166,12 @@ export interface UserJWT {

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

 export interface ServiceProvider {
  name: string;
  ms_teams_fqdn: null | string;
  service_provider_sid: string;
-  lcr_sid: null | string;
 }

 export interface Limit {
@@ -248,7 +224,6 @@ 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;
@@ -256,58 +231,6 @@ export interface Account {
  registration_hook: null | WebHook;
  service_provider_sid: string;
  device_calling_application_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;
-  is_active: boolean;
-}
-
-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 {
@@ -321,19 +244,8 @@ 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 {
@@ -369,16 +281,6 @@ export interface RecentCall {
  remote_host: string;
  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 {
@@ -396,29 +298,17 @@ 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;
-  nuance_tts_uri: null | string;
-  nuance_stt_uri: null | string;
  tts_api_key: null | string;
  tts_region: null | string;
  stt_api_key: null | string;
  stt_region: null | string;
  instance_id: null | string;
  riva_server_uri: null | string;
-  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;
-  model: null | string;
-  options: null | string;
 }

 export interface Alert {
@@ -429,13 +319,6 @@ export interface Alert {
  detail: string;
 }

-export interface CarrierRegisterStatus {
-  status: null | string;
-  reason: null | string;
-  cseq: null | string;
-  callId: null | string;
-}
-
 export interface Carrier {
  voip_carrier_sid: string;
  name: string;
@@ -461,7 +344,6 @@ export interface Carrier {
  smpp_inbound_system_id: null | string;
  smpp_inbound_password: null | string;
  smpp_enquire_link_interval: number;
-  register_status: CarrierRegisterStatus;
 }

 export interface PredefinedCarrier extends Carrier {
@@ -472,6 +354,7 @@ export interface PredefinedCarrier extends Carrier {
 export interface Gateway {
  voip_carrier_sid: string;
  ipv4: string;
+  port: number;
  netmask: number;
  inbound: number;
  outbound: number;
@@ -480,54 +363,12 @@ export interface Gateway {
 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 {
-  lcr_sid?: null | string;
-  is_active: boolean;
-  name: null | string;
-  default_carrier_set_entry_sid?: null | string;
-  account_sid: null | string;
-  service_provider_sid: null | string;
-  number_routes?: number;
-}
-
-export interface LcrRoute {
-  lcr_route_sid?: null | string;
-  lcr_sid: null | string;
-  regex: null | string;
-  description?: null | string;
-  priority: number;
-  lcr_carrier_set_entries?: LcrCarrierSetEntry[];
-}
-
-export interface LcrCarrierSetEntry {
-  lcr_carrier_set_entry_sid?: null | string;
-  workload?: number;
-  lcr_route_sid: null | string;
-  voip_carrier_sid: null | string;
-  priority: number;
-}
-
-export interface Client {
-  client_sid?: null | string;
-  account_sid: null | string;
-  username: null | string;
-  password?: null | string;
-  is_active: boolean;
-  allow_direct_app_calling: boolean;
-  allow_direct_queue_calling: boolean;
-  allow_direct_user_calling: boolean;
 }

 export interface PageQuery {
@@ -542,13 +383,6 @@ 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;
@@ -579,142 +413,3 @@ 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 GetLanguagesAndVoices {
-  vendor: string;
-  label: string;
-}
-
-export interface SpeechSupportedLanguagesAndVoices {
-  tts: VoiceLanguage[];
-  stt: Language[];
-  models: Model[];
-}
-
-export interface ElevenLabsOptions {
-  optimize_streaming_latency: number;
-  voice_settings: Partial<{
-    similarity_boost: number;
-    stability: number;
-    style: number;
-    use_speaker_boost: boolean;
-  }>;
-}
--- 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 && <label htmlFor="account_filter">{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
@@ -1,48 +0,0 @@
-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
@@ -1,55 +0,0 @@
-@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
@@ -1,39 +0,0 @@
-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,7 +7,6 @@ type CheckzoneProps = {
  id?: string;
  name: string;
  label: string;
-  labelNode?: React.ReactNode;
  hidden?: boolean;
  children: React.ReactNode;
  initialCheck: boolean;
@@ -23,7 +22,6 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
      id,
      name,
      label,
-      labelNode,
      hidden = false,
      children,
      initialCheck,
@@ -49,26 +47,23 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
    return (
      <div className={classesTop}>
        <label>
-          <div className="label-container">
-            <input
-              ref={ref}
-              type="checkbox"
-              name={name}
-              id={id || name}
-              onChange={(e) => {
-                setChecked(e.target.checked);
+          <input
+            ref={ref}
+            type="checkbox"
+            name={name}
+            id={id || name}
+            onChange={(e) => {
+              setChecked(e.target.checked);

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

-  .label-container {
-    display: flex;
-    justify-content: center;
-  }
-
  > label {
+    display: flex;
+    align-items: center;
+
    input {
-      margin-top: ui-vars.$px01;
      margin-right: ui-vars.$px02;
    }
  }
@@ -38,10 +35,6 @@
      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={`${id}_${option.value}`} value={option.value}>
+            <option key={option.value} value={option.value}>
              {option.name}
            </option>
          ))}
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -39,18 +39,6 @@ import {
  PhoneOutgoing,
  PhoneIncoming,
  MoreHorizontal,
-  Share2,
-  ArrowUp,
-  ArrowDown,
-  Play,
-  Pause,
-  ChevronsLeft,
-  ChevronsRight,
-  Download,
-  Smartphone,
-  Youtube,
-  Mail,
-  Tag,
 } from "react-feather";

 import type { Icon } from "react-feather";
@@ -100,16 +88,4 @@ export const Icons: IconMap = {
  PhoneOutgoing,
  PhoneIncoming,
  MoreHorizontal,
-  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,7 +3,6 @@ import ReactDOM from "react-dom";
 import { Button, ButtonGroup } from "@jambonz/ui-kit";

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

 type ModalProps = {
  disabled?: boolean;
@@ -70,7 +69,6 @@ export const ModalForm = ({
        }}
      >
        <div className="modal__stuff">{children}</div>
-
        <ButtonGroup right>
          <Button
            small
@@ -93,19 +91,9 @@ export const ModalForm = ({

 export const ModalClose = ({ children, handleClose }: CloseProps) => {
  return ReactDOM.createPortal(
-    <div className="modal" role="presentation" onClick={handleClose}>
-      <div
-        className="modal__box"
-        role="presentation"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div
-          className="modal__stuff"
-          role="presentation"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {children}
-        </div>
+    <div className="modal">
+      <div className="modal__box">
+        <div className="modal__stuff">{children}</div>
        <ButtonGroup right>
          <Button type="button" small subStyle="grey" onClick={handleClose}>
            Close
@@ -116,37 +104,3 @@ 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, useRef } from "react";
+import React, { useState, useCallback } from "react";
 import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";
@@ -7,18 +7,14 @@ 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,
@@ -27,18 +23,7 @@ export const SearchFilter = ({

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
-      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());
-      }
+      setFilterValue(e.target.value.toLowerCase());

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

-export const Tooltip = ({ text, children, subStyle }: TooltipProps) => {
+export const Tooltip = ({ text, children }: TooltipProps) => {
  return (
    <div className="tooltip">
      <div className="tooltip__reveal">{text}</div>
      {children}
-      {subStyle === "info" ? <Icons.Info /> : <Icons.HelpCircle />}
+      <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 = 5000;
+export const TOAST_TIME = 3000;
 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,6 +13,16 @@ 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/index.tsx
+++ b/src/containers/internal/navi/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { classNames, M, Icon, Button } from "@jambonz/ui-kit";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";

 import { Icons, ModalForm } from "src/components";
 import { naviTop, naviByo } from "./items";
@@ -20,8 +20,6 @@ import "./styles.scss";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope, UserData } from "src/store/types";
 import { USER_ADMIN } from "src/api/constants";
-import { ROUTE_LOGIN } from "src/router/routes";
-import { Lcr } from "src/api/types";

 type CommonProps = {
  handleMenu: () => void;
@@ -36,17 +34,16 @@ type NaviProps = CommonProps & {
 type ItemProps = CommonProps & {
  item: NaviItem;
  user?: UserData;
-  lcr?: Lcr;
 };

-const Item = ({ item, user, lcr, handleMenu }: ItemProps) => {
+const Item = ({ item, user, handleMenu }: ItemProps) => {
  const location = useLocation();
  const active = location.pathname.includes(item.route(user));

  return (
    <li>
      <Link
-        to={item.route(user, lcr)}
+        to={item.route(user)}
        className={classNames({ navi__link: true, "txt--jean": true, active })}
        onClick={handleMenu}
      >
@@ -64,9 +61,7 @@ export const Navi = ({
  handleLogout,
 }: NaviProps) => {
  const dispatch = useDispatch();
-  const navigate = useNavigate();
  const user = useSelectState("user");
-  const lcr = useSelectState("lcr");
  const accessControl = useSelectState("accessControl");
  const serviceProviders = useSelectState("serviceProviders");
  const currentServiceProvider = useSelectState("currentServiceProvider");
@@ -136,7 +131,6 @@ export const Navi = ({
  useEffect(() => {
    dispatch({ type: "user" });
    dispatch({ type: "serviceProviders" });
-    dispatch({ type: "lcr" });
  }, []);

  return (
@@ -166,7 +160,6 @@ export const Navi = ({
                onChange={(e) => {
                  setSid(e.target.value);
                  setActiveSP(e.target.value);
-                  navigate(ROUTE_LOGIN);
                }}
                disabled={user?.scope !== USER_ADMIN}
              >
@@ -225,7 +218,6 @@ export const Navi = ({
              <Item
                key={item.label}
                user={user}
-                lcr={lcr}
                item={item}
                handleMenu={handleMenu}
              />
--- a/src/containers/internal/navi/items.ts
+++ b/src/containers/internal/navi/items.ts
@@ -9,41 +9,28 @@ import {
  ROUTE_INTERNAL_SPEECH,
  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";

 import type { Icon } from "react-feather";
 import type { ACL } from "src/store/types";
-import { Lcr } from "src/api/types";
-import {
-  DISABLE_LCR,
-  ENABLE_HOSTED_SYSTEM as ENABLE_HOSTED_SYSTEM,
-} from "src/api/constants";

 export interface NaviItem {
  label: string;
  icon: Icon;
-  route: (user?: UserData, lcr?: Lcr) => string;
+  route: (user?: UserData) => string;
  acl?: keyof ACL;
  scope?: Scope;
  restrict?: boolean;
 }

 export const naviTop: NaviItem[] = [
-  // User is not allowed in hosted app
-  ...(!ENABLE_HOSTED_SYSTEM
-    ? [
-        {
-          label: "Users",
-          icon: Icons.UserCheck,
-          route: () => ROUTE_INTERNAL_USERS,
-        },
-      ]
-    : []),
-
+  {
+    label: "Users",
+    icon: Icons.UserCheck,
+    route: () => ROUTE_INTERNAL_USERS,
+  },
  {
    label: "Settings",
    icon: Icons.Settings,
@@ -63,11 +50,6 @@ export const naviTop: NaviItem[] = [
    scope: Scope.account,
    restrict: true,
  },
-  {
-    label: "Clients",
-    icon: Icons.Smartphone,
-    route: () => ROUTE_INTERNAL_CLIENTS,
-  },
  {
    label: "Applications",
    icon: Icons.Grid,
@@ -107,21 +89,4 @@ export const naviByo: NaviItem[] = [
    route: () => ROUTE_INTERNAL_MS_TEAMS_TENANTS,
    acl: "hasMSTeamsFqdn",
  },
-  ...(DISABLE_LCR === false
-    ? [
-        {
-          label: "Outbound Call Routing",
-          icon: Icons.Share2,
-          route: (user, lcr) => {
-            if (user?.access === Scope.admin) {
-              return ROUTE_INTERNAL_LEST_COST_ROUTING;
-            }
-            if (lcr && lcr.lcr_sid) {
-              return `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`;
-            }
-            return `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`;
-          },
-        } as NaviItem,
-      ]
-    : []),
 ];
--- a/src/containers/internal/user-me/index.tsx
+++ b/src/containers/internal/user-me/index.tsx
@@ -1,32 +1,18 @@
-import React, { useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React from "react";
+import { Link } from "react-router-dom";

 import { Icons } from "src/components";
-import {
-  ROUTE_INTERNAL_USERS,
-  ROUTE_REGISTER_SUB_DOMAIN,
-} from "src/router/routes";
+import { ROUTE_INTERNAL_USERS } 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
@@ -1,100 +0,0 @@
-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, TtsCache } from "src/api/types";
+import type { Account, Application, Limit } from "src/api/types";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_APPLICATIONS,
@@ -25,9 +25,6 @@ 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,
@@ -53,7 +50,6 @@ 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--multi">
+      <section className="filters filters--spaced">
        <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
@@ -1,191 +0,0 @@
-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
@@ -1,23 +0,0 @@
-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
@@ -1,633 +0,0 @@
-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
@@ -1,32 +0,0 @@
-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
@@ -1,59 +0,0 @@
-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,6 +16,7 @@ import {
  Section,
  SelectFilter,
  Spinner,
+  Icons,
 } from "src/components";

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

 export const Alerts = () => {
  const user = useSelectState("user");
@@ -112,7 +112,21 @@ export const Alerts = () => {
            <Spinner />
          ) : hasLength(alerts) ? (
            alerts.map((alert) => (
-              <AlertDetailItem key={alert.time} alert={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>
            ))
          ) : (
            <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, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

@@ -16,7 +16,10 @@ import {
  LANG_EN_US,
  VENDOR_GOOGLE,
  LANG_EN_US_STANDARD_C,
-  VENDOR_CUSTOM,
+  VENDOR_AWS,
+  VENDOR_WELLSAID,
+  useSpeechVendors,
+  VENDOR_DEEPGRAM,
 } from "src/vendor";
 import {
  postApplication,
@@ -28,17 +31,14 @@ import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_INTERNAL_APPLICATIONS,
 } from "src/router/routes";
-import {
-  DEFAULT_WEBHOOK,
-  DISABLE_CALL_RECORDING,
-  WEBHOOK_METHODS,
-} from "src/api/constants";
+import { DEFAULT_WEBHOOK, WEBHOOK_METHODS } from "src/api/constants";

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

 import type {
@@ -47,12 +47,10 @@ import type {
  Application,
  WebhookMethod,
  UseApiDataMap,
-  SpeechCredential,
 } from "src/api/types";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
-import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
+import { isUserAccountScope, useRedirect } from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";
-import SpeechProviderSelection from "./speech-selection";

 type ApplicationFormProps = {
  application?: UseApiDataMap<Application>;
@@ -60,8 +58,8 @@ type ApplicationFormProps = {

 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("");
@@ -70,17 +68,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const [initialApplicationJson, setInitialApplicationJson] = useState(false);
  const [accountSid, setAccountSid] = useState("");
  const [callWebhook, setCallWebhook] = useState<WebHook>(DEFAULT_WEBHOOK);
-  const [tmpCallWebhook, setTmpCallWebhook] =
-    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialCallWebhook, setInitialCallWebhook] = useState(false);
  const [statusWebhook, setStatusWebhook] = useState<WebHook>(DEFAULT_WEBHOOK);
-  const [tmpStatusWebhook, setTmpStatusWebhook] =
-    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialStatusWebhook, setInitialStatusWebhook] = useState(false);
  const [messageWebhook, setMessageWebhook] =
    useState<WebHook>(DEFAULT_WEBHOOK);
-  const [tmpMessageWebhook, setTmpMessageWebhook] =
-    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialMessageWebhook, setInitialMessageWebhook] = useState(false);
  const [synthVendor, setSynthVendor] =
    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
@@ -90,43 +82,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    useState<keyof RecognizerVendors>(VENDOR_GOOGLE);
  const [recogLang, setRecogLang] = useState(LANG_EN_US);
  const [message, setMessage] = useState("");
-  const [apiUrl, setApiUrl] = useState("");
-  const [credentials] = useApiData<SpeechCredential[]>(apiUrl);
-  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 = [
@@ -134,9 +89,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Calling",
      prefix: "call_webhook",
      stateVal: callWebhook,
-      tmpStateVal: tmpCallWebhook,
      stateSet: setCallWebhook,
-      tmpStateSet: setTmpCallWebhook,
      initialCheck: initialCallWebhook,
      required: true,
    },
@@ -144,9 +97,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Call status",
      prefix: "status_webhook",
      stateVal: statusWebhook,
-      tmpStateVal: tmpStatusWebhook,
      stateSet: setStatusWebhook,
-      tmpStateSet: setTmpStatusWebhook,
      initialCheck: initialStatusWebhook,
      required: true,
    },
@@ -154,9 +105,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Messaging",
      prefix: "message_webhook",
      stateVal: messageWebhook,
-      tmpStateVal: tmpMessageWebhook,
      stateSet: setMessageWebhook,
-      tmpStateSet: setTmpMessageWebhook,
      initialCheck: initialMessageWebhook,
      required: false,
    },
@@ -197,7 +146,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      }
    }

-    const payload: Partial<Application> = {
+    const payload = {
      name: applicationName,
      app_json: applicationJson || null,
      call_hook: callWebhook || null,
@@ -206,34 +155,9 @@ 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) {
@@ -261,183 +185,10 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  };

-  useMemo(() => {
-    if (credentials && hasLength(credentials)) {
-      const v = credentials
-        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_tts)
-        .map((tv) =>
-          Object.assign({
-            name:
-              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
-              ` (${VENDOR_CUSTOM})`,
-            value: tv.vendor,
-          })
-        );
-      setttsVendorOptions(vendors.concat(v));
-
-      const v2 = credentials
-        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_stt)
-        .map((tv) =>
-          Object.assign({
-            name:
-              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
-              ` (${VENDOR_CUSTOM})`,
-            value: tv.vendor,
-          })
-        );
-      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,
-    synthVendor,
-    recogVendor,
-    fallbackSpeechRecognizerVendor,
-    fallbackSpeechSynthsisVendor,
-  ]);
-
-  useEffect(() => {
-    if (accountSid) {
-      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
-    }
-  }, [accountSid]);
-
-  useEffect(() => {
-    let label: string;
-    // Synthesis Label
-    label = application?.data?.speech_synthesis_label || "";
-    if (ttsLabelOptions && !ttsLabelOptions.find((l) => l.value === label)) {
-      label = ttsLabelOptions.length ? ttsLabelOptions[0].value : "";
-    }
-    setSynthLabel(label);
-
-    // fallback Synthesis Label
-    label = application?.data?.fallback_speech_synthesis_label || "";
-    if (
-      fallbackTtsLabelOptions &&
-      !fallbackTtsLabelOptions.find((l) => l.value === label)
-    ) {
-      label = fallbackTtsLabelOptions.length
-        ? fallbackTtsLabelOptions[0].value
-        : "";
-    }
-    setFallbackSpeechSynthsisLabel(label);
-
-    // regconizer label
-    label = application?.data?.speech_recognizer_label || "";
-    if (sttLabelOptions && !sttLabelOptions.find((l) => l.value === label)) {
-      label = sttLabelOptions.length ? sttLabelOptions[0].value : "";
-    }
-    setRecogLabel(label);
-
-    // fallback regconizer label
-    label = application?.data?.fallback_speech_recognizer_label || "";
-    if (
-      fallbackSttLabelOptions &&
-      !fallbackSttLabelOptions.find((l) => l.value === label)
-    ) {
-      label = fallbackSttLabelOptions.length
-        ? fallbackSttLabelOptions[0].value
-        : "";
-    }
-    setFallbackSpeechRecognizerLabel(label);
-  }, [
-    ttsLabelOptions,
-    sttLabelOptions,
-    fallbackTtsLabelOptions,
-    fallbackSttLabelOptions,
-    application,
-  ]);
-
  useEffect(() => {
    setLocation();
    if (application && application.data) {
      setApplicationName(application.data.name);
-      setRecordAllCalls(application.data.record_all_calls ? true : false);
      if (!applicationJson) {
        setApplicationJson(application.data.app_json || "");
      }
@@ -449,7 +200,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.call_hook) {
        setCallWebhook(application.data.call_hook);
-        setTmpCallWebhook(application.data.call_hook);

        if (
          application.data.call_hook.username ||
@@ -461,7 +211,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.call_status_hook) {
        setStatusWebhook(application.data.call_status_hook);
-        setTmpStatusWebhook(application.data.call_status_hook);

        if (
          application.data.call_status_hook.username ||
@@ -473,7 +222,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.messaging_hook) {
        setMessageWebhook(application.data.messaging_hook);
-        setTmpMessageWebhook(application.data.messaging_hook);

        if (
          application.data.messaging_hook.username ||
@@ -509,84 +257,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_recognizer_language)
        setRecogLang(application.data.speech_recognizer_language);
-
-      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_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
-        );
-      }
    }
  }, [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 ${
-          !application?.data && application?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
@@ -665,18 +341,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                name={webhook.prefix}
                label="Use HTTP basic authentication"
                initialCheck={webhook.initialCheck}
-                handleChecked={(e) => {
-                  if (e.target.checked) {
-                    webhook.stateSet(webhook.tmpStateVal);
-                  } else {
-                    webhook.tmpStateSet(webhook.stateVal);
-                    webhook.stateSet({
-                      ...webhook.stateVal,
-                      username: "",
-                      password: "",
-                    });
-                  }
-                }}
              >
                <MS>{MSG_WEBHOOK_FIELDS}</MS>
                <label htmlFor={`${webhook.prefix}_username`}>Username</label>
@@ -692,6 +356,13 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                      username: e.target.value,
                    });
                  }}
+                  required={
+                    webhook.required &&
+                    !webhook.stateVal.username &&
+                    webhook.stateVal.password
+                      ? true
+                      : false
+                  }
                />
                <label htmlFor={`${webhook.prefix}_password`}>Password</label>
                <Passwd
@@ -705,90 +376,163 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                      password: e.target.value,
                    });
                  }}
+                  required={
+                    webhook.required &&
+                    webhook.stateVal.username &&
+                    !webhook.stateVal.password
+                      ? true
+                      : false
+                  }
                />
              </Checkzone>
            </fieldset>
          );
        })}
-        <SpeechProviderSelection
-          serviceProviderSid={
-            currentServiceProvider?.service_provider_sid || ""
-          }
-          accountSid={accountSid}
-          credentials={credentials}
-          ttsVendor={[synthVendor, setSynthVendor]}
-          ttsVendorOptions={ttsVendorOptions}
-          ttsVoice={[synthVoice, setSynthVoice]}
-          ttsLang={[synthLang, setSynthLang]}
-          ttsLabelOptions={ttsLabelOptions}
-          ttsLabel={[synthLabel, setSynthLabel]}
-          sttVendor={[recogVendor, setRecogVendor]}
-          sttVendorOptions={sttVendorOptions}
-          sttLang={[recogLang, setRecogLang]}
-          sttLabelOptions={sttLabelOptions}
-          sttLabel={[recogLabel, setRecogLabel]}
-        />
+        {synthesis && (
+          <fieldset>
+            <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
+            <Selector
+              id="synthesis_vendor"
+              name="synthesis_vendor"
+              value={synthVendor}
+              options={vendors.filter(
+                (vendor) => vendor.value != VENDOR_DEEPGRAM
+              )}
+              onChange={(e) => {
+                const vendor = e.target.value as keyof SynthesisVendors;
+                setSynthVendor(vendor);

-        <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}
-              ttsVendor={[
-                fallbackSpeechSynthsisVendor,
-                setFallbackSpeechSynthsisVendor,
-              ]}
-              ttsVendorOptions={ttsVendorOptions}
-              ttsVoice={[
-                fallbackSpeechSynthsisVoice,
-                setFallbackSpeechSynthsisVoice,
-              ]}
-              ttsLang={[
-                fallbackSpeechSynthsisLanguage,
-                setFallbackSpeechSynthsisLanguage,
-              ]}
-              ttsLabelOptions={fallbackTtsLabelOptions}
-              ttsLabel={[
-                fallbackSpeechSynthsisLabel,
-                setFallbackSpeechSynthsisLabel,
-              ]}
-              sttVendor={[
-                fallbackSpeechRecognizerVendor,
-                setFallbackSpeechRecognizerVendor,
-              ]}
-              sttVendorOptions={sttVendorOptions}
-              sttLang={[
-                fallbackSpeechRecognizerLanguage,
-                setFallbackSpeechRecognizerLanguage,
-              ]}
-              sttLabelOptions={fallbackSttLabelOptions}
-              sttLabel={[
-                fallbackSpeechRecognizerLabel,
-                setFallbackSpeechRecognizerLabel,
-              ]}
+                /** 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>
-              <Button
-                type="button"
-                small
-                onClick={swapPrimaryAndfalloverSpeech}
-              >
-                Swap primary and fallback
-              </Button>
-            </fieldset>
-          </Checkzone>
-        </fieldset>
+            {synthVendor && 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)}
+                />
+              </>
+            )}
+          </fieldset>
+        )}
+        {recognizers && (
+          <fieldset>
+            <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
+            <Selector
+              id="recognizer_vendor"
+              name="recognizer_vendor"
+              value={recogVendor}
+              options={vendors.filter(
+                (vendor) => vendor.value != VENDOR_WELLSAID
+              )}
+              onChange={(e) => {
+                const vendor = e.target.value as keyof RecognizerVendors;
+                setRecogVendor(vendor);
+
+                /** 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 && 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);
+                  }}
+                />
+              </>
+            )}
+          </fieldset>
+        )}
        {(import.meta.env.INITIAL_APP_JSON_ENABLED === undefined ||
          import.meta.env.INITIAL_APP_JSON_ENABLED) && (
          <fieldset>
@@ -819,23 +563,6 @@ 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--multi">
+      <section className="filters filters--spaced">
        <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
@@ -1,577 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import {
-  getGoogleCustomVoices,
-  getSpeechSupportedLanguagesAndVoices,
-} from "src/api";
-import { USER_ADMIN } from "src/api/constants";
-import {
-  SpeechCredential,
-  SpeechSupportedLanguagesAndVoices,
-} from "src/api/types";
-import { Selector } from "src/components/forms";
-import { SelectorOption } from "src/components/forms/selector";
-import { toastError, 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_ASSEMBLYAI,
-  VENDOR_ELEVENLABS,
-  VENDOR_GOOGLE,
-  VENDOR_MICROSOFT,
-  VENDOR_SONIOX,
-  VENDOR_WELLSAID,
-  VENDOR_WHISPER,
-} from "src/vendor";
-import {
-  LabelOptions,
-  RecognizerVendors,
-  SynthesisVendors,
-  VendorOptions,
-} from "src/vendor/types";
-type SpeechProviderSelectionProbs = {
-  accountSid: string;
-  serviceProviderSid: string;
-  credentials: SpeechCredential[] | 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>>];
-  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,
-  ttsVendor: [synthVendor, setSynthVendor],
-  ttsVendorOptions,
-  ttsVoice: [synthVoice, setSynthVoice],
-  ttsLang: [synthLang, setSynthLang],
-  ttsLabelOptions,
-  ttsLabel: [synthLabel, setSynthLabel],
-  sttVendor: [recogVendor, setRecogVendor],
-  sttVendorOptions,
-  sttLang: [recogLang, setRecogLang],
-  sttLabelOptions,
-  sttLabel: [recogLabel, setRecogLabel],
-}: SpeechProviderSelectionProbs) => {
-  const user = useSelectState("user");
-  const [
-    synthesisSupportedLanguagesAndVoices,
-    setSynthesisSupportedLanguagesAndVoices,
-  ] = useState<SpeechSupportedLanguagesAndVoices | null>();
-  const [selectedCredential, setSelectedCredential] = useState<
-    SpeechCredential | undefined
-  >();
-  const [synthesisVoiceOptions, setSynthesisVoiceOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [synthesisLanguageOptions, setSynthesisLanguageOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [synthesisModelOptions, setSynthesisModelOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [
-    synthesisGoogleCustomVoiceOptions,
-    setSynthesisGoogleCustomVoiceOptions,
-  ] = useState<SelectorOption[]>([]);
-  const [recogLanguageOptions, setRecogLanguageOptions] = useState<
-    SelectorOption[]
-  >([]);
-
-  const currentTtsVendor = useRef(synthVendor);
-  const currentSttVendor = useRef(recogVendor);
-  const shouldUpdateTtsVoice = useRef(false);
-  const shouldUpdateSttLanguage = useRef(false);
-  const ttsEffectTimer = useRef<number | null>(null);
-  const sttEffectTimer = useRef<number | null>(null);
-
-  // Get Synthesis languages and voices
-  useEffect(() => {
-    if (
-      !user ||
-      !synthVendor ||
-      (user?.scope === USER_ADMIN && !serviceProviderSid)
-    ) {
-      return;
-    }
-    currentTtsVendor.current = synthVendor;
-    /** When Custom Vendor is used, user you have to input the lange and voice. */
-    if (synthVendor.toString().startsWith(VENDOR_CUSTOM)) {
-      setSynthVoice("");
-      return;
-    }
-    // just execute last change
-    if (ttsEffectTimer.current) {
-      clearTimeout(ttsEffectTimer.current);
-    }
-
-    ttsEffectTimer.current = setTimeout(() => {
-      configSynthesis();
-    }, 200);
-  }, [synthVendor, synthLabel, serviceProviderSid]);
-
-  // Get Recognizer languages and voices
-  useEffect(() => {
-    /** When Custom Vendor is used, user you have to input the lange and voice. */
-    if (recogVendor.toString().startsWith(VENDOR_CUSTOM)) {
-      setRecogLang(LANG_EN_US);
-      return;
-    }
-    if (
-      !user ||
-      !recogVendor ||
-      (user?.scope === USER_ADMIN && !serviceProviderSid)
-    ) {
-      return;
-    }
-    currentSttVendor.current = recogVendor;
-    // just execute last change
-    if (sttEffectTimer.current) {
-      clearTimeout(sttEffectTimer.current);
-    }
-
-    sttEffectTimer.current = setTimeout(() => {
-      configRecognizer();
-    }, 200);
-  }, [recogVendor, recogLabel, serviceProviderSid]);
-
-  useEffect(() => {
-    if (credentials) {
-      setSelectedCredential(
-        credentials.find(
-          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel
-        )
-      );
-    }
-  }, [synthVendor, synthLabel, credentials]);
-
-  useEffect(() => {
-    if (!synthLabel && ttsLabelOptions?.length > 0) {
-      setSynthLabel(ttsLabelOptions[0].value);
-    }
-    if (!recogLabel && sttLabelOptions?.length > 0) {
-      setRecogLabel(sttLabelOptions[0].value);
-    }
-  }, [ttsLabelOptions, sttLabelOptions]);
-
-  useEffect(() => {
-    if (synthesisSupportedLanguagesAndVoices) {
-      // Extract Voice
-      const voicesOpts =
-        synthesisSupportedLanguagesAndVoices.tts?.find((lang) => {
-          if (synthVendor === VENDOR_ELEVENLABS && lang.voices.length > 0) {
-            return true;
-          }
-          return lang.value === synthLang;
-        })?.voices || [];
-
-      if (synthVendor === VENDOR_GOOGLE && synthesisGoogleCustomVoiceOptions) {
-        if (synthesisGoogleCustomVoiceOptions) {
-          setSynthesisVoiceOptions([
-            ...synthesisGoogleCustomVoiceOptions,
-            ...voicesOpts,
-          ]);
-        } else {
-          setSynthesisVoiceOptions(voicesOpts);
-        }
-        if (synthesisGoogleCustomVoiceOptions.length > 0) {
-          updateTtsVoice(synthesisGoogleCustomVoiceOptions[0].value);
-        }
-      } else {
-        setSynthesisVoiceOptions(voicesOpts);
-      }
-    }
-  }, [
-    synthLang,
-    synthesisSupportedLanguagesAndVoices,
-    synthesisGoogleCustomVoiceOptions,
-  ]);
-
-  const configSynthesis = () => {
-    getSpeechSupportedLanguagesAndVoices(
-      serviceProviderSid,
-      synthVendor,
-      synthLabel
-    )
-      .then(({ json }) => {
-        // while fetching data, user might change the vendor
-        if (currentTtsVendor.current !== synthVendor) {
-          return;
-        }
-        setSynthesisSupportedLanguagesAndVoices(json);
-        // Extract model
-        if (json.models && json.models.length) {
-          setSynthesisModelOptions(json.models);
-          if (synthVendor === VENDOR_DEEPGRAM) {
-            setSynthVoice(json.models[0].value);
-            return;
-          }
-        }
-
-        if (json.tts && json.tts.length) {
-          // Extract Language
-          const langOpts = json.tts.map((lang) => ({
-            name: lang.name,
-            value: lang.value,
-          }));
-          setSynthesisLanguageOptions(langOpts);
-
-          // Default setting
-          const googleLang = json.tts.find((lang) => lang.value === synthLang);
-          if (
-            synthVendor === VENDOR_GOOGLE &&
-            (!googleLang ||
-              !googleLang.voices.find((v) => v.value === synthVoice))
-          ) {
-            setSynthLang(LANG_EN_US);
-            updateTtsVoice(LANG_EN_US_STANDARD_C);
-            return;
-          }
-          if (synthVendor === VENDOR_ELEVENLABS) {
-            // Samve Voices applied to all languages
-            // Voices are only available for the 1st language.
-            setSynthLang(ELEVENLABS_LANG_EN);
-            updateTtsVoice(json.tts[0].voices[0].value);
-            return;
-          }
-          if (synthVendor === VENDOR_WHISPER) {
-            const newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
-            setSynthLang(LANG_EN_US);
-            updateTtsVoice(newLang!.voices[0].value);
-            return;
-          }
-          /** Google and AWS have different language lists */
-          /** If the new language doesn't map then default to "en-US" */
-          let newLang = json.tts.find((lang) => lang.value === synthLang);
-
-          if (newLang) {
-            updateTtsVoice(newLang.voices[0].value);
-            return;
-          }
-
-          newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
-
-          setSynthLang(LANG_EN_US);
-          updateTtsVoice(newLang!.voices[0].value);
-        }
-      })
-      .catch((error) => {
-        toastError(error.msg);
-      });
-
-    if (synthVendor === VENDOR_GOOGLE) {
-      getGoogleCustomVoices({
-        ...(synthLabel && { label: synthLabel }),
-        account_sid: accountSid,
-        service_provider_sid: serviceProviderSid,
-      }).then(({ json }) => {
-        // If after successfully fetching data, vendor is still good, then apply value
-        if (currentTtsVendor.current !== VENDOR_GOOGLE) {
-          return;
-        }
-        const customVOices = json.map((v) => ({
-          name: `${v.name} (Custom)`,
-          value: `custom_${v.google_custom_voice_sid}`,
-        }));
-        setSynthesisGoogleCustomVoiceOptions(customVOices);
-      });
-    }
-  };
-
-  const updateTtsVoice = (value: string) => {
-    if (shouldUpdateTtsVoice.current) {
-      setSynthVoice(value);
-      shouldUpdateTtsVoice.current = false;
-    }
-  };
-
-  const configRecognizer = () => {
-    getSpeechSupportedLanguagesAndVoices(
-      serviceProviderSid,
-      recogVendor,
-      recogLabel
-    )
-      .then(({ json }) => {
-        // while fetching data, the user might change the vendor
-        if (currentSttVendor.current !== recogVendor) {
-          return;
-        }
-        // Extract Language
-        const langOpts = json.stt.map((lang) => ({
-          name: lang.name,
-          value: lang.value,
-        }));
-        setRecogLanguageOptions(langOpts);
-
-        /**When vendor is custom, Language is input by user */
-        if (
-          recogVendor.toString() === VENDOR_CUSTOM ||
-          !shouldUpdateSttLanguage.current
-        )
-          return;
-        shouldUpdateSttLanguage.current = false;
-        /** Google and AWS have different language lists */
-        /** If the new language doesn't map then default to "en-US" */
-        const newLang = json.stt.find((lang) => lang.value === recogLang);
-
-        if (
-          (recogVendor === VENDOR_GOOGLE || recogVendor === VENDOR_AWS) &&
-          !newLang
-        ) {
-          setRecogLang(LANG_EN_US);
-        } else if (recogVendor === VENDOR_COBALT && !newLang) {
-          setRecogLang(LANG_COBALT_EN_US);
-        } else if (langOpts.length && !newLang) {
-          setRecogLang(langOpts[0].value);
-        }
-      })
-      .catch((error) => {
-        toastError(error.msg);
-      });
-  };
-  return (
-    <>
-      <fieldset>
-        <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
-        <Selector
-          id="synthesis_vendor"
-          name="synthesis_vendor"
-          value={synthVendor}
-          options={ttsVendorOptions.filter(
-            (vendor) =>
-              vendor.value != VENDOR_ASSEMBLYAI &&
-              vendor.value != VENDOR_SONIOX &&
-              vendor.value !== VENDOR_CUSTOM &&
-              vendor.value !== VENDOR_COBALT
-          )}
-          onChange={(e) => {
-            const vendor = e.target.value as keyof SynthesisVendors;
-            shouldUpdateTtsVoice.current = true;
-            setSynthVendor(vendor);
-            setSynthLabel("");
-            setSynthesisLanguageOptions([]);
-            setSynthesisVoiceOptions([]);
-          }}
-        />
-        {hasLength(ttsLabelOptions) && (
-          <>
-            <label htmlFor="synthesis_label">Label</label>
-            <Selector
-              id="systhesis_label"
-              name="systhesis_label"
-              value={synthLabel}
-              options={ttsLabelOptions}
-              onChange={(e) => {
-                setSynthLabel(e.target.value);
-              }}
-            />
-          </>
-        )}
-        {synthesisModelOptions && synthVendor === VENDOR_DEEPGRAM && (
-          <>
-            <label htmlFor="synthesis_lang">Model</label>
-            <Selector
-              id="synthesis_voice"
-              name="synthesis_voice"
-              value={synthVoice}
-              options={synthesisModelOptions}
-              onChange={(e) => setSynthVoice(e.target.value)}
-            />
-          </>
-        )}
-        {synthVendor &&
-          !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
-          synthVendor !== VENDOR_DEEPGRAM &&
-          synthLang && (
-            <>
-              <label htmlFor="synthesis_lang">Language</label>
-              <Selector
-                id="synthesis_lang"
-                name="synthesis_lang"
-                value={synthLang}
-                options={synthesisLanguageOptions}
-                onChange={(e) => {
-                  shouldUpdateTtsVoice.current = true;
-                  const language = e.target.value;
-                  setSynthLang(language);
-
-                  /** When using Google and en-US, ensure "Standard-C" is used as default */
-                  if (
-                    synthVendor === VENDOR_GOOGLE &&
-                    language === LANG_EN_US
-                  ) {
-                    setSynthVoice(LANG_EN_US_STANDARD_C);
-                    return;
-                  }
-
-                  const voices =
-                    synthesisSupportedLanguagesAndVoices?.tts.find(
-                      (lang) => lang.value === language
-                    )?.voices || [];
-                  if (
-                    synthVendor === VENDOR_GOOGLE &&
-                    synthesisGoogleCustomVoiceOptions &&
-                    synthesisGoogleCustomVoiceOptions.length
-                  ) {
-                    setSynthesisVoiceOptions([
-                      ...synthesisGoogleCustomVoiceOptions,
-                      ...voices,
-                    ]);
-                  } else {
-                    setSynthesisVoiceOptions(voices);
-                  }
-
-                  setSynthVoice(voices[0].value);
-                }}
-              />
-              <label htmlFor="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>
-      <fieldset>
-        <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
-        <Selector
-          id="recognizer_vendor"
-          name="recognizer_vendor"
-          value={recogVendor}
-          options={sttVendorOptions.filter(
-            (vendor) =>
-              vendor.value != VENDOR_WELLSAID &&
-              vendor.value != VENDOR_ELEVENLABS &&
-              vendor.value != VENDOR_WHISPER &&
-              vendor.value !== VENDOR_CUSTOM
-          )}
-          onChange={(e) => {
-            const vendor = e.target.value as keyof RecognizerVendors;
-            shouldUpdateSttLanguage.current = true;
-            setRecogVendor(vendor);
-            setRecogLabel("");
-
-            setRecogLanguageOptions([]);
-          }}
-        />
-        {hasLength(sttLabelOptions) && (
-          <>
-            <label htmlFor="recog_label">Label</label>
-            <Selector
-              id="recog_label"
-              name="recog_label"
-              value={recogLabel}
-              options={sttLabelOptions}
-              onChange={(e) => {
-                setRecogLabel(e.target.value);
-              }}
-            />
-          </>
-        )}
-        {recogVendor &&
-          !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
-          recogLang && (
-            <>
-              <label htmlFor="recognizer_lang">Language</label>
-              <Selector
-                id="recognizer_lang"
-                name="recognizer_lang"
-                value={recogLang}
-                options={recogLanguageOptions}
-                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,9 +22,7 @@ import {
  FQDN,
  FQDN_TOP_LEVEL,
  INVALID,
-  IP,
  NETMASK_OPTIONS,
-  SIP_GATEWAY_PROTOCOL_OPTIONS,
  TCP_MAX_PORT,
  TECH_PREFIX_MINLENGTH,
  USER_ACCOUNT,
@@ -47,9 +45,6 @@ import {
  isUserAccountScope,
  hasLength,
  isValidPort,
-  disableDefaultTrunkRouting,
-  hasValue,
-  isNotBlank,
 } from "src/utils";

 import type {
@@ -64,7 +59,6 @@ import type {
  Application,
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
-import { RegisterStatus } from "./register-status";

 type CarrierFormProps = {
  carrier?: UseApiDataMap<Carrier>;
@@ -141,7 +135,6 @@ export const CarrierForm = ({

  const setCarrierStates = (obj: Carrier) => {
    if (obj) {
-      setIsActive(obj.is_active);
      if (obj.name) {
        setCarrierName(obj.name);
      }
@@ -239,20 +232,7 @@ export const CarrierForm = ({
    value: typeof sipGateways[number][keyof SipGateway]
  ) => {
    setSipGateways(
-      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
-      )
+      sipGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
    );
  };

@@ -336,13 +316,10 @@ 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) {
@@ -428,9 +405,7 @@ export const CarrierForm = ({
    /** When to switch to `sip` tab */

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

    /** Empty SIP gateway */
@@ -639,24 +614,10 @@ export const CarrierForm = ({

  return (
    <Section slim>
-      <form
-        className={`form form--internal ${
-          !carrier?.data && carrier?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
-        {carrier &&
-          carrier.data &&
-          Boolean(carrier.data.requires_register) &&
-          carrier.data.register_status && (
-            <fieldset>
-              <div className="m med">Register status</div>
-              <RegisterStatus carrier={carrier.data} />
-            </fieldset>
-          )}
        <fieldset>
          <div className="multi">
            <div className="inp">
@@ -764,21 +725,18 @@ export const CarrierForm = ({
                    : false
                }
              />
-              {user &&
-                disableDefaultTrunkRouting(user?.scope) &&
-                accountSid &&
-                hasLength(applications) && (
-                  <>
-                    <ApplicationSelect
-                      label="Default Application"
-                      defaultOption="None"
-                      application={[applicationSid, setApplicationSid]}
-                      applications={applications.filter(
-                        (application) => application.account_sid === accountSid
-                      )}
-                    />
-                  </>
-                )}
+              {accountSid && hasLength(applications) && (
+                <>
+                  <ApplicationSelect
+                    label="Default Application"
+                    defaultOption="None"
+                    application={[applicationSid, setApplicationSid]}
+                    applications={applications.filter(
+                      (application) => application.account_sid === accountSid
+                    )}
+                  />
+                </>
+              )}
            </fieldset>
            <fieldset>
              <Checkzone
@@ -802,7 +760,7 @@ export const CarrierForm = ({
                  Does your carrier require authentication on outbound calls?
                </MS>
                <label htmlFor="sip_username">
-                  Auth username {sipPass || sipRegister ? <span>*</span> : ""}
+                  Username {sipPass || sipRegister ? <span>*</span> : ""}
                </label>
                <input
                  id="sip_username"
@@ -857,7 +815,7 @@ export const CarrierForm = ({
                      required={sipRegister}
                      onChange={(e) => setSipRealm(e.target.value)}
                    />
-                    <label htmlFor="from_user">Username</label>
+                    <label htmlFor="from_user">SIP from user</label>
                    <input
                      id="from_user"
                      name="from_user"
@@ -988,21 +946,13 @@ export const CarrierForm = ({
                          type="number"
                          min="0"
                          max={TCP_MAX_PORT}
-                          placeholder={
-                            g.protocol === "tls" || g.protocol === "tls/srtp"
-                              ? ""
-                              : DEFAULT_SIP_GATEWAY.port?.toString()
-                          }
-                          value={g.port === null ? "" : g.port}
+                          placeholder={DEFAULT_SIP_GATEWAY.port.toString()}
+                          value={g.port}
                          onChange={(e) => {
                            updateSipGateways(
                              i,
                              "port",
-                              g.outbound > 0 &&
-                                !isNotBlank(e.target.value) &&
-                                getIpValidationType(g.ipv4) !== IP
-                                ? null
-                                : Number(e.target.value)
+                              Number(e.target.value)
                            );
                          }}
                          ref={(ref: HTMLInputElement) =>
@@ -1010,56 +960,20 @@ export const CarrierForm = ({
                          }
                        />
                      </div>
-                      {g.outbound ? (
-                        <div>
-                          <Selector
-                            id={`sip_protocol_${i}`}
-                            name={`sip_protocol${i}`}
-                            placeholder=""
-                            value={g.protocol}
-                            options={SIP_GATEWAY_PROTOCOL_OPTIONS}
-                            onChange={(e) => {
-                              updateSipGateways(i, "protocol", e.target.value);
-                            }}
-                          />
-                        </div>
-                      ) : (
-                        <div>
-                          <Selector
-                            id={`sip_netmask_${i}`}
-                            name={`sip_netmask${i}`}
-                            placeholder="32"
-                            value={g.netmask}
-                            options={NETMASK_OPTIONS}
-                            onChange={(e) => {
-                              updateSipGateways(i, "netmask", e.target.value);
-                            }}
-                          />
-                        </div>
-                      )}
+                      <div>
+                        <Selector
+                          id={`sip_netmask_${i}`}
+                          name={`sip_netmask${i}`}
+                          placeholder="32"
+                          value={g.netmask}
+                          options={NETMASK_OPTIONS}
+                          onChange={(e) => {
+                            updateSipGateways(i, "netmask", e.target.value);
+                          }}
+                        />
+                      </div>
                    </div>
                    <div>
-                      <div>
-                        <label
-                          htmlFor={`sip__gw_is_active_${i}`}
-                          className="chk"
-                        >
-                          <input
-                            id={`sip__gw_is_active_${i}`}
-                            name={`sip__gw_is_active_${i}`}
-                            type="checkbox"
-                            checked={g.is_active ? true : false}
-                            onChange={(e) => {
-                              updateSipGateways(
-                                i,
-                                "is_active",
-                                e.target.checked ? 1 : 0
-                              );
-                            }}
-                          />
-                          <div>Active</div>
-                        </label>
-                      </div>
                      <div>
                        <label htmlFor={`sip_inbound_${i}`} className="chk">
                          <input
@@ -1098,29 +1012,6 @@ 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
@@ -29,25 +29,16 @@ import {
 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,
-  CurrentUserData,
-  SipGateway,
-  SmppGateway,
-} from "src/api/types";
+import type { Account, Carrier, 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);
@@ -60,6 +51,7 @@ export const Carriers = () => {
    setAccountSid(getAccountFilter());
    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
      setAccountSid(user?.account_sid);
+      return carriers;
    }

    return carriers
@@ -138,16 +130,7 @@ export const Carriers = () => {
  return (
    <>
      <section className="mast">
-        <div>
-          <H1 className="h2">Carriers</H1>
-          {ENABLE_HOSTED_SYSTEM && (
-            <M>
-              Have your carrier send calls to{" "}
-              <span>{userData?.account?.sip_realm}</span>
-            </M>
-          )}
-        </div>
-
+        <H1 className="h2">Carriers</H1>
        <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
          {" "}
          <Icon>
@@ -155,7 +138,7 @@ export const Carriers = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter carriers"
          filter={[filter, setFilter]}
@@ -214,26 +197,6 @@ export const Carriers = () => {
                        <span>{carrier.is_active ? "Active" : "Inactive"}</span>
                      </div>
                    </div>
-                    {Boolean(carrier.requires_register) && (
-                      <div
-                        className={`i txt--${
-                          carrier.register_status.status === CARRIER_REG_OK
-                            ? "teal"
-                            : "jam"
-                        }`}
-                      >
-                        {carrier.register_status.status === CARRIER_REG_OK ? (
-                          <Icons.CheckCircle />
-                        ) : (
-                          <Icons.XCircle />
-                        )}
-                        <span>
-                          {carrier.register_status.status === CARRIER_REG_OK
-                            ? "Registered"
-                            : "Unregistered"}
-                        </span>
-                      </div>
-                    )}
                    <Gateways carrier={carrier} />
                  </div>
                </div>
--- a/src/containers/internal/views/carriers/pcap.tsx
+++ b/src/containers/internal/views/carriers/pcap.tsx
@@ -1,65 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import {
-  getRecentCall,
-  getServiceProviderRecentCall,
-  getPcap,
-  getServiceProviderPcap,
-} from "src/api";
-import { toastError } from "src/store";
-
-import type { DownloadedBlob } from "src/api/types";
-
-type PcapButtonProps = {
-  accountSid: string;
-  serviceProviderSid: string;
-  sipCallId: string;
-};
-
-export const PcapButton = ({
-  accountSid,
-  serviceProviderSid,
-  sipCallId,
-}: PcapButtonProps) => {
-  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, "register")
-          : getServiceProviderPcap(serviceProviderSid, sipCallId, "register");
-        p1.then(({ blob }) => {
-          if (blob) {
-            setPcap({
-              data_url: URL.createObjectURL(blob),
-              file_name: `callid-${sipCallId}.pcap`,
-            });
-          }
-        }).catch((error) => {
-          toastError(error.msg);
-        });
-      }
-    }).catch((error) => {
-      toastError(error.msg);
-    });
-  }, []);
-
-  if (pcap) {
-    return (
-      <a
-        href={pcap.data_url}
-        download={pcap.file_name}
-        className="btn btn--small pcap"
-      >
-        Download pcap
-      </a>
-    );
-  }
-
-  return null;
-};
--- a/src/containers/internal/views/carriers/register-status.tsx
+++ b/src/containers/internal/views/carriers/register-status.tsx
@@ -1,59 +0,0 @@
-import React from "react";
-import { Carrier } from "src/api/types";
-import { Icons } from "src/components";
-import { CARRIER_REG_OK } from "src/api/constants";
-import { MS } from "@jambonz/ui-kit";
-import { PcapButton } from "./pcap";
-
-type CarrierProps = {
-  carrier: Carrier;
-};
-
-export const RegisterStatus = ({ carrier }: CarrierProps) => {
-  const getReason = () => {
-    return carrier.register_status.reason
-      ? typeof carrier.register_status.reason === "string"
-        ? carrier.register_status.reason
-        : "Not Started"
-      : "Not Started";
-  };
-  const renderStatus = () => {
-    return (
-      <div
-        className={`i txt--${
-          carrier.register_status.status
-            ? carrier.register_status.status === CARRIER_REG_OK
-              ? "teal"
-              : "jam"
-            : "jean"
-        }`}
-        title={getReason()}
-      >
-        {carrier.register_status.status === CARRIER_REG_OK ? (
-          <Icons.CheckCircle />
-        ) : (
-          <Icons.XCircle />
-        )}
-        <span>
-          {carrier.register_status.status
-            ? `Status ${carrier.register_status.status}`
-            : "Not Started"}
-        </span>
-      </div>
-    );
-  };
-
-  return (
-    <details className={carrier.register_status.status || "not-tested"}>
-      <summary>{renderStatus()}</summary>
-      <MS>
-        <strong>Reason:</strong> {getReason()}
-      </MS>
-      <PcapButton
-        accountSid={carrier.account_sid || ""}
-        serviceProviderSid={carrier.service_provider_sid}
-        sipCallId={carrier.register_status.callId || ""}
-      />
-    </details>
-  );
-};
--- a/src/containers/internal/views/clients/add.tsx
+++ b/src/containers/internal/views/clients/add.tsx
@@ -1,14 +0,0 @@
-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
@@ -1,28 +0,0 @@
-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
@@ -1,33 +0,0 @@
-import { H1 } from "@jambonz/ui-kit";
-import React, { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useApiData } from "src/api";
-import { Client } from "src/api/types";
-import { toastError } from "src/store";
-import ClientsForm from "./form";
-import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
-
-export const ClientsEdit = () => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const [data, refetch, error] = useApiData<Client>(
-    `Clients/${params.client_sid}`
-  );
-
-  /** Handle error toast at top level... */
-  useEffect(() => {
-    if (error) {
-      toastError(error.msg);
-      navigate(ROUTE_INTERNAL_CLIENTS);
-    }
-  }, [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
@@ -1,272 +0,0 @@
-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, Tooltip } from "src/components";
-import { AccountSelect, Message, Passwd } from "src/components/forms";
-import { MSG_REQUIRED_FIELDS } from "src/constants";
-import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
-import { toastError, toastSuccess, useSelectState } from "src/store";
-import 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(
-    client ? client.data?.is_active : true
-  );
-  const [allowDirectAppCalling, setAllowDirectAppCalling] = useState(true);
-  const [allowDirectQueueCalling, setAllowDirectQueueCalling] = useState(true);
-  const [allowDirectUserCalling, setAllowDirectUserCalling] = 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,
-        allow_direct_app_calling: allowDirectAppCalling,
-        allow_direct_queue_calling: allowDirectQueueCalling,
-        allow_direct_user_calling: allowDirectUserCalling,
-      })
-        .then(() => {
-          toastSuccess("Client created successfully");
-          navigate(ROUTE_INTERNAL_CLIENTS);
-        })
-        .catch((error: { msg: IMessage }) => {
-          toastError(error.msg);
-        });
-    } else {
-      putClient(client.data?.client_sid || "", {
-        is_active: isActive,
-        allow_direct_app_calling: allowDirectAppCalling,
-        allow_direct_queue_calling: allowDirectQueueCalling,
-        allow_direct_user_calling: allowDirectUserCalling,
-      })
-        .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);
-      setAllowDirectAppCalling(client.data.allow_direct_app_calling);
-      setAllowDirectQueueCalling(client.data.allow_direct_queue_calling);
-      setAllowDirectUserCalling(client.data.allow_direct_user_calling);
-    }
-  }, [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 ${
-            !client?.data && client?.refetch ? "form--blur" : ""
-          }`}
-          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}
-                  disabled={hasValue(client)}
-                  autoComplete="off"
-                  onChange={(e) => setUsername(e.target.value)}
-                />
-              </div>
-            </div>
-            <label htmlFor="password">
-              Password{!hasValue(client) && <span>*</span>}
-            </label>
-            <Passwd
-              id="password"
-              required={!hasValue(client)}
-              name="password"
-              value={password}
-              placeholder="Password"
-              setValue={setPassword}
-              disabled={hasValue(client)}
-              autoComplete="off"
-            />
-          </fieldset>
-          <fieldset>
-            <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>
-            <label htmlFor="allow_direct_app_calling" className="chk">
-              <input
-                id="allow_direct_app_calling"
-                name="allow_direct_app_calling"
-                type="checkbox"
-                checked={allowDirectAppCalling}
-                onChange={(e) => setAllowDirectAppCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to applications</div>
-              <Tooltip text="Allow user to call applications without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
-            </label>
-            <label htmlFor="allow_direct_queue_calling" className="chk">
-              <input
-                id="allow_direct_queue_calling"
-                name="allow_direct_queue_calling"
-                type="checkbox"
-                checked={allowDirectQueueCalling}
-                onChange={(e) => setAllowDirectQueueCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to queues</div>
-              <Tooltip text="Allow user to take calls from queues without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
-            </label>
-            <label htmlFor="allow_direct_user_calling" className="chk">
-              <input
-                id="allow_direct_user_calling"
-                name="allow_direct_user_calling"
-                type="checkbox"
-                checked={allowDirectUserCalling}
-                onChange={(e) => setAllowDirectUserCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to other users</div>
-              <Tooltip text="Allow user to call other users without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
-            </label>
-          </fieldset>
-          {user?.scope !== USER_ACCOUNT && (
-            <fieldset>
-              <AccountSelect
-                accounts={accounts}
-                account={[accountSid, setAccountSid]}
-                label="Belongs to"
-                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
@@ -1,229 +0,0 @@
-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/add.tsx
+++ b/src/containers/internal/views/least-cost-routing/add.tsx
@@ -1,21 +0,0 @@
-import React from "react";
-import { H1, M } from "@jambonz/ui-kit";
-
-import { LcrForm } from "./form";
-
-export const AddLcr = () => {
-  return (
-    <>
-      <H1 className="h2">Add outbound call routes</H1>
-      <section>
-        <M>
-          Outbound call routing is used to select a carrier when there are
-          multiple carriers available.
-        </M>
-      </section>
-      <LcrForm />
-    </>
-  );
-};
-
-export default AddLcr;
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -1,177 +0,0 @@
-import React from "react";
-import { Icon } from "@jambonz/ui-kit";
-import { Identifier, XYCoord } from "dnd-core";
-import { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
-import { LcrRoute } from "src/api/types";
-import { Icons } from "src/components";
-import { Selector } from "src/components/forms";
-import { SelectorOption } from "src/components/forms/selector";
-import "./styles.scss";
-
-interface DragItem {
-  index: number;
-  type: string;
-}
-
-const ItemTypes = {
-  CARD: "card",
-};
-
-type CardProps = {
-  lr: LcrRoute;
-  index: number;
-  moveCard: (dragIndex: number, hoverIndex: number) => void;
-  updateLcrRoute: (index: number, key: string, value: unknown) => void;
-  updateLcrCarrierSetEntries: (
-    index1: number,
-    index2: number,
-    key: string,
-    value: unknown
-  ) => void;
-  handleRouteDelete: (lr: LcrRoute, index: number) => void;
-  carrierSelectorOptions: SelectorOption[];
-};
-
-export const Card = ({
-  lr,
-  index,
-  moveCard,
-  updateLcrRoute,
-  updateLcrCarrierSetEntries,
-  handleRouteDelete,
-  carrierSelectorOptions,
-}: CardProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [{ handlerId }, drop] = useDrop<
-    DragItem,
-    void,
-    { handlerId: Identifier | null }
-  >({
-    accept: ItemTypes.CARD,
-    collect(monitor) {
-      return {
-        handlerId: monitor.getHandlerId(),
-      };
-    },
-    hover(item: DragItem, monitor) {
-      if (!ref.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      // Determine rectangle on screen
-      const hoverBoundingRect = ref.current?.getBoundingClientRect();
-
-      // Get vertical middle
-      const hoverMiddleY =
-        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-
-      // Get pixels to the top
-      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
-
-      // Only perform the move when the mouse has crossed half of the items height
-      // When dragging downwards, only move when the cursor is below 50%
-      // When dragging upwards, only move when the cursor is above 50%
-
-      // Dragging downwards
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-
-      // Time to actually perform the action
-      moveCard(dragIndex, hoverIndex);
-
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      item.index = hoverIndex;
-    },
-  });
-
-  const [{ isDragging }, drag] = useDrag({
-    type: ItemTypes.CARD,
-    item: () => {
-      return { index };
-    },
-    collect: (monitor) => {
-      return { isDragging: monitor.isDragging() };
-    },
-  });
-
-  drag(drop(ref));
-
-  return (
-    <div
-      ref={ref}
-      className={`lcr lcr--route lcr-card lcr-card-${
-        isDragging ? "disappear" : "appear"
-      }`}
-      // eslint-disable-next-line react/no-unknown-property
-      handler-id={handlerId}
-    >
-      <div>
-        <input
-          id={`lcr_route_regex_${index}`}
-          name={`lcr_route_regex_${index}`}
-          type="text"
-          placeholder="Digit prefix or regex"
-          required
-          value={lr.regex || ""}
-          onChange={(e) => {
-            updateLcrRoute(index, "regex", e.target.value);
-          }}
-        />
-
-        <Selector
-          id={`lcr_carrier_set_entry_carrier_${index}`}
-          name={`lcr_carrier_set_entry_carrier_${index}`}
-          placeholder="Carrier"
-          value={
-            lr.lcr_carrier_set_entries && lr.lcr_carrier_set_entries.length > 0
-              ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
-                ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
-                : ""
-              : ""
-          }
-          required
-          options={carrierSelectorOptions}
-          onChange={(e) => {
-            updateLcrCarrierSetEntries(
-              index,
-              0,
-              "voip_carrier_sid",
-              e.target.value
-            );
-          }}
-        />
-      </div>
-      <button
-        className="btnty btn__delete"
-        title="Delete route"
-        type="button"
-        onClick={() => handleRouteDelete(lr, index)}
-      >
-        <Icon>
-          <Icons.Trash2 />
-        </Icon>
-      </button>
-    </div>
-  );
-};
-export default Card;
--- a/src/containers/internal/views/least-cost-routing/container.tsx
+++ b/src/containers/internal/views/least-cost-routing/container.tsx
@@ -1,94 +0,0 @@
-import React from "react";
-import { LcrRoute } from "src/api/types";
-import Card from "./card";
-import { hasLength } from "src/utils";
-import update from "immutability-helper";
-import { deleteLcrRoute } from "src/api";
-import { toastError, toastSuccess } from "src/store";
-import { SelectorOption } from "src/components/forms/selector";
-
-type ContainerProps = {
-  lcrRoute: [LcrRoute[], React.Dispatch<React.SetStateAction<LcrRoute[]>>];
-  carrierSelectorOptions: SelectorOption[];
-};
-
-export const Container = ({
-  lcrRoute: [lcrRoutes, setLcrRoutes],
-  carrierSelectorOptions,
-}: ContainerProps) => {
-  const moveCard = (dragIndex: number, hoverIndex: number) => {
-    setLcrRoutes((prevCards) =>
-      update(prevCards, {
-        $splice: [
-          [dragIndex, 1],
-          [hoverIndex, 0, prevCards[dragIndex]],
-        ],
-      })
-    );
-  };
-
-  const updateLcrRoute = (index: number, key: string, value: unknown) => {
-    setLcrRoutes(
-      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr))
-    );
-  };
-
-  const updateLcrCarrierSetEntries = (
-    index1: number,
-    index2: number,
-    key: string,
-    value: unknown
-  ) => {
-    setLcrRoutes(
-      lcrRoutes.map((lr, i) =>
-        i === index1
-          ? {
-              ...lr,
-              lcr_carrier_set_entries: lr.lcr_carrier_set_entries?.map(
-                (entry, j) =>
-                  j === index2
-                    ? {
-                        ...entry,
-                        [key]: value,
-                      }
-                    : entry
-              ),
-            }
-          : lr
-      )
-    );
-  };
-
-  const handleRouteDelete = (r: LcrRoute | undefined, index: number) => {
-    if (r && r.lcr_route_sid) {
-      deleteLcrRoute(r.lcr_route_sid)
-        .then(() => {
-          toastSuccess("Least cost routing rule successfully deleted");
-        })
-        .catch((error) => {
-          toastError(error);
-        });
-    }
-    setLcrRoutes(lcrRoutes.filter((g2, i) => i !== index));
-  };
-
-  return (
-    <>
-      {hasLength(lcrRoutes) &&
-        lcrRoutes.map((lr, i) => (
-          <Card
-            key={lr.lcr_route_sid || i}
-            lr={lr}
-            index={i}
-            moveCard={moveCard}
-            updateLcrRoute={updateLcrRoute}
-            updateLcrCarrierSetEntries={updateLcrCarrierSetEntries}
-            handleRouteDelete={handleRouteDelete}
-            carrierSelectorOptions={carrierSelectorOptions}
-          />
-        ))}
-    </>
-  );
-};
-
-export default Container;
--- a/src/containers/internal/views/least-cost-routing/delete.tsx
+++ b/src/containers/internal/views/least-cost-routing/delete.tsx
@@ -1,25 +0,0 @@
-import React from "react";
-import { P } from "@jambonz/ui-kit";
-import { Modal } from "src/components";
-import { Lcr } from "src/api/types";
-
-type DeleteProps = {
-  lcr: Lcr;
-  handleCancel: () => void;
-  handleSubmit: () => void;
-};
-
-export const DeleteLcr = ({ lcr, handleCancel, handleSubmit }: DeleteProps) => {
-  return (
-    <>
-      <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
-        <P>
-          Are you sure you want to delete least cost routing{" "}
-          <strong>{lcr.name}</strong>?
-        </P>
-      </Modal>
-    </>
-  );
-};
-
-export default DeleteLcr;
--- a/src/containers/internal/views/least-cost-routing/edit.tsx
+++ b/src/containers/internal/views/least-cost-routing/edit.tsx
@@ -1,36 +0,0 @@
-import React from "react";
-import { H1, M } from "@jambonz/ui-kit";
-import LcrForm from "./form";
-import { useApiData } from "src/api";
-import { Lcr, LcrRoute } from "src/api/types";
-import { useParams } from "react-router-dom";
-export const EditLcr = () => {
-  const params = useParams();
-  const [lcrData, lcrRefect, lcrError] = useApiData<Lcr>(
-    `Lcrs/${params.lcr_sid}`
-  );
-  const [lcrRouteData, lcrRouteRefect, lcrRouteError] = useApiData<LcrRoute[]>(
-    `LcrRoutes?lcr_sid=${params.lcr_sid}`
-  );
-  return (
-    <>
-      <H1 className="h2">Edit outbound call routes</H1>
-      <section>
-        <M>
-          Outbound call routing is used to select a carrier when there are
-          multiple carriers available.
-        </M>
-      </section>
-      <LcrForm
-        lcrDataMap={{ data: lcrData, refetch: lcrRefect, error: lcrError }}
-        lcrRouteDataMap={{
-          data: lcrRouteData,
-          refetch: lcrRouteRefect,
-          error: lcrRouteError,
-        }}
-      />
-    </>
-  );
-};
-
-export default EditLcr;
--- a/src/containers/internal/views/least-cost-routing/form.tsx
+++ b/src/containers/internal/views/least-cost-routing/form.tsx
@@ -1,474 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Button, ButtonGroup, Icon, MS, MXS } from "@jambonz/ui-kit";
-import { Icons, Section } from "src/components";
-import {
-  toastError,
-  toastSuccess,
-  useDispatch,
-  useSelectState,
-} from "src/store";
-import { MSG_REQUIRED_FIELDS } from "src/constants";
-import { setLocation } from "src/store/localStore";
-import { AccountSelect, Message, Selector } from "src/components/forms";
-import type {
-  Account,
-  Carrier,
-  Lcr,
-  LcrRoute,
-  UseApiDataMap,
-} from "src/api/types";
-import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
-import {
-  deleteLcr,
-  putLcr,
-  postLcrCreateRoutes,
-  putLcrUpdateRoutes,
-  useApiData,
-  useServiceProviderData,
-} from "src/api";
-import { USER_ACCOUNT, USER_ADMIN } from "src/api/constants";
-import { postLcr } from "src/api";
-import DeleteLcr from "./delete";
-import { Scope } from "src/store/types";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import Container from "./container";
-import { hasValue } from "src/utils";
-
-type LcrFormProps = {
-  lcrDataMap?: UseApiDataMap<Lcr>;
-  lcrRouteDataMap?: UseApiDataMap<LcrRoute[]>;
-};
-
-export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
-  const LCR_ROUTE_TEMPLATE: LcrRoute = {
-    lcr_route_sid: "",
-    regex: "",
-    lcr_sid: "",
-    priority: 0,
-    lcr_carrier_set_entries: [
-      {
-        lcr_route_sid: "",
-        voip_carrier_sid: "",
-        priority: 0,
-      },
-    ],
-  };
-
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-
-  const [errorMessage, setErrorMessage] = useState("");
-  const [lcrName, setLcrName] = useState("");
-  const [defaultLcrCarrier, setDefaultLcrCarrier] = useState("");
-  const [defaultLcrCarrierSetEntrySid, setDefaultLcrCarrierSetEntrySid] =
-    useState<string | null>();
-  const [defaultLcrRoute, setDefaultLcrRoute] = useState<LcrRoute | null>(null);
-  const [defaultCarrier, setDefaultCarrier] = useState("");
-  const [apiUrl, setApiUrl] = useState("");
-  const [accountSid, setAccountSid] = useState("");
-  const [isActive, setIsActive] = useState(true);
-  const [lcrRoutes, setLcrRoutes] = useState<LcrRoute[]>([LCR_ROUTE_TEMPLATE]);
-  const [previousLcrRoutes, setPreviousLcrRoutes] = useState<LcrRoute[]>([
-    LCR_ROUTE_TEMPLATE,
-  ]);
-  const [previouseLcr, setPreviousLcr] = useState<Lcr | null>();
-  const [accounts] = useServiceProviderData<Account[]>("Accounts");
-  const [lcrForDelete, setLcrForDelete] = useState<Lcr | null>();
-
-  const user = useSelectState("user");
-  const currentServiceProvider = useSelectState("currentServiceProvider");
-  const [carriers] = useApiData<Carrier[]>(apiUrl);
-
-  useEffect(() => {
-    setLocation();
-    if (currentServiceProvider) {
-      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
-      );
-    }
-  }, [user, currentServiceProvider, accountSid]);
-
-  const carrierSelectorOptions = useMemo(() => {
-    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
-      setAccountSid(user?.account_sid);
-    }
-
-    const carriersFiltered = carriers
-      ? carriers.filter((carrier) =>
-          accountSid
-            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null
-        )
-      : [];
-
-    const ret = carriersFiltered
-      ? carriersFiltered.map((c: Carrier, i) => {
-          if (i === 0) {
-            setDefaultCarrier(c.voip_carrier_sid);
-          }
-          return {
-            name: c.name,
-            value: c.voip_carrier_sid,
-          };
-        })
-      : [];
-    if (carriers && ret.length === 0) {
-      setErrorMessage(
-        accountSid
-          ? "There are no available carriers defined for this account"
-          : "There are no available carriers"
-      );
-    } else {
-      setErrorMessage("");
-    }
-    return ret;
-  }, [accountSid, carriers]);
-
-  if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
-    setLcrName(lcrDataMap.data.name || "");
-    setIsActive(lcrDataMap.data.is_active);
-    setPreviousLcr(lcrDataMap.data);
-  }
-
-  useMemo(() => {
-    let default_lcr_route_sid = "";
-    if (
-      lcrRouteDataMap &&
-      lcrRouteDataMap.data &&
-      lcrRouteDataMap.data !== previousLcrRoutes
-    ) {
-      setPreviousLcrRoutes(lcrRouteDataMap.data);
-      // Find default carrier
-      lcrRouteDataMap.data.forEach((lr) => {
-        lr.lcr_carrier_set_entries?.forEach((entry) => {
-          if (
-            entry.lcr_carrier_set_entry_sid ===
-            lcrDataMap?.data?.default_carrier_set_entry_sid
-          ) {
-            setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
-            setDefaultLcrCarrierSetEntrySid(
-              entry.lcr_carrier_set_entry_sid || null
-            );
-            default_lcr_route_sid = entry.lcr_route_sid || "";
-            setDefaultLcrRoute(lr);
-          }
-        });
-      });
-    }
-
-    if (lcrRouteDataMap && lcrRouteDataMap.data)
-      setLcrRoutes(
-        lcrRouteDataMap.data.filter(
-          (route) => route.lcr_route_sid !== default_lcr_route_sid
-        )
-      );
-  }, [lcrRouteDataMap?.data]);
-
-  const addLcrRoutes = () => {
-    const newLcrRoute = LCR_ROUTE_TEMPLATE;
-    const ls = [
-      ...lcrRoutes,
-      {
-        ...newLcrRoute,
-        priority: lcrRoutes.length,
-        lcr_carrier_set_entries: newLcrRoute.lcr_carrier_set_entries?.map(
-          (r) => ({
-            ...r,
-            voip_carrier_sid: defaultCarrier || carrierSelectorOptions[0].value,
-          })
-        ),
-      },
-    ];
-    setLcrRoutes(ls);
-  };
-
-  const getLcrPayload = (): Lcr => {
-    return {
-      name: lcrName,
-      is_active: isActive,
-      account_sid: accountSid,
-      service_provider_sid:
-        currentServiceProvider?.service_provider_sid || null,
-      default_carrier_set_entry_sid: defaultLcrCarrierSetEntrySid,
-    };
-  };
-
-  const handleLcrPost = () => {
-    const lcrPayload: Lcr = getLcrPayload();
-    postLcr(lcrPayload)
-      .then(({ json }) => {
-        const lcrsPayload = lcrRoutes.map((l, i) => ({
-          ...l,
-          lcr_carrier_set_entries: l.lcr_carrier_set_entries?.map((e) => ({
-            ...e,
-            voip_carrier_sid:
-              e.voip_carrier_sid ||
-              defaultCarrier ||
-              carrierSelectorOptions[0]?.value,
-          })),
-          lcr_sid: json.sid,
-          priority: i,
-        }));
-        lcrsPayload.push({
-          lcr_sid: json.sid,
-          regex: ".*",
-          description: "System Default Route",
-          priority: 9999,
-          lcr_carrier_set_entries: [
-            {
-              lcr_route_sid: "",
-              voip_carrier_sid:
-                defaultLcrCarrier || carrierSelectorOptions[0]?.value,
-              priority: 0,
-            },
-          ],
-        });
-        postLcrCreateRoutes(json.sid, lcrsPayload)
-          .then(() => {
-            if (lcrDataMap) {
-              toastSuccess("Least cost routing successfully updated");
-            } else {
-              toastSuccess("Least cost routing successfully created");
-              if (user?.access === Scope.admin) {
-                navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
-              } else {
-                navigate(
-                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`
-                );
-              }
-              // Update global state
-              dispatch({ type: "lcr" });
-            }
-          })
-          .catch(({ msg }) => {
-            toastError(msg);
-          });
-      })
-      .catch(({ msg }) => {
-        toastError(msg);
-      });
-  };
-
-  const handleLcrPut = () => {
-    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data.lcr_sid) {
-      // update LCR
-      const lcrPayload: Lcr = getLcrPayload();
-      putLcr(lcrDataMap.data.lcr_sid, lcrPayload).then(() => {
-        putLcrUpdateRoutes(lcrDataMap.data?.lcr_sid || "", [
-          ...lcrRoutes.map((r, i) => ({
-            ...r,
-            priority: i,
-          })),
-          ...(hasValue(defaultLcrRoute)
-            ? [
-                {
-                  ...defaultLcrRoute,
-                  lcr_carrier_set_entries:
-                    defaultLcrRoute.lcr_carrier_set_entries?.map((r) => ({
-                      ...r,
-                      voip_carrier_sid:
-                        defaultLcrCarrier ||
-                        r.voip_carrier_sid ||
-                        carrierSelectorOptions[0].value,
-                    })),
-                },
-              ]
-            : []),
-        ])
-          .then(() => {
-            toastSuccess("Least cost routing rule successfully updated");
-          })
-          .catch((error) => toastError(error));
-      });
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (lcrDataMap) {
-      handleLcrPut();
-    } else {
-      handleLcrPost();
-    }
-  };
-
-  const handleDelete = () => {
-    if (lcrForDelete) {
-      deleteLcr(lcrForDelete.lcr_sid || "")
-        .then(() => {
-          toastSuccess(
-            <>
-              Deleted least cost routing <strong>{lcrForDelete?.name}</strong>
-            </>
-          );
-          setLcrForDelete(null);
-          if (user?.access === Scope.admin) {
-            navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
-          } else {
-            navigate(`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`);
-          }
-          dispatch({ type: "lcr" });
-        })
-        .catch((error) => {
-          toastError(error.msg);
-        });
-    }
-  };
-
-  return (
-    <>
-      <Section slim>
-        <form
-          className={`form form--internal ${
-            !lcrDataMap?.data && lcrDataMap?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
-          <fieldset>
-            <MS>{MSG_REQUIRED_FIELDS}</MS>
-            {errorMessage && <Message message={errorMessage} />}
-          </fieldset>
-          <fieldset>
-            <div className="multi">
-              <div className="inp">
-                <label htmlFor="lcr_name">Name</label>
-                <input
-                  id="lcr_name"
-                  name="lcr_name"
-                  type="text"
-                  placeholder="name"
-                  value={lcrName}
-                  onChange={(e) => setLcrName(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>
-            <div className="sel sel--preset">
-              <label htmlFor="predefined_select">
-                Select a default outbound carrier<span>*</span>
-              </label>
-              <Selector
-                id="defailt_carrier"
-                name="defailt_carrier"
-                value={defaultLcrCarrier}
-                options={carrierSelectorOptions}
-                required
-                onChange={(e) => {
-                  setDefaultLcrCarrier(e.target.value);
-                }}
-              />
-            </div>
-          </fieldset>
-          {user?.scope === USER_ADMIN && (
-            <fieldset>
-              <AccountSelect
-                accounts={accounts}
-                account={[accountSid, setAccountSid]}
-                label="Used by"
-                required={false}
-                defaultOption={true}
-                disabled={lcrDataMap !== undefined}
-              />
-            </fieldset>
-          )}
-          <fieldset>
-            <label htmlFor="lcr_route">
-              Route based on first match<span>*</span>
-            </label>
-            <MXS>
-              <em>Drag and drop to rearrange the order.</em>
-            </MXS>
-            <label htmlFor="sip_gateways">Digit pattern / Carrier</label>
-            <DndProvider backend={HTML5Backend}>
-              <Container
-                lcrRoute={[lcrRoutes, setLcrRoutes]}
-                carrierSelectorOptions={carrierSelectorOptions}
-              />
-            </DndProvider>
-            <ButtonGroup left>
-              <button
-                className="btnty"
-                type="button"
-                title="Add route"
-                onClick={() => {
-                  addLcrRoutes();
-                }}
-              >
-                <Icon subStyle="teal">
-                  <Icons.Plus />
-                </Icon>
-              </button>
-            </ButtonGroup>
-          </fieldset>
-          <fieldset>
-            <div className="grid grid--col3">
-              <div className="grid__row">
-                <div>
-                  <ButtonGroup left>
-                    {user?.access === Scope.admin && (
-                      <Button
-                        small
-                        subStyle="grey"
-                        as={Link}
-                        to={ROUTE_INTERNAL_LEST_COST_ROUTING}
-                      >
-                        Cancel
-                      </Button>
-                    )}
-                    <Button
-                      type="submit"
-                      small
-                      disabled={carrierSelectorOptions.length === 0}
-                    >
-                      Save
-                    </Button>
-                  </ButtonGroup>
-                </div>
-                <div />
-                <div>
-                  {user?.scope !== USER_ADMIN &&
-                    lcrDataMap &&
-                    lcrDataMap.data &&
-                    lcrDataMap.data.lcr_sid && (
-                      <ButtonGroup right>
-                        <Button
-                          type="button"
-                          small
-                          subStyle="grey"
-                          onClick={() => {
-                            setLcrForDelete(lcrDataMap.data);
-                          }}
-                        >
-                          Delete
-                        </Button>
-                      </ButtonGroup>
-                    )}
-                </div>
-              </div>
-            </div>
-          </fieldset>
-        </form>
-      </Section>
-      {lcrForDelete && (
-        <DeleteLcr
-          lcr={lcrForDelete}
-          handleCancel={() => setLcrForDelete(null)}
-          handleSubmit={handleDelete}
-        />
-      )}
-    </>
-  );
-};
-
-export default LcrForm;
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -1,223 +0,0 @@
-import React, { useMemo } from "react";
-import { Button, H1, Icon, M } from "@jambonz/ui-kit";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { deleteLcr, useApiData, useServiceProviderData } from "src/api";
-// import { USER_ACCOUNT } from "src/api/constants";
-import type { Account, Lcr } from "src/api/types";
-import {
-  AccountFilter,
-  Icons,
-  SearchFilter,
-  Section,
-  Spinner,
-} from "src/components";
-import { ScopedAccess } from "src/components/scoped-access";
-import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
-import { toastSuccess, toastError, useSelectState } from "src/store";
-// import { getAccountFilter, setLocation } from "src/store/localStore";
-import { Scope } from "src/store/types";
-import {
-  hasLength,
-  hasValue,
-  useFilteredResults,
-  useScopedRedirect,
-} from "src/utils";
-import { USER_ACCOUNT } from "src/api/constants";
-import DeleteLcr from "./delete";
-
-export const Lcrs = () => {
-  const user = useSelectState("user");
-  useScopedRedirect(
-    Scope.admin,
-    `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`,
-    user,
-    "You do not have permissions to manage all outbound call routes"
-  );
-  const [lcrs, refetch] = useApiData<Lcr[]>("Lcrs");
-  const [filter, setFilter] = useState("");
-  const [accountSid, setAccountSid] = useState("");
-
-  const currentServiceProvider = useSelectState("currentServiceProvider");
-  const [lcr, setLcr] = useState<Lcr | null>();
-  const [accounts] = useServiceProviderData<Account[]>("Accounts");
-
-  const lcrsFiltered = useMemo(() => {
-    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
-      setAccountSid(user?.account_sid);
-      return lcrs;
-    }
-
-    return lcrs
-      ? lcrs.filter((lcr) =>
-          accountSid
-            ? lcr.account_sid === accountSid
-            : currentServiceProvider?.service_provider_sid
-            ? lcr.service_provider_sid ==
-              currentServiceProvider.service_provider_sid
-            : lcr.account_sid === null
-        )
-      : [];
-  }, [accountSid, lcrs]);
-  const filteredLcrs = useFilteredResults<Lcr>(filter, lcrsFiltered);
-
-  const handleDelete = () => {
-    if (lcr) {
-      deleteLcr(lcr.lcr_sid || "")
-        .then(() => {
-          toastSuccess(
-            <>
-              Deleted outbound call route <strong>{lcr?.name}</strong>
-            </>
-          );
-          setLcr(null);
-          refetch();
-        })
-        .catch((error) => {
-          toastError(error.msg);
-        });
-    }
-  };
-
-  return (
-    <>
-      <section className="mast">
-        <H1 className="h2">Outbound call routing</H1>
-        <Link
-          to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`}
-          title="Add a Least cost routing"
-        >
-          {" "}
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </Link>
-      </section>
-      <section>
-        <M>
-          Outbound call routing is used to select a carrier when there are
-          multiple carriers available.
-        </M>
-      </section>
-      <section className="filters filters--multi">
-        <SearchFilter placeholder="Filter lcrs" filter={[filter, setFilter]} />
-        <ScopedAccess user={user} scope={Scope.admin}>
-          <AccountFilter
-            account={[accountSid, setAccountSid]}
-            accounts={accounts}
-            label="Used by"
-            defaultOption
-          />
-        </ScopedAccess>
-      </section>
-      <Section {...(hasLength(filteredLcrs) && { slim: true })}>
-        <div className="list">
-          {!hasValue(filteredLcrs) && hasLength(accounts) ? (
-            <Spinner />
-          ) : hasLength(filteredLcrs) ? (
-            filteredLcrs.map((lcr) => (
-              <div className="item" key={lcr.lcr_sid}>
-                <div className="item__info">
-                  <div className="item__title">
-                    <ScopedAccess
-                      user={user}
-                      scope={
-                        !lcr.account_sid
-                          ? Scope.service_provider
-                          : Scope.account
-                      }
-                    >
-                      <Link
-                        to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`}
-                        title="Edit outbound call routes"
-                        className="i"
-                      >
-                        <strong>{lcr.name}</strong>
-                        <Icons.ArrowRight />
-                      </Link>
-                    </ScopedAccess>
-                  </div>
-                  <div className="item__meta">
-                    <div>
-                      <div
-                        className={`i txt--${lcr.is_active ? "teal" : "grey"}`}
-                      >
-                        {lcr.is_active ? (
-                          <Icons.CheckCircle />
-                        ) : (
-                          <Icons.XCircle />
-                        )}
-                        <span>{lcr.is_active ? "Active" : "Inactive"}</span>
-                      </div>
-                    </div>
-                    <div>
-                      <div className={`i txt--teal`}>
-                        <Icons.Activity />
-                        <span>
-                          {lcr.account_sid
-                            ? accounts?.find(
-                                (acct) => acct.account_sid === lcr.account_sid
-                              )?.name
-                            : currentServiceProvider?.name}
-                        </span>
-                      </div>
-                    </div>
-                    <div>
-                      <div className={`i txt--teal`}>
-                        <Icons.Share2 />
-                        <span>{`${
-                          lcr.number_routes && lcr.number_routes > 1
-                            ? lcr.number_routes - 1
-                            : 0
-                        } routes`}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <ScopedAccess
-                  user={user}
-                  scope={
-                    !lcr.account_sid ? Scope.service_provider : Scope.account
-                  }
-                >
-                  <div className="item__actions">
-                    <Link
-                      to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`}
-                      title="Edit Client"
-                    >
-                      <Icons.Edit3 />
-                    </Link>
-                    <button
-                      type="button"
-                      title="Delete outbound call route"
-                      onClick={() => setLcr(lcr)}
-                      className="btnty"
-                    >
-                      <Icons.Trash />
-                    </button>
-                  </div>
-                </ScopedAccess>
-              </div>
-            ))
-          ) : (
-            <M>No outbound call routes.</M>
-          )}
-        </div>
-      </Section>
-      <Section clean>
-        <Button small as={Link} to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`}>
-          Add outbound call routes
-        </Button>
-      </Section>
-      {lcr && (
-        <DeleteLcr
-          lcr={lcr}
-          handleCancel={() => setLcr(null)}
-          handleSubmit={handleDelete}
-        />
-      )}
-    </>
-  );
-};
-
-export default Lcrs;
--- a/src/containers/internal/views/least-cost-routing/styles.scss
+++ b/src/containers/internal/views/least-cost-routing/styles.scss
@@ -1,17 +0,0 @@
-.lcr-card {
-  background-color: white;
-  cursor: pointer;
-}
-
-.lcr-card:hover {
-  box-shadow: -7px 7px 5px #d5d7db, -5px -5px 10px #ffffff;
-  transform: translateY(-3px) translateX(-3px);
-}
-
-.lcr-card-appear {
-  opacity: 1;
-}
-
-.lcr-card-disappear {
-  opacity: 0;
-}
--- a/src/containers/internal/views/ms-teams-tenants/form.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/form.tsx
@@ -120,12 +120,7 @@ export const MsTeamsTenantForm = ({

  return (
    <Section slim>
-      <form
-        className={`form form--internal ${
-          !msTeamsTenant?.data && msTeamsTenant?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
--- 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--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter ms teams tenants"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/phone-numbers/form.tsx
+++ b/src/containers/internal/views/phone-numbers/form.tsx
@@ -141,12 +141,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !phoneNumber?.data && phoneNumber?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
          </fieldset>
--- 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--multi">
+      <section className="filters filters--spaced">
        <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
@@ -1,29 +0,0 @@
-import React from "react";
-import { RecentCall } from "src/api/types";
-
-export type CallDetailProps = {
-  call: RecentCall;
-};
-
-export const CallDetail = ({ call }: CallDetailProps) => {
-  return (
-    <>
-      <div className="item__details">
-        <div className="pre-grid">
-          {Object.keys(call).map((key) => (
-            <React.Fragment key={key}>
-              <div>{key}:</div>
-              <div>
-                {call[key as keyof typeof call]
-                  ? String(call[key as keyof typeof call])
-                  : "null"}
-              </div>
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default CallDetail;
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -1,150 +0,0 @@
-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 { RecentCall } from "src/api/types";
-import { getSpansFromJaegerRoot } from "./utils";
-
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: 100,
-    height: 100,
-  });
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowSize;
-}
-
-export type CallTracingProps = {
-  call: RecentCall;
-};
-
-export const CallTracing = ({ call }: CallTracingProps) => {
-  const [jaegerRoot, setJaegerRoot] = useState<JaegerRoot>();
-  const [jaegerGroup, setJaegerGroup] = useState<JaegerGroup>();
-  const windowSize = useWindowSize();
-
-  const getGroupsByParent = (spanId: string, groups: JaegerGroup[]) => {
-    groups.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
-    return groups.filter((value) => value.parentSpanId === spanId);
-  };
-
-  const getRootSpan = (spans: JaegerSpan[]) => {
-    const spanIds = spans.map((value) => value.spanId);
-    return spans.find((value) => spanIds.indexOf(value.parentSpanId) == -1);
-  };
-
-  const getRootGroup = (grps: JaegerGroup[]) => {
-    const spanIds = grps.map((value) => value.spanId);
-    return grps.find((value) => spanIds.indexOf(value.parentSpanId) == -1);
-  };
-
-  const calculateRatio = (span: JaegerSpan) => {
-    const { innerWidth } = window;
-    const durationMs =
-      (span.endTimeUnixNano - span.startTimeUnixNano) / 1_000_000;
-
-    if (durationMs > innerWidth) {
-      const offset = innerWidth > 1200 ? 3 : innerWidth > 800 ? 2.5 : 2;
-      return durationMs / (innerWidth - innerWidth / offset);
-    }
-
-    return 1;
-  };
-
-  const buildSpans = (root: JaegerRoot) => {
-    setJaegerRoot(root);
-    const spans = getSpansFromJaegerRoot(root);
-    const rootSpan = getRootSpan(spans);
-    if (rootSpan) {
-      const startTime = rootSpan.startTimeUnixNano;
-      const ratio = calculateRatio(rootSpan);
-      calculateRatio(rootSpan);
-      const groups: JaegerGroup[] = spans.map((span) => {
-        const level = 0;
-        const children: JaegerGroup[] = [];
-        const startMs = (span.startTimeUnixNano - startTime) / 1_000_000;
-        const durationMs =
-          (span.endTimeUnixNano - span.startTimeUnixNano) / 1_000_000;
-        const startPx = startMs / ratio;
-        const durationPx = durationMs / ratio;
-        const endPx = startPx + durationPx;
-        const endMs = startMs + durationMs;
-        return {
-          level,
-          children,
-          startPx,
-          endPx,
-          durationPx,
-          startMs,
-          endMs,
-          durationMs,
-          ...span,
-        };
-      });
-
-      const rootGroup = getRootGroup(groups);
-      if (rootGroup) {
-        rootGroup.children = buildChildren(
-          rootGroup.level + 1,
-          rootGroup,
-          groups
-        );
-        setJaegerGroup(rootGroup);
-      }
-    }
-  };
-
-  const buildChildren = (
-    level: number,
-    rootGroup: JaegerGroup,
-    groups: JaegerGroup[]
-  ): JaegerGroup[] => {
-    return getGroupsByParent(rootGroup.spanId, groups).map((group) => {
-      group.level = level;
-      group.children = buildChildren(group.level + 1, group, groups);
-      return group;
-    });
-  };
-
-  useEffect(() => {
-    if (call.trace_id && call.trace_id != "00000000000000000000000000000000") {
-      getJaegerTrace(call.account_sid, call.trace_id).then(({ json }) => {
-        if (json) {
-          buildSpans(json);
-        }
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (jaegerRoot) {
-      buildSpans(jaegerRoot);
-    }
-  }, [windowSize]);
-
-  if (jaegerGroup) {
-    return (
-      <>
-        <div className="item__details">
-          <div className="barGroup">
-            <Bar group={jaegerGroup} />
-          </div>
-        </div>
-      </>
-    );
-  }
-  return null;
-};
-
-export default CallTracing;
--- a/src/containers/internal/views/recent-calls/details.tsx
+++ b/src/containers/internal/views/recent-calls/details.tsx
@@ -2,15 +2,10 @@ import React, { useState } from "react";
 import dayjs from "dayjs";

 import { Icons } from "src/components";
-import { formatPhoneNumber, hasValue } from "src/utils";
+import { formatPhoneNumber } 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,13 +13,6 @@ type DetailsItemProps = {

 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">
@@ -40,7 +28,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:ss a")}
+                {dayjs(call.attempted_at).format("YYYY MM.DD hh:mm a")}
              </strong>
              <span className="i txt--dark">
                {call.direction === "inbound" ? (
@@ -67,29 +55,21 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
            </div>
          </div>
        </summary>
-        {call.trace_id === "00000000000000000000000000000000" ||
-        DISABLE_JAEGER_TRACING ? (
-          <CallDetail call={transformRecentCall(call)} />
-        ) : (
-          <Tabs active={[activeTab, setActiveTab]}>
-            <Tab id="details" label="Details">
-              <CallDetail call={transformRecentCall(call)} />
-            </Tab>
-            <Tab id="tracing" label="Tracing">
-              {open && <CallTracing call={call} />}
-            </Tab>
-          </Tabs>
-        )}
-        {open && (
-          <>
-            <div className="footer">
-              {hasValue(call.recording_url) && <Player call={call} />}
-              <div className="footer__buttons">
-                <PcapButton call={call} />
-              </div>
-            </div>
-          </>
-        )}
+        <div className="item__details">
+          <div className="pre-grid">
+            {Object.keys(call).map((key) => (
+              <React.Fragment key={key}>
+                <div>{key}:</div>
+                <div>
+                  {call[key as keyof typeof call]
+                    ? call[key as keyof typeof call].toString()
+                    : "null"}
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+          {open && <PcapButton call={call} />}
+        </div>
      </details>
    </div>
  );
--- a/src/containers/internal/views/recent-calls/index.tsx
+++ b/src/containers/internal/views/recent-calls/index.tsx
@@ -15,7 +15,6 @@ import {
  Spinner,
  Pagination,
  SelectFilter,
-  SearchFilter,
 } from "src/components";
 import { hasLength, hasValue } from "src/utils";
 import { DetailsItem } from "./details";
@@ -48,7 +47,6 @@ 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");
@@ -66,7 +64,6 @@ export const RecentCalls = () => {
        : { days: Number(dateFilter) }),
      ...(statusFilter !== "all" && { answered: statusFilter }),
      ...(directionFilter !== "io" && { direction: directionFilter }),
-      ...(filter && { filter }),
    };

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

  /** Reset page number when filters change */
  useEffect(() => {
@@ -146,11 +136,6 @@ 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/bar.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/bar.tsx
@@ -1,66 +0,0 @@
-import React, { useState } from "react";
-import { JaegerGroup } from "src/api/jaeger-types";
-
-import "./styles.scss";
-import { formattedDuration } from "./utils";
-import { JaegerDetail } from "./detail";
-import { ModalClose } from "src/components";
-import { P } from "@jambonz/ui-kit";
-
-type BarProps = {
-  group: JaegerGroup;
-};
-
-export const Bar = ({ group }: BarProps) => {
-  const [jaegerDetail, setJaegerDetail] = useState<JaegerGroup | null>(null);
-  const titleMargin = group.level * 30;
-
-  const truncate = (str: string) => {
-    if (str.length > 36) {
-      return str.substring(0, 36) + "...";
-    }
-    return str;
-  };
-
-  return (
-    <>
-      <div
-        className="barWrapper"
-        role={"presentation"}
-        onClick={() => setJaegerDetail(group)}
-      >
-        <div role="presentation" className="barWrapper__row">
-          <div
-            className="barWrapper__header"
-            style={{ paddingLeft: `${titleMargin}px` }}
-          >
-            {truncate(group.name)}
-          </div>
-          <button
-            className="barWrapper__span"
-            style={{
-              marginLeft: `${group.startPx}px`,
-              width: group.durationPx,
-            }}
-          />
-          <div className="barWrapper__duration">
-            {formattedDuration(group.durationMs)}
-          </div>
-        </div>
-      </div>
-      {jaegerDetail && (
-        <ModalClose handleClose={() => setJaegerDetail(null)}>
-          <div className="spanDetailsWrapper__header">
-            <P>
-              <strong>Span:</strong> {group.name.replaceAll(",", ", ")}
-            </P>
-          </div>
-          <JaegerDetail group={jaegerDetail} />
-        </ModalClose>
-      )}
-      {group.children.map((value) => (
-        <Bar key={value.spanId} group={value} />
-      ))}
-    </>
-  );
-};
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -1,71 +0,0 @@
-import React from "react";
-import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
-import dayjs from "dayjs";
-import "./styles.scss";
-import { formattedDuration } from "./utils";
-
-type JaegerDetailProps = {
-  group: JaegerGroup;
-};
-
-const extractSpanGroupValue = (value: JaegerValue): string => {
-  const ret = String(value.stringValue || value.doubleValue || value.boolValue);
-  // add white space for wrap the line
-  return ret.replaceAll(",", ", ");
-};
-
-export const JaegerDetail = ({ group }: JaegerDetailProps) => {
-  return (
-    <div className="spanDetailsWrapper">
-      <div className="spanDetailsWrapper__detailsWrapper">
-        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">
-            <strong>Span ID:</strong>
-          </div>
-          <div className="spanDetailsWrapper__details_body">{group.spanId}</div>
-        </div>
-        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">
-            <strong>Span Start:</strong>
-          </div>
-          <div className="spanDetailsWrapper__details_body">
-            {dayjs
-              .unix(group.startTimeUnixNano / 1000000000)
-              .format("DD/MM/YY HH:mm:ss.SSS")}
-          </div>
-        </div>
-        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">
-            <strong>Span End:</strong>
-          </div>
-          <div className="spanDetailsWrapper__details_body">
-            {dayjs
-              .unix(group.endTimeUnixNano / 1000000000)
-              .format("DD/MM/YY HH:mm:ss.SSS")}
-          </div>
-        </div>
-        {!(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>
-        )}
-
-        {group.attributes.map((attribute) => (
-          <div key={attribute.key} className="spanDetailsWrapper__details">
-            <div className="spanDetailsWrapper__details_header">
-              <strong>{attribute.key}</strong>:
-            </div>
-            <div className="spanDetailsWrapper__details_body">
-              {extractSpanGroupValue(attribute.value)}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
--- a/src/containers/internal/views/recent-calls/jaeger/styles.scss
+++ b/src/containers/internal/views/recent-calls/jaeger/styles.scss
@@ -1,124 +0,0 @@
-@use "src/styles/vars";
-@use "src/styles/mixins";
-@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
-
-.barGroup {
-  border-radius: ui-vars.$px01;
-  @include mixins.code();
-  text-align: left;
-  padding: ui-vars.$px03;
-  color: ui-vars.$pink;
-  background-color: ui-vars.$dark;
-  border-radius: ui-vars.$px01;
-  margin-top: ui-vars.$px02;
-  overflow-x: auto;
-  overflow-y: scroll;
-
-  @media (max-width: 600px) {
-    padding: 15px;
-    height: 40vh;
-  }
-}
-
-.barWrapper {
-  width: 100%;
-
-  &__row {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  &__row:hover {
-    font-weight: bolder;
-    color: ui-vars.$purple;
-  }
-
-  &__row:hover button {
-    font-weight: bolder;
-    background-color: ui-vars.$purple;
-    cursor: pointer;
-  }
-
-  &__header {
-    min-width: 400px;
-    height: 15px;
-    padding-top: 4px;
-    font-size: small;
-
-    @media (max-width: 600px) {
-      padding-top: 4px;
-      min-width: 250px;
-      font-size: x-small;
-    }
-  }
-
-  &__span {
-    padding-top: 4px;
-    height: 5px;
-    flex-shrink: 0;
-    vertical-align: middle;
-    border: 3px solid #444;
-    border-radius: 8px;
-    background-color: ui-vars.$jambonz;
-    min-width: 6px;
-  }
-
-  &__duration {
-    margin: 5px;
-    min-width: 150px;
-  }
-}
-
-.spanDetailsWrapper {
-  border-radius: ui-vars.$px01;
-  @include mixins.code();
-  text-align: left;
-  padding: ui-vars.$px01;
-  background-color: ui-vars.$white;
-  border-radius: ui-vars.$px01;
-  color: ui-vars.$dark;
-  font-size: ui-vars.$mxs-size;
-  max-width: ui-vars.$width-tablet-2;
-  max-height: 500px;
-  overflow-y: scroll;
-
-  &__detailsWrapper {
-    height: 100%;
-    padding: 10px;
-    font-size: 0.9em;
-
-    @media (max-width: 600px) {
-      padding: 5px;
-      font-size: 0.7em;
-    }
-
-    @media (min-width: 600px) {
-      padding: 15px;
-      font-size: 0.9em;
-    }
-  }
-
-  &__details {
-    display: flex;
-  }
-
-  &__details_header {
-    padding: 3px;
-    min-width: 150px;
-  }
-
-  &__details_body {
-    flex-grow: 1;
-    white-space: pre-line;
-    padding: 2px;
-    width: 100%;
-  }
-
-  &__header {
-    background-color: ui-vars.$white;
-    color: ui-vars.$jambonz;
-    padding: 5px 10px 10px 10px;
-    border-bottom: thin solid ui-vars.$grey;
-  }
-}
--- a/src/containers/internal/views/recent-calls/jaeger/utils.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/utils.tsx
@@ -1,16 +0,0 @@
-export const formattedDuration = (duration: number) => {
-  if (duration < 1) {
-    return (Math.round(duration * 100) / 100).toFixed(2) + "ms";
-  } else if (duration < 1000) {
-    return (Math.round(duration * 100) / 100).toFixed(0) + "ms";
-  } else if (duration >= 1000) {
-    const min = Math.floor((duration / 1000 / 60) << 0);
-    if (min == 0) {
-      const secs = parseFloat(`${duration / 1000}`).toFixed(2);
-      return `${secs}s`;
-    } else {
-      const sec = Math.floor((duration / 1000) % 60);
-      return `${min}m ${sec}s`;
-    }
-  }
-};
--- a/src/containers/internal/views/recent-calls/pcap.tsx
+++ b/src/containers/internal/views/recent-calls/pcap.tsx
@@ -1,32 +1,38 @@
 import React, { useEffect, useState } from "react";

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

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

 type PcapButtonProps = {
  call: RecentCall;
 };

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

  useEffect(() => {
-    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`,
+    getRecentCall(call.account_sid, call.sip_callid)
+      .then(({ json }) => {
+        if (json.total > 0) {
+          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);
            });
-          }
-        })
-        .catch((error) => {
-          toastError(error.msg);
-        });
-    }
+        }
+      })
+      .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
@@ -1,797 +0,0 @@
-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,
-  WaveSurferGatherSpeechVerbHookLatencyResult,
-  WaveSurferSttResult,
-  WaveSurferTtsLatencyResult,
-} from "src/api/jaeger-types";
-import {
-  getSpanAttributeByName,
-  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 [waveSurferTtsLatencyData, setWaveSurferTtsLatencyData] =
-    useState<WaveSurferTtsLatencyResult | null>();
-
-  const [
-    waveSurferGatherSpeechVerbHookLatencyData,
-    setWaveSurferGatherSpeechVerbHookLatencyData,
-  ] = useState<WaveSurferGatherSpeechVerbHookLatencyResult | 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 PEAKS_WINDOW = 5; // require 30 ms of speech energy over threshold to trigger
-  const PEAK_THRESHOLD = 0.03;
-
-  const getSilenceStartTime = (
-    start: number,
-    end: number,
-    channel: number
-  ): number => {
-    if (waveSurferRef.current) {
-      const duration = waveSurferRef.current.getDecodedData()?.duration;
-      if (duration && duration > 0) {
-        const maxLength = Math.round(duration * 8000) / 10; // evaluate speech energy every 10 ms
-        const peaks = waveSurferRef.current.exportPeaks({ maxLength });
-        if (peaks && peaks.length > channel) {
-          if (duration && duration > 0) {
-            const data = peaks[channel];
-            const startPeak = Math.ceil((start * data.length) / duration);
-            const endPeak = Math.ceil((end * data.length) / duration);
-            let count = 0;
-            for (let i = endPeak; i > startPeak; i--)
-              if (Math.abs(data[i]) > PEAK_THRESHOLD) {
-                count++;
-                if (count === PEAKS_WINDOW) {
-                  return (
-                    ((i + PEAKS_WINDOW) * duration) / data.length + 0.02 // add 20 ms adjustment
-                  );
-                }
-              } else {
-                count = 0;
-              }
-          }
-        }
-      }
-    }
-    return -1;
-  };
-
-  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 endSpeechTime = getSilenceStartTime(start, end, 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,
-            ...(endSpeechTime > 0 && { latency: end - endSpeechTime }),
-          };
-
-          const [sttResolve] = getSpanAttributeByName(
-            s.attributes,
-            "stt.resolve"
-          );
-          if (
-            endSpeechTime > 0 &&
-            sttResolve &&
-            sttResolve.value.stringValue === "speech"
-          ) {
-            const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-              id: s.spanId + "latency",
-              start: endSpeechTime,
-              end,
-              color: "rgba(255, 255, 0, 0.55)",
-              drag: false,
-              resize: false,
-              content: `${(end - endSpeechTime).toFixed(2)}s`,
-            });
-
-            changeRegionMouseStyle(latencyRegion, channel);
-          }
-        } 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: "",
-            };
-          }
-        }
-
-        const region = waveSurferRegionsPluginRef.current.addRegion({
-          id: s.spanId,
-          start,
-          end,
-          color: "rgba(255, 0, 0, 0.15)",
-          drag: false,
-          resize: false,
-        });
-
-        changeRegionMouseStyle(region, channel);
-
-        region.on("click", () => {
-          setWaveSurferRegionData(att);
-        });
-      }
-    }
-  };
-
-  const drawTtsLatencyRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
-    if (waveSurferRegionsPluginRef.current) {
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
-      if (!r) {
-        const start =
-          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        let end =
-          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-
-        const [ttsVendor] = getSpanAttributeByName(s.attributes, "tts.vendor");
-        const [ttsCache] = getSpanAttributeByName(s.attributes, "tts.cached");
-        const [streamLatency] = getSpanAttributeByName(
-          s.attributes,
-          "time_to_first_byte_ms"
-        );
-        if (streamLatency && streamLatency.value.stringValue) {
-          end = start + Number(streamLatency.value.stringValue) / 1_000;
-        }
-        if (ttsVendor && ttsCache && !Boolean(ttsCache.value.boolValue)) {
-          const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-            id: s.spanId,
-            start: start,
-            end,
-            color: "rgba(255, 155, 0, 0.55)",
-            drag: false,
-            resize: false,
-            content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
-          });
-
-          changeRegionMouseStyle(latencyRegion, 1);
-
-          latencyRegion.on("click", () => {
-            setWaveSurferTtsLatencyData({
-              vendor: ttsVendor.value.stringValue,
-              latency: `${(end - start).toFixed(2)}s`,
-              isCached: String(ttsCache.value.boolValue),
-            });
-          });
-        }
-      }
-    }
-  };
-
-  const drawVerbHookDelayRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
-    if (waveSurferRegionsPluginRef.current) {
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
-
-      if (!r) {
-        const start =
-          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        const end =
-          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        const tmpEnd = end - start < 0.05 ? start + 0.05 : end;
-
-        const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-          id: s.spanId,
-          start: start,
-          end: tmpEnd,
-          color: "rgba(255, 3, 180, 0.55)",
-          drag: false,
-          resize: false,
-          content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
-        });
-        const [statusCode] = getSpanAttributeByName(
-          s.attributes,
-          "http.statusCode"
-        );
-        changeRegionMouseStyle(latencyRegion, 0);
-        latencyRegion.on("click", () => {
-          setWaveSurferGatherSpeechVerbHookLatencyData({
-            statusCode: statusCode ? Number(statusCode.value.doubleValue) : 404,
-            latency: `${(end - start).toFixed(2)}s`,
-          });
-        });
-      }
-    }
-  };
-
-  function createMultiLineTextElement(text: string) {
-    const div = document.createElement("div");
-    div.style.paddingLeft = "10px";
-    div.style.paddingTop = "15px";
-    div.appendChild(document.createElement("br"));
-    div.appendChild(document.createTextNode(text));
-
-    return div;
-  }
-
-  const buildWavesurferRegion = () => {
-    if (jaegerRoot) {
-      const spans = getSpansFromJaegerRoot(jaegerRoot);
-      const start = getSpansByNameRegex(spans, /background-record:listen/);
-      const startPoint = start ? start[0] : null;
-      // there should be only one startPoint for background listen
-      if (startPoint) {
-        const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
-        gatherSpans.forEach((s) => {
-          drawSttRegionForSpan(s, startPoint);
-        });
-
-        // Trasscription
-        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
-          );
-        });
-        // DTMF
-        const dtmfSpans = getSpansByNameRegex(spans, /dtmf:/);
-        dtmfSpans.forEach((ds) => {
-          drawDtmfRegionForSpan(ds, startPoint);
-        });
-        // TTS delay
-        const ttsSpans = getSpansByNameRegex(spans, /tts-generation/);
-        ttsSpans.forEach((tts) => {
-          drawTtsLatencyRegion(tts, startPoint);
-        });
-
-        // Gather verb hook delay
-        const verbHookSpans = getSpansByNameRegex(spans, /verb:hook/);
-        verbHookSpans
-          .filter((s) => {
-            const [httpBody] = getSpanAttributeByName(
-              s.attributes,
-              "http.body"
-            );
-            return (
-              httpBody.value.stringValue.includes(
-                '"reason":"speechDetected"'
-              ) ||
-              httpBody.value.stringValue.includes('"reason":"dtmfDetected"')
-            );
-          })
-          .forEach((s) => {
-            drawVerbHookDelayRegion(s, startPoint);
-          });
-      }
-    }
-  };
-
-  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>Show latencies</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>
-              )}
-              {waveSurferRegionData.latency && (
-                <div className="spanDetailsWrapper__details">
-                  <div className="spanDetailsWrapper__details_header">
-                    <strong>Latency:</strong>
-                  </div>
-                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.latency.toFixed(2)} seconds
-                  </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>
-      )}
-      {waveSurferTtsLatencyData && (
-        <ModalClose handleClose={() => setWaveSurferTtsLatencyData(null)}>
-          <div className="spanDetailsWrapper__header">
-            <P>
-              <strong>Tts Latency</strong>
-            </P>
-          </div>
-          <div className="spanDetailsWrapper">
-            <div className="spanDetailsWrapper__detailsWrapper">
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Vendor:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.vendor}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Latency:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.latency}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>From Cache:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.isCached}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ModalClose>
-      )}
-      {waveSurferGatherSpeechVerbHookLatencyData && (
-        <ModalClose
-          handleClose={() => setWaveSurferGatherSpeechVerbHookLatencyData(null)}
-        >
-          <div className="spanDetailsWrapper__header">
-            <P>
-              <strong>Application Response Latency</strong>
-            </P>
-          </div>
-          <div className="spanDetailsWrapper">
-            <div className="spanDetailsWrapper__detailsWrapper">
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Status Code:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferGatherSpeechVerbHookLatencyData.statusCode}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Latency:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferGatherSpeechVerbHookLatencyData.latency}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ModalClose>
-      )}
-      {deleteRecordUrl && (
-        <Modal
-          handleCancel={() => setDeleteRecordUrl("")}
-          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
@@ -1,87 +0,0 @@
-@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
@@ -1,46 +0,0 @@
-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,66 +1,31 @@
 import React, { useEffect, useState } from "react";

-import { ButtonGroup, Button, MS, P } from "@jambonz/ui-kit";
-import {
-  useApiData,
-  postPasswordSettings,
-  postSystemInformation,
-  deleteTtsCache,
-} from "src/api";
-import { PasswordSettings, SystemInformation, TtsCache } from "src/api/types";
+import { ButtonGroup, Button } from "@jambonz/ui-kit";
+import { useApiData, postPasswordSettings } from "src/api";
+import { PasswordSettings } 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 [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);
  const [requireSpecialCharacter, setRequireSpecialCharacter] = useState(false);
-  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();
-
-    const systemInformationPayload: Partial<SystemInformation> = {
-      domain_name: domainName,
-      sip_domain_name: sipDomainName,
-      monitoring_domain_name: monitoringDomainName,
-    };
-    const passwordSettingsPayload: Partial<PasswordSettings> = {
+    const payload: Partial<PasswordSettings> = {
      min_password_length: minPasswordLength,
      require_digit: requireDigit ? 1 : 0,
      require_special_character: requireSpecialCharacter ? 1 : 0,
    };
-    Promise.all([
-      postSystemInformation(systemInformationPayload),
-      postPasswordSettings(passwordSettingsPayload),
-    ])
+    postPasswordSettings(payload)
      .then(() => {
        passwordSettingsFetcher();
-        systemInformationFetcher();
        toastSuccess("Password settings successfully updated");
      })
      .catch((error) => {
@@ -78,45 +43,10 @@ export const AdminSettings = () => {
        setMinPasswordLength(passwordSettings.min_password_length);
      }
    }
-    if (hasValue(systemInformation)) {
-      setDomainName(systemInformation.domain_name);
-      setSipDomainName(systemInformation.sip_domain_name);
-      setMonitoringDomainName(systemInformation.monitoring_domain_name);
-    }
-  }, [passwordSettings, systemInformation]);
+  }, [passwordSettings]);

  return (
    <>
-      <fieldset>
-        <label htmlFor="system_information">System Information</label>
-        <label htmlFor="name">Domain Name</label>
-        <input
-          id="domain_name"
-          type="text"
-          name="domain_name"
-          placeholder="Domain name"
-          value={domainName}
-          onChange={(e) => setDomainName(e.target.value)}
-        />
-        <label htmlFor="name">Sip Domain Name</label>
-        <input
-          id="sip_domain_name"
-          type="text"
-          name="sip_domain_name"
-          placeholder="Sip domain name"
-          value={sipDomainName}
-          onChange={(e) => setSipDomainName(e.target.value)}
-        />
-        <label htmlFor="name">Monitoring Domain Name</label>
-        <input
-          id="monitor_domain_name"
-          type="text"
-          name="monitor_domain_name"
-          placeholder="Monitoring domain name"
-          value={monitoringDomainName}
-          onChange={(e) => setMonitoringDomainName(e.target.value)}
-        />
-      </fieldset>
      <fieldset>
        <label htmlFor="min_password_length">Min password length</label>
        <Selector
@@ -148,23 +78,6 @@ 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>
@@ -172,14 +85,6 @@ 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,11 +19,7 @@ export const DeleteSpeechService = ({
  return (
    <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
      <P>
-        Are you sure you want to delete the{" "}
-        <strong>
-          {credential.vendor}
-          {credential.label ? ` (${credential.label})` : ""}
-        </strong>{" "}
+        Are you sure you want to delete the <strong>{credential.vendor}</strong>{" "}
        speech service?
      </P>
    </Modal>
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
--- a/src/containers/internal/views/speech-services/index.tsx
+++ b/src/containers/internal/views/speech-services/index.tsx
@@ -26,7 +26,6 @@ import type { SpeechCredential, Account } from "src/api/types";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
-import { VENDOR_CUSTOM } from "src/vendor";

 export const SpeechServices = () => {
  const user = useSelectState("user");
@@ -76,11 +75,7 @@ export const SpeechServices = () => {
          refetch();
          toastSuccess(
            <>
-              Deleted speech service{" "}
-              <strong>
-                {credential.vendor}
-                {credential.label ? ` (${credential.label})` : ""}
-              </strong>{" "}
+              Deleted speech service <strong>{credential.vendor}</strong>
            </>
          );
        })
@@ -112,7 +107,7 @@ export const SpeechServices = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--ender">
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
            account={[accountSid, setAccountSid]}
@@ -145,14 +140,7 @@ export const SpeechServices = () => {
                          title="Edit application"
                          className="i"
                        >
-                          <strong>
-                            Vendor:{" "}
-                            {credential.vendor.startsWith(VENDOR_CUSTOM)
-                              ? credential.vendor.substring(
-                                  VENDOR_CUSTOM.length + 1
-                                )
-                              : credential.vendor}
-                          </strong>
+                          <strong>Vendor: {credential.vendor}</strong>
                          <Icons.ArrowRight />
                        </Link>
                      </ScopedAccess>
@@ -199,14 +187,6 @@ 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/form.tsx
+++ b/src/containers/internal/views/users/form.tsx
@@ -122,7 +122,7 @@ export const UserForm = ({ user }: UserFormProps) => {
        account_sid:
          scope !== USER_ACCOUNT && currentUser?.scope !== USER_ACCOUNT
            ? null
-            : accountSid || currentUser?.account_sid,
+            : accountSid,
      })
        .then(() => {
          toastSuccess("User created successfully");
@@ -152,7 +152,7 @@ export const UserForm = ({ user }: UserFormProps) => {
        account_sid:
          scope !== USER_ACCOUNT && currentUser?.scope !== USER_ACCOUNT
            ? null
-            : accountSid || currentUser?.account_sid,
+            : accountSid,
      })
        .then(() => {
          user.refetch();
@@ -183,12 +183,7 @@ export const UserForm = ({ user }: UserFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !user?.data && user?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
          </fieldset>
--- 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--multi">
+      <section className="filters filters--mix">
        <section>
          <SearchFilter
            placeholder="Filter users"
--- a/src/containers/login/create-password.tsx
+++ b/src/containers/login/create-password.tsx
@@ -17,6 +17,7 @@ import {
  MSG_SOMETHING_WRONG,
  MSG_CAPSLOCK,
  MSG_PASSWD_MATCH,
+  MSG_PASSWD_CRITERIA,
 } from "src/constants";

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

    if (passwdSettings && !isValidPasswd(password, passwdSettings)) {
-      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>
-        </>
-      );
+      setMessage(MSG_PASSWD_CRITERIA);
      return;
    }

--- a/src/containers/login/forgot-password.tsx
+++ b/src/containers/login/forgot-password.tsx
@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import { Button, H1 } from "@jambonz/ui-kit";
-import { Message } from "src/components/forms";
-import { postForgotPassword } from "src/api";
-import { StatusCodes } from "src/api/types";
-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("");
-  const [email, setEmail] = useState("");
-  const navigate = useNavigate();
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    setMessage("");
-
-    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);
-        }
-      })
-      .catch((error) => {
-        setMessage(error.error);
-      });
-  };
-  return (
-    <>
-      <H1 className="h2">Forgot Password</H1>
-      <form className="form form--login" onSubmit={handleSubmit}>
-        <span>Enter your email and we will send you a password reset link</span>
-        <input
-          required
-          type="email"
-          name="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-
-        {message && <Message message={message} />}
-        <Button type="submit">Send me a reset password link</Button>
-      </form>
-    </>
-  );
-};
-
-export default ForgotPassword;
--- a/src/containers/login/login.tsx
+++ b/src/containers/login/login.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { Button, H1 } from "@jambonz/ui-kit";
-import { useLocation, Navigate, Link } from "react-router-dom";
+import { useLocation, Navigate } from "react-router-dom";

-import { toastError, toastSuccess } from "src/store";
-import { getToken, parseJwt, useAuth } from "src/router/auth";
+import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useAuth } from "src/router/auth";
 import {
  SESS_FLASH_MSG,
  SESS_OLD_PASSWORD,
@@ -13,26 +13,14 @@ import { Passwd, Message } from "src/components/forms";
 import {
  ROUTE_INTERNAL_ACCOUNTS,
  ROUTE_CREATE_PASSWORD,
-  ROUTE_FORGOT_PASSWORD,
-  ROUTE_REGISTER,
+  ROUTE_INTERNAL_APPLICATIONS,
 } from "src/router/routes";
-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";
+import { USER_ACCOUNT } from "src/api/constants";

 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("");
@@ -67,13 +55,13 @@ export const Login = () => {
        />
      );
    }
-    const userData: UserData = parseJwt(getToken());
+
    return (
      <Navigate
        to={
-          userData?.scope !== USER_ACCOUNT
+          user?.scope !== USER_ACCOUNT
            ? ROUTE_INTERNAL_ACCOUNTS
-            : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
+            : ROUTE_INTERNAL_APPLICATIONS
        }
        state={{ from: location }}
        replace
@@ -102,36 +90,6 @@ export const Login = () => {
        />
        {message && <Message message={message} />}
        <Button type="submit">Log in</Button>
-        {(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
@@ -1,95 +0,0 @@
-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
@@ -1,67 +0,0 @@
-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
@@ -1,54 +0,0 @@
-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
@@ -1,67 +0,0 @@
-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
@@ -1,97 +0,0 @@
-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
@@ -1,83 +0,0 @@
-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
@@ -1,24 +0,0 @@
-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 { getMe, postLogin, postLogout } from "src/api";
+import { postLogin } from "src/api";
 import { StatusCodes } from "src/api/types";
 import {
+  ROUTE_LOGIN,
  ROUTE_CREATE_PASSWORD,
  ROUTE_INTERNAL_ACCOUNTS,
-  ROUTE_LOGIN,
-  ROUTE_REGISTER_SUB_DOMAIN,
+  ROUTE_INTERNAL_APPLICATIONS,
 } from "./routes";
 import {
  SESS_OLD_PASSWORD,
@@ -23,13 +23,8 @@ import {
 } from "src/constants";

 import type { UserLogin } from "src/api/types";
-import { ENABLE_HOSTED_SYSTEM, USER_ACCOUNT } from "src/api/constants";
+import { 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>;
@@ -108,23 +103,7 @@ export const useProvideAuth = (): AuthStateContext => {
            setToken(token);
            userData = parseJwt(token);

-            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) {
+            if (response.json.force_change) {
              sessionStorage.setItem(SESS_USER_SID, response.json.user_sid);
              sessionStorage.setItem(SESS_OLD_PASSWORD, password);
              navigate(ROUTE_CREATE_PASSWORD);
@@ -132,7 +111,7 @@ export const useProvideAuth = (): AuthStateContext => {
              navigate(
                userData.scope !== USER_ACCOUNT
                  ? ROUTE_INTERNAL_ACCOUNTS
-                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
+                  : ROUTE_INTERNAL_APPLICATIONS
              );
            }

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

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

  const signout = () => {
-    return new Promise((resolve, reject) => {
-      postLogout()
-        .then((response) => {
-          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);
-          }
-        })
-        .catch((error) => {
-          localStorage.clear();
-          sessionStorage.clear();
-          sessionStorage.setItem(SESS_FLASH_MSG, MSG_LOGGED_OUT);
-          window.location.href = ROUTE_LOGIN;
-          if (error) {
-            reject(error);
-          }
-          reject(MSG_SOMETHING_WRONG);
-        });
-    });
+    localStorage.clear();
+    sessionStorage.clear();
+    sessionStorage.setItem(SESS_FLASH_MSG, MSG_LOGGED_OUT);
+    window.location.href = ROUTE_LOGIN;
  };

  return {
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -6,14 +6,9 @@ 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_HOSTED_SYSTEM,
-  ENABLE_FORGOT_PASSWORD,
-} from "src/api/constants";

 /** Login */
 import CreatePassword from "src/containers/login/create-password";
-import ForgotPassword from "src/containers/login/forgot-password";

 /** Top navi */
 import Users from "src/containers/internal/views/users";
@@ -42,21 +37,6 @@ import PhoneNumbersEdit from "src/containers/internal/views/phone-numbers/edit";
 import MSTeamsTenants from "src/containers/internal/views/ms-teams-tenants";
 import MSTeamsTenantsAdd from "src/containers/internal/views/ms-teams-tenants/add";
 import MSTeamsTenantsEdit from "src/containers/internal/views/ms-teams-tenants/edit";
-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");
@@ -76,30 +56,7 @@ export const Router = () => {
              </RequireAuth>
            }
          />
-          {ENABLE_FORGOT_PASSWORD && (
-            <>
-              <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>
@@ -122,26 +79,6 @@ 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
@@ -186,19 +123,6 @@ export const Router = () => {
                    path="ms-teams-tenants/:ms_teams_tenant_sid/edit"
                    element={<MSTeamsTenantsEdit />}
                  />
-                  <Route path="least-cost-routing" element={<Lcrs />} />
-                  <Route path="least-cost-routing/add" element={<LcrsAdd />} />
-                  <Route
-                    path="least-cost-routing/:lcr_sid/edit"
-                    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 />} />
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,14 +1,8 @@
 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";
@@ -16,4 +10,3 @@ export const ROUTE_INTERNAL_CARRIERS = "/internal/carriers";
 export const ROUTE_INTERNAL_SPEECH = "/internal/speech-services";
 export const ROUTE_INTERNAL_PHONE_NUMBERS = "/internal/phone-numbers";
 export const ROUTE_INTERNAL_MS_TEAMS_TENANTS = "/internal/ms-teams-tenants";
-export const ROUTE_INTERNAL_LEST_COST_ROUTING = "/internal/least-cost-routing";
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,10 +1,10 @@
-import { getLcrs, getServiceProviders } from "src/api";
+import { getServiceProviders } from "src/api";
 import { sortLocaleName } from "src/utils";
 import { getToken, parseJwt } from "src/router/auth";

 import type { State, Action, UserData } from "./types";
 import { Scope } from "./types";
-import { Lcr, ServiceProvider } from "src/api/types";
+import { ServiceProvider } from "src/api/types";

 /** A generic action assumes action.type is ALWAYS our state key */
 /** Since this is how we're designing our state interface we cool */
@@ -76,11 +76,3 @@ export const serviceProvidersAsyncAction = async (): Promise<
  const response = await getServiceProviders();
  return response.json;
 };
-
-export const lcrAsyncAction = async (): Promise<Lcr> => {
-  const { json } = await getLcrs();
-  if (json && json.length > 0) {
-    return json[0];
-  }
-  return {} as Lcr;
-};
--- a/src/store/index.tsx
+++ b/src/store/index.tsx
@@ -7,7 +7,6 @@ import {
  serviceProvidersAction,
  serviceProvidersAsyncAction,
  currentServiceProviderAction,
-  lcrAsyncAction,
 } from "./actions";

 import type {
@@ -37,14 +36,12 @@ export const initialState: State = {
 const reducer: React.Reducer<State, Action<keyof State>> = (state, action) => {
  switch (action.type) {
    case "user":
-    case "lcr":
    case "toast":
      return genericAction(state, action);
    case "serviceProviders":
      return serviceProvidersAction(state, action);
    case "currentServiceProvider":
      return currentServiceProviderAction(state, action);
-
    default:
      throw new Error();
  }
@@ -70,10 +67,6 @@ const middleware: MiddleWare = (dispatch) => {
        return userAsyncAction().then((payload) => {
          dispatch({ ...action, payload });
        });
-      case "lcr":
-        return lcrAsyncAction().then((payload) => {
-          dispatch({ ...action, payload });
-        });
      case "serviceProviders":
        return serviceProvidersAsyncAction().then((payload) => {
          dispatch({ ...action, payload });
--- a/src/store/localStore.ts
+++ b/src/store/localStore.ts
@@ -58,48 +58,6 @@ 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/store/types.ts
+++ b/src/store/types.ts
@@ -1,6 +1,6 @@
 import React from "react";

-import type { UserJWT, ServiceProvider, Lcr } from "src/api/types";
+import type { UserJWT, ServiceProvider } from "src/api/types";

 export type IMessage = string | JSX.Element;

@@ -39,8 +39,6 @@ export interface State {
  accessControl: ACL;
  /** available service providers */
  serviceProviders: ServiceProvider[];
-  /** Least route routing */
-  lcr?: Lcr;
  /** current selected service provider */
  currentServiceProvider?: ServiceProvider;
 }
--- a/src/styles/_filters.scss
+++ b/src/styles/_filters.scss
@@ -19,45 +19,14 @@
      grid-gap: ui-vars.$px02;
    }
  }
-  > :first-child {
-    margin-left: auto;
-  }
+
  &--multi {
    overflow-x: auto;
    white-space: nowrap;
    grid-gap: ui-vars.$px02;

-    @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;
-      }
+    > :first-child {
+      margin-left: auto;
    }
  }

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

    .msg {
      width: 100%;
@@ -105,10 +102,6 @@ fieldset {
    }
  }

-  &--blur {
-    pointer-events: none;
-  }
-
  label {
    @include ui-mixins.m();
    @include ui-mixins.font-medium();
@@ -214,7 +207,7 @@ fieldset {
  padding: ui-vars.$px02;
  border-radius: ui-vars.$px01;
  border: 2px solid ui-vars.$grey;
-  max-width: ui-vars.$width-mobile;
+  max-width: vars.$widthinput;
  position: relative;

  > div {
@@ -223,7 +216,7 @@ fieldset {
    align-items: center;

    &:nth-child(1) {
-      grid-template-columns: [col] calc(50% - #{ui-vars.$px02 * 2}) [col] 20% [col] 30%;
+      grid-template-columns: [col] calc(50% - #{ui-vars.$px02 * 2}) [col] 25% [col] 25%;

      @include mixins.small() {
        grid-template-columns: [col] 100%;
@@ -231,7 +224,7 @@ fieldset {
    }

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

      > div:last-child {
@@ -275,76 +268,3 @@ fieldset {
    }
  }
 }
-
-.lcr {
-  @extend .gateway;
-
-  > div {
-    display: grid;
-    grid-gap: ui-vars.$px02;
-    align-items: center;
-    margin-left: 3%;
-
-    &:nth-child(1) {
-      grid-template-columns: [col] calc(50% - #{ui-vars.$px02 * 2}) [col] 50%;
-
-      @include mixins.small() {
-        grid-template-columns: [col] 100%;
-      }
-    }
-  }
-}
-
-.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/Show More
+++ b/Show More