diff --git a/frontend/components/TryOut/NMT.tsx b/frontend/components/TryOut/NMT.tsx
index 65cd3c2..76af935 100644
--- a/frontend/components/TryOut/NMT.tsx
+++ b/frontend/components/TryOut/NMT.tsx
@@ -1,6 +1,9 @@
 "use client";
 import { API_URL, LANGUAGE_CODE_NAMES } from "@/app/config";
-import { IndicTransliterate } from "@ai4bharat/indic-transliterate";
+import {
+  IndicTransliterate,
+  IndicTransliterateProps,
+} from "@ai4bharat/indic-transliterate";
 import {
   Button,
   Card,
@@ -52,6 +55,13 @@ interface LanguageCodeNames {
   [key: string]: string;
 }
 
+interface CustomIndicTransliterateProps extends IndicTransliterateProps {
+  customApiURL?: string;
+}
+
+const CustomIndicTransliterate =
+  IndicTransliterate as React.ComponentType<CustomIndicTransliterateProps>;
+
 export default function NMT({ services }: { services: any }) {
   const [service, setService] = useState(Object.keys(services)[0]);
   const [sourceLanguage, setSourceLanguage] = useState(
@@ -156,7 +166,8 @@ export default function NMT({ services }: { services: any }) {
             </VStack>
           </VStack>
           <VStack w={"full"}>
-            <IndicTransliterate
+            <CustomIndicTransliterate
+              customApiURL={"https://xlit-api1.ai4bharat.org/tl/"}
               enabled={sourceLanguage !== "en" && transliteration}
               renderComponent={(props) => <Textarea {...props} />}
               value={inputText}
diff --git a/frontend/components/TryOut/TTS.tsx b/frontend/components/TryOut/TTS.tsx
index c3208d8..4158f6f 100644
--- a/frontend/components/TryOut/TTS.tsx
+++ b/frontend/components/TryOut/TTS.tsx
@@ -18,7 +18,10 @@ import {
 import { LANGUAGE_CODE_NAMES } from "@/app/config";
 import axios from "axios";
 import { API_URL } from "@/app/config";
-import { IndicTransliterate } from "@ai4bharat/indic-transliterate";
+import {
+  IndicTransliterate,
+  IndicTransliterateProps,
+} from "@ai4bharat/indic-transliterate";
 import { useToast } from "@chakra-ui/react";
 import Feedback from "../Feedback";
 
@@ -58,6 +61,13 @@ interface LanguageCodeNames {
   [key: string]: string;
 }
 
+interface CustomIndicTransliterateProps extends IndicTransliterateProps {
+  customApiURL?: string;
+}
+
+const CustomIndicTransliterate =
+  IndicTransliterate as React.ComponentType<CustomIndicTransliterateProps>;
+
 export default function TTS({ services }: { services: any }) {
   const [service, setService] = useState(Object.keys(services)[0]);
   const [sourceLanguage, setSourceLanguage] = useState(
@@ -171,7 +181,8 @@ export default function TTS({ services }: { services: any }) {
             </VStack>
           </VStack>
           <VStack w={"full"}>
-            <IndicTransliterate
+            <CustomIndicTransliterate
+              customApiURL={"https://xlit-api1.ai4bharat.org/tl/"}
               enabled={sourceLanguage !== "en" && transliteration}
               renderComponent={(props) => <Textarea w={344} {...props} />}
               value={inputText}
diff --git a/frontend/components/TryOut/XLIT.tsx b/frontend/components/TryOut/XLIT.tsx
index c6035da..81884f3 100644
--- a/frontend/components/TryOut/XLIT.tsx
+++ b/frontend/components/TryOut/XLIT.tsx
@@ -16,7 +16,10 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { LANGUAGE_CODE_NAMES } from "@/app/config";
-import { IndicTransliterate } from "@ai4bharat/indic-transliterate";
+import {
+  IndicTransliterate,
+  IndicTransliterateProps,
+} from "@ai4bharat/indic-transliterate";
 import axios from "axios";
 import { API_URL } from "@/app/config";
 
@@ -24,6 +27,13 @@ interface LanguageCodeNames {
   [key: string]: string;
 }
 
+interface CustomIndicTransliterateProps extends IndicTransliterateProps {
+  customApiURL?: string;
+}
+
+const CustomIndicTransliterate =
+  IndicTransliterate as React.ComponentType<CustomIndicTransliterateProps>;
+
 const fetchTransliteration = async ({
   sourceLanguage,
   targetLanguage,
@@ -127,7 +137,8 @@ export default function XLIT({ services }: { services: any }) {
             </Select> */}
           </VStack>
           <VStack w={"full"}>
-            <IndicTransliterate
+            <CustomIndicTransliterate
+              customApiURL={"https://xlit-api1.ai4bharat.org/tl/"}
               enabled={sourceLanguage !== "en"}
               renderComponent={(props) => <Textarea {...props} />}
               value={inputText}