diff --git a/dashboard/src/api/v0.ts b/dashboard/src/api/v0.ts
index 1d4ffec3..9e2ff7b7 100644
--- a/dashboard/src/api/v0.ts
+++ b/dashboard/src/api/v0.ts
@@ -26,4 +26,5 @@ export interface APIStatus {
 	startAt: string
 	stats: Stats
 	enabled: boolean
+	accesses: { [ua: string]: number }
 }
diff --git a/dashboard/src/assets/lang/en-US.json b/dashboard/src/assets/lang/en-US.json
index 24d21a7c..1f825be5 100644
--- a/dashboard/src/assets/lang/en-US.json
+++ b/dashboard/src/assets/lang/en-US.json
@@ -7,7 +7,8 @@
 		"year": "Year requests",
 		"total": "Total requests",
 		"hits": "Hits",
-		"bytes": "Bytes"
+		"bytes": "Bytes",
+		"user_agents": "Common User Agents"
 	},
 	"message": {
 		"server": {
diff --git a/dashboard/src/assets/lang/zh-CN.json b/dashboard/src/assets/lang/zh-CN.json
index 8b08710c..660f097f 100644
--- a/dashboard/src/assets/lang/zh-CN.json
+++ b/dashboard/src/assets/lang/zh-CN.json
@@ -7,7 +7,8 @@
 		"year": "当年请求",
 		"total": "全部请求",
 		"hits": "请求数",
-		"bytes": "流量"
+		"bytes": "流量",
+		"user_agents": "常见用户代理"
 	},
 	"message": {
 		"server": {
diff --git a/dashboard/src/components/HitsChart.vue b/dashboard/src/components/HitsChart.vue
index 1f883c90..4cc7c055 100644
--- a/dashboard/src/components/HitsChart.vue
+++ b/dashboard/src/components/HitsChart.vue
@@ -6,8 +6,6 @@ import type { StatInstData } from '@/api/v0'
 import { tr } from '@/lang'
 
 const props = defineProps<{
-	width?: number | string
-	height?: number | string
 	max: number
 	offset: number
 	data: StatInstData[]
@@ -93,7 +91,6 @@ const getChartOptions = () => {
 	return {
 		stacked: false,
 		maintainAspectRatio: false,
-		aspectRatio: 0.4,
 		interaction: {
 			mode: 'index',
 			intersect: false,
@@ -138,6 +135,7 @@ const getChartOptions = () => {
 			y: {
 				type: 'linear',
 				display: true,
+				beginAtZero: true,
 				position: 'left',
 				ticks: {
 					color: textColorSecondary,
@@ -150,6 +148,7 @@ const getChartOptions = () => {
 			y1: {
 				type: 'linear',
 				display: true,
+				beginAtZero: true,
 				position: 'right',
 				ticks: {
 					color: textColorSecondary,
@@ -176,6 +175,5 @@ onMounted(() => {
 		type="line"
 		:data="chartData"
 		:options="chartOptions"
-		:style="{ height: height, width: width }"
 	/>
 </template>
diff --git a/dashboard/src/components/UAChart.vue b/dashboard/src/components/UAChart.vue
new file mode 100644
index 00000000..64f3c0be
--- /dev/null
+++ b/dashboard/src/components/UAChart.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { onMounted, ref, watch, computed } from 'vue'
+import Chart from 'primevue/chart'
+import { formatNumber } from '@/utils'
+import { tr } from '@/lang'
+
+const props = defineProps<{
+	max: number
+	data: { [ua: string]: number }
+}>()
+
+const data = computed(() => Object.entries(props.data).
+	map(([ua, count]) => ({ ua: ua, count: count })).
+	sort((a, b) => b.count - a.count).
+	splice(0, 7))
+
+const chartObj = ref()
+const chartData = ref()
+const chartOptions = ref()
+
+const getChartData = () => {
+	const documentStyle = getComputedStyle(document.documentElement)
+
+	const labels = computed({
+		get: () => data.value.map(({ua}) => ua),
+		set: (value) => {},
+	})
+	const counts = computed(() => data.value.map(({count}) => count))
+	const colors = [
+		documentStyle.getPropertyValue('--red-500'),
+		documentStyle.getPropertyValue('--orange-500'),
+		documentStyle.getPropertyValue('--yellow-500'),
+		documentStyle.getPropertyValue('--green-500'),
+		documentStyle.getPropertyValue('--cyan-500'),
+		documentStyle.getPropertyValue('--blue-500'),
+		documentStyle.getPropertyValue('--purple-500'),
+	]
+	return {
+		labels: labels,
+		datasets: [
+			{
+				label: computed(() => tr('title.hits')),
+				data: counts,
+				backgroundColor: colors.map((rgb) => rgb + '33'),
+				borderColor: colors,
+				borderWidth: 1,
+			},
+		],
+	}
+}
+
+const getChartOptions = () => {
+	const documentStyle = getComputedStyle(document.documentElement)
+	const textColor = documentStyle.getPropertyValue('--text-color')
+	const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary')
+	const surfaceBorder = documentStyle.getPropertyValue('--surface-border')
+
+	return {
+		indexAxis: 'y',
+		stacked: false,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: 'index',
+			axis: 'y',
+			intersect: false,
+		},
+		plugins: {
+			tooltip: {
+				callbacks: {
+					label: (context: any) => {
+						switch (context.dataset.yAxisID) {
+							case 'y':
+								context.formattedValue = formatNumber(context.raw)
+								break
+						}
+					},
+				},
+			},
+			legend: {
+				labels: {
+					color: textColor,
+				},
+			},
+		},
+		scales: {
+			y: {
+				ticks: {
+					color: textColorSecondary,
+				},
+				grid: {
+					color: surfaceBorder,
+				},
+			},
+			x: {
+				type: 'linear',
+				display: true,
+				beginAtZero: true,
+				position: 'left',
+				ticks: {
+					color: textColorSecondary,
+					callback: formatNumber,
+				},
+				grid: {
+					color: surfaceBorder,
+				},
+			},
+		},
+	}
+}
+
+onMounted(() => {
+	chartData.value = getChartData()
+	chartOptions.value = getChartOptions()
+})
+</script>
+
+<template>
+	<Chart
+		type="bar"
+		:data="chartData"
+		:options="chartOptions"
+	/>
+</template>
\ No newline at end of file
diff --git a/dashboard/src/views/HomeView.vue b/dashboard/src/views/HomeView.vue
index 95f3eff4..ddb2d710 100644
--- a/dashboard/src/views/HomeView.vue
+++ b/dashboard/src/views/HomeView.vue
@@ -2,11 +2,13 @@
 import { onMounted, ref, computed } from 'vue'
 import { useRequest } from 'vue-request'
 import axios from 'axios'
+import Button from 'primevue/button'
+import Chart from 'primevue/chart'
 import ProgressSpinner from 'primevue/progressspinner'
 import Skeleton from 'primevue/skeleton'
-import Button from 'primevue/button'
 import { formatNumber, formatBytes, formatTime } from '@/utils'
 import HitsChart from '@/components/HitsChart.vue'
+import UAChart from '@/components/UAChart.vue'
 import type { StatInstData, APIStatus } from '@/api/v0'
 import { tr } from '@/lang'
 
@@ -95,72 +97,97 @@ function getDaysInMonth(): number {
 <template>
 	<main>
 		<h1>Go-OpenBmclAPI {{ tr('title.dashboard') }}</h1>
-		<div class="basic-info">
-			<Button
-				class="info-status"
-				:status="status"
-			>
-				{{ tr(`badge.server.status.${status}`) }}
-			</Button>
-
-			<ProgressSpinner v-if="loading" class="polling" strokeWidth="6"/>
-			<div v-if="error">
-				<b>{{ error }}</b>
+		<div class="main">
+			<div class="basic-info">
+				<Button
+					class="info-status"
+					:status="status"
+				>
+					{{ tr(`badge.server.status.${status}`) }}
+				</Button>
+
+				<ProgressSpinner v-if="loading" class="polling" strokeWidth="6"/>
+				<div v-if="error">
+					<b>{{ error }}</b>
+				</div>
+				<div v-else-if="data">
+					{{ tr('message.server.run-for') }}
+					<span class="info-uptime">
+						{{ formatTime(now.getTime() - new Date(data.startAt).getTime()) }}
+					</span>
+				</div>
 			</div>
-			<div v-else-if="data">
-				{{ tr('message.server.run-for') }}
-				<span class="info-uptime">
-					{{ formatTime(now.getTime() - new Date(data.startAt).getTime()) }}
-				</span>
+			<div class="hits-chart-box">
+				<div class="chart-card">
+					<h3>{{ tr('title.day') }}</h3>
+					<HitsChart
+						v-if="stat"
+						class="hits-chart"
+						:max="25"
+						:offset="23"
+						:data="stat.hours"
+						:oldData="stat.prev.hours"
+						:current="stat.date.hour + new Date().getMinutes() / 60"
+						:formatXLabel="formatHour"
+					/>
+					<Skeleton v-else class="hits-chart"/>
+				</div>
+				<div class="chart-card">
+					<h3>{{ tr('title.month') }}</h3>
+					<HitsChart
+						v-if="stat"
+						class="hits-chart"
+						:max="31"
+						:offset="29"
+						:data="stat.days"
+						:oldData="stat.prev.days"
+						:current="stat.date.day + new Date().getHours() / 24"
+						:formatXLabel="formatDay"
+					/>
+					<Skeleton v-else class="hits-chart"/>
+				</div>
+				<div class="chart-card">
+					<h3>{{ tr('title.year') }}</h3>
+					<HitsChart
+						v-if="stat"
+						class="hits-chart"
+						:max="13"
+						:offset="11"
+						:data="stat.months"
+						:oldData="stat.prev.months"
+						:current="stat.date.month + getDaysInMonth()"
+						:formatXLabel="formatMonth"
+					/>
+					<Skeleton v-else class="hits-chart"/>
+				</div>
+				<!-- TODO: show yearly chart -->
+			</div>
+			<div class="info-chart-box">
+				<h3>{{ tr('title.user_agents') }}</h3>
+				<UAChart
+					v-if="stat || 1"
+					class="ua-chart"
+					:max="5"
+					:data="{'HMCL':10, 'test': 1, 'Android': 13, 'x': 1, 'y': 3, 'z':3,'o':9,'pp':12}"
+				/>
 			</div>
 		</div>
-		<div class="chart-card">
-			<h3>{{ tr('title.day') }}</h3>
-			<HitsChart
-				v-if="data && stat"
-				class="hits-chart"
-				:max="25"
-				:offset="23"
-				:data="stat.hours"
-				:oldData="stat.prev.hours"
-				:current="stat.date.hour + new Date().getMinutes() / 60"
-				:formatXLabel="formatHour"
-			/>
-			<Skeleton v-else class="hits-chart"/>
-		</div>
-		<div class="chart-card">
-			<h3>{{ tr('title.month') }}</h3>
-			<HitsChart
-				v-if="data && stat"
-				class="hits-chart"
-				:max="31"
-				:offset="29"
-				:data="stat.days"
-				:oldData="stat.prev.days"
-				:current="stat.date.day + new Date().getHours() / 24"
-				:formatXLabel="formatDay"
-			/>
-			<Skeleton v-else class="hits-chart"/>
-		</div>
-		<div class="chart-card">
-			<h3><h3>{{ tr('title.year') }}</h3></h3>
-			<HitsChart
-				v-if="data && stat"
-				class="hits-chart"
-				:max="13"
-				:offset="11"
-				:data="stat.months"
-				:oldData="stat.prev.months"
-				:current="stat.date.month + getDaysInMonth()"
-				:formatXLabel="formatMonth"
-			/>
-			<Skeleton v-else class="hits-chart"/>
-		</div>
-		<!-- TODO: show yearly chart -->
 	</main>
 </template>
 <style scoped>
+
+.main {
+	display: grid;
+	grid-template:
+		"a a" 4rem
+		"b c" auto
+		/ 46rem auto
+	;
+	grid-gap: 1rem;
+}
+
 .basic-info {
+	grid-area: a;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -168,6 +195,14 @@ function getDaysInMonth(): number {
 	font-weight: 200;
 }
 
+.hits-chart-box {
+	grid-area: b;
+}
+
+.info-chart-box {
+	grid-area: c;
+}
+
 .basic-info > div {
 	display: inline-block;
 }
@@ -240,12 +275,23 @@ function getDaysInMonth(): number {
 }
 
 .hits-chart {
+	max-width: 100%;
 	width: 45rem !important;
 	height: 13rem !important;
 	user-select: none;
 }
 
-@media (max-width: 48rem) {
+.ua-chart {
+	width: 25rem !important;
+	height: 13rem !important;
+	user-select: none;
+}
+
+@media (max-width: 60rem) {
+	.main {
+		display: flex;
+		flex-direction: column;
+	}
 	.hits-chart {
 		width: 100% !important;
 	}
diff --git a/handler.go b/handler.go
index 66ed6edc..b0279597 100644
--- a/handler.go
+++ b/handler.go
@@ -60,7 +60,11 @@ func (cr *Cluster) GetHandler() (handler http.Handler) {
 
 	handler = cr
 	{
-		totalUsedCh := make(chan float64, 1024)
+		type record struct {
+			used float64
+			ua string
+		}
+		totalUsedCh := make(chan record, 1024)
 
 		next := handler
 		handler = (http.HandlerFunc)(func(rw http.ResponseWriter, req *http.Request) {
@@ -75,23 +79,51 @@ func (cr *Cluster) GetHandler() (handler http.Handler) {
 				addr, _, _ := net.SplitHostPort(req.RemoteAddr)
 				logInfof("Serve %d | %12v | %-15s | %s | %-4s %s | %q", srw.status, used, addr, req.Proto, req.Method, req.RequestURI, ua)
 			}
+			if 200 > srw.status && srw.status >= 400 {
+				return
+			}
+			if !strings.HasPrefix(req.URL.Path, "/download/") {
+				return
+			}
+			var rec record
+			rec.used = used.Seconds()
+			rec.ua, _ = split(ua, '/')
 			select {
-			case totalUsedCh <- used.Seconds():
+			case totalUsedCh <- rec:
 			default:
 			}
 		})
 		go func() {
 			<-cr.WaitForEnable()
 			disabled := cr.Disabled()
+
+			updateTicker := time.NewTicker(time.Minute)
+			defer updateTicker.Stop()
+
 			var (
 				total     int64
 				totalUsed float64
+				uas = make(map[string]int, 5)
 			)
 			for {
 				select {
-				case used := <-totalUsedCh:
-					totalUsed += used
+				case <-updateTicker.C:
+					cr.stats.mux.Lock()
+					total = 0
+					totalUsed = 0
+					for ua, v := range uas {
+						if ua == "" {
+							ua = "[Unknown]"
+						}
+						cr.stats.Accesses[ua] += v
+					}
+					clear(uas)
+					cr.stats.mux.Unlock()
+				case record := <-totalUsedCh:
 					total++
+					totalUsed += record.used
+					uas[record.ua]++
+
 					if total%100 == 0 {
 						avg := (time.Duration)(totalUsed / (float64)(total) * (float64)(time.Second))
 						logInfof("Served %d requests, total used %.2fs, avg %v", total, totalUsed, avg)
diff --git a/stat.go b/stat.go
index 54b3b344..80ee7749 100644
--- a/stat.go
+++ b/stat.go
@@ -33,9 +33,9 @@ type statInstData struct {
 	Bytes int64 `json:"bytes"`
 }
 
-func (d *statInstData) update(hits int32, bytes int64) {
-	d.Hits += hits
-	d.Bytes += bytes
+func (d *statInstData) update(o *statInstData) {
+	d.Hits += o.Hits
+	d.Bytes += o.Bytes
 }
 
 // statTime always save a UTC time
@@ -71,9 +71,11 @@ type statData struct {
 	statHistoryData
 	Prev  statHistoryData         `json:"prev"`
 	Years map[string]statInstData `json:"years"`
+
+	Accesses map[string]int `json:"accesses"`
 }
 
-func (d *statData) update(hits int32, bytes int64) {
+func (d *statData) update(newData *statInstData) {
 	now := makeStatTime(time.Now())
 	if d.Date.Year != 0 {
 		switch {
@@ -82,18 +84,15 @@ func (d *statData) update(hits int32, bytes int64) {
 			isMonthCont := iscont && now.Month == 0 && d.Date.Month+1 == len(d.Months)
 			var inst statInstData
 			for i := 0; i < d.Date.Month; i++ {
-				n := d.Months[i]
-				inst.update(n.Hits, n.Bytes)
+				inst.update(&d.Months[i])
 			}
 			if iscont {
 				for i := 0; i <= d.Date.Day; i++ {
-					n := d.Days[i]
-					inst.update(n.Hits, n.Bytes)
+					inst.update(&d.Days[i])
 				}
 				if isMonthCont {
 					for i := 0; i <= d.Date.Hour; i++ {
-						n := d.Hours[i]
-						inst.update(n.Hits, n.Bytes)
+						inst.update(&d.Hours[i])
 					}
 				}
 			}
@@ -128,13 +127,11 @@ func (d *statData) update(hits int32, bytes int64) {
 			iscont := now.Month == d.Date.Month+1
 			var inst statInstData
 			for i := 0; i < d.Date.Day; i++ {
-				n := d.Days[i]
-				inst.update(n.Hits, n.Bytes)
+				inst.update(&d.Days[i])
 			}
 			if iscont {
 				for i := 0; i <= d.Date.Hour; i++ {
-					n := d.Hours[i]
-					inst.update(n.Hits, n.Bytes)
+					inst.update(&d.Hours[i])
 				}
 			}
 			d.Months[d.Date.Month] = inst
@@ -163,8 +160,7 @@ func (d *statData) update(hits int32, bytes int64) {
 		case d.Date.Day != now.Day:
 			var inst statInstData
 			for i := 0; i <= d.Date.Hour; i++ {
-				n := d.Hours[i]
-				inst.update(n.Hits, n.Bytes)
+				inst.update(&d.Hours[i])
 			}
 			d.Days[d.Date.Day] = inst
 			// clean up
@@ -189,7 +185,7 @@ func (d *statData) update(hits int32, bytes int64) {
 		}
 	}
 
-	d.Hours[now.Hour].update(hits, bytes)
+	d.Hours[now.Hour].update(newData)
 	d.Date = now
 }
 
@@ -220,6 +216,9 @@ func (s *Stats) Load(dir string) (err error) {
 	if s.Years == nil {
 		s.Years = make(map[string]statInstData, 2)
 	}
+	if s.Accesses == nil {
+		s.Accesses = make(map[string]int, 5)
+	}
 	return
 }
 
@@ -243,7 +242,10 @@ func (s *Stats) AddHits(hits int32, bytes int64) {
 	s.mux.Lock()
 	defer s.mux.Unlock()
 
-	s.update(hits, bytes)
+	s.update(&statInstData{
+		Hits:  hits,
+		Bytes: bytes,
+	})
 }
 
 func parseFileOrOld(path string, parser func(buf []byte) error) (err error) {