diff --git a/webapp/packages/supersonic-fe/src/app.tsx b/webapp/packages/supersonic-fe/src/app.tsx
index 3bd8ae5f3..5328589c9 100644
--- a/webapp/packages/supersonic-fe/src/app.tsx
+++ b/webapp/packages/supersonic-fe/src/app.tsx
@@ -143,6 +143,15 @@ export const layout: RunTimeLayoutConfig = (params) => {
     menuHeaderRender: undefined,
     childrenRender: (dom: any) => {
       return (
+        <ConfigProvider
+          theme={{
+            components: {
+              Button: {
+                colorPrimary: '#3182ce',
+              },
+            },
+          }}
+        >
         <div
           style={{ height: location.pathname.includes('chat') ? 'calc(100vh - 56px)' : undefined }}
         >
@@ -151,6 +160,7 @@ export const layout: RunTimeLayoutConfig = (params) => {
             <Copilot token={getToken() || ''} isDeveloper />
           )}
         </div>
+        </ConfigProvider>
       );
     },
     ...initialState?.settings,
diff --git a/webapp/packages/supersonic-fe/src/components/MStar/style.less b/webapp/packages/supersonic-fe/src/components/MStar/style.less
index 0fa1f22a3..97390b9d3 100644
--- a/webapp/packages/supersonic-fe/src/components/MStar/style.less
+++ b/webapp/packages/supersonic-fe/src/components/MStar/style.less
@@ -1,5 +1,5 @@
 .collectDashboard {
-  color: #546174;
+  color: #faad14;
   &.dashboardCollected {
     display: block !important;
   }
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
index 282a52afd..0a10f169e 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
@@ -1,23 +1,14 @@
-import { message, Tag, Space, Layout, Tabs, Tooltip } from 'antd';
-import React, { useState, useEffect, ReactNode } from 'react';
+import { message } from 'antd';
+import React, { useState, useEffect } from 'react';
 import { getMetricData } from '../service';
-import { connect, useParams, history } from 'umi';
+import { connect, useParams } from 'umi';
 import type { StateType } from '../model';
-import moment from 'moment';
-import {
-  LeftOutlined,
-  UserOutlined,
-  CalendarOutlined,
-  InfoCircleOutlined,
-} from '@ant-design/icons';
 import styles from './style.less';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
-import type { TabsProps } from 'antd';
 import { ISemantic } from '../data';
-import MetricStar from './components/MetricStar';
+import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
+import MetricInfoSider from './MetricInfoSider';
 
-const { Content } = Layout;
 type Props = {
   metircData: any;
   domainManger: StateType;
@@ -26,27 +17,18 @@ type Props = {
   [key: string]: any;
 };
 
-interface DescriptionItemProps {
-  title: string | ReactNode;
-  content: React.ReactNode;
-  icon: ReactNode;
-}
-
-const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
-  <Tooltip title={title}>
-    <div style={{ width: 'max-content', fontSize: 14, color: '#546174' }}>
-      <Space>
-        <span style={{ width: 'max-content' }}>{icon}</span>
-        {content}
-      </Space>
-    </div>
-  </Tooltip>
-);
+const siderStyle: React.CSSProperties = {
+  backgroundColor: '#fff',
+  width: 450,
+  minHeight: '100vh',
+  boxShadow:
+    '6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05)',
+};
 
 const MetricDetail: React.FC<Props> = ({ domainManger }) => {
   const params: any = useParams();
   const metricId = params.metricId;
-
+  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
   const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
   useEffect(() => {
     queryMetricData(metricId);
@@ -55,104 +37,41 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
   const queryMetricData = async (metricId: string) => {
     const { code, data, msg } = await getMetricData(metricId);
     if (code === 200) {
-      setMetircData(data);
+      setMetircData({ ...data });
       return;
     }
     message.error(msg);
   };
 
-  const tabItems: TabsProps['items'] = [
-    {
-      key: 'metricTrend',
-      label: '图表',
-      children: <MetricTrendSection metircData={metircData} />,
-    },
-  ];
-
-  const contentStyle: React.CSSProperties = {
-    minHeight: 120,
-    color: '#fff',
-    backgroundColor: '#fff',
-  };
-
   return (
-    <Layout className={styles.metricDetail}>
-      <Layout>
-        <Content style={contentStyle}>
-          <h2 className={styles.title}>
-            <div className={styles.titleLeft}>
-              <div
-                className={styles.backBtn}
-                onClick={() => {
-                  history.push(`/metric/market`);
-                }}
-              >
-                <LeftOutlined />
-              </div>
-
-              <div className={styles.navContainer}>
-                <Space>
-                  <MetricStar metricId={metricId} initState={metircData?.isCollect} />
-                  <span style={{ color: '#296DF3' }}>
-                    {metircData?.name}
-                    {metircData?.alias && `[${metircData.alias}]`}
-                  </span>
-                  {metircData?.name && (
-                    <>
-                      <span style={{ position: 'relative', top: '-2px', color: '#c3c3c3' }}>|</span>
-                      <span style={{ fontSize: 16, color: '#296DF3' }}>{metircData?.bizName}</span>
-                    </>
-                  )}
-                  {metircData?.sensitiveLevel !== undefined && (
-                    <span style={{ position: 'relative', top: '-2px' }}>
-                      <Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
-                        {SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
-                      </Tag>
-                    </span>
-                  )}
-                </Space>
-                {metircData?.description ? (
-                  <div className={styles.description}>
-                    <Tooltip title="指标描述">
-                      <Space>
-                        <InfoCircleOutlined />
-                        {metircData?.description}
-                      </Space>
-                    </Tooltip>
-                  </div>
-                ) : (
-                  <></>
-                )}
-              </div>
-            </div>
-            <div className={styles.titleRight}>
-              {metircData?.createdBy ? (
-                <>
-                  <div className={styles.info}>
-                    <DescriptionItem
-                      title="创建人"
-                      icon={<UserOutlined />}
-                      content={metircData?.createdBy}
-                    />
-
-                    <DescriptionItem
-                      title="更新时间"
-                      icon={<CalendarOutlined />}
-                      content={moment(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
-                    />
-                  </div>
-                </>
-              ) : (
-                <></>
-              )}
-            </div>
-          </h2>
+    <>
+      <div className={styles.metricDetailWrapper}>
+        <div className={styles.metricDetail}>
           <div className={styles.tabContainer}>
-            <Tabs defaultActiveKey="metricTrend" items={tabItems} size="large" />
+            <MetricTrendSection metircData={metircData} />
           </div>
-        </Content>
-      </Layout>
-    </Layout>
+          <div style={siderStyle}>
+            <MetricInfoSider
+              onDimensionRelationBtnClick={() => {
+                setMetricRelationModalOpenState(true);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <DimensionAndMetricRelationModal
+        metricItem={metircData}
+        relationsInitialValue={metircData?.relateDimension?.drillDownDimensions}
+        open={metricRelationModalOpenState}
+        onCancel={() => {
+          setMetricRelationModalOpenState(false);
+        }}
+        onSubmit={(relations) => {
+          queryMetricData(metricId);
+          setMetricRelationModalOpenState(false);
+        }}
+      />
+    </>
   );
 };
 
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
new file mode 100644
index 000000000..63c7b8f28
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
@@ -0,0 +1,188 @@
+import { message, Tag, Space, Tooltip } from 'antd';
+import React, { useState, useEffect, ReactNode } from 'react';
+import { getMetricData } from '../service';
+import { connect, useParams } from 'umi';
+import type { StateType } from '../model';
+import dayjs from 'dayjs';
+import {
+  ExportOutlined,
+  SolutionOutlined,
+  ContainerOutlined,
+  PartitionOutlined,
+  FallOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import styles from './style.less';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
+import { ISemantic } from '../data';
+import MetricStar from './components/MetricStar';
+
+type Props = {
+  metircData: any;
+  domainManger: StateType;
+  onNodeChange: (params?: { eventName?: string }) => void;
+  onEditBtnClick?: (metircData: any) => void;
+  onDimensionRelationBtnClick?: () => void;
+  [key: string]: any;
+};
+
+const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
+  const params: any = useParams();
+  const metricId = params.metricId;
+
+  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
+  useEffect(() => {
+    queryMetricData(metricId);
+  }, [metricId]);
+
+  const queryMetricData = async (metricId: string) => {
+    const { code, data, msg } = await getMetricData(metricId);
+    if (code === 200) {
+      setMetircData(data);
+      return;
+    }
+    message.error(msg);
+  };
+
+  return (
+    <div className={styles.metricInfoSider}>
+      <div className={styles.title}>
+        <div className={styles.name}>
+          <Space>
+            <MetricStar metricId={metricId} initState={metircData?.isCollect} />
+            {metircData?.name}
+            {metircData?.alias && `[${metircData.alias}]`}
+            {metircData?.hasAdminRes && (
+              <span
+                className={styles.gotoMetricListIcon}
+                onClick={() => {
+                  window.open(`/webapp/model/${metircData.domainId}/${metircData.modelId}/`);
+                }}
+              >
+                <Tooltip title="前往所属模型指标列表">
+                  <ExportOutlined />
+                </Tooltip>
+              </span>
+            )}
+
+            {metircData?.sensitiveLevel !== undefined && (
+              <span style={{ marginLeft: 25 }}>
+                <Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
+                  {SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
+                </Tag>
+              </span>
+            )}
+          </Space>
+        </div>
+        {metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
+      </div>
+
+      <div className={styles.sectionContainer}>
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <ContainerOutlined />
+                基本信息
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>所属模型: </span>
+            <span className={styles.itemValue}>
+              <Space>
+                <Tag icon={<PartitionOutlined />} color="#3b5999">
+                  {metircData?.modelName || '模型名为空'}
+                </Tag>
+                {metircData?.hasAdminRes && (
+                  <span
+                    className={styles.gotoMetricListIcon}
+                    onClick={() => {
+                      window.open(`/webapp/model/${metircData.domainId}/0/overview`);
+                    }}
+                  >
+                    <Tooltip title="前往模型设置页">
+                      <ExportOutlined />
+                    </Tooltip>
+                  </span>
+                )}
+              </Space>
+            </span>
+          </div>
+          <div className={styles.item}>
+            <span className={styles.itemLable}>描述: </span>
+            <span className={styles.itemValue}>{metircData?.description}</span>
+          </div>
+        </div>
+
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <SolutionOutlined />
+                创建信息
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>创建人: </span>
+            <span className={styles.itemValue}>{metircData?.createdBy}</span>
+          </div>
+          <div className={styles.item}>
+            <span className={styles.itemLable}>创建时间: </span>
+            <span className={styles.itemValue}>
+              {metircData?.createdAt
+                ? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
+                : ''}
+            </span>
+          </div>
+          <div className={styles.item}>
+            <span className={styles.itemLable}>更新时间: </span>
+            <span className={styles.itemValue}>
+              {metircData?.createdAt
+                ? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
+                : ''}
+            </span>
+          </div>
+        </div>
+        <hr className={styles.hr} />
+        <div className={styles.ctrlBox}>
+          <ul className={styles.ctrlList}>
+            <li
+              onClick={() => {
+                onDimensionRelationBtnClick?.();
+              }}
+            >
+              <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
+                <Space style={{ width: '100%' }}>
+                  <span className={styles.ctrlItemIcon}>
+                    <FallOutlined />
+                  </span>
+                  <span className={styles.ctrlItemLable}>下钻维度配置</span>
+                </Space>
+              </Tooltip>
+            </li>
+            {/* <li
+              onClick={() => {
+                onDimensionRelationBtnClick?.();
+              }}
+            >
+              <Space style={{ width: '100%' }}>
+                <span className={styles.ctrlItemIcon}>
+                  <DeleteOutlined />
+                </span>
+                <span className={styles.ctrlItemLable}>删除</span>
+              </Space>
+            </li> */}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(MetricInfoSider);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
index 5f931d9a5..92e17be6a 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
@@ -251,7 +251,7 @@ const TrendChart: React.FC<Props> = ({
       <Skeleton
         className={styles.chart}
         style={{ height, display: loading ? 'table' : 'none' }}
-        paragraph={{ rows: height && height > 300 ? 15 : 6 }}
+        paragraph={{ rows: height && height > 300 ? 10 : 6 }}
       />
       <div
         className={styles.chart}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
index 92c315bcc..63171a6e9 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
@@ -5,23 +5,12 @@ import {
   getDrillDownDimension,
   getDimensionList,
 } from '@/pages/SemanticModel/service';
-import {
-  InfoCircleOutlined,
-  LineChartOutlined,
-  TableOutlined,
-  DownloadOutlined,
-  PoweroffOutlined,
-} from '@ant-design/icons';
+import { InfoCircleOutlined, DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
 import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
 import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
 import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
 import MDatePicker from '@/components/MDatePicker';
-import {
-  DateRangeType,
-  DateSettingType,
-  DynamicAdvancedConfigType,
-  DatePeriodType,
-} from '@/components/MDatePicker/type';
+import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
 import { getDatePickerDynamicInitialValues } from '@/components/MDatePicker/utils';
 import StandardFormRow from '@/components/StandardFormRow';
 import MetricTable from './Table';
@@ -29,9 +18,11 @@ import { ColumnConfig } from '../data';
 import dayjs from 'dayjs';
 import { ISemantic } from '../../data';
 import { DateFieldMap } from '@/pages/SemanticModel/constant';
+import ProCard from '@ant-design/pro-card';
+
+import styles from '../style.less';
 
 const FormItem = Form.Item;
-const { Option } = Select;
 
 type Props = {
   metircData?: ISemantic.IMetricItem;
@@ -191,11 +182,11 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
       initDimensionData(metircData);
       setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
     }
-  }, [metircData?.id, periodDate]);
+  }, [metircData, periodDate]);
 
   return (
-    <div style={{ backgroundColor: '#fff', marginTop: 20 }}>
-      <div style={{ marginBottom: 25 }}>
+    <div className={styles.metricTrendSection}>
+      <div className={styles.sectionBox}>
         <Row>
           <Col flex="1 1 200px">
             <Form
@@ -276,159 +267,83 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
               </StandardFormRow>
             </Form>
           </Col>
-          <Col flex="0 1">
-            <Space>
-              {metircData?.hasAdminRes && (
-                <Button
-                  type="primary"
-                  key="addDimension"
-                  onClick={() => {
-                    setMetricRelationModalOpenState(true);
-                  }}
-                >
-                  <Space>
-                    下钻维度配置
-                    <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
-                      <InfoCircleOutlined />
-                    </Tooltip>
-                  </Space>
-                </Button>
-              )}
-
-              <Space.Compact block>
-                <Button
-                  type="primary"
-                  key="download"
-                  loading={downloadLoding}
-                  disabled={downloadBtnDisabledState}
-                  onClick={() => {
-                    getMetricTrendData({ download: true, ...queryParams });
-                  }}
-                >
-                  <Space>
-                    <DownloadOutlined />
-                    下载
-                  </Space>
-                </Button>
-
-                <Tooltip title="开启转置">
-                  <Button
-                    type={transformState ? 'primary' : 'default'}
-                    icon={<PoweroffOutlined />}
-                    onClick={() => {
-                      setTransformState(!transformState);
-                    }}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            </Space>
-          </Col>
+          <Col flex="0 1" />
         </Row>
       </div>
       {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
-      <Row style={{ marginBottom: 20 }}>
-        <Col flex="1 1 300px">
-          <Radio.Group
-            size="small"
-            buttonStyle="solid"
-            options={[
-              {
-                label: (
-                  <Tooltip title="折线图">
-                    <LineChartOutlined />
-                  </Tooltip>
-                ),
-                value: 'chart',
-              },
-              {
-                label: (
-                  <Tooltip title="表格">
-                    <TableOutlined />
-                  </Tooltip>
-                ),
-                value: 'table',
-              },
-            ]}
-            onChange={(e) => {
-              setChartType(e.target.value);
-            }}
-            value={chartType}
-            optionType="button"
+      <div className={styles.sectionBox}>
+        <ProCard size="small" title="数据趋势">
+          <TrendChart
+            data={metricTrendData}
+            isPer={
+              metricColumnConfig?.dataFormatType === 'percent' &&
+              metricColumnConfig?.dataFormat?.needMultiply100 === false
+                ? true
+                : false
+            }
+            isPercent={
+              metricColumnConfig?.dataFormatType === 'percent' &&
+              metricColumnConfig?.dataFormat?.needMultiply100 === true
+                ? true
+                : false
+            }
+            rowNumber={rowNumber}
+            fields={indicatorFields.current}
+            loading={metricTrendLoading}
+            dateFieldName={periodDate.dateField}
+            groupByDimensionFieldName={groupByDimensionFieldName}
+            height={400}
+            renderType="clear"
+            decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
           />
-          {/* <Space>
-            <Select
-              style={{ minWidth: 150, maxWidth: 200 }}
-              options={showDimensionOptions}
-              value={groupByDimensionFieldName}
-              showSearch
-              filterOption={(input, option) =>
-                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-              }
-              placeholder="展示维度切换"
-              onChange={(value) => {
-                setGroupByDimensionFieldName(value);
-              }}
+        </ProCard>
+      </div>
+
+      <div className={styles.sectionBox}>
+        <ProCard
+          size="small"
+          title="源数据"
+          collapsible
+          extra={
+            <Space.Compact block>
+              <Button
+                size="middle"
+                type="primary"
+                key="download"
+                loading={downloadLoding}
+                disabled={downloadBtnDisabledState}
+                onClick={() => {
+                  getMetricTrendData({ download: true, ...queryParams });
+                }}
+              >
+                <Space>
+                  <DownloadOutlined />下 载
+                </Space>
+              </Button>
+
+              <Tooltip title="开启转置">
+                <Button
+                  size="middle"
+                  type={transformState ? 'primary' : 'default'}
+                  icon={<PoweroffOutlined />}
+                  onClick={() => {
+                    setTransformState(!transformState);
+                  }}
+                />
+              </Tooltip>
+            </Space.Compact>
+          }
+        >
+          <div style={{ minHeight: '528px' }}>
+            <MetricTable
+              loading={metricTrendLoading}
+              columnConfig={tableColumnConfig}
+              dataSource={metricTrendData}
+              dateFieldName={periodDate.dateField}
+              metricFieldName={indicatorFields.current?.[0]?.column}
             />
-          </Space> */}
-        </Col>
-        <Col flex="0 1 100px">
-          <Space>
-            <Select
-              defaultValue={rowNumber}
-              style={{
-                width: 120,
-                display:
-                  Array.isArray(queryParams.dimensionGroup) &&
-                  queryParams.dimensionGroup.length > 0 &&
-                  chartType === 'chart'
-                    ? 'block'
-                    : 'none',
-              }}
-              onChange={(value) => {
-                setRowNumber(value);
-              }}
-            >
-              <Option value={5}>前5项</Option>
-              <Option value={10}>前10项</Option>
-              <Option value={15}>前15项</Option>
-              <Option value={20}>前20项</Option>
-            </Select>
-          </Space>
-        </Col>
-      </Row>
-      {chartType === 'chart' && (
-        <TrendChart
-          data={metricTrendData}
-          isPer={
-            metricColumnConfig?.dataFormatType === 'percent' &&
-            metricColumnConfig?.dataFormat?.needMultiply100 === false
-              ? true
-              : false
-          }
-          isPercent={
-            metricColumnConfig?.dataFormatType === 'percent' &&
-            metricColumnConfig?.dataFormat?.needMultiply100 === true
-              ? true
-              : false
-          }
-          rowNumber={rowNumber}
-          fields={indicatorFields.current}
-          loading={metricTrendLoading}
-          dateFieldName={periodDate.dateField}
-          groupByDimensionFieldName={groupByDimensionFieldName}
-          height={500}
-          renderType="clear"
-          decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
-        />
-      )}
-      <div style={{ display: chartType === 'table' ? 'block' : 'none', marginBottom: 45 }}>
-        <MetricTable
-          loading={metricTrendLoading}
-          columnConfig={tableColumnConfig}
-          dataSource={metricTrendData}
-          dateFieldName={periodDate.dateField}
-          metricFieldName={indicatorFields.current?.[0]?.column}
-        />
+          </div>
+        </ProCard>
       </div>
 
       <DimensionAndMetricRelationModal
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
index 55123c57b..906ac0477 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -99,7 +99,7 @@
             line-height: 1.5714285714285714;
             list-style: none;
             .extraTitle {
-                font-size: 12px;
+                // font-size: 12px;
                 min-width: 50px;
                 margin-inline-end: 6px;
                 margin-block-end: 0;
@@ -116,80 +116,231 @@
     }
 }
 
-.metricDetail {
-    height: calc(100vh - 50px);
-    .title {
-        margin-bottom: 0;
-        margin-top:0;
-        background-color: #fff;
-        font-size: 20px;
-        line-height: 34px;
-        border-bottom: 1px solid #d9d9d9;
-        display: flex;
-        .titleLeft {
-            display: flex;
-            flex: 1 1 auto;
-            .navContainer {
-                // display: flex;
-                padding: 20px;
-                padding-left: 30px;
-                .description {
-                    font-size: 12px;
-                    line-height: 12px;
-                    padding-top: 12px;
-                    color: #546174
-                }
-            }
-            .backBtn {
-                background-color: #f8f8f8;
-                padding: 5px;
-                color: #b0b4bc;
-                cursor: pointer;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-                &:hover {
-                    background-color: #7599e5;
-                    color: #fff;
-                }
-            }
-        }
-        .titleRight {
-            display: flex;
-            flex: 0 1 200px;
-            .info {
-                margin: 15px;
-            }
-        }
-    }
 
-    .tabContainer {
-        background-color: #fff;
-        padding: 0px 40px;
-    }
-    .metricInfoContent {
-        padding:25px;
-        .title {
-            margin-bottom: 12px;
-            font-size: 16px;
-            color: #0e73ff;
-            font-weight: bold;
-            position: relative;
-            &::before {
-                display: block;
-                position: absolute;
-                content: "";
-                left: -10px;
-                top: 10px;
-                height: 14px;
-                width: 3px;
-                font-size: 0;
-                background: #0e73ff;
-                border-radius: 2px;
-                border: 1px solid #0e73ff;
+.metricDetailWrapper {
+    height: calc(100vh - 56px);
+    overflow: scroll;
+    .metricDetail {
+        display: flex;
+        padding: 0px;
+        width: 100%;
+        background-color: transparent;
+        position: relative;
+        flex-direction: row;
+        .tabContainer {
+            background-color: rgb(240, 242, 245);
+            width: calc(100vw - 450px);
+        }
+        .metricInfoContent {
+            padding:25px;
+            .title {
+                margin-bottom: 12px;
+                font-size: 16px;
+                color: #0e73ff;
+                font-weight: bold;
+                position: relative;
+                &::before {
+                    display: block;
+                    position: absolute;
+                    content: "";
+                    left: -10px;
+                    top: 10px;
+                    height: 14px;
+                    width: 3px;
+                    font-size: 0;
+                    background: #0e73ff;
+                    border-radius: 2px;
+                    border: 1px solid #0e73ff;
+                }
             }
         }
     }
 }
+.metricTrendSection {
+    .sectionBox {
+        margin: 20px;
+        padding: 20px;
+        box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+        background-color: rgb(255, 255, 255);
+        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        border-radius: 6px;
+        background-image: none;
+        overflow: hidden;
+    }
+}
 
+.metricInfoSider{
+    padding: 24px;
+    color: #344767;
+    .gotoMetricListIcon {
+        color: #3182ce;
+        cursor: pointer;
+        &:hover {
+            color: #5493ff;
+        }
+    }
+    .title {
+        .name {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        .bizName {
+            margin: 5px 0 0 25px;
+            color: #7b809a;
+            font-weight: 400;
+        }
+    }
+    .desc {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.9;
+        margin-top: 8px;
+        display: block;
+        color: #7b809a;
+    }
+    .sectionContainer{
+        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        border-radius: 6px;
+        box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+        background-image: none;
+        margin-top: 20px;
+        overflow: hidden;
+        .section {
+            padding: 16px;
+            line-height: 1.25;
+            opacity: 1;
+            background: transparent;
+            color: rgb(52, 71, 103);
+            box-shadow: none;
+            .sectionTitleBox {
+                padding: 8px 0;
+                opacity: 1;
+                background: transparent;
+                color: rgb(52, 71, 103);
+                box-shadow: none;
+                .sectionTitle {
+                    margin: 0px;
+                    font-size: 16px;
+                    line-height: 1.625;
+                    letter-spacing: 0.0075em;
+                    opacity: 1;
+                    text-transform: capitalize;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: rgb(52, 71, 103);
+                    font-weight: 600;
+                }
+            }
+            .subTitle {
+                margin: 0px;
+                font-family: Roboto, Helvetica, Arial, sans-serif;
+                font-size: 14px;
+                line-height: 1.25;
+                letter-spacing: 0.03333em;
+                opacity: 1;
+                text-transform: uppercase;
+                vertical-align: unset;
+                text-decoration: none;
+                color: rgb(123, 128, 154);
+                font-weight: 700;
+            }
+            .item {
+                display: flex;
+                padding-top: 8px;
+                padding-bottom: 8px;
+                padding-right: 16px;
+                opacity: 1;
+                background: transparent;
+                color: rgb(52, 71, 103);
+                box-shadow: none;
+                .itemLable {
+                    margin: 0px;
+                    font-size: 14px;
+                    line-height: 1.5;
+                    letter-spacing: 0.02857em;
+                    opacity: 1;
+                    text-transform: capitalize;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: #344767;
+                    margin-right: 10px;
+                    min-width: fit-content;
+                    font-weight: 700;
+                }
+                .itemValue{
+                    margin: 0px;
+                    font-size: 14px;
+                    line-height: 1.5;
+                    letter-spacing: 0.02857em;
+                    opacity: 1;
+                    text-transform: none;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: #7b809a;
+                    font-weight: 400; 
+                }
+            }
+        }
+        .hr {
+            margin: 0px;
+            flex-shrink: 0;
+            border-width: 0px 0px thin;
+            border-style: solid;
+            border-color: rgb(242, 244, 247);
+        }
+        .ctrlBox{
+            .ctrlList{
+                list-style: none;
+                margin: 0px;
+                padding: 8px 0px;
+                position: relative;
+                background-color: rgb(249, 250, 251);
+                li {
+                    -webkit-tap-highlight-color: transparent;
+                    background-color: transparent;
+                    outline: 0px;
+                    border: 0px;
+                    margin: 4px;
+                    border-radius: 0px;
+                    cursor: pointer;
+                    user-select: none;
+                    vertical-align: middle;
+                    appearance: none;
+                    color: inherit;
+                    display: flex;
+                    -webkit-box-flex: 1;
+                    flex-grow: 1;
+                    -webkit-box-pack: start;
+                    justify-content: flex-start;
+                    -webkit-box-align: center;
+                    align-items: center;
+                    position: relative;
+                    text-decoration: none;
+                    min-width: 0px;
+                    box-sizing: border-box;
+                    text-align: left;
+                    padding: 4px 16px;
+                    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                    &:hover {
+                        text-decoration: none;
+                        background-color: rgba(16, 24, 40, 0.04);
+                        color: #3182ce;
+                    } 
+                }
+                .ctrlItemIcon {
+                    flex-shrink: 0;
+                    font-size: 16px;
+                    margin-right: 5px;
+                    min-width: unset;
+                }
+                .styles.ctrlItemLable {
+                    margin: 0px;
+                    line-height: 1.6;
+                    font-weight: 400;
+                    font-size: 14px;
+                    display: block;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file