diff --git a/src/GenTradeAgent/package.json b/src/GenTradeAgent/package.json
index bd8e96a..c71ef13 100644
--- a/src/GenTradeAgent/package.json
+++ b/src/GenTradeAgent/package.json
@@ -24,6 +24,7 @@
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
     "@vicons/ionicons5": "^0.13.0",
+    "axios": "^1.7.9",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src/GenTradeAgent/src/renderer/index.html b/src/GenTradeAgent/src/renderer/index.html
index e7ee7dd..fb2716c 100644
--- a/src/GenTradeAgent/src/renderer/index.html
+++ b/src/GenTradeAgent/src/renderer/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <title>GenTradeAgent</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <meta
+    <!-- <meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
-    />
+    /> -->
   </head>
 
   <body>
diff --git a/src/GenTradeAgent/src/renderer/src/components/FootBar.vue b/src/GenTradeAgent/src/renderer/src/components/FootBar.vue
index 3399fb1..f7ed301 100644
--- a/src/GenTradeAgent/src/renderer/src/components/FootBar.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/FootBar.vue
@@ -5,28 +5,67 @@
     </div>
     <n-space class="foot-status">
       <span class="status-icon">Version v0.1</span>
-      <n-button text style="font-size: 18px">
+      <n-button
+        v-show="isServerConnected"
+        text
+        style="font-size: 18px"
+        @click="handlerClickNetwork"
+      >
         <n-icon>
-          <Clock20Regular />
+          <PlugConnected20Filled />
         </n-icon>
       </n-button>
-      <n-button text style="font-size: 18px">
+      <n-button
+        v-show="!isServerConnected"
+        text
+        style="font-size: 18px"
+        @click="handlerClickNetwork"
+      >
         <n-icon>
-          <PlugConnected20Filled />
+          <PlugDisconnected20Regular />
         </n-icon>
       </n-button>
+      <div style="width: 30px; max-width: 30px;">
+        <span style="align-items: center;">{{ serverLatency }}ms</span>
+      </div>
     </n-space>
+    <n-modal
+      v-model:show="showServerModal"
+      :mask-closable="false"
+      preset="card"
+      title="Trade Agent Server"
+      style="width: 400px"
+    >
+      <!-- <template #header-extra> Oops! </template> -->
+      <n-space vertical>
+        Address URL
+        <n-input v-model:value="serverAddress"></n-input>
+        API Key
+        <n-input v-model:value="apiKey"></n-input>
+      </n-space>
+      <template #footer>
+        <n-button @click="onPositiveClick">OK</n-button>
+      </template>
+    </n-modal>
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import { PlugConnected20Filled, Clock20Regular } from '@vicons/fluent'
-import { NIcon, NSpace, NButton } from 'naive-ui'
+import { PlugConnected20Filled, PlugDisconnected20Regular, Clock20Regular } from '@vicons/fluent'
+import { NIcon, NSpace, NButton, NModal, NInput } from 'naive-ui'
 import { useStore } from '../store'
+import { agentServer } from '@renderer/server'
+
+const showServerModal = ref(false)
+const serverAddress = ref(agentServer.serverAddress)
+const apiKey = ref(agentServer.apiKey)
 
 const store = useStore()
 
 const nodifyMessage = ref('Notification Message')
+const serverLatency = ref('')
+const isServerConnected = ref(store.state.serverLatency != -1)
+
 store.watch(
   (state) => state.notifyMessage,
   (value) => {
@@ -34,6 +73,25 @@ store.watch(
   }
 )
 
+store.watch(
+  (state) => state.serverLatency,
+  (value) => {
+    serverLatency.value = value.toFixed(1)
+    isServerConnected.value = value != -1
+  }
+)
+
+const handlerClickNetwork = () => {
+  console.log('hehe')
+  showServerModal.value = true
+}
+
+const onPositiveClick = () => {
+  console.log('ok')
+  agentServer.serverAddress = serverAddress.value
+  showServerModal.value = false
+}
+
 </script>
 <style lang="scss" scoped>
 .foot-main {
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue b/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
index df1a1de..00c7d92 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
@@ -2,7 +2,7 @@
   <!-- <span style="color: blue; align-self: center">Agentic</span> -->
   <div class="chat-agent-all">
     <div class="chat-title-box">
-      <span >From Agentic Server:</span>
+      <span>From Agentic Server:</span>
     </div>
     <n-log class="chat-agent-output" :log="placeholder_output" :font-size="12" />
     <n-input
@@ -18,10 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, nextTick } from 'vue'
 import { NInput, NLog } from 'naive-ui'
 
-const placeholder_output = ref(`Bitcoin, introduced in 2009 by an anonymous entity known as Satoshi Nakamoto, is a decentralized \
+const placeholder_output =
+  ref(`Bitcoin, introduced in 2009 by an anonymous entity known as Satoshi Nakamoto, is a decentralized \
 digital currency that enables peer-to-peer transactions without the need for intermediaries like banks. Its creation marked \
 the beginning of the cryptocurrency era, offering an alternative to traditional financial systems.
 The global Bitcoin market has experienced significant growth since its inception.
@@ -42,8 +43,10 @@ const prompt = ref('')
 onMounted(() => {})
 
 const handleInput = (v: string) => {
-  console.log(v)
+  //console.log(v)
 }
+
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue b/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
index 16f4560..d0bf404 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
@@ -57,7 +57,7 @@ const handleContextMenu = (e: MouseEvent) => {
 
 const handleSelectMenu = (key: string | number) => {
   showDropdown.value = false
-  console.log(key)
+
   if (key == 'Reset Chart') {
     if (chartObj != null) {
       chartObj.timeScale().fitContent()
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue b/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
index c27b6a9..5a1cb0e 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
@@ -53,6 +53,7 @@ import { ref } from 'vue'
 import TradingDashboard from './TradingDashboard.vue'
 import TradingChatAgent from './TradingChatAgent.vue'
 import { useStore, getMarket } from '../store'
+import { agentServer } from '@renderer/server'
 
 interface IOption {
   label: string
@@ -102,6 +103,14 @@ const handleUpdateCurrentAsset = (value: string) => {
 const handleUpdateCurrentInterval = (value: string) => {
   store.commit('updateCurrentInterval', value)
 }
+
+agentServer.store = useStore()
+const handlerPingServer = (() => {
+  agentServer.ping()
+  setTimeout(handlerPingServer, 10000)
+})
+handlerPingServer()
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/GenTradeAgent/src/renderer/src/server.ts b/src/GenTradeAgent/src/renderer/src/server.ts
new file mode 100644
index 0000000..012e074
--- /dev/null
+++ b/src/GenTradeAgent/src/renderer/src/server.ts
@@ -0,0 +1,38 @@
+import axios, { AxiosError } from 'axios'
+import { IState } from '@renderer/store'
+import { Store } from 'vuex'
+
+class AgentServer {
+  serverAddress: string = 'http://47.100.216.225:8000/api/v1'
+  apiKey: string = 'e54d4431-5dab-474e-b71a-0db1fcb9e659'
+  tzName: string = ''
+  tzOffset: number = 0
+  store:Store<IState> = null
+
+  constructor() {}
+
+  ping() {
+    const tsStart = new Date().getTime()
+    const address = this.serverAddress + '/public/server_time'
+
+    axios
+      .get(address)
+      .then((response) => {
+        const tsEnd = new Date().getTime()
+        this.tzName = response.data['timezone_name']
+        this.tzOffset = response.data['timezone_offset']
+
+        if (this.store) {
+          this.store.commit('updateServerConnection', (tsEnd - tsStart) / 2)
+        }
+      })
+      .catch((err: AxiosError) => {
+        console.log(err)
+        if (this.store) {
+          this.store.commit('updateServerConnection', -1)
+        }
+      })
+  }
+}
+
+export const agentServer = new AgentServer()
diff --git a/src/GenTradeAgent/src/renderer/src/store.ts b/src/GenTradeAgent/src/renderer/src/store.ts
index 6028e3a..068b143 100644
--- a/src/GenTradeAgent/src/renderer/src/store.ts
+++ b/src/GenTradeAgent/src/renderer/src/store.ts
@@ -31,6 +31,7 @@ export interface IState {
   currentOhlcv: ohlcvData[]
   currentInterval: string
   notifyMessage: string
+  serverLatency: number
 }
 
 export const keyStore: InjectionKey<Store<IState>> = Symbol()
@@ -43,7 +44,8 @@ export const store = createStore<IState>({
     currentAsset: 'btc',
     currentOhlcv: [],
     currentInterval: '1h',
-    notifyMessage: 'Last message'
+    notifyMessage: 'Last message',
+    serverLatency: -1
   }),
   mutations: {
     updateCryptoAssetDB(state, newCryptoAssetDB) {
@@ -72,6 +74,9 @@ export const store = createStore<IState>({
     },
     updateNotification(state, notifyMessage) {
       state.notifyMessage = notifyMessage
+    },
+    updateServerConnection(state, latency) {
+      state.serverLatency = latency
     }
   }
 })
@@ -87,7 +92,6 @@ export function getMarket(state: IState, asset: string): string | null {
       return 'Crypto[Spot]'
     }
   }
-  console.log(state.stockUSAssets)
   if (asset in state.stockUSAssets) {
     return 'Stock[US]'
   }
