diff --git a/website/app/[lang]/pibrowser/explorer/block/[block]/dashboard.jsx b/website/app/[lang]/pibrowser/explorer/block/[block]/dashboard.jsx
index 6c1f0f1..2e309db 100644
--- a/website/app/[lang]/pibrowser/explorer/block/[block]/dashboard.jsx
+++ b/website/app/[lang]/pibrowser/explorer/block/[block]/dashboard.jsx
@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react"
 import { Server } from "stellar-sdk"
 import Link from "next/link"
-export default function Dashboard({block}){
+export default function Dashboard({block,transcript}){
     const [lang,setlang] = useState()
     const server = new Server(process.env['NEXT_PUBLIC_HORIZON_SERVER'])
     const [data,setdata] = useState(null)
@@ -24,7 +24,7 @@ export default function Dashboard({block}){
                 <tbody>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Hash
+                            {transcript.Hash}
                         </td>
                         <td className=" px-3 py-1 font-bold">
                             {data&&
@@ -35,7 +35,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Pre Hash
+                            {transcript.Pre}
                         </td>
                         <td className=" px-3 py-1">
                             {data &&
@@ -49,7 +49,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Operation
+                            {transcript.Operation}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -60,7 +60,7 @@ export default function Dashboard({block}){
 
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Transaction
+                            {transcript.Transaction}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -74,7 +74,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Base Fee
+                            {transcript.BaseFee}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -88,7 +88,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Base Reserve
+                            {transcript.BaseReserve}
                         </td>
                         <td className=" px-3 py-1">
                             {data&&
@@ -102,7 +102,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Fee Pool
+                            {transcript.FeePool}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -116,7 +116,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Total Pi
+                            {transcript.TotalPi}
                         </td>
                         <td className=" px-3 py-1">
                             {data&&
@@ -130,7 +130,7 @@ export default function Dashboard({block}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Protocol
+                            {transcript.Protocol}
                         </td>
                         <td className=" px-3 py-1">
                             {data&&
diff --git a/website/app/[lang]/pibrowser/explorer/block/[block]/page.jsx b/website/app/[lang]/pibrowser/explorer/block/[block]/page.jsx
index 8a42af8..a085453 100644
--- a/website/app/[lang]/pibrowser/explorer/block/[block]/page.jsx
+++ b/website/app/[lang]/pibrowser/explorer/block/[block]/page.jsx
@@ -10,18 +10,18 @@ export default async function BlockPage({params:{lang,block}}){
         <section className=" m-4 overflow-y-scroll h-full pb-28">
             <section className="my-2">
                 <div className="text-center text-2xl font-mono font-semibold border-b mx-4">
-                    Block {block}
+                    {transcript.explorer.block.Block} {block}
                     <Share block={block}/>
                 </div>
                 
                 <div className="text-center pb-2 text-purple-500 text-lg my-2 border-b mx-4" >
-                    <Dashboard block={block}/>                 
+                    <Dashboard block={block} transcript={transcript.explorer.block}/>                 
                 </div>
             </section>
 
             <section>
                 <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom">
-                    Transaction
+                {transcript.explorer.block.Transaction}
                 </div>
                 <Transaction block={block} transcript={transcript.explorer.transaction}/>
             </section>
diff --git a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/dashboard.jsx b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/dashboard.jsx
index 89d3cb6..8e8bfd9 100644
--- a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/dashboard.jsx
+++ b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/dashboard.jsx
@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react"
 import { Server } from "stellar-sdk"
 import Link from "next/link"
-export default function Dashboard({tx_hash}){
+export default function Dashboard({tx_hash,transcript}){
     const [lang,setlang] = useState()
     const server = new Server(process.env['NEXT_PUBLIC_HORIZON_SERVER'])
     const [data,setdata] = useState(null)
@@ -25,7 +25,7 @@ export default function Dashboard({tx_hash}){
                 <tbody>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Block
+                            {transcript.Block}
                         </td>
                         <td className=" px-3 py-1">
                             {data &&
@@ -39,7 +39,7 @@ export default function Dashboard({tx_hash}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Hash
+                            {transcript.Hash}
                         </td>
                         <td className=" px-3 py-1 font-bold">
                             {data&&
@@ -51,7 +51,7 @@ export default function Dashboard({tx_hash}){
                     
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Operation
+                            {transcript.Operation}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -61,7 +61,7 @@ export default function Dashboard({tx_hash}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Account
+                            {transcript.Account}
                         </td>
                         <td className=" px-3 py-1">
                             {data &&
@@ -75,7 +75,7 @@ export default function Dashboard({tx_hash}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Fee
+                            {transcript.Fee}
                         </td>
                         <td className=" px-3 py-1">
                         {data&&
@@ -89,13 +89,13 @@ export default function Dashboard({tx_hash}){
                     </tr>
                     <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                         <td className=" py-1 font-medium">
-                            Memo
+                            {transcript.Memo}
                         </td>
                         <td className=" px-3 py-1">
                             {data&&
                         <>
                         <span className="font-bold">
-                            {data.memo ? data.memo:<>None</>}
+                            {data.memo ? data.memo:<>{transcript.None}</>}
 
                         </span>
                         </>
@@ -107,14 +107,14 @@ export default function Dashboard({tx_hash}){
                         {data&&data.successful&&
                         <>
                         <span className=" inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-green-400 text-white rounded-full">
-                            Success
+                            {transcript.Success}
                         </span>
                         </>
                         }
                         {data&&!data.successful&&
                         <>
                         <span className=" inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-red-600 text-white rounded-full">
-                            Failed
+                            {transcript.Failed}
                         </span>
                         </>
                         }
diff --git a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/op.jsx b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/op.jsx
index 0940a5e..544adb9 100644
--- a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/op.jsx
+++ b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/op.jsx
@@ -33,7 +33,7 @@ export default function Operation({tx_hash,transcript}){
     return(
         <>
         <div className="text-center">
-            There has no Operation
+            {transcript.no}
         </div>
         </>
     )
@@ -43,9 +43,9 @@ export default function Operation({tx_hash,transcript}){
             <table className="w-full text-center table-fixed font-mono">
                 <thead className="border-b border-slate-400 text-lg">
                     <tr>
-                        <th>Account</th>
-                        <th>Type</th>
-                        <th>Detail</th>
+                        <th>{transcript.account}</th>
+                        <th>{transcript.operation}</th>
+                        <th>{transcript.detail}</th>
                     </tr>
                 </thead>
                 <tbody>
diff --git a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/page.jsx b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/page.jsx
index 457bac2..44c9932 100644
--- a/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/page.jsx
+++ b/website/app/[lang]/pibrowser/explorer/tx/[tx_hash]/page.jsx
@@ -11,7 +11,7 @@ export default async function TxPage({params:{lang,tx_hash}}){
         <section className=" m-4 overflow-y-scroll h-full pb-28">
             <section className="my-2">
                 <div className="text-center text-2xl font-mono font-semibold border-b mx-4">
-                    Transaction 
+                    {transcript.explorer.transaction.Transaction} 
                     <div className=" break-words">
                         {tx_hash}
                     </div>
@@ -19,13 +19,13 @@ export default async function TxPage({params:{lang,tx_hash}}){
                 </div>
                 
                 <div className="text-center pb-2 text-purple-500 text-lg my-2 border-b mx-4" >
-                    <Dashboard tx_hash={tx_hash}/>                 
+                    <Dashboard tx_hash={tx_hash} transcript={transcript.explorer.transaction}/>                 
                 </div>
             </section>
 
             <section className="mx-2">
                 <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom">
-                    Operation
+                {transcript.explorer.transaction.op}
                 </div>
             <Operation tx_hash={tx_hash} transcript={transcript.explorer.operation}/>
             </section>
diff --git a/website/app/[lang]/pibrowser/statistic/block.jsx b/website/app/[lang]/pibrowser/statistic/block.jsx
index fbeedd1..7f4b0cb 100644
--- a/website/app/[lang]/pibrowser/statistic/block.jsx
+++ b/website/app/[lang]/pibrowser/statistic/block.jsx
@@ -36,7 +36,7 @@ import { Line } from "react-chartjs-2"
     },
   };
 
-export default function Block({data}){
+export default function Block({data,transcript}){
     if(!data) return
     const [filter,setfilter] = useState([])
     const [range,setrange] = useState('all')
@@ -57,14 +57,14 @@ export default function Block({data}){
             {
                 datasets: [
                   {
-                    label: 'AverageClosedTime',
+                    label: transcript.closed,
                     data: filter,
                     borderColor: 'rgb(255, 99, 132)',
                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
                     yAxisID: 'y',
                   },
                   {
-                    label: 'TotalOperation',
+                    label: transcript.op,
                     data: filter,
                     borderColor: 'rgb(53, 162, 235)',
                     backgroundColor: 'rgba(53, 162, 235, 0.5)',
@@ -81,13 +81,13 @@ export default function Block({data}){
     return(
         <>
         <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom ">
-            Block Performance
+            {transcript.title}
         </div>
         <div className="flex items-center justify-center mb-3">
             <div className="inline-flex shadow-md hover:shadow-lg focus:shadow-lg" role="group">
-                <button type="button" className="rounded-l inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('m')}>Month</button>
-                <button type="button" className="inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('y')}>Year</button>
-                <button type="button" className="rounded-r inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('all')}>All</button>
+                <button type="button" className="rounded-l inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('m')}>{transcript.Month}</button>
+                <button type="button" className="inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('y')}>{transcript.Year}</button>
+                <button type="button" className="rounded-r inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('all')}>{transcript.ALL}</button>
             </div>
         </div>
         <div className="h-48">
diff --git a/website/app/[lang]/pibrowser/statistic/claimant.jsx b/website/app/[lang]/pibrowser/statistic/claimant.jsx
index d4dfb82..fcc97a7 100644
--- a/website/app/[lang]/pibrowser/statistic/claimant.jsx
+++ b/website/app/[lang]/pibrowser/statistic/claimant.jsx
@@ -4,7 +4,7 @@ import Chart from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
 import { Line } from "react-chartjs-2"
 
-export default function Claimant({data}){
+export default function Claimant({data,transcript}){
     if(!data) return
     const [option,setoption] = useState(null)
     const [range,setrange] = useState('all')
@@ -16,7 +16,8 @@ export default function Claimant({data}){
         setoption({
             maintainAspectRatio : false,
             interaction: {
-              mode: 'x',
+              mode: 'nearest',
+              axis:'x',
               intersect: false,
             },
             stacked: false,
@@ -48,21 +49,21 @@ export default function Claimant({data}){
             {
                 datasets: [
                   {
-                    label: 'Unlock',
+                    label: transcript.Unlock,
                     data: data.claimedMonth,
                     borderColor: 'rgb(255, 99, 132)',
                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
                     yAxisID: 'y1',
                   },
                   {
-                    label: 'Migrate Operation',
+                    label: transcript.Migrateop,
                     data: data.createclaimantMonth,
                     borderColor: 'rgb(53, 162, 235)',
                     backgroundColor: 'rgba(53, 162, 235, 0.5)',
                     yAxisID: 'y',
                   },
                   {
-                    label: 'CT Claimed Back',
+                    label: transcript.CTclaim,
                     data: data.claimedbackMonth,
                     borderColor: 'rgb(148, 126, 176)',
                     backgroundColor: 'rgba(148, 126, 176, 0.5)',
@@ -115,21 +116,21 @@ export default function Claimant({data}){
             {
                 datasets: [
                   {
-                    label: 'Unlock',
+                    label: transcript.Unlock,
                     data: data.claimed,
                     borderColor: 'rgb(255, 99, 132)',
                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
                     yAxisID: 'y1',
                   },
                   {
-                    label: 'lock',
+                    label: transcript.lock,
                     data: data.createclaimant,
                     borderColor: 'rgb(53, 162, 235)',
                     backgroundColor: 'rgba(53, 162, 235, 0.5)',
                     yAxisID: 'y',
                   },
                   {
-                    label: 'CT Claimed Back',
+                    label: transcript.CTclaim ,
                     data: data.claimedback,
                     borderColor: 'rgb(148, 126, 176)',
                     backgroundColor: 'rgba(148, 126, 176, 0.5)',
@@ -178,21 +179,21 @@ export default function Claimant({data}){
             {
                 datasets: [
                   {
-                    label: 'Unlock',
+                    label: transcript.Unlock,
                     data: data.claimedMonth,
                     borderColor: 'rgb(255, 99, 132)',
                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
                     yAxisID: 'y1',
                   },
                   {
-                    label: 'lock',
+                    label: transcript.lock,
                     data: data.createclaimantMonth,
                     borderColor: 'rgb(53, 162, 235)',
                     backgroundColor: 'rgba(53, 162, 235, 0.5)',
                     yAxisID: 'y',
                   },
                   {
-                    label: 'CT Claimed Back',
+                    label: transcript.CTclaim,
                     data: data.claimedbackMonth,
                     borderColor: 'rgb(148, 126, 176)',
                     backgroundColor: 'rgba(148, 126, 176, 0.5)',
@@ -206,13 +207,13 @@ export default function Claimant({data}){
     return(
         <>
         <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom ">
-            Migrate Frequency
+            {transcript.title}
         </div>
         <div className="flex items-center justify-center mb-3">
             <div className="inline-flex shadow-md hover:shadow-lg focus:shadow-lg" role="group">
-                <button type="button" className="rounded-l inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('m')}>Month</button>
-                <button type="button" className="inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('y')}>Year</button>
-                <button type="button" className="rounded-r inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('all')}>All</button>
+                <button type="button" className="rounded-l inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('m')}>{transcript.Month}</button>
+                <button type="button" className="inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('y')}>{transcript.Year}</button>
+                <button type="button" className="rounded-r inline-block px-6 py-2.5 bg-yellow-400 text-white font-medium text-xs leading-tight uppercase hover:bg-yellow-600 focus:bg-yellow-600 focus:outline-none focus:ring-0 active:bg-yellow-700 transition duration-150 ease-in-out" onClick={()=>setrange('all')}>{transcript.ALL}</button>
             </div>
         </div>
         <div className="h-48">
diff --git a/website/app/[lang]/pibrowser/statistic/locktime.jsx b/website/app/[lang]/pibrowser/statistic/locktime.jsx
index d8cebfb..9f2f725 100644
--- a/website/app/[lang]/pibrowser/statistic/locktime.jsx
+++ b/website/app/[lang]/pibrowser/statistic/locktime.jsx
@@ -4,7 +4,7 @@ import Chart from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
 import { Doughnut } from "react-chartjs-2"
 
-export default function LockTime({data}){
+export default function LockTime({data,transcript}){
     if(!data) return
     const option = {
         maintainAspectRatio : false,
@@ -29,10 +29,10 @@ export default function LockTime({data}){
     useEffect(()=>{
         if(!dataset) return
         settidydata({
-            labels:['No Lock','Two weeks','Six Month','One Year','Three Years'],
+            labels:[transcript.No,transcript.two_week,transcript.six_month,transcript.oneyear,transcript.threeyears],
             datasets: [
                 {
-                label:'Pioneers',
+                label:transcript.Pioneers,
                 data: dataset,
                 backgroundColor: [
                     'rgba(255, 99, 132, 0.2)',
@@ -59,7 +59,7 @@ export default function LockTime({data}){
     return(
         <>
         <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom ">
-            LockUP Period
+            {transcript.title}
         </div>
         <div className="h-40">
         <Doughnut data={tidydata} options={option} />
diff --git a/website/app/[lang]/pibrowser/statistic/operation.jsx b/website/app/[lang]/pibrowser/statistic/operation.jsx
index 2262a65..152aa65 100644
--- a/website/app/[lang]/pibrowser/statistic/operation.jsx
+++ b/website/app/[lang]/pibrowser/statistic/operation.jsx
@@ -4,7 +4,7 @@ import Chart from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
 import { Doughnut } from "react-chartjs-2"
 
-export default function Distribute({data}){
+export default function Distribute({data,transcript}){
     if(!data) return
     const option = {
         maintainAspectRatio : false,
@@ -18,20 +18,22 @@ export default function Distribute({data}){
     const [label,setlabel] = useState([])
     const [dataset,setdataset] = useState([])
     useEffect(()=>{
+        setdataset([])
+        setlabel([])
         data.opdistribute.map(data=>{
             setdataset(predata=>[...predata,data.total])
             switch (data.op) {
                 case 0:                    
-                    setlabel(predata=>[...predata,'create_account'])
+                    setlabel(predata=>[...predata,transcript.type.create_account])
                     break;
                 case 1:
-                    setlabel(predata=>[...predata,'payment'])
+                    setlabel(predata=>[...predata,transcript.type.payment])
                     break;
                 case 14:
-                    setlabel(predata=>[...predata,'create_claimant'])
+                    setlabel(predata=>[...predata,transcript.type.create_claimable_balance])
                     break;
                 case 15:
-                    setlabel(predata=>[...predata,'claim_claimable_balance'])
+                    setlabel(predata=>[...predata,transcript.type.claim_claimable_balance])
                     break;
                 default:
                     setlabel(predata=>[...predata,data.op])
@@ -46,7 +48,7 @@ export default function Distribute({data}){
             labels:label,
             datasets: [
                 {
-                label:'Total',
+                label:transcript.Total,
                 data: dataset,
                 backgroundColor: [
                     'rgba(255, 99, 132, 0.2)',
@@ -73,7 +75,7 @@ export default function Distribute({data}){
     return(
         <>
         <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom ">
-            Total Operation Distribute
+            {transcript.title}
         </div>
         <div className="h-40">
         <Doughnut data={tidydata} options={option} />
diff --git a/website/app/[lang]/pibrowser/statistic/page.jsx b/website/app/[lang]/pibrowser/statistic/page.jsx
index b125d60..9d79daa 100644
--- a/website/app/[lang]/pibrowser/statistic/page.jsx
+++ b/website/app/[lang]/pibrowser/statistic/page.jsx
@@ -19,6 +19,7 @@ export async function generateStaticParams() {
 }
 
 export default async function StatisticPage({params:{lang}}){
+    const transcript = await import(`locales/${lang}.json`);
     const db = admin.firestore();
     const data = await db.collection('statistic').doc('data').get()
     let dataobj = data.data()
@@ -65,14 +66,14 @@ export default async function StatisticPage({params:{lang}}){
             
             <div className={roboto_Mono.className+' w-full'}>
             <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom">
-            METRICS
+            {transcript.statistic.Metrics.title}
             </div>
                 <div className=" rounded-md overflow-hidden shadow-lg mb-4">
                     <table className="w-full text-center table-fixed">
                         <tbody>
                             <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                                 <td className=" py-2 font-medium">
-                                    Total Account
+                                    {transcript.statistic.Metrics.TotalAccount}
                                 </td>
                                 <td className=" px-3 py-2">
                                     {Number.parseInt(dataobj.metric.TotalAccount).toLocaleString("en-US")}
@@ -80,7 +81,7 @@ export default async function StatisticPage({params:{lang}}){
                             </tr>
                             <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                                 <td className=" py-2 font-medium">
-                                    Total Pioneer
+                                    {transcript.statistic.Metrics.TotalPioneer}
                                 </td>
                                 <td className=" px-3 py-2">
                                     {totalpioneer}
@@ -88,7 +89,7 @@ export default async function StatisticPage({params:{lang}}){
                             </tr>
                             <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                                 <td className="  py-2 font-medium">
-                                    Migrated Pi
+                                {transcript.statistic.Metrics.MigratedPi}
                                 </td>
                                 <td className=" px-3 py-2 text-xs">
                                     {Number.parseFloat(dataobj.metric.TotalPi).toLocaleString("en-US",{maximumFractionDigits:7})} Pi
@@ -96,7 +97,7 @@ export default async function StatisticPage({params:{lang}}){
                             </tr>
                             <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                                 <td className="  py-2 font-medium">
-                                    Pioneer Hold
+                                {transcript.statistic.Metrics.PioneerHold}
                                 </td>
                                 <td className=" px-3 py-2 text-xs">
                                     {Number.parseFloat(dataobj.metric.TotalClaim).toLocaleString("en-US",{maximumFractionDigits:7})} Pi
@@ -104,7 +105,7 @@ export default async function StatisticPage({params:{lang}}){
                             </tr>
                             <tr className="border-b border-[#F7E4BE] bg-[#FBF2DE] text-neutral-800">
                                 <td className="  py-2 font-medium">
-                                    Pi Locked
+                                {transcript.statistic.Metrics.PiLocked}
                                 </td>
                                 <td className=" px-3 py-2 text-xs">
                                     {Number.parseFloat(dataobj.metric.TotalLock).toLocaleString("en-US",{maximumFractionDigits:7})} Pi
@@ -115,19 +116,19 @@ export default async function StatisticPage({params:{lang}}){
                 </div>
             </div>
 
-            <Top10 data={dataobj} lang={lang}/>
+            <Top10 data={dataobj} lang={lang} transcript={transcript.statistic.TOP10}/>
 
             <div className="w-full">
-                <Claimant data={dataobj}/>
+                <Claimant data={dataobj} transcript={transcript.statistic.Migrate}/>
             </div>
             <div className="w-full">
-                <Block data={dataobj}/>
+                <Block data={dataobj} transcript={transcript.statistic.Block}/>
             </div>
             <div className="w-full">
-                <Distribute data={dataobj}/>
+                <Distribute data={dataobj} transcript={transcript.statistic.Operation}/>
             </div>
             <div className="w-full">
-                <LockTime data={dataobj}/>
+                <LockTime data={dataobj} transcript={transcript.statistic.LockUP}/>
             </div>
         </div>        
         </>
diff --git a/website/app/[lang]/pibrowser/statistic/top10.jsx b/website/app/[lang]/pibrowser/statistic/top10.jsx
index c6d5df7..fe7a413 100644
--- a/website/app/[lang]/pibrowser/statistic/top10.jsx
+++ b/website/app/[lang]/pibrowser/statistic/top10.jsx
@@ -4,18 +4,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Accordion } from "flowbite-react";
 import Link from "next/link";
 
-export default function Top10({data,lang}){
+export default function Top10({data,lang,transcript}){
     if(!data || !lang) return
     return(
         <>
         <div className="text-center mb-2 font-bold text-lg bg-border bg-border-size bg-no-repeat bg-left-bottom">
-            TOP 10
+            {transcript.title}
         </div>
         
         <Accordion alwaysOpen collapseAll>
             <Accordion.Panel>
                 <Accordion.Title>
-                Account Balance
+                {transcript.AccountBalance}
                 </Accordion.Title>
                 <Accordion.Content>
                 <div className="block w-full">
@@ -24,8 +24,8 @@ export default function Top10({data,lang}){
                             <thead className="border-b bg-gray-50 w-full">
                                 <tr>
                                 <th scope="col" className="text-sm font-medium text-gray-900 py-4">No.</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">Account</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">Amount</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.account}</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.amount}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -62,7 +62,7 @@ export default function Top10({data,lang}){
 
             <Accordion.Panel>
                 <Accordion.Title>
-                Account Fee
+                {transcript.AccountFee}
                 </Accordion.Title>
                 <Accordion.Content>
 
@@ -72,8 +72,8 @@ export default function Top10({data,lang}){
                             <thead className="border-b bg-gray-50 w-full">
                                 <tr>
                                 <th scope="col" className="text-sm font-medium text-gray-900 py-4">No.</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">Account</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">PayForFee</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.account}</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.PayForFee}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -111,7 +111,7 @@ export default function Top10({data,lang}){
 
             <Accordion.Panel>
                 <Accordion.Title>
-                Account Payment
+                {transcript.AccountPayment}
                 </Accordion.Title>
                 <Accordion.Content>
 
@@ -121,8 +121,8 @@ export default function Top10({data,lang}){
                             <thead className="border-b bg-gray-50 w-full">
                                 <tr>
                                 <th scope="col" className="text-sm font-medium text-gray-900 py-4">No.</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">Account</th>
-                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">Frequency</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.account}</th>
+                                    <th scope="col" className="text-sm font-medium text-gray-900 py-4">{transcript.Frequency}</th>
                                 </tr>
                             </thead>
                             <tbody>
diff --git a/website/app/[lang]/pibrowser/stream/layout.jsx b/website/app/[lang]/pibrowser/stream/layout.jsx
index 55873a1..07d8b90 100644
--- a/website/app/[lang]/pibrowser/stream/layout.jsx
+++ b/website/app/[lang]/pibrowser/stream/layout.jsx
@@ -4,7 +4,7 @@ export default async function StreamLayout({children,params:{lang}}){
     const transcript = await import(`locales/${lang}.json`);
     return (
         <>
-        <StartButton transcript={transcript.stream}>
+        <StartButton transcript={transcript.stream.start}>
             {children}
         </StartButton>
         </>
diff --git a/website/app/[lang]/pibrowser/stream/operation.jsx b/website/app/[lang]/pibrowser/stream/operation.jsx
index 2e3b648..3e5560c 100644
--- a/website/app/[lang]/pibrowser/stream/operation.jsx
+++ b/website/app/[lang]/pibrowser/stream/operation.jsx
@@ -53,16 +53,16 @@ export default function Operation({status,account,transcript,time}){
                         <thead className="border-b bg-gray-50 w-full">
                             <tr>
                             <th scope="col" className="text-sm font-medium text-gray-900 py-4">
-                                Source
+                                {transcript.source}
                             </th>
                             <th scope="col" className="text-sm font-medium text-gray-900 py-4">
-                                Operation
+                                {transcript.operation}
                             </th>
                             <th scope="col" className="text-sm font-medium text-gray-900 py-4">
-                                Detail
+                                {transcript.detail}
                             </th>
                             <th scope="col" className="text-sm font-medium text-gray-900 py-4">
-                                Time
+                                {transcript.time}
                             </th>
                             </tr>
                         </thead>
diff --git a/website/app/[lang]/pibrowser/stream/start.jsx b/website/app/[lang]/pibrowser/stream/start.jsx
index 354a88f..b3d399c 100644
--- a/website/app/[lang]/pibrowser/stream/start.jsx
+++ b/website/app/[lang]/pibrowser/stream/start.jsx
@@ -12,7 +12,7 @@ const rowdie = Rowdies({
     subsets: ['latin'],
     weight:'700'
 })
-export default function StartButton({children}){
+export default function StartButton({children,transcript}){
     const [start, setstart] = useState(false)
     const handleClick = () =>{
         setstart(true)
@@ -23,17 +23,17 @@ export default function StartButton({children}){
             <div className="flex justify-center items-center h-full">
                 <div className="block w-full ">
                     <div className={`${rowdie.className} text-center text-3xl mb-8`}>
-                        Streaming
+                        {transcript.title}
                     </div>
                     <div className="font-mono text-center text">
                         <div className="text-xl underline">
-                            What is Streaming?
+                            {transcript.q1}
                         </div>
                         <div className={`text-md ${hind.className} mx-4 text-lg mb-3`}>
-                            Stream is a feature on Stellar Horizon. Horizon provides a streaming mechanism for receiving events in near real time.
+                            {transcript.answer}
                         </div>
                     </div>
-                    <Button onClick={handleClick} gradientDuoTone="purpleToBlue" className="w-52 m-auto" pill={true}>Start</Button>
+                    <Button onClick={handleClick} gradientDuoTone="purpleToBlue" className="w-52 m-auto" pill={true}>{transcript.button}</Button>
                 </div>
             </div>
             </>
diff --git a/website/app/[lang]/pibrowser/stream/stream.jsx b/website/app/[lang]/pibrowser/stream/stream.jsx
index 555e442..d5cecd1 100644
--- a/website/app/[lang]/pibrowser/stream/stream.jsx
+++ b/website/app/[lang]/pibrowser/stream/stream.jsx
@@ -35,10 +35,10 @@ export default function StreamContent({transcript,explorer,time}){
             rounded-xl transition ease-in-out mt-2 mb-3
             focus:text-gray-700 focus:border-blue-500 focus:outline-none" value={selected}            
             onChange={handleselect} disabled={start}>
-                <option value="operation">OPERATION</option>
-                <option value="block">BLOCK</option>
-                <option value="tx">TRANSACTION</option>
-                <option value="payment">PAYMENT</option>
+                <option value="operation">{transcript.op.title}</option>
+                <option value="block">{transcript.block.Block}</option>
+                <option value="tx">{transcript.tx.title}</option>
+                <option value="payment">{transcript.pay.title}</option>
             </select>
             {selected!=='block' &&<input 
                 onChange={(e)=>setInput(e.target.value)}
@@ -47,8 +47,8 @@ export default function StreamContent({transcript,explorer,time}){
                 aria-label="Account option" 
                 placeholder={formatTrans(transcript.input,{need:placeholder})}/>}
             <div className="flex justify-center mt-1">
-                {start===false && <Button size="lg" gradientDuoTone='cyanToBlue' className="font-mono font-extrabold text-xl" onClick={handleStart}>Start</Button>}
-                {start === true && <Button size="lg" gradientDuoTone='pinkToOrange' className="font-mono font-extrabold text-xl" onClick={handleStart}>Stop</Button>}
+                {start===false && <Button size="lg" gradientDuoTone='cyanToBlue' className="font-mono font-extrabold text-xl" onClick={handleStart}>{transcript.but_start}</Button>}
+                {start === true && <Button size="lg" gradientDuoTone='pinkToOrange' className="font-mono font-extrabold text-xl" onClick={handleStart}>{transcript.but_stop}</Button>}
                 
             </div>
         </section>
diff --git a/website/locales/en.json b/website/locales/en.json
index cf6bced..cf360dd 100644
--- a/website/locales/en.json
+++ b/website/locales/en.json
@@ -21,7 +21,16 @@
         "block":{
             "Block":"Block",
             "Transactions":"Transactions",
-            "Time":"Time"
+            "Time":"Time",
+            "Hash":"Hash",
+            "Pre":"Pre Hash",
+            "Operation":"Operation",
+            "Transaction":"Transaction",
+            "BaseFee":"Base Fee",
+            "BaseReserve":"Base Reserve",
+            "FeePool":"Fee Pool",
+            "TotalPi":"Total Pi",
+            "Protocol":"Protocol"
         },
         "payment":{
             "From":"From",
@@ -33,7 +42,15 @@
             "Hash":"Hash",
             "Operation":"Operation",
             "Time":"Time",
-            "Account":"Account"
+            "Account":"Account",
+            "Transaction":"Transaction",
+            "Block":"Block",
+            "Fee":"Fee",
+            "Memo":"",
+            "op":"Operation",
+            "Success":"Success",
+            "Failed":"Failed",
+            "None":"None"
         },
         "lockbalance":{
             "Sponsor":"Sponsor",
@@ -83,10 +100,24 @@
                 "pool_deposit":"",
                 "pool_withdraw":"",
                 "claim_claimable_balance":"claim claimable balance"
-            }
+            },
+            "source":"Source",
+            "operation":"Operation",
+            "detail":"Detail",
+            "time":"Time",
+            "no":"There has no Operation",
+            "account":"Account"
         }
     },
     "stream":{
+        "start":{
+            "title":"Streaming",
+            "q1":"What is Streaming?",
+            "answer":"Stream is a feature on Stellar Horizon. Horizon provides a streaming mechanism for receiving events in near real time.",
+            "button":"Start"
+        },
+        "but_start":"Start",
+        "but_stop":"Stop",
         "input":"Account({need})",
         "Optional":"Optional",
         "Required":"Required",
@@ -94,6 +125,15 @@
             "Block":"Block",
             "Tx":"Transaction",
             "Time":"Time"
+        },
+        "op":{
+            "title":"OPERATION"
+        },
+        "tx":{
+            "title":"TRANSACTION"
+        },
+        "pay":{
+            "title":"PAYMENT"
         }
     },
     "time":{
@@ -103,6 +143,82 @@
         "day":"day",
         "month":"month",
         "year":"year"
+    },
+    "statistic":{
+        "Metrics":{
+            "title":"METRICS",
+            "TotalAccount":"Total Account",
+            "TotalPioneer":"Total Pioneer",
+            "MigratedPi":"Migrated Pi",
+            "PioneerHold":"Pioneer Hold",
+            "PiLocked":"Pi Locked"
+        },
+        "TOP10":{
+            "title":"TOP 10",
+            "AccountBalance":"Account Balance",
+            "AccountFee":"Account Fee",
+            "AccountPayment":"Account Payment",
+            "account":"Account",
+            "amount":"Amount",
+            "PayForFee":"PayForFee",
+            "Frequency":"Frequency"
+        },
+        "Migrate":{
+            "title":"Migrate Frequency",
+            "Month":"Month",
+            "Year":"Year",
+            "ALL":"ALL",
+            "Unlock":"Unlock",
+            "lock":"Lock",
+            "Migrateop":"Migrate Operation",
+            "CTclaim":"CT Claimed Back"
+        },
+        "Block":{
+            "title":"Block Performance",
+            "closed":"AverageClosedTime",
+            "op":"Total Operation",
+            "Month":"Month",
+            "Year":"Year",
+            "ALL":"ALL"
+        },
+        "Operation":{
+            "title":"Total Operation Distribute",
+            "Total":"Total",
+            "type":{
+                "create_account":"create account",
+                "payment":"payment",
+                "path_receive":"path payment receive",
+                "path_send":"path payment send",
+                "manage_sell":"manage sell offer",
+                "manage_buy":"manage buy offer",
+                "passive_sell":"passive sell offer",
+                "set_options":"set option",
+                "change_trust":"change trust",
+                "allow_trust":"allow trust",
+                "account_merge":"account merge",
+                "manage_data":"manage data",
+                "bump_sequence":"bump sequence",
+                "create_claimable_balance":"create claimable balance",
+                "begin_sponsoring":"",
+                "end_sponsoring":"",
+                "revoke_sponsorship":"",
+                "pool_deposit":"",
+                "pool_withdraw":"",
+                "claim_claimable_balance":"claim claimable balance"
+            }
+        },
+        "LockUP":{
+            "title":"LockUP Period",
+            "No":"No Lock",
+            "two_week":"Two Weeks",
+            "six_month":"Six Months",
+            "oneyear":"One Year",
+            "threeyears":"Three Years",
+            "Pioneers":"Pioneers"
+        }
+        
+        
+        
     }
     
 }
\ No newline at end of file
diff --git a/website/locales/zh-TW.json b/website/locales/zh-TW.json
index 9a0eedc..aea4080 100644
--- a/website/locales/zh-TW.json
+++ b/website/locales/zh-TW.json
@@ -21,7 +21,16 @@
         "block":{
             "Block":"區塊",
             "Transactions":"交易",
-            "Time":"時間"
+            "Time":"時間",
+            "Hash":"哈希",
+            "Pre":"上一個哈希",
+            "Operation":"操作",
+            "Transaction":"交易",
+            "BaseFee":"基礎手續費",
+            "BaseReserve":"基礎預留",
+            "FeePool":"手續池",
+            "TotalPi":"Pi總額",
+            "Protocol":"協議版本"
         },
         "payment":{
             "From":"從",
@@ -33,7 +42,15 @@
             "Hash":"哈希",
             "Operation":"操作數",
             "Time":"時間",
-            "Account":"帳戶"
+            "Account":"帳戶",
+            "Transaction":"交易",
+            "Block":"區塊",
+            "Fee":"手續費",
+            "Memo":"備忘錄",
+            "op":"操作",
+            "Success":"成功",
+            "Failed":"失敗",
+            "None":"無"
         },
         "lockbalance":{
             "Sponsor":"支助者",
@@ -83,10 +100,24 @@
                 "pool_deposit":"",
                 "pool_withdraw":"",
                 "claim_claimable_balance":"獲取資產"
-            }
+            },
+            "source":"來源",
+            "operation":"操作",
+            "detail":"詳細動作",
+            "time":"時間",
+            "no":"沒有操作",
+            "account":"帳戶"
         }
     },
     "stream":{
+        "start":{
+            "title":"實況",
+            "q1":"甚麼是實況?",
+            "answer":"實況是一個Stellar API提供的功能. 這功能可以在接近真正時間的狀態下收到區塊鏈資訊.",
+            "button":"開使"
+        },
+        "but_start":"開使",
+        "but_stop":"停止",
         "input":"公鑰({need})",
         "Optional":"選項",
         "Required":"必填",
@@ -94,6 +125,15 @@
             "Block":"區塊",
             "Tx":"交易",
             "Time":"時間"
+        },
+        "op":{
+            "title":"操作"
+        },
+        "tx":{
+            "title":"交易"
+        },
+        "pay":{
+            "title":"付款"
         }
     },
     "time":{
@@ -103,5 +143,77 @@
         "day":"天",
         "month":"月",
         "year":"年"
+    },"statistic":{
+        "Metrics":{
+            "title":"統計",
+            "TotalAccount":"總共帳戶",
+            "TotalPioneer":"先鋒帳戶",
+            "MigratedPi":"已整合的Pi",
+            "PioneerHold":"先鋒持有",
+            "PiLocked":"鎖倉中的Pi"
+        },
+        "TOP10":{
+            "title":"排行榜前10",
+            "AccountBalance":"帳戶餘額",
+            "AccountFee":"帳戶手續費",
+            "AccountPayment":"帳戶付款次數",
+            "account":"帳戶",
+            "amount":"數量",
+            "PayForFee":"手續費支出",
+            "Frequency":"次數"
+        },
+        "Migrate":{
+            "title":"Pi整合狀況",
+            "Month":"月",
+            "Year":"年",
+            "ALL":"全部",
+            "Unlock":"解鎖",
+            "lock":"鎖倉",
+            "Migrateop":"整合操作",
+            "CTclaim":"核心團隊贖回"
+        },
+        "Block":{
+            "title":"區塊表現狀況",
+            "closed":"平均區塊關閉時間",
+            "op":"操作數量",
+            "Month":"月",
+            "Year":"年",
+            "ALL":"全部"
+        },
+        "Operation":{
+            "title":"操作類型分布",
+            "Total":"總共",
+            "type":{
+                "create_account":"創建帳戶",
+                "payment":"付款",
+                "path_receive":"path payment receive",
+                "path_send":"path payment send",
+                "manage_sell":"manage sell offer",
+                "manage_buy":"manage buy offer",
+                "passive_sell":"passive sell offer",
+                "set_options":"set option",
+                "change_trust":"change trust",
+                "allow_trust":"allow trust",
+                "account_merge":"account merge",
+                "manage_data":"manage data",
+                "bump_sequence":"bump sequence",
+                "create_claimable_balance":"創建可索取資產",
+                "begin_sponsoring":"",
+                "end_sponsoring":"",
+                "revoke_sponsorship":"",
+                "pool_deposit":"",
+                "pool_withdraw":"",
+                "claim_claimable_balance":"獲取可索取資產"
+            }
+        },
+        "LockUP":{
+            "title":"鎖倉時間分布",
+            "No":"不鎖倉",
+            "two_week":"兩周",
+            "six_month":"六個月",
+            "oneyear":"一年",
+            "threeyears":"三年",
+            "Pioneers":"先鋒人數"
+        }
     }
 }
\ No newline at end of file