diff --git a/frontend/api/bbgo.ts b/frontend/api/bbgo.ts
index 9a54cdf37..cb9531d8a 100644
--- a/frontend/api/bbgo.ts
+++ b/frontend/api/bbgo.ts
@@ -17,17 +17,17 @@ export function queryOutboundIP(cb) {
 
 export async function triggerSync() {
   return axios.post<any>(baseURL + '/api/environment/sync');
-};
+}
 
 export enum SyncStatus {
   SyncNotStarted = 0,
   Syncing = 1,
-  SyncDone = 2
+  SyncDone = 2,
 }
 
 export async function querySyncStatus(): Promise<SyncStatus> {
-  const resp = await axios.get<any>(baseURL + '/api/environment/syncing')
-  return resp.data.syncing
+  const resp = await axios.get<any>(baseURL + '/api/environment/syncing');
+  return resp.data.syncing;
 }
 
 export function testDatabaseConnection(params, cb) {
@@ -132,29 +132,27 @@ export function queryTradingVolume(params, cb) {
 }
 
 export async function queryStrategiesMetrics() {
-  return (
-    [
-      {
-        "id":"uuid",
-        "instanceID": "testInstanceID",
-        "strategy": "grid",
-        "grid": {
-             "symbol": "BTCUSDT",
-        },
-        "stats": {
-          "oneDayArbs": 0,
-          "totalArbs": 3,
-          "investment": 100,
-          "totalProfits": 5.6,
-          "gridProfits": 2.5,
-          "floatingPNL": 3.1, 
-          "currentPrice": 29000,
-          "lowestPrice": 25000,
-          "highestPrice": 35000
-        },
-        "status": "RUNNING",
-        "startTime": 1654938187102
-      }
-    ]
-  )
-}
\ No newline at end of file
+  return [
+    {
+      id: 'uuid',
+      instanceID: 'testInstanceID',
+      strategy: 'grid',
+      grid: {
+        symbol: 'BTCUSDT',
+      },
+      stats: {
+        oneDayArbs: 0,
+        totalArbs: 3,
+        investment: 100,
+        totalProfits: 5.6,
+        gridProfits: 2.5,
+        floatingPNL: 3.1,
+        currentPrice: 29000,
+        lowestPrice: 25000,
+        highestPrice: 35000,
+      },
+      status: 'RUNNING',
+      startTime: 1654938187102,
+    },
+  ];
+}
diff --git a/frontend/components/SideBar.js b/frontend/components/SideBar.js
index dfcc8946f..e49109965 100644
--- a/frontend/components/SideBar.js
+++ b/frontend/components/SideBar.js
@@ -97,7 +97,6 @@ export default function SideBar() {
             <ListItemText primary="Strategies" />
           </ListItem>
         </Link>
-        
       </List>
     </Drawer>
   );
diff --git a/frontend/components/SyncButton.tsx b/frontend/components/SyncButton.tsx
index 111514bd1..de00aacb5 100644
--- a/frontend/components/SyncButton.tsx
+++ b/frontend/components/SyncButton.tsx
@@ -1,7 +1,7 @@
-import {styled} from "@mui/styles";
-import React, {useEffect, useState} from "react";
-import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo";
-import useInterval from "../hooks/useInterval";
+import { styled } from '@mui/styles';
+import React, { useEffect, useState } from 'react';
+import { querySyncStatus, SyncStatus, triggerSync } from '../api/bbgo';
+import useInterval from '../hooks/useInterval';
 
 const ToolbarButton = styled('button')(({ theme }) => ({
   padding: theme.spacing(1),
@@ -9,7 +9,7 @@ const ToolbarButton = styled('button')(({ theme }) => ({
 
 export default function SyncButton() {
   const [syncing, setSyncing] = useState(false);
-  
+
   const sync = async () => {
     try {
       setSyncing(true);
@@ -18,26 +18,22 @@ export default function SyncButton() {
       setSyncing(false);
     }
   };
-  
+
   useEffect(() => {
     sync();
-  }, [])
-  
+  }, []);
+
   useInterval(() => {
-    querySyncStatus().then(s => {
+    querySyncStatus().then((s) => {
       if (s !== SyncStatus.Syncing) {
         setSyncing(false);
       }
-    })
-  }, 2000)
-  
+    });
+  }, 2000);
+
   return (
-    <ToolbarButton
-      disabled={syncing}
-      onClick={sync}
-    >
+    <ToolbarButton disabled={syncing} onClick={sync}>
       {syncing ? 'Syncing...' : 'Sync'}
     </ToolbarButton>
   );
 }
-
diff --git a/frontend/hooks/useInterval.ts b/frontend/hooks/useInterval.ts
index ec1e620cf..9a54d776a 100644
--- a/frontend/hooks/useInterval.ts
+++ b/frontend/hooks/useInterval.ts
@@ -1,20 +1,20 @@
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from 'react';
 
 export default function useInterval(cb: Function, delayMs: number | null) {
   const savedCallback = useRef<Function>();
-  
+
   useEffect(() => {
-    savedCallback.current = cb
-  }, [cb])
-  
+    savedCallback.current = cb;
+  }, [cb]);
+
   useEffect(() => {
     function tick() {
       savedCallback.current();
     }
-    
+
     if (delayMs !== null) {
-      let timerId = setInterval(tick, delayMs)
-      return () => clearInterval(timerId)
+      let timerId = setInterval(tick, delayMs);
+      return () => clearInterval(timerId);
     }
-  }, [delayMs])
-}
\ No newline at end of file
+  }, [delayMs]);
+}
diff --git a/frontend/pages/strategies.tsx b/frontend/pages/strategies.tsx
index e10139cf8..e4e453eb5 100644
--- a/frontend/pages/strategies.tsx
+++ b/frontend/pages/strategies.tsx
@@ -1,6 +1,6 @@
 import DashboardLayout from '../layouts/DashboardLayout';
 import { styled } from '@mui/styles';
-import {queryStrategiesMetrics} from '../api/bbgo';
+import { queryStrategiesMetrics } from '../api/bbgo';
 import { useEffect, useState } from 'react';
 
 const StrategyContainer = styled('section')(() => ({
@@ -11,7 +11,7 @@ const StrategyContainer = styled('section')(() => ({
   height: '400px',
   border: '1px solid rgb(248, 149, 35)',
   borderRadius: '10px',
-  padding: '10px'
+  padding: '10px',
 }));
 
 const Strategy = styled('div')(() => ({
@@ -24,36 +24,34 @@ const StatusSign = styled('span')(() => ({
   display: 'block',
   backgroundColor: 'rgb(113, 218, 113)',
   borderRadius: '50%',
-  marginRight:'5px',
+  marginRight: '5px',
 }));
 
 const RunningTime = styled('div')(() => ({
   display: 'flex',
   alignItems: 'center',
-}))
+}));
 
 const Description = styled('div')(() => ({
   color: 'rgb(140, 140, 140)',
-  "& .duration": {
+  '& .duration': {
     marginLeft: '3px',
   },
-}))
+}));
 
 const Summary = styled('div')(() => ({
   width: '100%',
   display: 'flex',
   justifyContent: 'space-around',
   backgroundColor: 'rgb(255, 245, 232)',
-}))
+}));
 
 const SummaryBlock = styled('div')(() => ({
-  padding: '5px 0 5px 0'
-
+  padding: '5px 0 5px 0',
 }));
 
 const StatsTitle = styled('div')(() => ({
-  margin:'0 0 10px 0',
-
+  margin: '0 0 10px 0',
 }));
 
 const StatsValue = styled('div')(() => ({
@@ -69,101 +67,102 @@ const Stats = styled('div')(() => ({
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 1fr',
   columnGap: '10px',
-  rowGap: '20px'
+  rowGap: '20px',
 }));
 
-export default function Strategies(){
+export default function Strategies() {
   const [details, setDetails] = useState([]);
 
   useEffect(() => {
     queryStrategiesMetrics().then((value) => {
       setDetails(value);
-    } 
-    );
-  },[])
+    });
+  }, []);
 
   return (
     <DashboardLayout>
       {details.map((element) => {
-        return(
-          <Detail key={element.id} data={element}/>
-        )
+        return <Detail key={element.id} data={element} />;
       })}
     </DashboardLayout>
-
   );
 }
 
-export function Detail({data}){
-  const {strategy, stats, startTime} = data;
-  const totalProfitsPercentage = stats.totalProfits / stats.investment * 100;
-  const gridProfitsPercentage = stats.gridProfits / stats.investment * 100;
-  const gridAprPercentage = stats.gridProfits / 5 * 365;
-  
+export function Detail({ data }) {
+  const { strategy, stats, startTime } = data;
+  const totalProfitsPercentage = (stats.totalProfits / stats.investment) * 100;
+  const gridProfitsPercentage = (stats.gridProfits / stats.investment) * 100;
+  const gridAprPercentage = (stats.gridProfits / 5) * 365;
+
   const now = Date.now();
   const durationMilliseconds = now - startTime;
   const seconds = durationMilliseconds / 1000;
 
   const day = Math.floor(seconds / (60 * 60 * 24));
-  const hour = Math.floor(seconds %  (60 * 60 * 24) / 3600);
-  const min = Math.floor(seconds %  (60 * 60 * 24) % 3600 / 60);
+  const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600);
+  const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60);
 
   return (
-      <StrategyContainer>
-          <Strategy>{strategy}</Strategy>
-          <div>{data[strategy].symbol}</div>
-          <RunningTime>
-            <StatusSign/>
-              <Description>
-                Running for
-                <span className="duration">{day}</span>D 
-                <span className="duration">{hour}</span>H 
-                <span className="duration">{min}</span>M
-              </Description>
-          </RunningTime> 
+    <StrategyContainer>
+      <Strategy>{strategy}</Strategy>
+      <div>{data[strategy].symbol}</div>
+      <RunningTime>
+        <StatusSign />
+        <Description>
+          Running for
+          <span className="duration">{day}</span>D
+          <span className="duration">{hour}</span>H
+          <span className="duration">{min}</span>M
+        </Description>
+      </RunningTime>
 
-          <Description>0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span> arbitrages</Description>
-          
-          <Summary>
-            <SummaryBlock>
-            <StatsTitle>Investment USDT</StatsTitle>
-              <div>{stats.investment}</div>
-            </SummaryBlock>
-            
-            <SummaryBlock>
-              <StatsTitle>Total Profit USDT</StatsTitle>
-              <StatsValue>{stats.totalProfits}</StatsValue>
-              <Percentage>{totalProfitsPercentage}%</Percentage>
-            </SummaryBlock>
-          </Summary>
+      <Description>
+        0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span>{' '}
+        arbitrages
+      </Description>
 
-          <Stats>
-            <div>
-              <StatsTitle>Grid Profits</StatsTitle>
-              <StatsValue>{stats.gridProfits}</StatsValue>
-              <Percentage>{gridProfitsPercentage}%</Percentage>
-            </div>
+      <Summary>
+        <SummaryBlock>
+          <StatsTitle>Investment USDT</StatsTitle>
+          <div>{stats.investment}</div>
+        </SummaryBlock>
 
-            <div>
-              <StatsTitle>Floating PNL</StatsTitle>
-              <StatsValue>{stats.floatingPNL}</StatsValue>
-            </div>
+        <SummaryBlock>
+          <StatsTitle>Total Profit USDT</StatsTitle>
+          <StatsValue>{stats.totalProfits}</StatsValue>
+          <Percentage>{totalProfitsPercentage}%</Percentage>
+        </SummaryBlock>
+      </Summary>
 
-            <div>
-              <StatsTitle>Grid APR</StatsTitle>
-              <Percentage>{gridAprPercentage}%</Percentage>
-            </div>
+      <Stats>
+        <div>
+          <StatsTitle>Grid Profits</StatsTitle>
+          <StatsValue>{stats.gridProfits}</StatsValue>
+          <Percentage>{gridProfitsPercentage}%</Percentage>
+        </div>
 
-            <div>
-              <StatsTitle>Current Price</StatsTitle>
-              <div>{stats.currentPrice}</div>
-            </div>
+        <div>
+          <StatsTitle>Floating PNL</StatsTitle>
+          <StatsValue>{stats.floatingPNL}</StatsValue>
+        </div>
 
-            <div>
-              <StatsTitle>Price Range</StatsTitle>
-              <div>{stats.lowestPrice}~{stats.highestPrice}</div>
-            </div>
-          </Stats>
-      </StrategyContainer>
-  )
-}
\ No newline at end of file
+        <div>
+          <StatsTitle>Grid APR</StatsTitle>
+          <Percentage>{gridAprPercentage}%</Percentage>
+        </div>
+
+        <div>
+          <StatsTitle>Current Price</StatsTitle>
+          <div>{stats.currentPrice}</div>
+        </div>
+
+        <div>
+          <StatsTitle>Price Range</StatsTitle>
+          <div>
+            {stats.lowestPrice}~{stats.highestPrice}
+          </div>
+        </div>
+      </Stats>
+    </StrategyContainer>
+  );
+}