diff --git a/ui/components/Layout.tsx b/ui/components/Layout.tsx
index 3859b4007..fe6a1afbd 100644
--- a/ui/components/Layout.tsx
+++ b/ui/components/Layout.tsx
@@ -18,6 +18,9 @@ dynamic(import("ace-builds/src-noconflict/theme-monokai"), { ssr: false });
 const DynamicAceEditor = dynamic(import("react-ace"), { ssr: false });
 import SidebarWithHeader from "./Sidebar";
 import dynamic from "next/dynamic";
+import HTMLRenderer from "./template-renderers/html-renderer";
+import TransformData from "./transform-data";
+import { Transformers } from "../lib/utility";
 const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
 
 interface Props {
@@ -32,6 +35,18 @@ export function Layout(props: Props) {
 }
 
 export function MainLayout() {
+  const [template, setTemplate] = React.useState('');
+  const [JSONContent, setJSONContent] = React.useState({updated_src: {name:'hima'}} as any);
+  const [transformedData, setTransformedData] = React.useState(null as any);
+  const [selectedTransformer, setSelectedTransformer] = React.useState('' as any);
+  React.useEffect(()=>{
+    if(Transformers.hasTransformer(selectedTransformer)){
+      setTransformedData(Transformers.transform(selectedTransformer, JSONContent.updated_src));
+    }else{
+      setTransformedData(null);
+    }
+  }, [JSONContent, selectedTransformer]);
+  
   return (
     <SimpleGrid columns={2} spacing={3}>
       <Box bg="transparent" height="40vh">
@@ -39,21 +54,34 @@ export function MainLayout() {
           style={{ height: "100%", width: "100%" }}
           mode="html"
           theme="monokai"
-          onChange={() => {}}
+          value={template}
+          onChange={setTemplate}
           name="UNIQUE_ID_OF_DIV"
           editorProps={{ $blockScrolling: true }}
         />
       </Box>
-      <Box bg="tomato" height="40vh"></Box>
+      <Box height="40vh">
+        <HTMLRenderer template={template} content={transformedData || JSONContent?.updated_src || {}}/>
+      </Box>
       <Box bg="transparent" height="40vh">
         <DynamicReactJson
-          src={{}}
+          src={JSONContent?.updated_src || {}}
           theme={"ashes"}
           onAdd={(add) => {}}
-          onEdit={(edit) => {}} //TODO: update the data
+          onEdit={setJSONContent} //TODO: update the data
         />
       </Box>
-      <Box bg="tomato" height="40vh"></Box>
+      <Box height="40vh">
+        <TransformData selectedTransformer={selectedTransformer} onTransformerChange={setSelectedTransformer} content={JSONContent?.updated_src || {}}/>
+        <hr/>
+        {
+          transformedData &&  
+          <DynamicReactJson
+            src={transformedData}
+            theme={"ashes"}
+          />
+        }
+      </Box>
     </SimpleGrid>
   );
 }
diff --git a/ui/components/template-renderers/html-renderer.tsx b/ui/components/template-renderers/html-renderer.tsx
new file mode 100644
index 000000000..3380fcfde
--- /dev/null
+++ b/ui/components/template-renderers/html-renderer.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { replaceItemsInTheTemplate } from '../../lib/utility';
+const HTMLRenderer = (props: {template: string, content: any})=>{
+    
+    return <div dangerouslySetInnerHTML={{__html: replaceItemsInTheTemplate(props.template, props.content)}}/>;
+}
+export default HTMLRenderer;
\ No newline at end of file
diff --git a/ui/components/transform-data.tsx b/ui/components/transform-data.tsx
new file mode 100644
index 000000000..56af8734e
--- /dev/null
+++ b/ui/components/transform-data.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Select } from '@chakra-ui/react'
+import ReactJson from 'react-json-view'
+import dynamic from 'next/dynamic';
+// const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
+interface Props {
+    content: any,
+    selectedTransformer: string,
+    onTransformerChange : (transformer: string) =>void
+}
+const TransformData = (props: Props)=>{    
+    return <div>
+        <h5>Transformer</h5>
+        <Select placeholder='Select Transformer' onChange={(e)=>props.onTransformerChange(e.target.value)}>
+            <option value=''>Remove Transformer</option>
+            <option value={'capitalize'}>Capitalize</option>
+        </Select>
+
+    </div>;
+}
+export default TransformData;
\ No newline at end of file
diff --git a/ui/lib/utility.ts b/ui/lib/utility.ts
new file mode 100644
index 000000000..161dd7837
--- /dev/null
+++ b/ui/lib/utility.ts
@@ -0,0 +1,40 @@
+export const replaceItemsInTheTemplate=(template: string, content: any)=>{
+    if(content && template){
+        for(let c in content){
+            template = template.replaceAll(`{{${c}}}`, content[c]);
+        }
+    }
+    return template;
+}
+const  capitalizeFirstLetter = (string: string) =>{
+    return string ? string.charAt(0).toUpperCase() + string.slice(1) : '';
+  }
+  
+const capitalize  = (content: any)=>{
+    if(content){
+        for(let c in content){
+            content[c] = content[c]?.length ? capitalizeFirstLetter(content[c]) : content[c]   
+        }
+    }
+    return content;
+}
+interface TransformersInterface {
+    [key: string]: any
+}
+export class Transformers {
+    static TRANSFORMERS: TransformersInterface = {
+        capitalize
+    };
+    static hasTransformer (type: string){
+        // TODO : Axios call to fetch transformer based on Type as DID
+        return Transformers.TRANSFORMERS[type]
+    }
+    static transform(type: string, content: any){
+        const _transformer = Transformers.hasTransformer(type);
+        if(!content ||  !type || !_transformer){
+            return content;
+        }
+        let result = JSON.parse(JSON.stringify(content));
+        return _transformer(result);
+    }
+}
\ No newline at end of file
diff --git a/ui/public/sw.js.map b/ui/public/sw.js.map
index 8b61d8969..5a4cca3f9 100644
--- a/ui/public/sw.js.map
+++ b/ui/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../../private/var/folders/wm/4m6jd0hs10v1g_dysh6z5ml00000gn/T/33e96f9a99dd957b34d5ddd00a2335e8/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/chakshugautam/Work/Samarth-HP/templater/ui/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/chakshugautam/Work/Samarth-HP/templater/ui/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/chakshugautam/Work/Samarth-HP/templater/ui/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/chakshugautam/Work/Samarth-HP/templater/ui/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({request, response, event, state}) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, {status: 200, statusText: 'OK', headers: response.headers}); } return response; } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGuJ;EACvJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;EAUbC,IAAI,CAACC,WAAL;AAEAC,sBAAyB;AAIzBC,uBAA6B,CAAC,GAAD,EAAM,IAAIC,oBAAJ,CAAoC;EAAE,eAAY,WAAd;EAA2BC,EAAAA,OAAO,EAAE,CAAC;EAAEC,IAAAA,eAAe,EAAE,OAAO;EAACC,MAAAA,OAAD;EAAUC,MAAAA,QAAV;EAAoBC,MAAAA,KAApB;EAA2BC,MAAAA;EAA3B,KAAP,KAA6C;EAAE,UAAIF,QAAQ,IAAIA,QAAQ,CAACG,IAAT,KAAkB,gBAAlC,EAAoD;EAAE,eAAO,IAAIC,QAAJ,CAAaJ,QAAQ,CAACK,IAAtB,EAA4B;EAACC,UAAAA,MAAM,EAAE,GAAT;EAAcC,UAAAA,UAAU,EAAE,IAA1B;EAAgCC,UAAAA,OAAO,EAAER,QAAQ,CAACQ;EAAlD,SAA5B,CAAP;EAAiG;;EAAC,aAAOR,QAAP;EAAkB;EAA5O,GAAD;EAApC,CAApC,CAAN,EAAmU,KAAnU,CAA7B;AACAL,uBAA6B,CAAC,KAAD,EAAQ,IAAIc,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBZ,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../private/var/folders/rb/5xdh_gx928b4gtvp68gw5jdw0000gn/T/c516a70aae5ddf201941d56f2a294043/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/demonfox/templater/ui/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/demonfox/templater/ui/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/demonfox/templater/ui/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/demonfox/templater/ui/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({request, response, event, state}) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, {status: 200, statusText: 'OK', headers: response.headers}); } return response; } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGkI;EAClI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;EAUbC,IAAI,CAACC,WAAL;AAEAC,sBAAyB;AAIzBC,uBAA6B,CAAC,GAAD,EAAM,IAAIC,oBAAJ,CAAoC;EAAE,eAAY,WAAd;EAA2BC,EAAAA,OAAO,EAAE,CAAC;EAAEC,IAAAA,eAAe,EAAE,OAAO;EAACC,MAAAA,OAAD;EAAUC,MAAAA,QAAV;EAAoBC,MAAAA,KAApB;EAA2BC,MAAAA;EAA3B,KAAP,KAA6C;EAAE,UAAIF,QAAQ,IAAIA,QAAQ,CAACG,IAAT,KAAkB,gBAAlC,EAAoD;EAAE,eAAO,IAAIC,QAAJ,CAAaJ,QAAQ,CAACK,IAAtB,EAA4B;EAACC,UAAAA,MAAM,EAAE,GAAT;EAAcC,UAAAA,UAAU,EAAE,IAA1B;EAAgCC,UAAAA,OAAO,EAAER,QAAQ,CAACQ;EAAlD,SAA5B,CAAP;EAAiG;;EAAC,aAAOR,QAAP;EAAkB;EAA5O,GAAD;EAApC,CAApC,CAAN,EAAmU,KAAnU,CAA7B;AACAL,uBAA6B,CAAC,KAAD,EAAQ,IAAIc,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBZ,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file