diff --git a/todo b/todo
index c8716fb..df9d853 100644
--- a/todo
+++ b/todo
@@ -4,5 +4,6 @@ Backend Features:
 - [x] Add long text for test case
 
 Frontend Features:
-- [ ] Add Optional Google transliterate for input https://developers.google.com/transliterate/v1/getting_started
+- [ ] Add menu to select transliteration options for text, when enabled
+- [x] Add Optional Google transliterate for input https://developers.google.com/transliterate/v1/getting_started
 - [x] Add MLTT font viewer http://www.fontsquirrel.com/tools/webfont-generator
diff --git a/www/index.html b/www/index.html
index 7b2fe2f..9c4c33f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="eng">
 
 <head>
   <meta charset="utf-8">
@@ -7,6 +7,7 @@
   <meta name="description"
     content="Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to corresponding ML-TT encoding.">
   <meta name="robots" content="index, follow" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="public/fonts/mlttkarthika/stylesheet.css" type="text/css" charset="utf-8" />
   <style>
diff --git a/www/index.js b/www/index.js
index f9e2513..16a4e6a 100644
--- a/www/index.js
+++ b/www/index.js
@@ -1,8 +1,9 @@
 import * as mlttConverter from 'unicode-to-mltt-converter';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as googleTransliterate from "google-input-tool";
 
-import { Box, Button, Heading, Grommet, TextArea, Paragraph } from 'grommet';
+import { Box, Button, Heading, Grommet, TextArea, Paragraph, CheckBox } from 'grommet';
 import { Sync, Copy } from 'grommet-icons';
 
 const theme = {
@@ -47,7 +48,9 @@ const App = _ => {
     const [charmapValue, setCharMapValue] = React.useState('');
     const [inputValue, setInputValue] = React.useState('');
     const [value, setValue] = React.useState('');
-    
+    const [doTransliterate, setDoTransliterate] = React.useState(false);
+    const [showCharMap, setShowCharMap] = React.useState(false);
+
     React.useEffect(() => {
         fetch("public/karthika.map").then((resp) => resp.text()).then((defaultCharmapVal) => {
             setCharMapValue(defaultCharmapVal);
@@ -56,6 +59,26 @@ const App = _ => {
 
     const resultTextAreaEl = React.useRef(null);
 
+    const transliterateAndSetInputValue = (text) => {
+        if (doTransliterate) {
+            const lastChar = text && text.substring(text.length - 1);
+            if (lastChar && lastChar === " " && text.length > inputValue.length) {
+                const words = text.split(" ");
+                const lastWord = words[words.length - 2];
+                const request = new XMLHttpRequest();
+                const inputLanguage = "ml-t-i0-und"; // malayalam
+                googleTransliterate(request, lastWord, inputLanguage, 8).then((transliteration) => {
+                    const [first_one] = transliteration;
+                    const newText = [...words.slice(0, words.length - 2), first_one, " "].join(" ");
+                    setInputValue(newText);
+                }).catch((err) => {
+                    console.error("[🛑 transliteration] ➡️ ", err);
+                });
+            }
+        }
+        setInputValue(text);
+    }
+
     const convert = () => {
         const text = mlttConverter.convert(inputValue, charmapValue);
         setValue(text);
@@ -81,25 +104,37 @@ const App = _ => {
                         pad={{ left: 'medium', right: 'small', vertical: 'small' }}
                         gap='small'
                     >
-                        <Paragraph fill>
-                        Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to 
-                        corresponding ML-TT encoding. It uses default Karthika font character mapping. 
+                        <Paragraph fill="horizontal">
+                            Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to
+                            corresponding ML-TT encoding. It uses default Karthika font character mapping.
                         </Paragraph>
-                        <TextArea
+                        <Box fill="horizontal" direction="row" gap="medium">
+                            <CheckBox
+                                checked={doTransliterate}
+                                label="Enable transliterate"
+                                onChange={event => setDoTransliterate(event.target.checked)}
+                            />
+                            <CheckBox
+                                checked={showCharMap}
+                                label="Show char map"
+                                onChange={event => setShowCharMap(event.target.checked)}
+                            />
+                        </Box>
+                        {showCharMap && <TextArea
                             rows="10"
                             size='xsmall'
                             placeholder='loading default char map...'
                             value={charmapValue}
                             onChange={event => setCharMapValue(event.target.value)}
-                        />
+                        />}
                         <TextArea
                             rows="10"
                             placeholder='type/paste unicode input here!'
                             value={inputValue}
-                            onChange={event => setInputValue(event.target.value)}
+                            onChange={event => transliterateAndSetInputValue(event.target.value)}
                         />
                         <TextArea
-                            style={value ? {fontFamily: "ml-ttkarthikanormal"} : {}}
+                            style={value ? { fontFamily: "ml-ttkarthikanormal" } : {}}
                             rows="10"
                             ref={resultTextAreaEl}
                             placeholder='click Convert to see the results here!'
diff --git a/www/package-lock.json b/www/package-lock.json
index e23bebf..97300e9 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -3931,6 +3931,11 @@
         }
       }
     },
+    "google-input-tool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/google-input-tool/-/google-input-tool-1.1.0.tgz",
+      "integrity": "sha512-7VZQcbmTU5PYpMQYn34sq1A3I+FOW7obmA+28YfeooK3TaIE2NZRCo52L8yIjaphDLRSbPh8/Wsus1WKAsv4JA=="
+    },
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
diff --git a/www/package.json b/www/package.json
index d5375dc..f9ce26a 100644
--- a/www/package.json
+++ b/www/package.json
@@ -13,6 +13,7 @@
   "author": "Aslam Ahammed <aslamplr@gmail.com>",
   "license": "(MIT OR Apache-2.0)",
   "dependencies": {
+    "google-input-tool": "^1.1.0",
     "grommet": "^2.11.1",
     "polished": "^3.4.4",
     "react": "^16.13.0",
