diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
index 4afba06ea..32822e331 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
@@ -18,9 +18,10 @@ const queryDateFormat = 'YYYY-MM-DD HH:mm'
 
 export type IChartViewProps = {
   appId: string
+  headerRight: React.ReactNode
 }
 
-export default function ChartView({ appId }: IChartViewProps) {
+export default function ChartView({ appId, headerRight }: IChartViewProps) {
   const { t } = useTranslation()
   const appDetail = useAppStore(state => state.appDetail)
   const isChatApp = appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow'
@@ -46,19 +47,22 @@ export default function ChartView({ appId }: IChartViewProps) {
 
   return (
     <div>
-      <div className='system-xl-semibold mb-4 mt-8 flex flex-row items-center text-text-primary'>
-        <span className='mr-3'>{t('appOverview.analysis.title')}</span>
-        <SimpleSelect
-          items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
-          className='mt-0 !w-40'
-          onSelect={(item) => {
-            const id = item.value
-            const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
-            const name = item.name || t('appLog.filter.period.allTime')
-            onSelect({ value, name })
-          }}
-          defaultValue={'2'}
-        />
+      <div className='mb-4 flex items-center justify-between'>
+        <div className='system-xl-semibold flex flex-row items-center text-text-primary'>
+          <span className='mr-3'>{t('appOverview.analysis.title')}</span>
+          <SimpleSelect
+            items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+            className='mt-0 !w-40'
+            onSelect={(item) => {
+              const id = item.value
+              const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
+              const name = item.name || t('appLog.filter.period.allTime')
+              onSelect({ value, name })
+            }}
+            defaultValue={'2'}
+          />
+        </div>
+        {headerRight}
       </div>
       {!isWorkflow && (
         <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
index 0f1bb7e18..fc97f5e66 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ChartView from './chartView'
-import CardView from './cardView'
 import TracingPanel from './tracing/panel'
 import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
 
@@ -18,9 +17,10 @@ const Overview = async (props: IDevelopProps) => {
   return (
     <div className="h-full overflow-scroll bg-chatbot-bg px-4 py-6 sm:px-12">
       <ApikeyInfoPanel />
-      <TracingPanel />
-      <CardView appId={appId} />
-      <ChartView appId={appId} />
+      <ChartView
+        appId={appId}
+        headerRight={<TracingPanel />}
+      />
     </div>
   )
 }
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 8575117c4..bc85f3a73 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -154,7 +154,6 @@ const Panel: FC = () => {
   if (!isLoaded) {
     return (
       <div className='mb-3 flex items-center justify-between'>
-        <Title className='h-[41px]' />
         <div className='w-[200px]'>
           <Loading />
         </div>
@@ -163,8 +162,7 @@ const Panel: FC = () => {
   }
 
   return (
-    <div className={cn('mb-3 flex items-center justify-between')}>
-      <Title className='h-[41px]' />
+    <div className={cn('flex items-center justify-between')}>
       <div
         className={cn(
           'flex cursor-pointer items-center rounded-xl border-l-[0.5px] border-t border-effects-highlight bg-background-default-dodge p-2 shadow-xs hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',