diff --git a/crates/kernel/src/prom/mod.rs b/crates/kernel/src/prom/mod.rs
index 5da430f3..c4cc745f 100644
--- a/crates/kernel/src/prom/mod.rs
+++ b/crates/kernel/src/prom/mod.rs
@@ -65,29 +65,51 @@ pub struct QueryResponseDataItem {
     pub values: Vec<(i64, String)>,
 }
 
+/// LineSeries is a series of line chart
 #[derive(Debug, Serialize, Deserialize)]
 pub struct LineSeries {
     pub total: i64,
     pub values: Vec<(i64, i64)>,
 }
 
+pub type MultiLineSeries = HashMap<String, LineSeries>;
+
 impl LineSeries {
-    pub fn from(res: &QueryResponse, sequence: Vec<i64>) -> Self {
-        let mut times_data = HashMap::<i64, i64>::new();
+    pub fn from(res: &QueryResponse, sequence: Vec<i64>) -> MultiLineSeries {
+        let mut all_times_data = HashMap::<String, HashMap<i64, i64>>::new();
         for item in res.data.result.iter() {
+            let mut times_data = HashMap::<i64, i64>::new();
+            // convert metric map to vec and sorted, join by "-" as key
+            let mut keys: Vec<String> = item
+                .metric
+                .iter()
+                .map(|(k, v)| format!("{}-{}", k, v))
+                .collect();
+            keys.sort();
+            let mut key = keys.join("-");
+            if key.is_empty() {
+                key = "metric".to_string();
+            }
             for (t, v) in &item.values {
                 let value = v.parse::<f64>().unwrap_or(0.0) as i64;
                 times_data.insert(*t, value);
             }
+            all_times_data.insert(key, times_data);
         }
-        let mut values = vec![];
-        let mut total: i64 = 0;
-        for t in sequence.iter() {
-            let value = times_data.get(t).unwrap_or(&0);
-            values.push((*t * 1000, *value)); // js use milliseconds, t*1000
-            total += *value;
+
+        let mut res = MultiLineSeries::new();
+        for (k, times_data) in all_times_data.iter() {
+            let mut values = vec![];
+            let mut total: i64 = 0;
+            for t in sequence.iter() {
+                let value = times_data.get(t).unwrap_or(&0);
+                values.push((*t * 1000, *value)); // js use milliseconds, t*1000
+                total += *value;
+            }
+            let ls = LineSeries { total, values };
+            res.insert(k.clone(), ls);
         }
-        LineSeries { total, values }
+        res
     }
 }
 
diff --git a/land-server/src/server/dash/overview.rs b/land-server/src/server/dash/overview.rs
index b93fe4a2..8d312609 100644
--- a/land-server/src/server/dash/overview.rs
+++ b/land-server/src/server/dash/overview.rs
@@ -11,6 +11,7 @@ use tracing::info;
 
 #[derive(Debug, Serialize)]
 pub struct ProjectVar {
+    pub id: i32,
     pub name: String,
     pub domain: String,
     pub domain_full: String,
@@ -32,6 +33,7 @@ impl ProjectVar {
         Ok(projects
             .into_iter()
             .map(|p| ProjectVar {
+                id: p.id,
                 name: p.name.clone(),
                 domain: p.domain.clone(),
                 domain_full: format!("{}.{}", p.domain, domain),
@@ -52,6 +54,7 @@ impl ProjectVar {
     ) -> anyhow::Result<Self> {
         let (domain, protocol) = settings::get_domain_settings().await?;
         let mut var = ProjectVar {
+            id: project.id,
             name: project.name.clone(),
             domain: project.domain.clone(),
             domain_full: format!("{}.{}", project.domain, domain),
diff --git a/land-server/src/server/dash/traffic.rs b/land-server/src/server/dash/traffic.rs
index 529792e9..8fbcb8da 100644
--- a/land-server/src/server/dash/traffic.rs
+++ b/land-server/src/server/dash/traffic.rs
@@ -53,7 +53,34 @@ pub async fn flows(
     Extension(user): Extension<SessionUser>,
     Query(q): Query<RequestsQuery>,
 ) -> Result<impl IntoResponse, ServerError> {
-    Ok("flows".to_string())
+    let now = tokio::time::Instant::now();
+    let period = q.get_period();
+    let acc = q.account.unwrap_or_default();
+    if acc != user.id.to_string() {
+        return Err(ServerError::forbidden("user id does not match"));
+    }
+    let query = get_flow_query(acc, q.project, period.step_word);
+    debug!(
+        "query: {}, start:{}, end:{}, step:{}",
+        query, period.start, period.end, period.step
+    );
+    let params = land_kernel::prom::QueryRangeParams {
+        query: query.clone(),
+        step: period.step,
+        start: period.start,
+        end: period.end,
+    };
+    let res = land_kernel::prom::query_range(params).await?;
+    let values = land_kernel::prom::LineSeries::from(&res, period.sequence);
+    info!(
+        "query: {}, start:{}, end:{}, step:{},  cost:{}",
+        query,
+        period.start,
+        period.end,
+        period.step,
+        now.elapsed().as_millis(),
+    );
+    Ok(Json(values))
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -68,23 +95,13 @@ pub async fn requests(
     Extension(user): Extension<SessionUser>,
     Query(q): Query<RequestsQuery>,
 ) -> Result<impl IntoResponse, ServerError> {
+    let now = tokio::time::Instant::now();
     let period = q.get_period();
     let acc = q.account.unwrap_or_default();
     if acc != user.id.to_string() {
         return Err(ServerError::forbidden("user id does not match"));
     }
-    let query = if let Some(pid) = q.project {
-        format!(
-            "increase(req_fn_total{{project_id=\"{}\"}}[{}])",
-            pid, period.step_word
-        )
-    } else {
-        format!(
-            "sum(increase(req_fn_total{{user_id=\"{}\"}}[{}]))",
-            acc, period.step_word
-        )
-    };
-    let now = tokio::time::Instant::now();
+    let query = get_request_query(acc, q.project, period.step_word);
     // end time is now ts with latest 10 decade
     debug!(
         "query: {}, start:{}, end:{}, step:{}",
@@ -99,13 +116,42 @@ pub async fn requests(
     let res = land_kernel::prom::query_range(params).await?;
     let values = land_kernel::prom::LineSeries::from(&res, period.sequence);
     info!(
-        "query: {}, start:{}, end:{}, step:{}, values:{}, cost:{}",
+        "query: {}, start:{}, end:{}, step:{},  cost:{}",
         query,
         period.start,
         period.end,
         period.step,
-        values.values.len(),
         now.elapsed().as_millis(),
     );
     Ok(Json(values))
 }
+
+fn get_flow_query(acc: String, project: Option<String>, step: String) -> String {
+    let query = if let Some(pid) = project {
+        format!(
+            "sum by (project_id,flowtype) (increase(req_fn_bytes_total{{project_id=\"{}\"}}[{}]))",
+            pid, step,
+        )
+    } else {
+        format!(
+            "sum by (user_id,flowtype) (increase(req_fn_bytes_total{{user_id=\"{}\"}}[{}]))",
+            acc, step,
+        )
+    };
+    query
+}
+
+fn get_request_query(acc: String, project: Option<String>, step: String) -> String {
+    let query = if let Some(pid) = project {
+        format!(
+            "sum(increase(req_fn_total{{project_id=\"{}\",status=\"all\"}}[{}]))",
+            pid, step,
+        )
+    } else {
+        format!(
+            "sum(increase(req_fn_total{{user_id=\"{}\",status=\"all\"}}[{}]))",
+            acc, step,
+        )
+    };
+    query
+}
diff --git a/land-server/tpls/partials/project_traffic.hbs b/land-server/tpls/partials/project_traffic.hbs
new file mode 100644
index 00000000..c04f90f5
--- /dev/null
+++ b/land-server/tpls/partials/project_traffic.hbs
@@ -0,0 +1,25 @@
+<div class="container project-container py-3" id="traffic" data-x-account="{{user.id}}" data-x-project="{{project.id}}">
+    <div class="border rounded p-4 mb-4">
+        <div>
+            <p class="text-body-tertiary text-uppercase mb-2">Request counts</p>
+            <p class="fw-bold mb-1" id="requests-total"></p>
+            <div id="requests-loading-spinner" class="spinner-grow spinner-grow-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div id="requests-chart" style="height: 200px;"></div>
+    </div>
+    <div class="border rounded p-4 mb-4">
+        <div>
+            <p class="text-body-tertiary text-uppercase mb-2">Transferred Bytes</p>
+            <p class="fw-bold mb-1" id="flows-total"></p>
+            <div id="flows-loading-spinner" class="spinner-grow spinner-grow-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div id="flows-chart" style="height: 200px;"></div>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"
+    integrity="sha256-QvgynZibb2U53SsVu98NggJXYqwRL7tg3FeyfXvPOUY=" crossorigin="anonymous"></script>
+<script src="/static/js/traffic.js"></script>
\ No newline at end of file
diff --git a/land-server/tpls/partials/traffic.hbs b/land-server/tpls/partials/traffic.hbs
index 705c8a73..89504af6 100644
--- a/land-server/tpls/partials/traffic.hbs
+++ b/land-server/tpls/partials/traffic.hbs
@@ -16,7 +16,18 @@
                 <div id="requests-chart" style="height: 200px;"></div>
             </div>
         </div>
-        <div class="col-6">222</div>
+        <div class="col-6">
+            <div class="border rounded p-4">
+                <div>
+                    <p class="text-body-tertiary text-uppercase mb-2">Transferred Bytes</p>
+                    <p class="fw-bold mb-1" id="flows-total"></p>
+                    <div id="flows-loading-spinner" class="spinner-grow spinner-grow-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+                <div id="flows-chart" style="height: 200px;"></div>
+            </div>
+        </div>
     </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"
diff --git a/land-server/tpls/project-traffic.hbs b/land-server/tpls/project-traffic.hbs
index 76f83568..fe1a8f4b 100644
--- a/land-server/tpls/project-traffic.hbs
+++ b/land-server/tpls/project-traffic.hbs
@@ -15,11 +15,7 @@
             <a class="nav-link" href="/projects/{{project.name}}/settings">Settings</a>
         </nav>
         <div class="pb-4">
-            <div class="card m-3">
-                <div class="card-body">
-                    Traffic
-                </div>
-            </div>
+            {{> partials/project_traffic.hbs}}
         </div>
     </div>
     {{> partials/footer.hbs}}
diff --git a/land-server/tpls/static/js/traffic.js b/land-server/tpls/static/js/traffic.js
index 01303f85..a3159575 100644
--- a/land-server/tpls/static/js/traffic.js
+++ b/land-server/tpls/static/js/traffic.js
@@ -2,7 +2,13 @@
 (async () => {
     let d = document.getElementById("requests-loading-spinner");
     let acc = document.getElementById("traffic").getAttribute("data-x-account");
-    let resp = await fetch("/traffic/requests?account=" + acc)
+    let project = document.getElementById("traffic").getAttribute("data-x-project") || "";
+    console.log("---project",project)
+    let url = "/traffic/requests?account=" + acc;
+    if (project) {
+        url += "&project=" + project
+    }
+    let resp = await fetch(url)
     if (!resp.ok) {
         // TODO: show error message
         return
@@ -10,8 +16,9 @@
     // hide loading spinner
     d.classList.add("d-none");
     let series = await resp.json();
+    series = series["metric"] || { total: 0, values: [] };
     document.getElementById("requests-total").innerText = friendly_bytesize(series.total, false);
-    let chart = echarts.init(document.getElementById('requests-chart'));
+    let chart = echarts.init(document.getElementById('requests-chart'), null, { renderer: 'svg' });
     let option = {
         title: {
             show: false,
@@ -71,7 +78,122 @@
         ]
     };
     chart.setOption(option);
-})()
+})();
+
+(async () => {
+    let d = document.getElementById("flows-loading-spinner");
+    let acc = document.getElementById("traffic").getAttribute("data-x-account");
+    let project = document.getElementById("traffic").getAttribute("data-x-project") || "";
+    let url = "/traffic/flows?account=" + acc;
+    if (project) {
+        url += "&project=" + project
+    }
+    let resp = await fetch(url)
+    if (!resp.ok) {
+        // TODO: show error message
+        return
+    }
+    d.classList.add("d-none");
+    let series = await resp.json();
+    let in_series = series["flowtype-in-user_id-" + acc] || { total: 0, values: [] };
+    let out_series = series["flowtype-out-user_id-" + acc] || { total: 0, values: [] };
+    if (project){
+        in_series = series["flowtype-in-project_id-" + project] || { total: 0, values: [] };
+        out_series = series["flowtype-out-project_id-" + project] || { total: 0, values: [] };
+    }
+    document.getElementById("flows-total").innerText = friendly_bytesize(out_series.total, true);
+    let chart = echarts.init(document.getElementById('flows-chart'), null, { renderer: 'svg' });
+    let option = {
+        title: {
+            show: false,
+        },
+        tooltip: {
+            trigger: "axis",
+            formatter: function (params) {
+                let t = params[0].axisValueLabel;
+                let content = `<span>${t}<br/>`
+                params.forEach((p) => {
+                    let v = friendly_bytesize(p.value[1], true);
+                    let name = p.seriesName.toUpperCase();
+                    content += `<span style="color:${p.color}">${name}</span> <strong>${v}</strong><br/>`
+                })
+                return content + "</span>"
+            }
+        },
+        xAxis: {
+            type: 'time',
+            axisLabel: {
+                formatter: function (value, index) {
+                    return unix2hour(value) // js use milliseconds
+                },
+                color: "#AAA",
+            },
+            splitNumber: 3,
+        },
+        yAxis: {
+            show: false
+        },
+        grid: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 20,
+        },
+        series: [
+            {
+                type: 'line',
+                data: in_series.values,
+                name: "in",
+                smooth: true,
+                symbol: "none",
+                lineStyle: {
+                    normal: {
+                        color: "#5470c6",
+                        width: 2,
+                    }
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: '#5470c6'
+                        },
+                        {
+                            offset: 1,
+                            color: '#FFF'
+                        }
+                    ])
+                },
+            },
+            {
+                type: 'line',
+                data: out_series.values,
+                name: "out",
+                smooth: true,
+                symbol: "none",
+                lineStyle: {
+                    normal: {
+                        color: "#91cc75",
+                        width: 2,
+                    }
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: "#91cc75"
+                        },
+                        {
+                            offset: 1,
+                            color: '#FFF'
+                        }
+                    ])
+                },
+            },
+        ]
+    };
+    chart.setOption(option);
+})();
 
 /// convert unixtimestamp to hour and minute, HH:MM
 function unix2hour(v) {
@@ -83,6 +205,9 @@ function unix2hour(v) {
 }
 
 function friendly_bytesize(v, is_bytes) {
+    if (v < 0.1) {
+        return 0
+    }
     let bytes_units = ['iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
     let units = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
     let i = 0;