diff --git a/package.json b/package.json
index 83b4a342b..7a5abd4c2 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "vue-class-component": "^7.0.2",
     "vue-click-outside": "^1.1.0",
     "vue-clipboard2": "^0.3.1",
+    "vue-grid-layout": "2.4.0",
     "vue-i18n": "^8.11.2",
     "vue-json-tree-view": "^2.1.6",
     "vue-markdown": "^2.2.4",
@@ -131,6 +132,7 @@
     "raw-loader": "^4.0.2",
     "sass": "~1.32.13",
     "sass-loader": "^8.0.2",
+    "ts-node": "10.9.2",
     "typeorm-uml": "^1.6.4",
     "typescript": "^4.9.5",
     "vue-cli-plugin-electron-builder": "^2.1.1",
diff --git a/src/assets/scss/mixins.scss b/src/assets/scss/mixins.scss
index 2aa97b1fe..fc816fafd 100644
--- a/src/assets/scss/mixins.scss
+++ b/src/assets/scss/mixins.scss
@@ -191,3 +191,21 @@
     font-weight: bold;
   }
 }
+
+@mixin color-picker-item {
+  .color-picker-item {
+    .el-form-item__content {
+      display: flex !important;
+      align-items: center !important;
+      line-height: normal !important;
+      height: 43px !important;
+      justify-content: flex-start !important;
+    }
+
+    .el-color-picker {
+      vertical-align: middle !important;
+      margin: 0 !important;
+      align-self: center !important;
+    }
+  }
+}
diff --git a/src/components/ThresholdEditor.vue b/src/components/ThresholdEditor.vue
new file mode 100644
index 000000000..fda0a888e
--- /dev/null
+++ b/src/components/ThresholdEditor.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="key-value-editor">
+    <div class="editor-header">
+      <div class="header-left">
+        <span class="editor-title"> {{ title }} </span>
+        <el-select
+          v-model="localThresholdsType"
+          size="mini"
+          placeholder="Select type"
+          style="margin-left: 10px"
+          @change="emitThresholdsTypeChange"
+        >
+          <el-option label="Absolute" value="Absolute" />
+          <el-option label="Percentage" value="Percentage" />
+        </el-select>
+        <el-button
+          icon="el-icon-plus"
+          class="btn-props-plus"
+          type="text"
+          @click="addThreshold"
+          style="margin-left: 10px"
+        ></el-button>
+      </div>
+    </div>
+    <div class="editor-row">
+      <el-row v-for="(threshold, index) in localThresholds" :key="index" :gutter="10" class="editor-row">
+        <el-col :span="10">
+          <el-input
+            type="number"
+            v-model.number="threshold.value"
+            size="mini"
+            placeholder="Value"
+            @input="onThresholdChange"
+          />
+        </el-col>
+        <el-col :span="4">
+          <el-color-picker v-model="threshold.color" size="mini" color-format="hex" @change="onThresholdChange" />
+        </el-col>
+        <el-col :span="4">
+          <el-button icon="el-icon-delete" class="btn-delete" type="text" @click="removeThreshold(index)" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class ThresholdEditor extends Vue {
+  @Prop({ type: String, default: 'Thresholds' }) readonly title!: string
+  @Prop({ type: Array, default: () => [] }) readonly value!: Array<{ value: number; color: string }>
+  @Prop({ type: String, default: 'Absolute' }) readonly thresholdsType!: 'Absolute' | 'Percentage'
+
+  private localThresholds: Array<{ value: number; color: string }> = []
+  private localThresholdsType: 'Absolute' | 'Percentage' = 'Absolute'
+
+  mounted() {
+    this.initializeLocalData()
+  }
+
+  @Watch('value', { deep: true, immediate: true })
+  onValueChange(newValue: Array<{ value: number; color: string }>) {
+    if (JSON.stringify(this.localThresholds) !== JSON.stringify(newValue)) {
+      this.localThresholds = [...(newValue || [])]
+    }
+  }
+
+  @Watch('thresholdsType', { immediate: true })
+  onThresholdsTypeChange(newType: 'Absolute' | 'Percentage') {
+    this.localThresholdsType = newType
+  }
+
+  private initializeLocalData() {
+    this.localThresholds = [...(this.value || [])]
+    this.localThresholdsType = this.thresholdsType
+  }
+
+  private addThreshold() {
+    this.localThresholds.push({ value: 0, color: '#FF0000' })
+    this.emitChange()
+  }
+
+  private removeThreshold(index: number) {
+    this.localThresholds.splice(index, 1)
+    this.emitChange()
+  }
+
+  private onThresholdChange() {
+    this.emitChange()
+  }
+
+  private emitThresholdsTypeChange() {
+    this.$emit('update:thresholdsType', this.localThresholdsType)
+  }
+
+  private emitChange() {
+    this.$emit('input', [...this.localThresholds])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.key-value-editor {
+  .editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header-left {
+      display: flex;
+      align-items: center;
+    }
+    .editor-title {
+      font-weight: 600;
+      color: var(--color-text-default);
+    }
+  }
+  .editor-row {
+    margin-top: 10px;
+    .el-col {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .btn-props-plus {
+    font-size: 12px;
+  }
+  .btn-delete {
+    color: var(--color-text-light);
+  }
+}
+</style>
diff --git a/src/components/TimeRangeSelect.vue b/src/components/TimeRangeSelect.vue
index 1dbfbd1af..085160c15 100644
--- a/src/components/TimeRangeSelect.vue
+++ b/src/components/TimeRangeSelect.vue
@@ -6,7 +6,7 @@
     :end-placeholder="$t('common.endTime')"
     :picker-options="pickerOptions"
     value-format="yyyy-MM-dd HH:mm:ss:SSS"
-    size="small"
+    :size="size"
     popper-class="time-range-picker-popper"
   >
   </el-date-picker>
@@ -18,18 +18,61 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 @Component
 export default class TimeRangeSelect extends Vue {
   @Prop({ required: true }) public value!: [string, string]
+  @Prop({ default: 'small' }) public size!: string
+  @Prop({ default: false }) public showLiveMode!: boolean
+  @Prop({ default: 'static' }) public timeRangeType!: 'live' | 'static'
+  @Prop({ default: 24 * 60 }) public duration!: number
 
   private modelValue = this.value
+  private currentDuration: number | null = null
+  private isLiveMode: boolean = false
+  private isFromShortcut: boolean = false
+  private shortcutLiveMode: boolean = false
+  private shortcutDuration: number | null = null
+
+  // Initialize with props
+  private mounted() {
+    this.isLiveMode = this.timeRangeType === 'live'
+    this.currentDuration = this.duration * 60 * 1000 // Convert minutes to milliseconds
+  }
 
   @Watch('value')
   private onValueChange(newVal: [string, string]) {
     this.modelValue = newVal
   }
 
+  @Watch('timeRangeType')
+  private onTimeRangeTypeChange() {
+    this.isLiveMode = this.timeRangeType === 'live'
+  }
+
+  @Watch('duration')
+  private onDurationChange() {
+    this.currentDuration = this.duration * 60 * 1000 // Convert minutes to milliseconds
+  }
+
   @Watch('modelValue')
   private onModelValueChange(newVal: [string, string] | null) {
     this.$emit('input', newVal)
     this.$emit('change', newVal)
+
+    // Only emit range-relative for shortcuts, not for external changes (like dashboard switches)
+    if (this.isFromShortcut) {
+      // Use shortcut-specific values
+      const finalIsLive = this.shortcutLiveMode
+      const finalDuration = this.shortcutDuration
+
+      this.$emit('range-relative', {
+        timeRange: newVal,
+        duration: finalDuration || 24 * 60 * 60 * 1000, // Default to 24 hours in milliseconds
+        isLive: finalIsLive,
+      })
+
+      // Reset shortcut flags after emitting
+      this.isFromShortcut = false
+      this.shortcutLiveMode = false
+      this.shortcutDuration = null
+    }
   }
 
   private pickerOptions = {
@@ -39,7 +82,8 @@ export default class TimeRangeSelect extends Vue {
     shortcuts: [
       {
         text: this.$t('common.last5Minutes'),
-        onClick(picker: any) {
+        onClick: (picker: any) => {
+          this.setShortcutValues(true, 5 * 60 * 1000)
           const end = new Date()
           const start = new Date()
           start.setTime(start.getTime() - 5 * 60 * 1000)
@@ -48,7 +92,8 @@ export default class TimeRangeSelect extends Vue {
       },
       {
         text: this.$t('common.last30Minutes'),
-        onClick(picker: any) {
+        onClick: (picker: any) => {
+          this.setShortcutValues(true, 30 * 60 * 1000)
           const end = new Date()
           const start = new Date()
           start.setTime(start.getTime() - 30 * 60 * 1000)
@@ -57,7 +102,8 @@ export default class TimeRangeSelect extends Vue {
       },
       {
         text: this.$t('common.lastHour'),
-        onClick(picker: any) {
+        onClick: (picker: any) => {
+          this.setShortcutValues(true, 60 * 60 * 1000)
           const end = new Date()
           const start = new Date()
           start.setTime(start.getTime() - 60 * 60 * 1000)
@@ -66,7 +112,8 @@ export default class TimeRangeSelect extends Vue {
       },
       {
         text: this.$t('common.lastDay'),
-        onClick(picker: any) {
+        onClick: (picker: any) => {
+          this.setShortcutValues(true, 24 * 60 * 60 * 1000)
           const end = new Date()
           const start = new Date()
           start.setTime(start.getTime() - 24 * 60 * 60 * 1000)
@@ -75,7 +122,8 @@ export default class TimeRangeSelect extends Vue {
       },
       {
         text: this.$t('common.lastWeek'),
-        onClick(picker: any) {
+        onClick: (picker: any) => {
+          this.setShortcutValues(true, 7 * 24 * 60 * 60 * 1000)
           const end = new Date()
           const start = new Date()
           start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000)
@@ -84,6 +132,12 @@ export default class TimeRangeSelect extends Vue {
       },
     ],
   }
+
+  private setShortcutValues(isLive: boolean, duration: number) {
+    this.isFromShortcut = true
+    this.shortcutLiveMode = isLive
+    this.shortcutDuration = duration
+  }
 }
 </script>
 
diff --git a/src/components/charts/BigNumber.vue b/src/components/charts/BigNumber.vue
new file mode 100644
index 000000000..fa088af85
--- /dev/null
+++ b/src/components/charts/BigNumber.vue
@@ -0,0 +1,553 @@
+<template>
+  <div
+    ref="container"
+    :style="{ width: '100%', height: '100%', minWidth: '120px', minHeight: '80px', position: 'relative' }"
+    class="big-stat-panel"
+  >
+    <div v-if="hasData" :id="id" class="chart-container"></div>
+    <div v-else class="no-data-background">{{ $t('common.noData') }}</div>
+
+    <!-- Value Overlay -->
+    <div v-if="hasData" class="value-overlay">
+      <div class="big-value" :style="{ fontSize: bigFontSize, color: displayColor }">
+        {{ formatValue(internalValue) }}
+      </div>
+      <div class="value-unit" v-if="unit" :style="{ fontSize: unitFontSize }">{{ unit }}</div>
+      <div class="extracted-field" v-if="extractedFieldName" :style="{ fontSize: fieldFontSize }">
+        {{ extractedFieldName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import * as echarts from 'echarts/core'
+import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'
+import { LineChart as EChartsLineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([TitleComponent, TooltipComponent, GridComponent, EChartsLineChart, CanvasRenderer, UniversalTransition])
+
+@Component
+export default class BigNumberChart extends Vue {
+  @Prop({ required: true }) public id!: string
+  @Prop({ default: '' }) public unit!: string
+  @Prop({ default: '#00B572' }) public color!: string
+  @Prop({ default: undefined }) public min!: number | undefined
+  @Prop({ default: undefined }) public max!: number | undefined
+  @Prop({ default: 1 }) public decimals!: number
+  @Prop({ default: () => ({ value: null, chartData: { xData: [], seriesData: [] } }) }) public data!: BigNumberData
+  @Prop({ default: 'Absolute' }) public thresholdsType!: 'Absolute' | 'Percentage'
+  @Prop({ default: () => [] }) public thresholds!: Threshold[]
+  @Prop({ default: '' }) public extractedFieldName!: string
+  @Prop({ default: 24 * 60 }) public duration!: number // Duration in minutes
+  @Prop({ default: 'static' }) public timeRangeType!: 'live' | 'static'
+
+  private myChart: echarts.ECharts | null = null
+  private resizeObserver: ResizeObserver | null = null
+  private resizeTimeout: number | null = null
+
+  @Getter('currentTheme') private theme!: Theme
+
+  get hasData(): boolean {
+    return this.data.value !== null
+  }
+
+  private getTimeAxisMin(): number {
+    if (this.timeRangeType === 'live') {
+      const now = new Date().getTime()
+      return now - 1 * 60 * 1000 // Always show 1 minute window
+    }
+    return undefined as any // Let ECharts auto-determine for static ranges
+  }
+
+  private getTimeAxisMax(): number {
+    if (this.timeRangeType === 'live') {
+      return new Date().getTime()
+    }
+    return undefined as any // Let ECharts auto-determine for static ranges
+  }
+
+  private getTimeSeriesData(): Array<[number, number]> {
+    const xData = this.data.chartData.xData
+    const yData = this.data.chartData.seriesData[0]?.data || []
+
+    if (xData.length === 0) return []
+
+    // Convert timestamp strings to numbers and pair with values
+    const timeSeriesData = xData.map((timestamp, index) => [
+      new Date(timestamp).getTime(), // Convert to milliseconds
+      yData[index] || 0,
+    ])
+
+    // Sort by timestamp to ensure chronological order
+    timeSeriesData.sort((a, b) => a[0] - b[0])
+
+    // If we're in live mode, filter out points outside the 1-minute window
+    if (this.timeRangeType === 'live') {
+      const now = new Date().getTime()
+      const cutoffTime = now - 1 * 60 * 1000 // Always use 1 minute window
+      return timeSeriesData.filter(([timestamp]) => timestamp >= cutoffTime) as Array<[number, number]>
+    }
+
+    return timeSeriesData as Array<[number, number]>
+  }
+
+  @Watch('hasData')
+  onHasDataChanged(newVal: boolean) {
+    if (newVal && !this.myChart) {
+      this.$nextTick(() => this.initChart())
+    } else if (!newVal && this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  }
+
+  @Watch('theme')
+  onThemeChanged() {
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+    if (this.hasData) {
+      this.initChart()
+    }
+  }
+
+  @Watch('min')
+  @Watch('max')
+  @Watch('thresholds', { deep: true })
+  @Watch('thresholdsType')
+  @Watch('data', { deep: true })
+  @Watch('duration')
+  @Watch('timeRangeType')
+  onDataChange() {
+    this.updateChart()
+  }
+
+  @Watch('$refs.container')
+  onContainerChange() {
+    if (this.myChart) {
+      this.$nextTick(() => {
+        this.myChart?.resize()
+        this.updateSizes()
+      })
+    }
+  }
+
+  private get internalChartData() {
+    return this.data.chartData
+  }
+
+  private get internalValue(): number | null {
+    return this.data.value
+  }
+
+  private get effectiveMin(): number {
+    if (this.min !== undefined) return this.min
+    return this.data.chartData.seriesData.length > 0
+      ? Math.min(...this.data.chartData.seriesData.map((d) => d.data[0]))
+      : 0
+  }
+
+  private get effectiveMax(): number {
+    if (this.max !== undefined) return this.max
+    return this.data.chartData.seriesData.length > 0
+      ? Math.max(...this.data.chartData.seriesData.map((d) => d.data[0]))
+      : 100
+  }
+
+  // Add computed displayColor
+  private get displayColor(): string {
+    if (this.internalValue == null || this.thresholds.length === 0) return this.color
+
+    const absThresholds = this.thresholds
+      .map((t) => ({
+        absValue:
+          this.thresholdsType === 'Absolute'
+            ? t.value
+            : this.effectiveMin + (this.effectiveMax - this.effectiveMin) * (t.value / 100),
+        color: t.color,
+      }))
+      .sort((a, b) => a.absValue - b.absValue)
+
+    let selectedColor = this.color
+    for (const t of absThresholds) {
+      if (this.internalValue >= t.absValue) {
+        selectedColor = t.color
+      } else {
+        break
+      }
+    }
+    return selectedColor
+  }
+
+  private getResponsiveOption(): echarts.EChartsCoreOption {
+    const container = document.getElementById(this.id) as HTMLElement
+    if (!container) return {}
+
+    const isLightTheme = this.theme === 'light'
+    const textColor = isLightTheme ? '#424242' : '#e8eaed'
+
+    const timeSeriesData = this.getTimeSeriesData()
+
+    // If there's no valid data, show empty chart
+    if (timeSeriesData.length === 0) {
+      return {
+        animation: false,
+        backgroundColor: 'transparent',
+        grid: { left: '0%', right: '0%', top: '0%', bottom: '0%' },
+        xAxis: { type: 'time', show: false },
+        yAxis: { type: 'value', show: false },
+        series: [{ type: 'line', data: [] }],
+      }
+    }
+
+    return {
+      animation: false, // Disable all animations to prevent visual corruption
+      backgroundColor: 'transparent',
+      grid: {
+        left: '0%',
+        right: '0%',
+        top: '0%',
+        bottom: '0%',
+        containLabel: false,
+      },
+      tooltip: {
+        show: false,
+      },
+      xAxis: {
+        type: 'time',
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { show: false },
+        splitLine: { show: false },
+        min: this.getTimeAxisMin(),
+        max: this.getTimeAxisMax(),
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+        min: this.min !== undefined ? this.min : 'dataMin',
+        max: this.max !== undefined ? this.max : 'dataMax',
+      },
+      series: [
+        {
+          animation: false, // Disable series animation
+          type: 'line',
+          data: timeSeriesData, // Use the filtered and sorted data
+          smooth: false,
+          symbol: 'none',
+          lineStyle: {
+            color: this.displayColor,
+            width: 1,
+            opacity: 0.6,
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: `${this.displayColor}60` },
+                { offset: 1, color: `${this.displayColor}05` },
+              ],
+            },
+          },
+          emphasis: {
+            disabled: true,
+          },
+          connectNulls: false, // Don't connect points across gaps
+        },
+      ],
+    }
+  }
+
+  mounted(): void {
+    this.$nextTick(() => {
+      if (this.hasData) {
+        this.initChart()
+      }
+      this.updateSizes()
+      this.setupResizeObserver()
+    })
+  }
+
+  beforeDestroy(): void {
+    this.cleanup()
+  }
+
+  private initChart(): void {
+    const chartDom = document.getElementById(this.id) as HTMLElement
+    if (chartDom) {
+      this.myChart = echarts.init(chartDom, this.theme !== 'light' ? 'dark' : null)
+      this.updateChart()
+      // Ensure chart is properly sized on initialization
+      this.$nextTick(() => {
+        if (this.myChart) {
+          this.myChart.resize()
+        }
+      })
+    }
+  }
+
+  private updateChart(): void {
+    if (this.myChart) {
+      const option = this.getResponsiveOption()
+      this.myChart.setOption(option, true, true) // notMerge: true, lazyUpdate: true
+    }
+  }
+
+  private setupResizeObserver(): void {
+    const container = this.$refs.container as HTMLElement
+    if (!container) return
+
+    // Use ResizeObserver if available
+    if (window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.handleResize()
+      })
+      this.resizeObserver.observe(container)
+    } else {
+      // Fallback to window resize listener
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+
+  private handleResize(): void {
+    if (this.resizeTimeout !== null) {
+      clearTimeout(this.resizeTimeout)
+    }
+    this.resizeTimeout = window.setTimeout(() => {
+      if (this.myChart) {
+        this.myChart.resize()
+        this.updateChart()
+        this.updateSizes()
+      }
+    }, 150)
+  }
+
+  private bigFontSize: string = '96px'
+  private unitFontSize: string = '14px'
+  private fieldFontSize: string = '12px'
+
+  private formatValue(value: number | null): string {
+    if (value === null) return '0'
+    const rounded = Number(value.toFixed(this.decimals))
+    if (rounded >= 1000000) {
+      return (rounded / 1000000).toFixed(1) + 'M'
+    } else if (rounded >= 1000) {
+      return (rounded / 1000).toFixed(1) + 'k'
+    }
+    return rounded.toString()
+  }
+
+  private updateSizes() {
+    const container = this.$refs.container as HTMLElement
+    if (!container) return
+
+    const width = container.clientWidth
+    const height = container.clientHeight
+    const size = Math.min(width, height)
+
+    this.bigFontSize = `${Math.max(48, Math.min(120, size / 2.5))}px`
+    this.unitFontSize = `${Math.max(10, Math.min(16, size / 18))}px`
+    this.fieldFontSize = `${Math.max(8, Math.min(14, size / 25))}px`
+  }
+
+  // TODO: Remove these dummy data generation methods - for testing purposes only
+  private generateDummyChartData(): BigNumberData {
+    const data: BigNumberData = {
+      value: 0,
+      chartData: {
+        xData: [],
+        seriesData: [
+          {
+            name: 'value',
+            data: [],
+          },
+        ],
+      },
+    }
+    const now = new Date()
+
+    for (let i = 29; i >= 0; i--) {
+      const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
+      const value = Math.random() * 100 // Random value between 50-150
+      data.chartData.xData.push(date.toISOString().split('T')[0])
+      data.chartData.seriesData[0].data.push(Math.round(value * 100) / 100)
+    }
+
+    return data
+  }
+
+  private generateDummyValue(): number {
+    return Math.round((Math.random() * 100 + 50) * 100) / 100 // Random value between 50-150
+  }
+
+  private cleanup(): void {
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = null
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    } else {
+      // Remove window resize listener if it was added as fallback
+      window.removeEventListener('resize', this.handleResize)
+    }
+
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  }
+
+  public updateValue(value: number): void {
+    // Empty or comment out, as no sample refresh needed
+  }
+}
+</script>
+
+<style scoped>
+.big-stat-panel {
+  position: relative;
+  background: transparent;
+  border-radius: 4px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.chart-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.value-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  pointer-events: none;
+  padding: 12px;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.panel-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6c757d;
+  margin-bottom: 8px;
+  font-family: 'system-ui', -apple-system, sans-serif;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.big-value {
+  font-size: 72px;
+  font-weight: 600;
+  color: #262626;
+  font-family: 'system-ui', -apple-system, sans-serif;
+  line-height: 1;
+  text-align: center;
+  margin-bottom: 4px;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 3;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.value-unit {
+  font-size: 14px;
+  font-weight: 400;
+  color: #8c8c8c;
+  font-family: 'system-ui', -apple-system, sans-serif;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 3;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.extracted-field {
+  font-size: 12px;
+  font-weight: 400;
+  color: #999;
+  font-family: 'system-ui', -apple-system, sans-serif;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 3;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  opacity: 0.8;
+}
+
+.no-data-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+  z-index: 1;
+}
+
+.no-data {
+  font-size: 24px;
+  font-weight: 600;
+  color: #999;
+}
+
+/* Dark theme styles */
+:global(.dark) .panel-title {
+  color: #b3b3b3;
+}
+
+:global(.dark) .big-value {
+  color: #f0f0f0;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark) .value-unit {
+  color: #b3b3b3;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark) .extracted-field {
+  color: #888;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/src/components/charts/Gauge.vue b/src/components/charts/Gauge.vue
new file mode 100644
index 000000000..33a2d81f7
--- /dev/null
+++ b/src/components/charts/Gauge.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="gauge-container">
+    <div v-if="hasData" :id="id" style="width: 100%; height: 100%"></div>
+    <div v-else class="no-data">{{ $t('common.noData') }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import * as echarts from 'echarts/core'
+import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'
+import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([TitleComponent, TooltipComponent, GridComponent, EChartsGaugeChart, CanvasRenderer, UniversalTransition])
+
+@Component
+export default class GaugeChart extends Vue {
+  @Prop({ required: true }) public id!: string
+  @Prop({ default: () => ({ value: null }) }) public data!: GaugeData
+  @Prop({ default: 'Temperature' }) public title!: string
+  @Prop({ default: '°C' }) public unit!: string
+  @Prop({ default: '#00B572' }) public color!: string
+  @Prop({ default: undefined }) public min!: number | undefined
+  @Prop({ default: undefined }) public max!: number | undefined
+  @Prop({ default: 1 }) public decimals!: number
+  @Prop({ default: '' }) public valueField!: string
+
+  // Add thresholds
+  @Prop({ default: 'Absolute' }) public thresholdsType!: 'Absolute' | 'Percentage'
+  @Prop({ default: () => [] }) public thresholds!: Threshold[]
+
+  private myChart: echarts.ECharts | null = null
+  private resizeObserver: ResizeObserver | null = null
+  private resizeTimeout: number | null = null
+
+  // Dynamic min/max tracking
+  private dynamicMin: number | null = null
+  private dynamicMax: number | null = null
+
+  @Getter('currentTheme') private theme!: Theme
+
+  private get hasData(): boolean {
+    return this.data.value !== null
+  }
+
+  private get effectiveMin(): number {
+    if (this.min !== undefined) return this.min
+    if (this.dynamicMin !== null) return this.dynamicMin
+    return 0
+  }
+
+  private get effectiveMax(): number {
+    if (this.max !== undefined) return this.max
+    if (this.dynamicMax !== null) return this.dynamicMax
+    return 100
+  }
+
+  @Watch('hasData')
+  onHasDataChanged(newVal: boolean) {
+    if (newVal && !this.myChart) {
+      this.updateDynamicMinMax()
+      this.$nextTick(() => this.initChart())
+    } else if (!newVal && this.myChart) {
+      this.resetDynamicMinMax()
+      this.myChart.dispose()
+      this.myChart = null
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+    }
+  }
+
+  @Watch('theme')
+  onThemeChanged() {
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+    if (this.hasData) {
+      this.initChart()
+    }
+  }
+
+  // Add watch for thresholds and value to update color
+  @Watch('thresholds', { deep: true })
+  @Watch('thresholdsType')
+  @Watch('data.value')
+  onThresholdOrValueChange() {
+    this.updateDynamicMinMax()
+    this.updateChart()
+  }
+
+  private updateDynamicMinMax(): void {
+    if (this.data.value === null) return
+
+    if (this.min === undefined) {
+      if (this.dynamicMin === null || this.data.value < this.dynamicMin) {
+        this.dynamicMin = this.data.value
+      }
+    }
+
+    if (this.max === undefined) {
+      if (this.dynamicMax === null || this.data.value > this.dynamicMax) {
+        this.dynamicMax = this.data.value
+      }
+    }
+  }
+
+  public resetDynamicMinMax(): void {
+    this.dynamicMin = null
+    this.dynamicMax = null
+  }
+
+  private get displayColor(): string {
+    if (this.data.value == null || this.thresholds.length === 0) return this.color
+
+    const absThresholds = this.thresholds
+      .map((t) => ({
+        absValue:
+          this.thresholdsType === 'Absolute'
+            ? t.value
+            : this.effectiveMin + (this.effectiveMax - this.effectiveMin) * (t.value / 100),
+        color: t.color,
+      }))
+      .sort((a, b) => a.absValue - b.absValue)
+
+    let selectedColor = this.color
+    for (const t of absThresholds) {
+      if (this.data.value >= t.absValue) {
+        selectedColor = t.color
+      } else {
+        break
+      }
+    }
+    return selectedColor
+  }
+
+  // Add computed for outerColors
+  private get outerColors(): Array<[number, string]> {
+    if (this.thresholds.length === 0) {
+      return [[1, this.theme === 'light' ? '#ddd' : '#555']]
+    }
+    const range = this.effectiveMax - this.effectiveMin
+    const sortedThresholds = [...this.thresholds]
+      .map((t) => ({
+        frac: this.thresholdsType === 'Percentage' ? t.value / 100 : (t.value - this.effectiveMin) / range,
+        color: t.color,
+      }))
+      .sort((a, b) => a.frac - b.frac)
+
+    let prevFrac = 0
+    let prevColor = this.color // Base color for below first threshold
+
+    const colors: Array<[number, string]> = []
+    for (const t of sortedThresholds) {
+      if (t.frac > prevFrac) {
+        colors.push([t.frac, prevColor])
+      }
+      prevFrac = t.frac
+      prevColor = t.color
+    }
+    if (prevFrac < 1) {
+      colors.push([1, prevColor])
+    }
+    return colors
+  }
+
+  private getChartOption(): echarts.EChartsCoreOption {
+    const isLightTheme = this.theme === 'light'
+    const textColor = isLightTheme ? '#424242' : '#e8eaed'
+
+    // Get container size
+    const container = document.getElementById(this.id) as HTMLElement
+    const width = container?.clientWidth || 200
+    const height = container?.clientHeight || 200
+    const size = Math.min(width, height)
+
+    // Compute responsive font sizes
+    const titleFontSize = Math.max(10, Math.min(16, size / 20))
+    const detailFontSize = Math.max(14, Math.min(32, size / 8))
+    const detailOffset = size > 200 ? '10%' : '15%'
+    const titleOffset = size > 200 ? '-30%' : '-25%'
+
+    // Make the axis and progress bar thicker
+    const axisWidth = Math.max(16, size / 12) // was 24, scales with size
+    const progressWidth = Math.max(16, size / 12) // was 24
+
+    return {
+      backgroundColor: 'transparent',
+      series: [
+        // Outer static thin ring with threshold colors
+        {
+          type: 'gauge',
+          center: ['50%', '60%'],
+          radius: '82%', // Slightly larger than main
+          startAngle: 200,
+          endAngle: -20,
+          min: this.effectiveMin,
+          max: this.effectiveMax,
+          axisLine: {
+            lineStyle: {
+              width: 2,
+              color: this.outerColors,
+              shadowBlur: 0,
+            },
+          },
+          progress: { show: false },
+          pointer: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          detail: { show: false },
+          data: [{ value: this.effectiveMax }],
+        },
+        // Main gauge
+        {
+          type: 'gauge',
+          center: ['50%', '60%'],
+          radius: '75%', // Inner
+          startAngle: 200,
+          endAngle: -20,
+          min: this.effectiveMin,
+          max: this.effectiveMax,
+          splitNumber: 0,
+          itemStyle: {
+            // Use displayColor
+            color: this.displayColor,
+            shadowColor: `${this.displayColor}40`,
+            shadowBlur: 8,
+          },
+          progress: {
+            show: true,
+            width: progressWidth,
+            roundCap: false,
+            itemStyle: {
+              // Use displayColor
+              color: this.displayColor,
+              shadowColor: `${this.displayColor}40`,
+              shadowBlur: 4,
+            },
+          },
+          pointer: { show: false },
+          axisLine: {
+            lineStyle: {
+              width: axisWidth,
+              color: [[1, isLightTheme ? '#e8e8e8' : '#3a3a3a']],
+              cap: 'round',
+            },
+          },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          anchor: { show: false },
+          title: {
+            show: true,
+            offsetCenter: [0, titleOffset],
+            fontSize: titleFontSize,
+            fontWeight: '500',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            color: isLightTheme ? '#666666' : '#a0a0a0',
+          },
+          detail: {
+            valueAnimation: true,
+            width: '70%',
+            lineHeight: 20,
+            borderRadius: 4,
+            offsetCenter: [0, detailOffset],
+            fontSize: detailFontSize,
+            fontWeight: '600',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            formatter: (value: number) => {
+              const mainValue = `${value.toFixed(this.decimals)}${this.unit}`
+              if (this.valueField && this.valueField.trim() !== '') {
+                return `${mainValue}\n{valueField|${this.valueField}}`
+              }
+              return mainValue
+            },
+            color: textColor,
+            backgroundColor: 'transparent',
+            padding: [4, 8],
+            rich: {
+              valueField: {
+                fontSize: Math.max(10, Math.min(16, size / 18)),
+                fontWeight: '400',
+                color: isLightTheme ? '#888' : '#aaa',
+                lineHeight: 18,
+              },
+            },
+          },
+          data: [
+            {
+              value: this.data.value,
+            },
+          ],
+        },
+      ],
+    }
+  }
+
+  mounted(): void {
+    this.$nextTick(() => {
+      if (this.hasData) {
+        this.updateDynamicMinMax()
+        this.initChart()
+      }
+    })
+  }
+
+  beforeDestroy(): void {
+    this.cleanup()
+  }
+
+  private initChart(): void {
+    const chartDom = document.getElementById(this.id) as HTMLElement
+    if (chartDom) {
+      this.myChart = echarts.init(chartDom, this.theme !== 'light' ? 'dark' : null)
+      this.setupResizeObserver() // Moved here
+      this.updateChart()
+    }
+  }
+
+  private updateChart(): void {
+    if (this.myChart) {
+      this.myChart.setOption(this.getChartOption(), true)
+    }
+  }
+
+  private setupResizeObserver(): void {
+    const container = document.getElementById(this.id) as HTMLElement
+    if (!container || !window.ResizeObserver) return
+
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout)
+      }
+      this.resizeTimeout = window.setTimeout(() => {
+        if (this.myChart) {
+          this.myChart.resize()
+          this.updateChart()
+        }
+      }, 100)
+    })
+
+    this.resizeObserver.observe(container)
+  }
+
+  private cleanup(): void {
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = null
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  }
+
+  public updateValue(value: number): void {
+    if (this.myChart && value >= this.effectiveMin && value <= this.effectiveMax && this.data.value !== null) {
+      this.myChart.setOption({
+        series: [{ data: [{ value }] }],
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gauge-container {
+  width: 100%;
+  height: 100%;
+  min-width: 150px;
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.no-data {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 16px;
+}
+
+/* Responsive behavior - let CSS handle the sizing */
+@media (max-width: 300px) {
+  .gauge-container {
+    min-width: 120px;
+    min-height: 120px;
+  }
+}
+
+@media (min-width: 400px) {
+  .gauge-container {
+    min-width: 180px;
+    min-height: 180px;
+  }
+}
+</style>
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
new file mode 100644
index 000000000..b6b576776
--- /dev/null
+++ b/src/components/charts/LineChart.vue
@@ -0,0 +1,337 @@
+<template>
+  <div class="line-chart-container">
+    <div :id="id" class="chart-container"></div>
+    <div v-if="!hasData" class="no-data-overlay">{{ $t('common.noData') }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import * as echarts from 'echarts/core'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import { LineChart as EChartsLineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  EChartsLineChart,
+  CanvasRenderer,
+  UniversalTransition,
+])
+
+@Component
+export default class LineChart extends Vue {
+  @Prop({ required: true }) public id!: string
+  @Prop({ default: '#00B572' }) public color!: string
+  @Prop({ default: () => ({ chartData: { xData: [], seriesData: [{ name: 'value', data: [] }] } }) })
+  public data!: LineData
+  @Prop({ default: true }) public smooth!: boolean
+  @Prop({ default: true }) public area!: boolean
+  @Prop({ default: 'Absolute' }) public thresholdsType!: 'Absolute' | 'Percentage'
+  @Prop({ default: () => [] }) public thresholds!: Threshold[]
+  @Prop({ default: 24 * 60 }) public duration!: number // Duration in minutes
+  @Prop({ default: 'static' }) public timeRangeType!: 'live' | 'static'
+
+  private myChart: echarts.ECharts | null = null
+  private resizeObserver: ResizeObserver | null = null
+  private resizeTimeout: number | null = null
+  private debouncedUpdate!: () => void
+
+  @Getter('currentTheme') private theme!: Theme
+
+  get hasData(): boolean {
+    const hasData = this.data.chartData.xData.length > 0
+    return hasData
+  }
+
+  private getTimeAxisMin(): number {
+    if (this.timeRangeType === 'live' && this.duration) {
+      const now = new Date().getTime()
+      return now - this.duration * 60 * 1000 // Convert minutes to milliseconds
+    }
+    return undefined as any // Let ECharts auto-determine for static ranges
+  }
+
+  private getTimeAxisMax(): number {
+    if (this.timeRangeType === 'live' && this.duration) {
+      return new Date().getTime()
+    }
+    return undefined as any // Let ECharts auto-determine for static ranges
+  }
+
+  private getTimeSeriesData(): Array<[number, number]> {
+    const xData = this.data.chartData.xData
+    const yData = this.data.chartData.seriesData[0]?.data || []
+
+    if (xData.length === 0) return []
+
+    // Convert timestamp strings to numbers and pair with values
+    const timeSeriesData = xData.map((timestamp, index) => [
+      new Date(timestamp).getTime(), // Convert to milliseconds
+      yData[index] || 0,
+    ])
+
+    // Sort by timestamp to ensure chronological order
+    timeSeriesData.sort((a, b) => a[0] - b[0])
+
+    // If we're in live mode with duration, filter out points outside the time window
+    if (this.timeRangeType === 'live' && this.duration) {
+      const now = new Date().getTime()
+      const cutoffTime = now - this.duration * 60 * 1000
+      return timeSeriesData.filter(([timestamp]) => timestamp >= cutoffTime) as Array<[number, number]>
+    }
+
+    return timeSeriesData as Array<[number, number]>
+  }
+
+  private get effectiveMin(): number {
+    const seriesData = this.data.chartData.seriesData
+    if (!seriesData.length || !seriesData[0] || !seriesData[0].data.length) return 0
+    return Math.min(...seriesData[0].data)
+  }
+
+  private get effectiveMax(): number {
+    const seriesData = this.data.chartData.seriesData
+    if (!seriesData.length || !seriesData[0] || !seriesData[0].data.length) return 100
+    return Math.max(...seriesData[0].data)
+  }
+
+  private get displayColor(): string {
+    if (this.thresholds.length === 0) return this.color
+
+    // For line charts, we'll use the color based on the latest data point
+    const latestValue = this.data.chartData.seriesData[0].data[this.data.chartData.seriesData[0].data.length - 1]
+    if (latestValue === undefined) return this.color
+
+    const absThresholds = this.thresholds
+      .map((t) => ({
+        absValue:
+          this.thresholdsType === 'Absolute'
+            ? t.value
+            : this.effectiveMin + (this.effectiveMax - this.effectiveMin) * (t.value / 100),
+        color: t.color,
+      }))
+      .sort((a, b) => a.absValue - b.absValue)
+
+    let selectedColor = this.color
+    for (const t of absThresholds) {
+      if (latestValue >= t.absValue) {
+        selectedColor = t.color
+      } else {
+        break
+      }
+    }
+    return selectedColor
+  }
+
+  @Watch('theme')
+  @Watch('data', { deep: true })
+  @Watch('color')
+  @Watch('smooth')
+  @Watch('area')
+  @Watch('thresholds', { deep: true })
+  @Watch('thresholdsType')
+  @Watch('duration')
+  @Watch('timeRangeType')
+  onDataChange() {
+    this.debouncedUpdate()
+  }
+
+  mounted(): void {
+    this.debouncedUpdate = this.debounce(this.updateChart, 100)
+    this.$nextTick(() => {
+      this.initChart()
+      this.setupResizeObserver()
+    })
+  }
+
+  beforeDestroy(): void {
+    this.cleanup()
+  }
+
+  private initChart(): void {
+    const chartDom = document.getElementById(this.id) as HTMLElement
+    if (chartDom) {
+      this.myChart = echarts.init(chartDom, this.theme !== 'light' ? 'dark' : null)
+      this.debouncedUpdate()
+    }
+  }
+
+  private updateChart(): void {
+    if (!this.myChart) return
+
+    const container = document.getElementById(this.id)
+    const containerWidth = container?.clientWidth || 400
+    const containerHeight = container?.clientHeight || 300
+
+    const leftMargin = Math.max(containerWidth * 0.07, 20)
+    const rightMargin = Math.max(containerWidth * 0.05, 20)
+    const bottomMargin = Math.max(containerHeight * 0.15, 20)
+
+    const isLightTheme = this.theme === 'light'
+    const textColor = isLightTheme ? '#424242' : '#e8eaed'
+    const gridColor = isLightTheme ? '#e8e8e8' : '#3a3a3a'
+
+    const timeSeriesData = this.getTimeSeriesData()
+
+    if (timeSeriesData.length === 0) {
+      const option = {
+        animation: false,
+        backgroundColor: 'transparent',
+        grid: { left: leftMargin, right: rightMargin, bottom: bottomMargin, top: 20 },
+        xAxis: { type: 'time', show: false },
+        yAxis: { type: 'value', show: false },
+        series: [{ type: 'line', data: [] }],
+      }
+      this.myChart.setOption(option, true, true)
+      return
+    }
+
+    const option = {
+      animation: false, // Disable all animations to prevent visual corruption
+      backgroundColor: 'transparent',
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: isLightTheme ? 'rgba(255,255,255,0.95)' : 'rgba(32,33,36,0.95)',
+        borderColor: isLightTheme ? '#e0e0e0' : '#424242',
+        textStyle: { color: textColor },
+        formatter: (params: any) => {
+          if (!params || params.length === 0) return ''
+          const data = params[0]
+          const time = new Date(data.data[0]).toLocaleString()
+          const value = data.data[1]
+          return `${time}<br/>Value: ${value}`
+        },
+      },
+      grid: {
+        left: leftMargin,
+        right: rightMargin,
+        bottom: bottomMargin,
+        top: 20,
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'time',
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: gridColor } },
+        axisLabel: {
+          color: textColor,
+          fontSize: 10,
+          formatter: (value: number) => {
+            const date = new Date(value)
+            if (this.duration <= 60) {
+              // Less than 1 hour - show minutes:seconds
+              return date.toLocaleTimeString('en-US', { minute: '2-digit', second: '2-digit' })
+            } else if (this.duration <= 24 * 60) {
+              // Less than 1 day - show hours:minutes
+              return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
+            } else {
+              // More than 1 day - show date
+              return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+            }
+          },
+        },
+        axisTick: { show: false },
+        min: this.getTimeAxisMin(),
+        max: this.getTimeAxisMax(),
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: { show: false },
+        axisLabel: { color: textColor, fontSize: 10 },
+        splitLine: { lineStyle: { color: gridColor, type: 'dashed' } },
+      },
+      series: [
+        {
+          type: 'line',
+          smooth: this.smooth,
+          symbol: 'none',
+          data: timeSeriesData, // Use the filtered and sorted data
+          animation: false, // Disable series animation
+          lineStyle: { color: this.displayColor, width: 2 },
+          areaStyle: this.area
+            ? {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: `${this.displayColor}80` },
+                  { offset: 1, color: `${this.displayColor}00` },
+                ]),
+              }
+            : undefined,
+          connectNulls: false, // Don't connect points across gaps
+        },
+      ],
+    }
+
+    this.myChart.setOption(option, true, true) // notMerge: true, lazyUpdate: true
+  }
+
+  private setupResizeObserver(): void {
+    const container = document.getElementById(this.id) as HTMLElement
+    if (!container || !window.ResizeObserver) return
+
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.resizeTimeout) clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = window.setTimeout(() => {
+        if (this.myChart) {
+          this.myChart.resize()
+          this.updateChart()
+        }
+      }, 100)
+    })
+
+    this.resizeObserver.observe(container)
+  }
+
+  private cleanup(): void {
+    if (this.resizeTimeout) clearTimeout(this.resizeTimeout)
+    if (this.resizeObserver) this.resizeObserver.disconnect()
+    if (this.myChart) this.myChart.dispose()
+  }
+
+  private debounce(func: Function, wait: number) {
+    let timeout: number | null = null
+    return () => {
+      if (timeout) clearTimeout(timeout)
+      timeout = window.setTimeout(func, wait)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line-chart-container {
+  width: 100%;
+  height: 100%;
+  min-width: 200px;
+  min-height: 150px;
+  max-width: 100%;
+  max-height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.no-data-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #999;
+  font-size: 16px;
+  pointer-events: none;
+  z-index: 10;
+}
+</style>
diff --git a/src/components/widget-configs/BigNumberConfig.vue b/src/components/widget-configs/BigNumberConfig.vue
new file mode 100644
index 000000000..4d6c63386
--- /dev/null
+++ b/src/components/widget-configs/BigNumberConfig.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="widget-config-section">
+    <el-card shadow="never" class="widget-section-body item-card">
+      <el-row :gutter="10">
+        <el-col :span="22">
+          <el-form-item label-width="93px" label="Min">
+            <el-input type="number" size="mini" v-model="localMin" step="1" placeholder="auto" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" label="Max">
+            <el-input type="number" size="mini" v-model="localMax" step="1" placeholder="auto" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" label="Decimals">
+            <el-input type="number" size="mini" v-model="localDecimals" :min="0" :max="6" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" label="Unit">
+            <el-input size="mini" v-model="localUnit" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" label="Color" class="color-picker-item">
+            <el-color-picker v-model="localColor" size="mini" color-format="hex" :predefine="predefineColors" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { defineColors } from '@/utils/colors'
+
+@Component({})
+export default class BigNumberConfig extends Vue {
+  @Prop({ type: Object, required: true }) readonly options!: BigNumberWidgetOptions
+
+  private localMin: string = ''
+  private localMax: string = ''
+  private localDecimals: string = '1'
+  private localUnit: string = ''
+  private localColor: string = '#00B572'
+
+  private isUpdatingFromProps: boolean = false
+
+  mounted() {
+    this.syncFromProps()
+  }
+
+  @Watch('options', { deep: true })
+  onOptionsChange() {
+    this.syncFromProps()
+  }
+
+  private syncFromProps() {
+    this.isUpdatingFromProps = true
+
+    const o = this.options || {}
+    this.localMin = o.min !== undefined ? String(o.min) : ''
+    this.localMax = o.max !== undefined ? String(o.max) : ''
+    this.localDecimals = o.decimals !== undefined ? String(o.decimals) : '1'
+    this.localUnit = o.unit || ''
+    this.localColor = o.color || '#00B572'
+
+    this.$nextTick(() => {
+      this.isUpdatingFromProps = false
+    })
+  }
+
+  @Watch('localMin') onLocalMin(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localMax') onLocalMax(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localDecimals') onLocalDec(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localUnit') onLocalUnit(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localColor') onLocalColor(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+
+  get predefineColors(): string[] {
+    return defineColors
+  }
+
+  private emitOptions() {
+    const minNum = Number(this.localMin)
+    const maxNum = Number(this.localMax)
+    const decNum = Number(this.localDecimals)
+    const next: BigNumberWidgetOptions = {
+      ...this.options,
+      min: this.localMin === '' || isNaN(minNum) ? undefined : minNum,
+      max: this.localMax === '' || isNaN(maxNum) ? undefined : maxNum,
+      decimals: isNaN(decNum) ? 1 : Math.min(Math.max(decNum, 0), 6),
+      unit: this.localUnit || '',
+      color: this.localColor || '#00B572',
+    }
+    this.$emit('update:options', next)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/mixins';
+
+@include color-picker-item;
+</style>
diff --git a/src/components/widget-configs/GaugeConfig.vue b/src/components/widget-configs/GaugeConfig.vue
new file mode 100644
index 000000000..d420cb77a
--- /dev/null
+++ b/src/components/widget-configs/GaugeConfig.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="widget-config-section">
+    <el-card shadow="never" class="widget-section-body item-card">
+      <el-row :gutter="10">
+        <el-col :span="22">
+          <el-form-item label-width="93px" :label="$t('viewer.min')">
+            <el-input type="number" size="mini" v-model="localMin" step="1" placeholder="auto" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" :label="$t('viewer.max')">
+            <el-input type="number" size="mini" v-model="localMax" step="1" placeholder="auto" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" :label="$t('viewer.decimals')">
+            <el-input type="number" size="mini" v-model="localDecimals" :min="0" :max="6" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" :label="$t('viewer.unit')">
+            <el-input size="mini" v-model="localUnit" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="93px" :label="$t('viewer.color')" class="color-picker-item">
+            <el-color-picker v-model="localColor" size="mini" color-format="hex" :predefine="predefineColors" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { defineColors } from '@/utils/colors'
+
+@Component({})
+export default class GaugeConfig extends Vue {
+  @Prop({ type: Object, required: true }) readonly options!: GaugeWidgetOptions
+
+  private localMin: string = ''
+  private localMax: string = ''
+  private localDecimals: string = '1'
+  private localUnit: string = ''
+  private localColor: string = '#00B572'
+
+  // Add this flag to prevent circular updates
+  private isUpdatingFromProps: boolean = false
+
+  mounted() {
+    this.syncFromProps()
+  }
+  @Watch('options', { deep: true }) onOptionsChange() {
+    this.syncFromProps()
+  }
+
+  private syncFromProps() {
+    this.isUpdatingFromProps = true
+
+    const o = this.options || {}
+    this.localMin = o.min !== undefined ? String(o.min) : ''
+    this.localMax = o.max !== undefined ? String(o.max) : ''
+    this.localDecimals = o.decimals !== undefined ? String(o.decimals) : '1'
+    this.localUnit = o.unit || ''
+    this.localColor = o.color || '#00B572'
+
+    // Reset flag after Vue's next tick to allow normal updates
+    this.$nextTick(() => {
+      this.isUpdatingFromProps = false
+    })
+  }
+
+  @Watch('localMin') onLocalMin(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localMax') onLocalMax(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localDecimals') onLocalDec(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localUnit') onLocalUnit(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localColor') onLocalColor(v: string) {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+
+  get predefineColors(): string[] {
+    return defineColors
+  }
+
+  private emitOptions() {
+    const minNum = Number(this.localMin)
+    const maxNum = Number(this.localMax)
+    const decNum = Number(this.localDecimals)
+    const next: GaugeWidgetOptions = {
+      ...this.options,
+      min: this.localMin === '' || isNaN(minNum) ? undefined : minNum,
+      max: this.localMax === '' || isNaN(maxNum) ? undefined : maxNum,
+      decimals: isNaN(decNum) ? 1 : Math.min(Math.max(decNum, 0), 6),
+      unit: this.localUnit || '',
+      color: this.localColor || '#00B572',
+    }
+    this.$emit('update:options', next)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/mixins';
+
+@include color-picker-item;
+</style>
diff --git a/src/components/widget-configs/LineConfig.vue b/src/components/widget-configs/LineConfig.vue
new file mode 100644
index 000000000..55f7acc51
--- /dev/null
+++ b/src/components/widget-configs/LineConfig.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="widget-config-section">
+    <el-card shadow="never" class="widget-section-body item-card">
+      <el-row :gutter="10">
+        <el-col :span="22">
+          <el-form-item label-width="120px" :label="$t('viewer.color')" class="color-picker-item">
+            <el-color-picker v-model="localColor" size="mini" color-format="hex" :predefine="predefineColors" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="120px" :label="$t('viewer.smoothLines')">
+            <el-switch v-model="localSmooth" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+        <el-col :span="22">
+          <el-form-item label-width="120px" :label="$t('viewer.areaFill')">
+            <el-switch v-model="localArea" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2"></el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { defineColors } from '@/utils/colors'
+
+@Component({})
+export default class LineConfig extends Vue {
+  @Prop({ type: Object, required: true }) readonly options!: LineWidgetOptions
+
+  private localColor: string = '#00B572'
+  private localSmooth: boolean = true
+  private localArea: boolean = true
+
+  // Add this flag to prevent circular updates
+  private isUpdatingFromProps: boolean = false
+
+  mounted() {
+    this.syncFromProps()
+  }
+  @Watch('options', { deep: true }) onOptionsChange() {
+    this.syncFromProps()
+  }
+
+  private syncFromProps() {
+    // Set flag to prevent watchers from emitting during sync
+    this.isUpdatingFromProps = true
+
+    const o = this.options || {}
+    this.localColor = o.color || '#00B572'
+    this.localSmooth = o.smooth !== undefined ? o.smooth : true
+    this.localArea = o.area !== undefined ? o.area : true
+
+    // Reset flag after Vue's next tick to allow normal updates
+    this.$nextTick(() => {
+      this.isUpdatingFromProps = false
+    })
+  }
+
+  @Watch('localColor') onLocalColor() {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localSmooth') onLocalSmooth() {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+  @Watch('localArea') onLocalArea() {
+    if (!this.isUpdatingFromProps) this.emitOptions()
+  }
+
+  get predefineColors(): string[] {
+    return defineColors
+  }
+
+  private emitOptions() {
+    const next: LineWidgetOptions = {
+      ...this.options,
+      color: this.localColor || '#00B572',
+      smooth: this.localSmooth,
+      area: this.localArea,
+    }
+    this.$emit('update:options', next)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/mixins';
+
+@include color-picker-item;
+</style>
diff --git a/src/database/database.config.ts b/src/database/database.config.ts
index 81e5b2375..52520944b 100644
--- a/src/database/database.config.ts
+++ b/src/database/database.config.ts
@@ -12,6 +12,8 @@ import HistoryConnectionEntity from './models/HistoryConnectionEntity'
 import WillEntity from './models/WillEntity'
 import CopilotEntity from './models/CopilotEntity'
 import TopicNodeEntity from './models/TopicNodeEntity'
+import DashboardEntity from './models/DashboardEntity'
+import WidgetEntity from './models/WidgetEntity'
 import { ConnectionOptions } from 'typeorm'
 import { initTable1629476510574 } from './migration/1629476510574-initTable'
 import { messages1630403733964 } from './migration/1630403733964-messages'
@@ -49,10 +51,16 @@ import { ignoreQoS0Message1724839386732 } from './migration/1724839386732-ignore
 import { changeDefaultLLMModel1727111519962 } from './migration/1727111519962-changeDefaultLLMModel'
 import { topicNodeTables1729246737362 } from './migration/1729246737362-topicNodeTables'
 import { reasonModelSupport1742835643809 } from './migration/1742835643809-reasonModelSupport'
+import { dashboardAndWidgetModels1759069904761 } from './migration/1759069904761-dashboardAndWidgetModels'
 
-// Get the unified store path using Electron's native API
-// This fixes the Windows %APPDATA% redirect issue
-const STORE_PATH = getUnifiedAppDataPath('MQTTX')
+// Get store path; fall back when running in CLI (no Electron app)
+let STORE_PATH: string
+try {
+  STORE_PATH = getUnifiedAppDataPath('MQTTX')
+} catch (e) {
+  const home = process.env.HOME || require('os').homedir()
+  STORE_PATH = process.env.MQTTX_DATA_PATH || join(home, '.mqttx')
+}
 
 // Ensure the directory exists
 ensureAppDataDir(STORE_PATH)
@@ -105,6 +113,7 @@ const ORMConfig = {
     changeDefaultLLMModel1727111519962,
     topicNodeTables1729246737362,
     reasonModelSupport1742835643809,
+    dashboardAndWidgetModels1759069904761,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [
@@ -120,6 +129,8 @@ const ORMConfig = {
     HistoryConnectionEntity,
     CopilotEntity,
     TopicNodeEntity,
+    DashboardEntity,
+    WidgetEntity,
   ],
   cli: {
     migrationsDir: 'src/database/migration',
diff --git a/src/database/migration/1759069904761-dashboardAndWidgetModels.ts b/src/database/migration/1759069904761-dashboardAndWidgetModels.ts
new file mode 100644
index 000000000..c82f2bcbe
--- /dev/null
+++ b/src/database/migration/1759069904761-dashboardAndWidgetModels.ts
@@ -0,0 +1,240 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class dashboardAndWidgetModels1759069904761 implements MigrationInterface {
+  name = 'dashboardAndWidgetModels1759069904761'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "WidgetEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "dashboard_id" varchar NOT NULL,
+                "x" integer NOT NULL,
+                "y" integer NOT NULL,
+                "w" integer NOT NULL,
+                "h" integer NOT NULL,
+                "static" boolean NOT NULL DEFAULT (0),
+                "minW" integer,
+                "minH" integer,
+                "maxW" integer,
+                "maxH" integer,
+                "type" varchar NOT NULL,
+                "title" varchar,
+                "connectionId" varchar,
+                "topicPattern" varchar,
+                "valueField" varchar,
+                "fallbackValue" float NOT NULL DEFAULT (0),
+                "schemaType" varchar CHECK(schemaType IN ('protobuf', 'avro')),
+                "schemaId" varchar,
+                "schemaMessageName" varchar,
+                "schemaValidationState" varchar CHECK(schemaValidationState IN ('valid', 'invalid')),
+                "schemaValidationError" text,
+                "widgetOptions" text,
+                "createAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+                "updateAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP)
+            )
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "DashboardEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "name" varchar NOT NULL,
+                "description" varchar,
+                "orderId" integer,
+                "globalSettings" text,
+                "createAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+                "updateAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP)
+            )
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "temporary_WidgetEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "dashboard_id" varchar NOT NULL,
+                "x" integer NOT NULL,
+                "y" integer NOT NULL,
+                "w" integer NOT NULL,
+                "h" integer NOT NULL,
+                "static" boolean NOT NULL DEFAULT (0),
+                "minW" integer,
+                "minH" integer,
+                "maxW" integer,
+                "maxH" integer,
+                "type" varchar NOT NULL,
+                "title" varchar,
+                "connectionId" varchar,
+                "topicPattern" varchar,
+                "valueField" varchar,
+                "fallbackValue" float NOT NULL DEFAULT (0),
+                "schemaType" varchar CHECK(schemaType IN ('protobuf', 'avro')),
+                "schemaId" varchar,
+                "schemaMessageName" varchar,
+                "schemaValidationState" varchar CHECK(schemaValidationState IN ('valid', 'invalid')),
+                "schemaValidationError" text,
+                "widgetOptions" text,
+                "createAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+                "updateAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+                CONSTRAINT "FK_0edfec3287926ebbc0a301bfd13" FOREIGN KEY ("dashboard_id") REFERENCES "DashboardEntity" ("id") ON DELETE CASCADE ON UPDATE NO ACTION
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_WidgetEntity"(
+                    "id",
+                    "dashboard_id",
+                    "x",
+                    "y",
+                    "w",
+                    "h",
+                    "static",
+                    "minW",
+                    "minH",
+                    "maxW",
+                    "maxH",
+                    "type",
+                    "title",
+                    "connectionId",
+                    "topicPattern",
+                    "valueField",
+                    "fallbackValue",
+                    "schemaType",
+                    "schemaId",
+                    "schemaMessageName",
+                    "schemaValidationState",
+                    "schemaValidationError",
+                    "widgetOptions",
+                    "createAt",
+                    "updateAt"
+                )
+            SELECT "id",
+                "dashboard_id",
+                "x",
+                "y",
+                "w",
+                "h",
+                "static",
+                "minW",
+                "minH",
+                "maxW",
+                "maxH",
+                "type",
+                "title",
+                "connectionId",
+                "topicPattern",
+                "valueField",
+                "fallbackValue",
+                "schemaType",
+                "schemaId",
+                "schemaMessageName",
+                "schemaValidationState",
+                "schemaValidationError",
+                "widgetOptions",
+                "createAt",
+                "updateAt"
+            FROM "WidgetEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "WidgetEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_WidgetEntity"
+                RENAME TO "WidgetEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "WidgetEntity"
+                RENAME TO "temporary_WidgetEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "WidgetEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "dashboard_id" varchar NOT NULL,
+                "x" integer NOT NULL,
+                "y" integer NOT NULL,
+                "w" integer NOT NULL,
+                "h" integer NOT NULL,
+                "static" boolean NOT NULL DEFAULT (0),
+                "minW" integer,
+                "minH" integer,
+                "maxW" integer,
+                "maxH" integer,
+                "type" varchar NOT NULL,
+                "title" varchar,
+                "connectionId" varchar,
+                "topicPattern" varchar,
+                "valueField" varchar,
+                "fallbackValue" float NOT NULL DEFAULT (0),
+                "schemaType" varchar CHECK(schemaType IN ('protobuf', 'avro')),
+                "schemaId" varchar,
+                "schemaMessageName" varchar,
+                "schemaValidationState" varchar CHECK(schemaValidationState IN ('valid', 'invalid')),
+                "schemaValidationError" text,
+                "widgetOptions" text,
+                "createAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+                "updateAt" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "WidgetEntity"(
+                    "id",
+                    "dashboard_id",
+                    "x",
+                    "y",
+                    "w",
+                    "h",
+                    "static",
+                    "minW",
+                    "minH",
+                    "maxW",
+                    "maxH",
+                    "type",
+                    "title",
+                    "connectionId",
+                    "topicPattern",
+                    "valueField",
+                    "fallbackValue",
+                    "schemaType",
+                    "schemaId",
+                    "schemaMessageName",
+                    "schemaValidationState",
+                    "schemaValidationError",
+                    "widgetOptions",
+                    "createAt",
+                    "updateAt"
+                )
+            SELECT "id",
+                "dashboard_id",
+                "x",
+                "y",
+                "w",
+                "h",
+                "static",
+                "minW",
+                "minH",
+                "maxW",
+                "maxH",
+                "type",
+                "title",
+                "connectionId",
+                "topicPattern",
+                "valueField",
+                "fallbackValue",
+                "schemaType",
+                "schemaId",
+                "schemaMessageName",
+                "schemaValidationState",
+                "schemaValidationError",
+                "widgetOptions",
+                "createAt",
+                "updateAt"
+            FROM "temporary_WidgetEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_WidgetEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "DashboardEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "WidgetEntity"
+        `)
+  }
+}
diff --git a/src/database/models/DashboardEntity.ts b/src/database/models/DashboardEntity.ts
new file mode 100644
index 000000000..a90563a09
--- /dev/null
+++ b/src/database/models/DashboardEntity.ts
@@ -0,0 +1,29 @@
+import { Entity, PrimaryGeneratedColumn, Column, OneToMany, CreateDateColumn, UpdateDateColumn } from 'typeorm'
+import WidgetEntity from './WidgetEntity'
+
+@Entity('DashboardEntity')
+export default class DashboardEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string
+
+  @Column({ type: 'varchar' })
+  name!: string
+
+  @Column({ type: 'varchar', nullable: true })
+  description?: string
+
+  @Column({ type: 'integer', nullable: true })
+  orderId?: number
+
+  @Column({ type: 'simple-json', nullable: true })
+  globalSettings?: any
+
+  @OneToMany(() => WidgetEntity, (widget: WidgetEntity) => widget.dashboard, { cascade: true })
+  widgets!: WidgetEntity[]
+
+  @CreateDateColumn({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' })
+  createAt!: string
+
+  @UpdateDateColumn({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' })
+  updateAt!: string
+}
diff --git a/src/database/models/WidgetEntity.ts b/src/database/models/WidgetEntity.ts
new file mode 100644
index 000000000..6ea0d759a
--- /dev/null
+++ b/src/database/models/WidgetEntity.ts
@@ -0,0 +1,93 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  ManyToOne,
+  JoinColumn,
+  CreateDateColumn,
+  UpdateDateColumn,
+} from 'typeorm'
+import DashboardEntity from './DashboardEntity'
+
+@Entity('WidgetEntity')
+export default class WidgetEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string
+
+  @ManyToOne(() => DashboardEntity, (dashboard) => dashboard.widgets, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'dashboard_id', referencedColumnName: 'id' })
+  dashboard?: DashboardEntity
+
+  @Column({ name: 'dashboard_id' })
+  dashboardId!: string
+
+  @Column({ type: 'integer' })
+  x!: number
+
+  @Column({ type: 'integer' })
+  y!: number
+
+  @Column({ type: 'integer' })
+  w!: number
+
+  @Column({ type: 'integer' })
+  h!: number
+
+  @Column({ type: 'boolean', default: false })
+  'static'!: boolean
+
+  @Column({ type: 'integer', nullable: true })
+  minW?: number
+
+  @Column({ type: 'integer', nullable: true })
+  minH?: number
+
+  @Column({ type: 'integer', nullable: true })
+  maxW?: number
+
+  @Column({ type: 'integer', nullable: true })
+  maxH?: number
+
+  @Column({ type: 'varchar' })
+  type!: string
+
+  @Column({ type: 'varchar', nullable: true })
+  title?: string
+
+  @Column({ type: 'varchar', nullable: true })
+  connectionId?: string
+
+  @Column({ type: 'varchar', nullable: true })
+  topicPattern?: string
+
+  @Column({ type: 'varchar', nullable: true })
+  valueField?: string
+
+  @Column({ type: 'float', default: 0 })
+  fallbackValue!: number
+
+  // Schema support (updated for integration)
+  @Column({ type: 'simple-enum', enum: ['protobuf', 'avro'], nullable: true })
+  schemaType?: 'protobuf' | 'avro'
+
+  @Column({ type: 'varchar', nullable: true })
+  schemaId?: string
+
+  @Column({ type: 'varchar', nullable: true })
+  schemaMessageName?: string
+
+  @Column({ type: 'simple-enum', enum: ['valid', 'invalid'], nullable: true })
+  schemaValidationState?: 'valid' | 'invalid'
+
+  @Column({ type: 'text', nullable: true })
+  schemaValidationError?: string
+
+  @Column({ type: 'simple-json', nullable: true })
+  widgetOptions?: {}
+
+  @CreateDateColumn({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' })
+  createAt!: string
+
+  @UpdateDateColumn({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' })
+  updateAt!: string
+}
diff --git a/src/database/services/DashboardService.ts b/src/database/services/DashboardService.ts
new file mode 100644
index 000000000..97a2e5706
--- /dev/null
+++ b/src/database/services/DashboardService.ts
@@ -0,0 +1,175 @@
+import { Service } from 'typedi'
+import { InjectRepository } from 'typeorm-typedi-extensions'
+import { Repository } from 'typeorm'
+import DashboardEntity from '@/database/models/DashboardEntity'
+import WidgetEntity from '@/database/models/WidgetEntity'
+import time from '@/utils/time'
+
+/**
+ * Service for managing dashboards and their widgets.
+ * Provides CRUD operations and utility methods for dashboard ordering and cascading fetches.
+ */
+@Service()
+export default class DashboardService {
+  constructor(
+    // @ts-ignore
+    @InjectRepository(DashboardEntity)
+    private dashboardRepository: Repository<DashboardEntity>,
+  ) {}
+
+  public static entityToModel(entity: DashboardEntity): DashboardModel {
+    return {
+      ...entity,
+      widgets: (entity.widgets || []).map((w) => DashboardService.widgetEntityToModel(w)),
+    }
+  }
+
+  public static modelToEntity(model: Partial<DashboardModel>): Partial<DashboardEntity> {
+    const { widgets, ...rest } = model
+    const entity: Partial<DashboardEntity> = {
+      ...rest,
+      widgets: widgets?.map((w) => DashboardService.widgetModelToEntity(w as WidgetModel) as WidgetEntity),
+    }
+    return entity
+  }
+
+  public static widgetEntityToModel(entity: WidgetEntity): WidgetModel {
+    return {
+      ...entity,
+    } as WidgetModel
+  }
+
+  public static widgetModelToEntity(model: Partial<WidgetModel>): Partial<WidgetEntity> {
+    return {
+      ...model,
+    } as Partial<WidgetEntity>
+  }
+
+  /**
+   * Creates a new dashboard in the database.
+   * If orderId is not provided, it will be set to the next available value.
+   * @param data - The DashboardModel data to create.
+   * @returns The created DashboardModel, or undefined if creation failed.
+   */
+  public async create(data: DashboardModel): Promise<DashboardModel | undefined> {
+    // Auto-assign orderId if not provided
+    let orderId = data.orderId
+    if (orderId === undefined) {
+      const maxOrderResult = await this.dashboardRepository
+        .createQueryBuilder('db')
+        .select('MAX(db.orderId)', 'maxOrder')
+        .getRawOne()
+      orderId = (maxOrderResult?.maxOrder || 0) + 1
+    }
+
+    const toSave = DashboardService.modelToEntity({
+      ...data,
+      orderId,
+      createAt: time.getNowDate(),
+      updateAt: time.getNowDate(),
+    }) as DashboardEntity
+    const saved = await this.dashboardRepository.save(toSave)
+    return DashboardService.entityToModel(saved)
+  }
+
+  /**
+   * Updates an existing dashboard by its ID.
+   * Widgets are excluded from the update (handled separately).
+   * @param id - The ID of the dashboard to update.
+   * @param data - Partial DashboardModel data to update.
+   * @returns The updated DashboardModel, or undefined if not found.
+   */
+  public async update(id: string, data: Partial<DashboardModel>): Promise<DashboardModel | undefined> {
+    const { widgets, ...rest } = data // Exclude widgets if present
+    const toUpdate = {
+      ...rest,
+      updateAt: time.getNowDate(),
+    }
+    const result = await this.dashboardRepository.update(id, toUpdate)
+    if (result.affected === 0) return undefined
+    return this.get(id) // Use existing get which includes widgets
+  }
+
+  /**
+   * Deletes a dashboard by its ID.
+   * @param id - The ID of the dashboard to delete.
+   * @returns The deleted DashboardModel, or undefined if not found.
+   */
+  public async delete(id: string): Promise<DashboardModel | undefined> {
+    const exist = await this.dashboardRepository.findOne(id)
+    if (!exist) return
+    await this.dashboardRepository.delete(id)
+    return DashboardService.entityToModel(exist)
+  }
+
+  /**
+   * Retrieves a dashboard by its ID, including its widgets.
+   * @param id - The ID of the dashboard to retrieve.
+   * @returns The DashboardModel if found, otherwise undefined.
+   */
+  public async get(id: string): Promise<DashboardModel | undefined> {
+    const entity = await this.dashboardRepository
+      .createQueryBuilder('db')
+      .where('db.id = :id', { id })
+      .leftJoinAndSelect('db.widgets', 'wg')
+      .getOne()
+    return entity ? DashboardService.entityToModel(entity) : undefined
+  }
+
+  /**
+   * Retrieves all dashboards, ordered by orderId (or fallback), then by creation time.
+   * Widgets are not included in this method.
+   * @returns An array of DashboardModels.
+   */
+  public async getAll(): Promise<DashboardModel[]> {
+    const entities = await this.dashboardRepository
+      .createQueryBuilder('db')
+      .orderBy('COALESCE(db.orderId, 999999)', 'ASC')
+      .addOrderBy('db.createAt', 'ASC')
+      .getMany()
+    return entities.map((e) => DashboardService.entityToModel(e))
+  }
+
+  /**
+   * Retrieves all dashboards (or a specific one if id is provided), including their widgets.
+   * Results are ordered by orderId (or fallback), then by creation time.
+   * @param id - (Optional) The dashboard ID to filter by.
+   * @returns An array of DashboardModels.
+   */
+  public async cascadeGetAll(id?: string): Promise<DashboardModel[]> {
+    const qb = this.dashboardRepository
+      .createQueryBuilder('db')
+      .leftJoinAndSelect('db.widgets', 'wg')
+      .orderBy('COALESCE(db.orderId, 999999)', 'ASC')
+      .addOrderBy('db.createAt', 'ASC')
+
+    if (id) {
+      qb.where('db.id = :id', { id })
+    }
+
+    const entities = await qb.getMany()
+    return entities.map((e) => DashboardService.entityToModel(e))
+  }
+
+  /**
+   * Batch updates the orderId of multiple dashboards for reordering.
+   * @param dashboardOrderUpdates - Array of objects containing id and new orderId for each dashboard.
+   * @returns True if successful, false if an error occurred.
+   */
+  public async updateOrders(dashboardOrderUpdates: { id: string; orderId: number }[]): Promise<boolean> {
+    try {
+      await this.dashboardRepository.manager.transaction(async (transactionalEntityManager) => {
+        for (const update of dashboardOrderUpdates) {
+          await transactionalEntityManager.update(DashboardEntity, update.id, {
+            orderId: update.orderId,
+            updateAt: time.getNowDate(),
+          })
+        }
+      })
+      return true
+    } catch (error) {
+      console.error('Error updating dashboard orders:', error)
+      return false
+    }
+  }
+}
diff --git a/src/database/services/WidgetService.ts b/src/database/services/WidgetService.ts
new file mode 100644
index 000000000..3f4f57733
--- /dev/null
+++ b/src/database/services/WidgetService.ts
@@ -0,0 +1,130 @@
+import { Service } from 'typedi'
+import { InjectRepository } from 'typeorm-typedi-extensions'
+import { Repository, UpdateResult } from 'typeorm'
+import WidgetEntity from '@/database/models/WidgetEntity'
+import time from '@/utils/time'
+
+@Service()
+export default class WidgetService {
+  constructor(
+    // @ts-ignore
+    @InjectRepository(WidgetEntity)
+    private widgetRepository: Repository<WidgetEntity>,
+  ) {}
+
+  public static entityToModel(entity: WidgetEntity): WidgetModel {
+    return {
+      ...entity,
+    } as WidgetModel
+  }
+
+  public static modelToEntity(model: Partial<WidgetModel>): Partial<WidgetEntity> {
+    return {
+      ...model,
+    } as Partial<WidgetEntity>
+  }
+
+  /**
+   * Creates a new widget in the database.
+   * @param data - The WidgetModel data to create.
+   * @returns The created WidgetModel, or undefined if creation failed.
+   */
+  public async create(data: WidgetModel): Promise<WidgetModel | undefined> {
+    const toSave = WidgetService.modelToEntity({
+      ...data,
+      createAt: time.getNowDate(),
+      updateAt: time.getNowDate(),
+    }) as WidgetEntity
+    const saved = await this.widgetRepository.save(toSave)
+    return WidgetService.entityToModel(saved)
+  }
+
+  /**
+   * Updates an existing widget by its ID.
+   * @param id - The ID of the widget to update.
+   * @param data - Partial WidgetModel data to update.
+   * @returns The updated WidgetModel, or undefined if not found.
+   */
+  public async update(id: string, data: Partial<WidgetModel>): Promise<WidgetModel | undefined> {
+    const toUpdate = WidgetService.modelToEntity({ ...data, updateAt: time.getNowDate() })
+    const result = await this.widgetRepository.update(id, toUpdate)
+    if (result.affected === 0) return undefined
+    return this.get(id)
+  }
+
+  /**
+   * Deletes a widget by its ID.
+   * @param id - The ID of the widget to delete.
+   * @returns The deleted WidgetModel, or undefined if not found.
+   */
+  public async delete(id: string): Promise<WidgetModel | undefined> {
+    const exist = await this.widgetRepository.findOne(id)
+    if (!exist) return
+    await this.widgetRepository.delete(id)
+    return WidgetService.entityToModel(exist)
+  }
+
+  /**
+   * Retrieves a widget by its ID.
+   * @param id - The ID of the widget to retrieve.
+   * @returns The WidgetModel if found, otherwise undefined.
+   */
+  public async get(id: string): Promise<WidgetModel | undefined> {
+    const entity = await this.widgetRepository.createQueryBuilder('wg').where('wg.id = :id', { id }).getOne()
+    return entity ? WidgetService.entityToModel(entity) : undefined
+  }
+
+  /**
+   * Retrieves all widgets, optionally filtered by dashboardId.
+   * Results are ordered by dashboardId, y, and x.
+   * @param dashboardId - (Optional) The dashboard ID to filter widgets.
+   * @returns An array of WidgetModels.
+   */
+  public async getAll(dashboardId?: string): Promise<WidgetModel[]> {
+    const qb = this.widgetRepository.createQueryBuilder('wg')
+    if (dashboardId) {
+      qb.where('wg.dashboardId = :dashboardId', { dashboardId })
+    }
+    qb.orderBy('wg.dashboardId', 'ASC').addOrderBy('wg.y', 'ASC').addOrderBy('wg.x', 'ASC')
+    const entities = await qb.getMany()
+    return entities.map((e) => WidgetService.entityToModel(e))
+  }
+
+  /**
+   * Retrieves all widgets for a dashboard, or all widgets if no dashboardId is provided.
+   * This is an alias for getAll.
+   * @param dashboardId - (Optional) The dashboard ID to filter widgets.
+   * @returns An array of WidgetModels.
+   */
+  public async cascadeGetAll(dashboardId?: string): Promise<WidgetModel[]> {
+    return this.getAll(dashboardId)
+  }
+
+  /**
+   * Batch updates the position and size of multiple widgets.
+   * @param updates - Array of objects containing id, x, y, w, h for each widget.
+   * @returns True if successful, false if an error occurred.
+   */
+  public async updateMany(
+    updates: Array<{ id: string; x: number; y: number; w: number; h: number }>,
+  ): Promise<boolean> {
+    if (!updates || updates.length === 0) return true
+    try {
+      await this.widgetRepository.manager.transaction(async (transactionalEntityManager) => {
+        for (const update of updates) {
+          await transactionalEntityManager.update(WidgetEntity, update.id, {
+            x: update.x,
+            y: update.y,
+            w: update.w,
+            h: update.h,
+            updateAt: time.getNowDate(),
+          })
+        }
+      })
+      return true
+    } catch (e) {
+      console.error('Error updating widgets:', e)
+      return false
+    }
+  }
+}
diff --git a/src/database/useServices.ts b/src/database/useServices.ts
index 5290ab1b3..f0ed244a9 100644
--- a/src/database/useServices.ts
+++ b/src/database/useServices.ts
@@ -10,6 +10,8 @@ import MessageService from './services/MessageService'
 import ScriptService from './services/ScriptService'
 import CopilotService from './services/CopilotService'
 import TopicNodeService from './services/TopicNodeService'
+import DashboardService from './services/DashboardService'
+import WidgetService from './services/WidgetService'
 
 export default function useServices() {
   const connectionService = Container.get(ConnectionService)
@@ -23,6 +25,8 @@ export default function useServices() {
   const scriptService = Container.get(ScriptService)
   const copilotService = Container.get(CopilotService)
   const topicNodeService = Container.get(TopicNodeService)
+  const dashboardService = Container.get(DashboardService)
+  const widgetService = Container.get(WidgetService)
 
   return {
     connectionService,
@@ -36,5 +40,7 @@ export default function useServices() {
     scriptService,
     copilotService,
     topicNodeService,
+    dashboardService,
+    widgetService,
   }
 }
diff --git a/src/lang/viewer.ts b/src/lang/viewer.ts
index f1971101a..5d8296188 100644
--- a/src/lang/viewer.ts
+++ b/src/lang/viewer.ts
@@ -6,6 +6,55 @@ export default {
     ja: 'ビューア',
     hu: 'Megjelenítő',
   },
+  dashboard: {
+    zh: '仪表盘',
+    en: 'Dashboard',
+    tr: 'Gösterge Paneli',
+    ja: 'ダッシュボード',
+    hu: 'Irányítópult',
+  },
+  dashboards: {
+    zh: '仪表盘',
+    en: 'Dashboards',
+    tr: 'Gösterge Panelleri',
+    ja: 'ダッシュボード',
+    hu: 'Irányítópultok',
+  },
+  createDashboard: {
+    zh: '新建仪表盘',
+    en: 'Create Dashboard',
+    tr: 'Gösterge Paneli Oluştur',
+    ja: 'ダッシュボードを作成',
+    hu: 'Irányítópult létrehozása',
+  },
+  hideDashboards: {
+    zh: '隐藏仪表盘',
+    en: 'Hide Dashboards',
+    tr: 'Gösterge Panellerini Gizle',
+    ja: 'ダッシュボードを非表示',
+    hu: 'Irányítópultok elrejtése',
+  },
+  noWidgetsTitle: {
+    zh: '添加可视化组件，开始使用仪表盘',
+    en: 'Start your new dashboard by adding a visualization',
+    tr: 'Yeni gösterge panelinizi bir görselleştirme ekleyerek başlatın',
+    ja: '新しいダッシュボードを可視化の追加から始めましょう',
+    hu: 'Kezdje az új irányítópultot egy vizualizáció hozzáadásával',
+  },
+  noWidgetsHint: {
+    zh: '选择一个数据源，然后通过图表、统计和其他小部件查询并可视化你的数据',
+    en: 'Select a data source and then query and visualize your data with charts, stats and other widgets',
+    tr: "Bir veri kaynağı seçin, ardından verilerinizi grafikler, istatistikler ve diğer widget'larla sorgulayın ve görselleştirin",
+    ja: 'データソースを選択し、チャートや統計、その他のウィジェットでデータをクエリして可視化しましょう',
+    hu: 'Válasszon ki egy adatforrást, majd lekérdezze és vizualizálja adatait diagramokkal, statisztikákkal és egyéb widgetekkel',
+  },
+  addVisualization: {
+    zh: '添加可视化组件',
+    en: 'Add Visualization',
+    tr: 'Görselleştirme Ekle',
+    ja: '可視化を追加',
+    hu: 'Vizualizáció hozzáadása',
+  },
   topicsTree: {
     zh: '主题树',
     en: 'Topics Tree',
@@ -312,4 +361,221 @@ export default {
     ja: 'メッセージの読み込みに失敗しました',
     hu: 'Nem sikerült betölteni az üzeneteket',
   },
+  general: {
+    zh: '常规',
+    en: 'General',
+    tr: 'Genel',
+    ja: '一般',
+    hu: 'Általános',
+  },
+  preview: {
+    zh: '预览',
+    en: 'Preview',
+    tr: 'Önizleme',
+    ja: 'プレビュー',
+    hu: 'Előnézet',
+  },
+  dataSource: {
+    zh: '数据源',
+    en: 'Data Source',
+    tr: 'Veri Kaynağı',
+    ja: 'データソース',
+    hu: 'Adatforrás',
+  },
+  connection: {
+    zh: '连接',
+    en: 'Connection',
+    tr: 'Bağlantı',
+    ja: '接続',
+    hu: 'Kapcsolat',
+  },
+  topicPattern: {
+    zh: '主题模式',
+    en: 'Topic Pattern',
+    tr: 'Konu Deseni',
+    ja: 'トピックパターン',
+    hu: 'Téma minta',
+  },
+  valueField: {
+    zh: '字段',
+    en: 'Value Field',
+    tr: 'Değer Alanı',
+    ja: '値フィールド',
+    hu: 'Érték mező',
+  },
+  messageName: {
+    zh: '消息名称',
+    en: 'Message Name',
+    tr: 'Mesaj Adı',
+    ja: 'メッセージ名',
+    hu: 'Üzenet név',
+  },
+  fallbackValue: {
+    zh: '回退值',
+    en: 'Fallback Value',
+    tr: 'Yedek Değer',
+    ja: 'フォールバック値',
+    hu: 'Tartalék érték',
+  },
+  color: {
+    zh: '颜色',
+    en: 'Color',
+    tr: 'Renk',
+    ja: '色',
+    hu: 'Szín',
+  },
+  smoothLines: {
+    zh: '平滑线条',
+    en: 'Smooth Lines',
+    tr: 'Düz Çizgiler',
+    ja: 'スムーズライン',
+    hu: 'Sima vonalak',
+  },
+  areaFill: {
+    zh: '区域填充',
+    en: 'Area Fill',
+    tr: 'Alan Doldurma',
+    ja: 'エリア塗りつぶし',
+    hu: 'Terület kitöltés',
+  },
+  min: {
+    zh: '最小值',
+    en: 'Min',
+    tr: 'Min',
+    ja: '最小',
+    hu: 'Min',
+  },
+  max: {
+    zh: '最大值',
+    en: 'Max',
+    tr: 'Max',
+    ja: '最大',
+    hu: 'Max',
+  },
+  decimals: {
+    zh: '小数位数',
+    en: 'Decimals',
+    tr: 'Ondalık',
+    ja: '小数点',
+    hu: 'Tizedesjegyek',
+  },
+  unit: {
+    zh: '单位',
+    en: 'Unit',
+    tr: 'Birim',
+    ja: '単位',
+    hu: 'Egység',
+  },
+  type: {
+    zh: '类型',
+    en: 'Type',
+    tr: 'Tür',
+    ja: 'タイプ',
+    hu: 'Típus',
+  },
+  title: {
+    zh: '标题',
+    en: 'Title',
+    tr: 'Başlık',
+    ja: 'タイトル',
+    hu: 'Cím',
+  },
+  options: {
+    zh: '选项',
+    en: 'Options',
+    tr: 'Seçenekler',
+    ja: 'オプション',
+    hu: 'Beállítások',
+  },
+  description: {
+    zh: '描述',
+    en: 'Description',
+    tr: 'Açıklama',
+    ja: '説明',
+    hu: 'Leírás',
+  },
+  noDashboards: {
+    zh: '无仪表盘',
+    en: 'No Dashboards',
+    tr: 'Gösterge Paneli Yok',
+    ja: 'ダッシュボードなし',
+    hu: 'Nincs irányítópult',
+  },
+  createDashboardToGetStarted: {
+    zh: '创建新仪表盘开始使用',
+    en: 'Create a new dashboard to get started',
+    tr: 'Başlamak için yeni bir gösterge paneli oluşturun',
+    ja: '新しいダッシュボードを作成して開始',
+    hu: 'Hozzon létre egy új irányítópultot a kezdéshez',
+  },
+  confirmLeaveEditing: {
+    zh: '放弃当前编辑并切换仪表盘？',
+    en: 'Discard current edits and switch dashboard?',
+    tr: 'Mevcut düzenlemeleri iptal et ve gösterge paneline geç?',
+    ja: '現在の編集を破棄してダッシュボードを切り替えますか？',
+    hu: 'Elveti a jelenlegi szerkesztéseket és vált az irányítópultra?',
+  },
+  inputValidationFailed: {
+    zh: '请检查必填字段',
+    en: 'Please check required fields',
+    tr: 'Lütfen gerekli alanları kontrol edin',
+    ja: '必須フィールドを確認してください',
+    hu: 'Kérjük ellenőrizze a kötelező mezőket',
+  },
+  noDashboardSelected: {
+    zh: '未选择仪表盘',
+    en: 'No dashboard selected',
+    tr: 'Gösterge paneli seçilmedi',
+    ja: 'ダッシュボードが選択されていません',
+    hu: 'Nincs irányítópult kiválasztva',
+  },
+  widgetTypeRequired: {
+    zh: '需要小部件类型',
+    en: 'Widget type is required',
+    tr: 'Widget türü gerekli',
+    ja: 'ウィジェットタイプが必要です',
+    hu: 'Widget típus szükséges',
+  },
+  unknownWidgetType: {
+    zh: '未知的小部件类型',
+    en: 'Unknown widget type',
+    tr: 'Bilinmeyen widget türü',
+    ja: '不明なウィジェットタイプ',
+    hu: 'Ismeretlen widget típus',
+  },
+  fallbackValueTip: {
+    zh: '当没有数据时，显示的值',
+    en: 'The value displayed when no data is available',
+    tr: 'Veri yokken gösterilecek değer',
+    ja: 'データがない場合に表示される値',
+    hu: 'Az adatok esetén megjelenített érték',
+  },
+  connectionRequired: {
+    zh: '需要连接',
+    en: 'Connection is required',
+    tr: 'Bağlantı gerekli',
+    ja: '接続が必要です',
+    hu: 'Kapcsolat szükséges',
+  },
+  topicPatternRequired: {
+    zh: '需要主题模式',
+    en: 'Topic pattern is required',
+    tr: 'Konu deseni gerekli',
+    ja: 'トピックパターンが必要です',
+    hu: 'Téma minta szükséges',
+  },
+  failedToSaveTimeRangeSettings: {
+    zh: '保存时间范围设置失败',
+    en: 'Failed to save time range settings',
+    tr: 'Zaman aralığı ayarları kaydedilemedi',
+    ja: '時間範囲設定の保存に失敗しました',
+    hu: 'Nem sikerült menteni az időtartam beállításokat',
+  },
+  failedToSaveDashboardOrder: {
+    zh: '保存仪表盘顺序失败',
+    en: 'Failed to save dashboard order',
+    tr: 'Gösterge paneli sırası kaydedilemedi',
+    ja: 'ダッシュボードの順序の保存に失敗しました',
+    hu: 'Nem sikerült menteni az irányítópult sorrendet',
+  },
 }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ff5d39cc3..720c69815 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -24,6 +24,11 @@ const routes: Routes[] = [
             name: 'TopicTree',
             component: () => import('@/views/viewer/TopicTree.vue'),
           },
+          {
+            path: 'dashboard',
+            name: 'Dashboard',
+            component: () => import('@/views/viewer/dashboard/index.vue'),
+          },
           {
             path: 'traffic_monitor',
             name: 'TrafficMonitor',
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 5b931c2bc..a23b3f4c5 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -468,4 +468,117 @@ declare global {
     data?: TopicTreeNode
     children?: EChartsTreeNode[]
   }
+  interface DashboardModel {
+    id: string
+    name: string
+    description?: string
+    orderId?: number
+    globalSettings?: any
+    widgets: WidgetModel[]
+    createAt: string
+    updateAt: string
+  }
+
+  type WidgetType = 'Big Number' | 'Gauge' | 'Line'
+  interface WidgetModel {
+    id?: string
+    type: WidgetType
+    title?: string
+
+    x: number
+    y: number
+    w: number
+    h: number
+    static?: boolean
+    minW?: number
+    minH?: number
+    maxW?: number
+    maxH?: number
+
+    dashboardId: string
+
+    connectionId?: string
+    topicPattern?: string
+    valueField?: string
+    fallbackValue: number
+
+    schemaType?: 'protobuf' | 'avro'
+    schemaId?: string
+    schemaMessageName?: string
+
+    // Schema validation state tracking
+    schemaValidationState?: 'valid' | 'invalid'
+    schemaValidationError?: string
+
+    widgetOptions?: GaugeWidgetOptions | BigNumberWidgetOptions | LineWidgetOptions
+
+    createAt?: string
+    updateAt?: string
+  }
+  interface GaugeWidgetOptions {
+    thresholdsType?: 'Absolute' | 'Percentage'
+    min?: number
+    max?: number
+    thresholds?: Threshold[]
+    decimals?: number
+    unit?: string
+    color?: string
+  }
+  interface BigNumberWidgetOptions {
+    thresholdsType?: 'Absolute' | 'Percentage'
+    thresholds?: Threshold[]
+    min?: number
+    max?: number
+    decimals?: number
+    unit?: string
+    color?: string
+  }
+  interface LineWidgetOptions {
+    thresholdsType?: 'Absolute' | 'Percentage'
+    thresholds?: Threshold[]
+    smooth?: boolean
+    area?: boolean
+    color?: string
+  }
+  interface Threshold {
+    value: number
+    color: string
+  }
+
+  interface TimeSeriesDataPoint {
+    timestamp: string
+    values: { [fieldName: string]: any }
+    topic: string
+    connectionId: string
+    metadata: { qos: QoS; retain: boolean }
+  }
+
+  interface BigNumberData {
+    value: number | null
+    fieldName?: string
+    chartData: {
+      xData: string[]
+      seriesData: [
+        {
+          name: string
+          data: number[]
+        },
+      ]
+    }
+  }
+  interface GaugeData {
+    value: number | null
+    fieldName?: string
+  }
+  interface LineData {
+    chartData: {
+      xData: string[]
+      seriesData: [
+        {
+          name: string
+          data: number[]
+        },
+      ]
+    }
+  }
 }
diff --git a/src/types/shims-vue-grid-layout.d.ts b/src/types/shims-vue-grid-layout.d.ts
new file mode 100644
index 000000000..02146b788
--- /dev/null
+++ b/src/types/shims-vue-grid-layout.d.ts
@@ -0,0 +1,6 @@
+declare module 'vue-grid-layout' {
+  import { Component } from 'vue'
+  export const GridLayout: Component
+  export const GridItem: Component
+  export default {} as any
+}
diff --git a/src/views/viewer/dashboard/DashboardContent.vue b/src/views/viewer/dashboard/DashboardContent.vue
new file mode 100644
index 000000000..1874741e0
--- /dev/null
+++ b/src/views/viewer/dashboard/DashboardContent.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="dashboards-view" :class="{ 'full-height': isAddingWidget }" :style="{ marginLeft: detailLeftValue }">
+    <template v-if="loadingState.initializing">
+      <el-skeleton class="dashboard-skeleton-page" :row="8" animated />
+    </template>
+    <template v-else>
+      <template v-if="isAddingWidget">
+        <WidgetConfig :initial-widget="editingWidget" @cancel="cancelAddWidget" @save="handleSaveWidgetConfig" />
+      </template>
+      <template v-else>
+        <div v-if="isEmpty" class="no-dashboards-placeholder">
+          <h2>{{ $t('viewer.noDashboards') }}</h2>
+          <p>
+            {{ $t('viewer.createDashboardToGetStarted') }}
+          </p>
+          <el-button
+            type="primary"
+            class="primary-btn"
+            icon="el-icon-plus"
+            style="font-size: 16px; padding: 10px 32px; border-radius: 6px; margin-top: 16px"
+            @click="$emit('create-dashboard')"
+          >
+            {{ $t('viewer.createDashboard') }}
+          </el-button>
+        </div>
+        <template v-else>
+          <template v-if="loadingState.widgets">
+            <el-skeleton class="widget-skeleton-page" :row="6" animated />
+          </template>
+          <template v-else-if="selectedDashboardHasWidgets">
+            <DashboardView
+              :dashboard-id="selectedDashboardId"
+              :widgets="dashboardWidgets"
+              :time-range="timeRange"
+              :time-range-type="timeRangeType"
+              :duration="duration"
+              @layout-changed="$emit('layout-changed', $event)"
+              @edit-widget="$emit('edit-widget', $event)"
+              @remove-widget="$emit('remove-widget', $event)"
+            />
+          </template>
+          <div v-else class="dashboard-placeholder">
+            <h2>{{ $t('viewer.noWidgetsTitle') }}</h2>
+            <p>
+              {{ $t('viewer.noWidgetsHint') }}
+            </p>
+            <el-button
+              type="primary"
+              class="primary-btn"
+              icon="el-icon-plus"
+              style="font-size: 16px; padding: 10px 32px; border-radius: 6px; margin-top: 16px"
+              @click="$emit('add-visualization')"
+            >
+              {{ $t('viewer.addVisualization') }}
+            </el-button>
+          </div>
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import DashboardView from './DashboardView.vue'
+import WidgetConfig from './WidgetConfig.vue'
+import useServices from '@/database/useServices'
+
+@Component({
+  components: {
+    DashboardView,
+    WidgetConfig,
+  },
+})
+export default class DashboardContent extends Vue {
+  @Prop({ required: true }) loadingState!: { initializing: boolean; widgets: boolean }
+  @Prop({ required: true }) showDashboardsList!: boolean
+  @Prop({ required: true }) selectedDashboardId!: string | null
+  @Prop({ required: true }) dashboardWidgets!: WidgetModel[]
+  @Prop({ required: true }) timeRange!: [string, string]
+  @Prop({ required: true }) timeRangeType!: 'live' | 'static'
+  @Prop({ required: true }) duration!: number
+  @Prop({ required: true }) isEmpty!: boolean
+  @Prop({ required: true }) selectedDashboardHasWidgets!: boolean
+  @Prop({ default: false }) isAddingWidget!: boolean
+  @Prop({ default: null }) editingWidget!: WidgetModel | null
+
+  get detailLeftValue(): string {
+    return this.showDashboardsList ? '230px' : '0px'
+  }
+
+  private cancelAddWidget(): void {
+    this.$emit('cancel-add')
+  }
+
+  private async handleSaveWidgetConfig(payload: Partial<WidgetModel>): Promise<void> {
+    if (this.editingWidget?.id) {
+      const { widgetService } = useServices()
+      await widgetService.update(this.editingWidget.id, payload)
+      this.$message.success(String(this.$t('common.saveSuccess') || 'Saved'))
+      this.$emit('refresh-widgets')
+    } else {
+      this.$emit('create-widget', payload)
+    }
+    this.$emit('cancel-add')
+  }
+
+  // Note: onEditWidget, onRemoveWidget are emitted to parent
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/scss/variable.scss';
+@import '~@/assets/scss/mixins.scss';
+
+.dashboards-view {
+  height: calc(100% - 59px);
+  margin-top: 59px;
+  overflow: auto;
+  transition: all 0.3s ease-in-out;
+}
+.full-height {
+  height: 100%;
+  margin-top: 0;
+}
+
+.dashboard-skeleton-page {
+  margin: 30px;
+  overflow-x: hidden;
+}
+
+.widget-skeleton-page {
+  margin: 30px;
+  overflow-x: hidden;
+}
+
+.dashboard-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  color: var(--color-text-title);
+
+  h2 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  p {
+    margin: 0;
+    color: var(--color-text-light);
+  }
+}
+
+.no-dashboards-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  color: var(--color-text-title);
+
+  h2 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  p {
+    margin: 0;
+    color: var(--color-text-light);
+  }
+}
+</style>
diff --git a/src/views/viewer/dashboard/DashboardHeader.vue b/src/views/viewer/dashboard/DashboardHeader.vue
new file mode 100644
index 000000000..4f4ff7731
--- /dev/null
+++ b/src/views/viewer/dashboard/DashboardHeader.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="dashboard-header" :style="{ left: leftValue }" v-if="!isAddingWidget">
+    <div class="header-container">
+      <div
+        v-if="!showDashboardsList"
+        class="sidebar-toggle-button"
+        @click="$emit('toggle-list', true)"
+        :title="$t('viewer.dashboards')"
+      >
+        <i class="iconfont icon-show-connections"></i>
+      </div>
+      <div class="header-main-content">
+        <transition name="el-zoom-in-top" mode="out-in">
+          <div v-if="creatingInTopbar" class="dashboard-create-form" key="create">
+            <el-input
+              ref="newNameInput"
+              size="mini"
+              v-model="newDashboard.name"
+              :placeholder="$t('connections.name')"
+              style="width: 180px; margin-right: 8px"
+            />
+            <el-input
+              size="mini"
+              v-model="newDashboard.description"
+              :placeholder="$t('viewer.description')"
+              style="width: 220px; margin-right: 8px"
+            />
+            <el-button size="mini" type="primary" @click="handleCreateDashboardTopbar">
+              {{ $t('common.save') }}
+            </el-button>
+            <el-button size="mini" @click="cancelCreateTopbar">
+              {{ $t('common.cancel') }}
+            </el-button>
+          </div>
+          <div v-else-if="editingInTopbar" class="dashboard-edit-form" key="edit">
+            <el-input
+              ref="editNameInput"
+              size="mini"
+              v-model="editDashboard.name"
+              :placeholder="$t('connections.name')"
+              style="width: 180px; margin-right: 8px"
+            />
+            <el-input
+              size="mini"
+              v-model="editDashboard.description"
+              :placeholder="$t('viewer.description')"
+              style="width: 220px; margin-right: 8px"
+            />
+            <el-button size="mini" type="primary" @click="handleSaveDashboardEdit">
+              {{ $t('common.save') }}
+            </el-button>
+            <el-button size="mini" @click="cancelEditTopbar">
+              {{ $t('common.cancel') }}
+            </el-button>
+          </div>
+          <div v-else class="dashboard-view-section" key="default">
+            <el-select
+              v-if="!showDashboardsList"
+              v-model="localSelectedDashboardId"
+              size="mini"
+              :placeholder="$t('viewer.dashboard')"
+              @change="$emit('dashboard-selected', $event)"
+              style="width: 180px"
+            >
+              <el-option
+                v-for="dashboard in dashboards"
+                :key="dashboard.id"
+                :label="dashboard.name"
+                :value="dashboard.id"
+              />
+            </el-select>
+            <a
+              v-if="!showDashboardsList && selectedDashboard"
+              href="javascript:;"
+              class="dashboard-edit-icon"
+              style="margin-left: 8px"
+              :title="$t('common.edit') || 'Edit'"
+              @click="toEditDashboard"
+            >
+              <i class="el-icon-edit"></i>
+            </a>
+            <div v-if="!showDashboardsList" class="flex-spacer"></div>
+            <el-button
+              v-if="!showDashboardsList && selectedDashboard"
+              size="mini"
+              type="primary"
+              icon="el-icon-plus"
+              class="add-widget-button"
+              @click="$emit('add-visualization')"
+            >
+              {{ $t('common.new') }}
+            </el-button>
+            <TimeRangeSelect
+              v-if="!showDashboardsList && selectedDashboard"
+              v-model="localTimeRangeModel"
+              :time-range-type="timeRangeType"
+              :duration="duration"
+              size="mini"
+              style="margin-left: 8px; width: 200px"
+              @range-relative="$emit('time-range-select', $event)"
+            />
+            <template v-else>
+              <div v-if="selectedDashboard" class="topbar-dashboard-view">
+                <div class="dashboard-info-section">
+                  <h2 class="dashboard-title">
+                    {{ selectedDashboard.name }}
+                  </h2>
+                  <a
+                    href="javascript:;"
+                    class="dashboard-edit-icon"
+                    style="margin-left: 8px"
+                    :title="$t('common.edit') || 'Edit'"
+                    @click="toEditDashboard"
+                  >
+                    <i class="el-icon-edit"></i>
+                  </a>
+                </div>
+                <div class="dashboard-actions-section">
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-plus"
+                    class="add-widget-button"
+                    @click="$emit('add-visualization')"
+                  >
+                    {{ $t('common.new') }}
+                  </el-button>
+                  <TimeRangeSelect
+                    v-model="localTimeRangeModel"
+                    size="mini"
+                    @range-relative="$emit('time-range-select', $event)"
+                    style="margin-left: 8px; width: 200px"
+                    :show-live-mode="true"
+                  />
+                </div>
+              </div>
+            </template>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import TimeRangeSelect from '@/components/TimeRangeSelect.vue'
+
+@Component({
+  components: {
+    TimeRangeSelect,
+  },
+})
+export default class DashboardHeader extends Vue {
+  @Prop({ required: true }) showDashboardsList!: boolean
+  @Prop({ required: true }) selectedDashboardId!: string | null
+  @Prop({ required: true }) dashboards!: DashboardModel[]
+  @Prop({ required: true }) selectedDashboard!: DashboardModel | null
+  @Prop({ required: true }) timeRangeModel!: [string, string]
+  @Prop({ required: true }) timeRangeType!: 'live' | 'static'
+  @Prop({ required: true }) duration!: number
+  @Prop({ required: true }) isAddingWidget!: boolean
+
+  private creatingInTopbar: boolean = false
+  private editingInTopbar: boolean = false
+  private newDashboard: Partial<DashboardModel> = { name: '', description: '' }
+  private editDashboard: Partial<DashboardModel> = { name: '', description: '' }
+
+  get localSelectedDashboardId(): string | null {
+    return this.selectedDashboardId
+  }
+
+  set localSelectedDashboardId(value: string | null) {
+    this.$emit('update:selectedDashboardId', value)
+  }
+
+  get localTimeRangeModel(): [string, string] {
+    return this.timeRangeModel
+  }
+
+  set localTimeRangeModel(value: [string, string]) {
+    this.$emit('update:timeRangeModel', value)
+  }
+
+  get leftValue(): string {
+    return this.showDashboardsList ? '230px' : '0px'
+  }
+
+  private toCreateDashboard() {
+    this.creatingInTopbar = true
+    this.$nextTick(() => {
+      const input = this.$refs.newNameInput as unknown as { focus(): void }
+      input && input.focus && input.focus()
+    })
+  }
+
+  private async handleCreateDashboardTopbar(): Promise<void> {
+    this.$emit('create-dashboard', this.newDashboard)
+    this.cancelCreateTopbar()
+  }
+
+  private cancelCreateTopbar(): void {
+    this.creatingInTopbar = false
+    this.newDashboard = { name: '', description: '' }
+  }
+
+  private toEditDashboard(): void {
+    if (!this.selectedDashboard) return
+    this.editingInTopbar = true
+    this.editDashboard = {
+      name: this.selectedDashboard.name,
+      description: this.selectedDashboard.description,
+    }
+    this.$nextTick(() => {
+      const input = this.$refs.editNameInput as unknown as { focus(): void }
+      input?.focus?.()
+    })
+  }
+
+  private async handleSaveDashboardEdit(): Promise<void> {
+    if (!this.selectedDashboard?.id) return
+    const updates = {
+      id: this.selectedDashboard.id,
+      ...this.editDashboard,
+    }
+    this.$emit('save-dashboard', updates)
+    this.cancelEditTopbar()
+  }
+
+  private cancelEditTopbar(): void {
+    this.editingInTopbar = false
+    this.editDashboard = { name: '', description: '' }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/scss/variable.scss';
+@import '~@/assets/scss/mixins.scss';
+
+.dashboard-header {
+  position: absolute;
+  height: 59px;
+  top: 0;
+  right: 0;
+  padding: 16px;
+  background: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border-default);
+  z-index: 999;
+  transition: all 0.3s ease-in-out;
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+
+    .sidebar-toggle-button {
+      margin-right: 16px;
+
+      .icon-show-connections {
+        font-size: 20px;
+        cursor: pointer;
+        color: var(--color-text-title);
+        &:hover {
+          color: var(--color-text-title);
+        }
+      }
+    }
+
+    .header-main-content {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      width: 100%;
+      .flex-spacer {
+        flex: 1;
+      }
+
+      .dashboard-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--color-text-title);
+        margin: 0;
+      }
+
+      .topbar-dashboard-view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        .dashboard-info-section {
+          display: flex;
+          align-items: center;
+        }
+
+        .dashboard-actions-section {
+          display: flex;
+          align-items: center;
+        }
+
+        .add-widget-button {
+          flex-shrink: 0;
+        }
+      }
+      .dashboard-create-form,
+      .dashboard-view-section,
+      .dashboard-edit-form {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .dashboard-edit-icon {
+        color: var(--color-text-tips);
+        transition: 0.2s color ease;
+        display: inline-flex;
+        align-items: center;
+        height: 20px;
+        line-height: 1;
+        &:hover {
+          color: var(--color-text-title);
+        }
+        .el-icon-edit {
+          font-size: 18px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/viewer/dashboard/DashboardView.vue b/src/views/viewer/dashboard/DashboardView.vue
new file mode 100644
index 000000000..8fedbb0c0
--- /dev/null
+++ b/src/views/viewer/dashboard/DashboardView.vue
@@ -0,0 +1,1191 @@
+<template>
+  <div class="dashboard-canvas-root">
+    <div class="dashboard-canvas-grid">
+      <grid-layout
+        :layout="layout"
+        :col-num="12"
+        :row-height="30"
+        :is-draggable="true"
+        :is-resizable="true"
+        :is-responsive="false"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        @layout-updated="onLayoutUpdated"
+      >
+        <grid-item
+          v-for="widget in widgets"
+          :key="widget.id"
+          :x="widget.x"
+          :y="widget.y"
+          :w="widget.w"
+          :h="widget.h"
+          :i="String(widget.id)"
+          :static="widget.static"
+          class="grid-item-tem"
+          @resized="onItemResized"
+          @resize="onItemResizing"
+        >
+          <div class="widget-card">
+            <div class="widget-header">
+              <div class="widget-title-container">
+                <div class="widget-title" :title="widget.title || ''">{{ widget.title || '' }}</div>
+                <el-tooltip
+                  v-if="widget.schemaValidationState === 'invalid'"
+                  :content="getSchemaErrorTooltip(widget)"
+                  placement="top"
+                  effect="dark"
+                  :disabled="!widget.schemaValidationError"
+                >
+                  <div class="widget-warning">
+                    <i class="el-icon-warning"></i>
+                    <span class="warning-text">Schema Error</span>
+                  </div>
+                </el-tooltip>
+              </div>
+              <el-dropdown @command="onWidgetMenuCommand($event, widget)" popper-class="dashboard-widget-dropdown">
+                <span class="widget-menu-trigger" title="Options">
+                  <i class="el-icon-more"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="edit">
+                    <i class="iconfont icon-edit"></i>
+                    Edit
+                  </el-dropdown-item>
+                  <el-dropdown-item command="delete" class="is-danger">
+                    <i class="iconfont icon-delete"></i>
+                    Delete
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="widget-body">
+              <WidgetRenderer
+                :widget="widget"
+                :data="getWidgetData(widget)"
+                :duration="duration"
+                :time-range-type="timeRangeType"
+                @error="onWidgetError"
+              />
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import '@/assets/font/iconfont'
+import { GridLayout, GridItem } from 'vue-grid-layout'
+import WidgetRenderer from '@/widgets/WidgetRenderer.vue'
+import { globalEventBus } from '@/utils/globalEventBus'
+import { matchTopicMethod } from '@/utils/topicMatch'
+import time from '@/utils/time'
+import moment from 'moment'
+import { Packet, IPublishPacket } from 'mqtt'
+import { MessageQueue } from '@/utils/messageQueue'
+import { deserializeBufferToProtobuf } from '@/utils/protobuf'
+import { deserializeBufferToAvro } from '@/utils/avro'
+import useServices from '@/database/useServices'
+import { Subscription } from 'rxjs'
+
+interface WidgetDataEntry {
+  data: BigNumberData | GaugeData | LineData
+  validationState: 'valid' | 'invalid'
+  schemaError?: string
+  lastUpdate: number
+}
+
+interface TimeRangeConfig {
+  start: string
+  end: string
+}
+
+@Component({
+  components: {
+    GridLayout,
+    GridItem,
+    WidgetRenderer,
+  },
+})
+export default class DashboardCanvas extends Vue {
+  @Prop({ type: String, required: false, default: null }) readonly dashboardId!: string | null
+  @Prop({ type: Array, default: () => [] }) readonly widgets!: WidgetModel[]
+  @Prop({ type: Array, default: () => ['', ''] }) readonly timeRange!: [string, string]
+  @Prop({ type: String, default: 'static' }) readonly timeRangeType!: 'live' | 'static'
+  @Prop({ type: Number, default: 24 * 60 }) readonly duration!: number
+
+  private widgetDataStore: Record<string, WidgetDataEntry> = {}
+  private messageQueue: MessageQueue<TimeSeriesDataPoint & { widgetId: string }> | null = null
+  private subscription: Subscription | null = null
+  private isLoadingHistoricalData: boolean = false
+  private scriptService = useServices().scriptService
+  private updateTimeouts: Map<string, NodeJS.Timeout> = new Map()
+
+  get layout() {
+    return this.widgets.map((widget) => ({
+      x: widget.x,
+      y: widget.y,
+      w: widget.w,
+      h: widget.h,
+      i: String(widget.id),
+      static: widget.static,
+      minW: widget.minW,
+      minH: widget.minH,
+      maxW: widget.maxW,
+      maxH: widget.maxH,
+    }))
+  }
+
+  @Watch('widgets', { deep: true })
+  onWidgetsChanged(newWidgets: WidgetModel[], oldWidgets: WidgetModel[]) {
+    this.cleanupRemovedWidgets(newWidgets, oldWidgets)
+    this.syncWidgetSchemaStates()
+  }
+
+  @Watch('timeRange')
+  async onTimeRangeChanged(newRange: [string, string]) {
+    if (newRange[0] && newRange[1]) {
+      this.isLoadingHistoricalData = true
+      await this.loadHistoricalData()
+      this.isLoadingHistoricalData = false
+    }
+  }
+
+  @Watch('timeRangeType')
+  async onTimeRangeTypeChanged(newType: 'live' | 'static') {
+    if (this.timeRange[0] && this.timeRange[1]) {
+      this.isLoadingHistoricalData = true
+      await this.loadHistoricalData()
+      this.isLoadingHistoricalData = false
+    }
+  }
+
+  @Watch('duration')
+  async onDurationChanged(newDuration: number) {
+    if (this.timeRangeType === 'live' && this.timeRange[0] && this.timeRange[1]) {
+      this.isLoadingHistoricalData = true
+      await this.loadHistoricalData()
+      this.isLoadingHistoricalData = false
+    }
+  }
+
+  private async mounted() {
+    await this.initializeComponent()
+  }
+
+  private beforeDestroy() {
+    this.cleanup()
+  }
+
+  private async initializeComponent(): Promise<void> {
+    this.isLoadingHistoricalData = true
+
+    this.initializeMessageQueue()
+    this.subscribeToGlobalEvents()
+    await this.loadHistoricalData()
+
+    this.isLoadingHistoricalData = false
+  }
+
+  private initializeMessageQueue(): void {
+    this.messageQueue = new MessageQueue<TimeSeriesDataPoint & { widgetId: string }>(1000)
+    this.subscribeToMessageQueue()
+  }
+
+  private subscribeToGlobalEvents(): void {
+    globalEventBus.on('packetReceive', this.handlePacketReceive)
+  }
+
+  private subscribeToMessageQueue(): void {
+    this.subscription = this.messageQueue
+      ?.getMessageObservable()
+      .subscribe(async (dataPoints: (TimeSeriesDataPoint & { widgetId: string })[]) => {
+        await this.processBatchedDataPoints(dataPoints)
+      }) as Subscription | null
+  }
+
+  private clearAllWidgetData(): void {
+    this.widgetDataStore = {}
+  }
+
+  private async loadHistoricalData(): Promise<void> {
+    if (!this.widgets.length) {
+      return
+    }
+
+    this.clearAllWidgetData()
+
+    try {
+      const { messageService } = useServices()
+      const timeRange = this.calculateHistoricalTimeRange()
+
+      for (const widget of this.widgets) {
+        if (!widget.topicPattern || !widget.connectionId) {
+          continue
+        }
+
+        const messages = await messageService.getMessagesByTopicPattern<MessageModel>(
+          widget.connectionId,
+          widget.topicPattern,
+          {
+            startTime: timeRange.start,
+            endTime: timeRange.end,
+            limit: 1000,
+          },
+        )
+
+        await this.processHistoricalMessages(widget, messages)
+      }
+
+      await this.finalizeHistoricalDataLoad()
+    } catch (error) {
+      console.error('❌ DashboardView: Error in loadHistoricalData:', error)
+      this.handleError(error as Error, 'Historical data loading')
+    }
+  }
+
+  private calculateHistoricalTimeRange(): TimeRangeConfig {
+    if (this.timeRangeType === 'static' && this.timeRange) {
+      return { start: this.timeRange[0], end: this.timeRange[1] }
+    }
+
+    if (this.timeRangeType === 'live' && this.duration) {
+      const now = new Date()
+      const start = new Date(now.getTime() - this.duration * 60 * 1000)
+      const result = {
+        start: time.toFormat(start),
+        end: time.toFormat(now),
+      }
+
+      return result
+    }
+
+    return {
+      start: time.getDateBefore(24 * 60),
+      end: time.getNowDate(),
+    }
+  }
+
+  private async processHistoricalMessages(widget: WidgetModel, messages: MessageModel[]): Promise<void> {
+    const widgetId = String(widget.id)
+
+    let processedCount = 0
+    for (const message of messages) {
+      try {
+        const payload = Buffer.from(message.payload)
+        const extractedValues = await this.extractValuesFromPayload(payload, widget)
+
+        const dataPoint: TimeSeriesDataPoint & { widgetId: string } = {
+          timestamp: message.createAt,
+          values: extractedValues,
+          topic: message.topic,
+          connectionId: widget.connectionId!,
+          metadata: { qos: message.qos, retain: message.retain },
+          widgetId: widgetId,
+        }
+
+        this.updateWidgetDataHistorical(widgetId, dataPoint)
+        processedCount++
+      } catch (error) {
+        this.handleSchemaError(widgetId, error as Error)
+      }
+    }
+  }
+
+  private updateWidgetDataHistorical(widgetId: string, dataPoint: TimeSeriesDataPoint): void {
+    const entry = this.getOrCreateWidgetEntry(widgetId)
+    const widget = this.widgets.find((w) => String(w.id) === widgetId)
+    if (!widget) return
+
+    this.updateWidgetByTypeHistorical(widget, entry.data, dataPoint)
+    entry.lastUpdate = Date.now()
+
+    this.$set(this.widgetDataStore, widgetId, { ...entry })
+  }
+
+  private updateWidgetByTypeHistorical(
+    widget: WidgetModel,
+    data: BigNumberData | GaugeData | LineData,
+    dataPoint: TimeSeriesDataPoint,
+  ): void {
+    const { value: primaryValue, fieldName } = this.extractPrimaryValue(dataPoint, widget)
+
+    switch (widget.type) {
+      case 'Big Number':
+        this.updateBigNumberDataHistorical(data as BigNumberData, primaryValue, dataPoint, fieldName)
+        break
+      case 'Gauge':
+        this.updateGaugeData(data as GaugeData, primaryValue, dataPoint, fieldName)
+        break
+      case 'Line':
+        this.updateLineDataHistorical(data as LineData, primaryValue, dataPoint)
+        break
+    }
+  }
+
+  private updateBigNumberDataHistorical(
+    data: BigNumberData,
+    value: number,
+    dataPoint: TimeSeriesDataPoint,
+    fieldName: string,
+  ): void {
+    data.value = value
+    data.fieldName = fieldName
+
+    const timestamp = dataPoint.timestamp
+    data.chartData.xData.push(timestamp)
+    data.chartData.seriesData[0].data.push(value)
+  }
+
+  private updateLineDataHistorical(data: LineData, value: number, dataPoint: TimeSeriesDataPoint): void {
+    const timestamp = dataPoint.timestamp
+    data.chartData.xData.push(timestamp)
+    data.chartData.seriesData[0].data.push(value)
+  }
+
+  private async finalizeHistoricalDataLoad(): Promise<void> {
+    if (this.timeRangeType === 'live' && this.duration) {
+      Object.keys(this.widgetDataStore).forEach((widgetId) => {
+        const entry = this.widgetDataStore[widgetId]
+        if (entry && entry.data) {
+          this.applyDurationFilter(entry.data, this.duration)
+          this.$set(this.widgetDataStore, widgetId, { ...entry })
+        }
+      })
+    }
+  }
+
+  private async handlePacketReceive(packet: Packet, connectionInfo: ConnectionModel): Promise<void> {
+    if (packet.cmd !== 'publish') return
+
+    if (this.isLoadingHistoricalData) {
+      return
+    }
+
+    const publishPacket = packet as IPublishPacket
+
+    if (!this.shouldProcessMessage(publishPacket)) {
+      return
+    }
+
+    const matchingWidgets = this.getMatchingWidgets(publishPacket, connectionInfo)
+
+    if (matchingWidgets.length === 0) return
+
+    const dataPoints = await Promise.all(
+      matchingWidgets.map((widget) => this.createDataPoint(publishPacket, connectionInfo, widget)),
+    )
+
+    const validDataPoints = dataPoints.filter(Boolean)
+    validDataPoints.forEach((dataPoint) => {
+      this.messageQueue?.queueMessage(dataPoint!)
+    })
+  }
+
+  private shouldProcessMessage(packet: IPublishPacket): boolean {
+    const messageTime = new Date().getTime()
+
+    if (this.timeRangeType === 'live' && this.duration) {
+      const cutoffTime = messageTime - this.duration * 60 * 1000
+      return messageTime >= cutoffTime
+    }
+
+    if (this.timeRangeType === 'static' && this.timeRange) {
+      const startTime = new Date(this.timeRange[0]).getTime()
+      const endTime = new Date(this.timeRange[1]).getTime()
+      return messageTime >= startTime && messageTime <= endTime
+    }
+
+    return true
+  }
+
+  private getMatchingWidgets(packet: IPublishPacket, connectionInfo: ConnectionModel): WidgetModel[] {
+    return this.widgets.filter(
+      (widget) =>
+        widget.topicPattern &&
+        matchTopicMethod(packet.topic, widget.topicPattern) &&
+        widget.connectionId === connectionInfo.id,
+    )
+  }
+
+  private async createDataPoint(
+    packet: IPublishPacket,
+    connectionInfo: ConnectionModel,
+    widget: WidgetModel,
+  ): Promise<(TimeSeriesDataPoint & { widgetId: string }) | null> {
+    try {
+      const payload = Buffer.isBuffer(packet.payload) ? packet.payload : Buffer.from(packet.payload)
+      const extractedValues = await this.extractValuesFromPayload(payload, widget)
+
+      return {
+        timestamp: time.getNowDate(),
+        values: extractedValues,
+        topic: packet.topic,
+        connectionId: connectionInfo.id as string,
+        metadata: { qos: packet.qos, retain: packet.retain },
+        widgetId: String(widget.id),
+      }
+    } catch (error) {
+      this.handleSchemaError(String(widget.id), error as Error)
+      return null
+    }
+  }
+
+  private async processBatchedDataPoints(dataPoints: (TimeSeriesDataPoint & { widgetId: string })[]): Promise<void> {
+    const widgetGroups = new Map<string, TimeSeriesDataPoint[]>()
+
+    dataPoints.forEach((point) => {
+      const existing = widgetGroups.get(point.widgetId) || []
+      existing.push(point)
+      widgetGroups.set(point.widgetId, existing)
+    })
+
+    for (const [widgetId, points] of widgetGroups) {
+      points.forEach((point) => this.updateWidgetData(widgetId, point))
+    }
+  }
+
+  private getOrCreateWidgetEntry(widgetId: string): WidgetDataEntry {
+    if (!this.widgetDataStore[widgetId]) {
+      const widget = this.widgets.find((w) => String(w.id) === widgetId)
+      if (!widget) throw new Error(`Widget not found: ${widgetId}`)
+
+      this.$set(this.widgetDataStore, widgetId, {
+        data: this.createInitialWidgetData(widget.type),
+        validationState: 'valid',
+        lastUpdate: Date.now(),
+      })
+    }
+    return this.widgetDataStore[widgetId]
+  }
+
+  private updateWidgetData(widgetId: string, dataPoint: TimeSeriesDataPoint): void {
+    const entry = this.getOrCreateWidgetEntry(widgetId)
+    const widget = this.widgets.find((w) => String(w.id) === widgetId)
+    if (!widget) return
+
+    if (this.timeRangeType === 'live' && this.duration) {
+      this.applyDurationFilter(entry.data, this.duration)
+    }
+
+    this.updateWidgetByType(widget, entry.data, dataPoint)
+    entry.lastUpdate = Date.now()
+
+    this.$set(this.widgetDataStore, widgetId, { ...entry })
+  }
+
+  private updateWidgetByType(
+    widget: WidgetModel,
+    data: BigNumberData | GaugeData | LineData,
+    dataPoint: TimeSeriesDataPoint,
+  ): void {
+    const { value: primaryValue, fieldName } = this.extractPrimaryValue(dataPoint, widget)
+
+    switch (widget.type) {
+      case 'Big Number':
+        this.updateBigNumberData(data as BigNumberData, primaryValue, dataPoint, fieldName)
+        break
+      case 'Gauge':
+        this.updateGaugeData(data as GaugeData, primaryValue, dataPoint, fieldName)
+        break
+      case 'Line':
+        this.updateLineData(data as LineData, primaryValue, dataPoint)
+        break
+    }
+  }
+
+  private applyDurationFilter(data: BigNumberData | GaugeData | LineData, durationMinutes: number): void {
+    if (!durationMinutes || !('chartData' in data) || !data.chartData) return
+
+    const cutoffTime = Date.now() - durationMinutes * 60 * 1000
+    const validIndices: number[] = []
+
+    data.chartData.xData.forEach((timestamp, index) => {
+      const time = new Date(timestamp).getTime()
+      if (time >= cutoffTime) {
+        validIndices.push(index)
+      }
+    })
+
+    if (validIndices.length < data.chartData.xData.length) {
+      data.chartData.xData = validIndices.map((i) => data.chartData!.xData[i])
+      data.chartData.seriesData.forEach((series) => {
+        series.data = validIndices.map((i) => series.data[i])
+      })
+    }
+  }
+
+  private syncWidgetSchemaStates(): void {
+    this.widgets.forEach((widget) => {
+      if (widget.schemaValidationState === 'invalid') {
+        this.$forceUpdate()
+      }
+    })
+  }
+
+  private cleanupRemovedWidgets(newWidgets: WidgetModel[], oldWidgets: WidgetModel[]): void {
+    if (!oldWidgets) return
+
+    const oldIds = new Set(oldWidgets.map((w) => String(w.id)))
+    const newIds = new Set(newWidgets.map((w) => String(w.id)))
+
+    oldIds.forEach((id) => {
+      if (!newIds.has(id)) {
+        this.$delete(this.widgetDataStore, id)
+      }
+    })
+  }
+
+  private getWidgetData(widget: WidgetModel): BigNumberData | GaugeData | LineData | undefined {
+    const widgetId = String(widget.id)
+    return this.widgetDataStore[widgetId]?.data
+  }
+
+  private getSchemaErrorTooltip(widget: WidgetModel): string {
+    if (!widget.schemaValidationError) {
+      return 'Schema validation is failing'
+    }
+
+    const error = widget.schemaValidationError
+    const schemaType = widget.schemaType || 'Unknown'
+    const schemaId = widget.schemaId || 'Unknown'
+    const topicPattern = widget.topicPattern || 'Unknown'
+
+    const formattedError = error.length > 100 ? error.substring(0, 100) + '...' : error
+
+    return `Schema error: ${formattedError}`
+  }
+
+  private handleError(error: Error, context: string): void {
+    console.error(`DashboardCanvas ${context}:`, error)
+    this.$log?.error(`DashboardCanvas ${context}: ${error.message}`)
+    this.$emit('error', { context, error: error.message })
+  }
+
+  private handleSchemaError(widgetId: string, error: Error): void {
+    const entry = this.widgetDataStore[widgetId]
+    if (entry) {
+      entry.validationState = 'invalid'
+      entry.schemaError = error.message
+      this.$set(this.widgetDataStore, widgetId, { ...entry })
+    }
+    this.handleError(error, `Schema processing for widget ${widgetId}`)
+  }
+
+  private cleanup(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+      this.subscription = null
+    }
+
+    globalEventBus.off('packetReceive', this.handlePacketReceive)
+
+    if (this.messageQueue) {
+      this.messageQueue = null
+    }
+
+    this.updateTimeouts.forEach((timeout) => clearTimeout(timeout))
+    this.updateTimeouts.clear()
+
+    Object.keys(this.widgetDataStore).forEach((key) => {
+      this.$delete(this.widgetDataStore, key)
+    })
+  }
+
+  private updateBigNumberData(
+    data: BigNumberData,
+    value: number,
+    dataPoint: TimeSeriesDataPoint,
+    fieldName: string,
+  ): void {
+    data.value = value
+    data.fieldName = fieldName
+
+    const timestamp = dataPoint.timestamp
+    data.chartData.xData.push(timestamp)
+    data.chartData.seriesData[0].data.push(value)
+
+    if (this.timeRangeType === 'live' && this.duration) {
+      this.applyDurationFilter(data, this.duration)
+    } else {
+      if (data.chartData.xData.length > 30) {
+        data.chartData.xData.shift()
+        data.chartData.seriesData[0].data.shift()
+      }
+    }
+  }
+
+  private updateGaugeData(data: GaugeData, value: number, dataPoint: TimeSeriesDataPoint, fieldName: string): void {
+    data.value = value
+    data.fieldName = fieldName
+  }
+
+  private updateLineData(data: LineData, value: number, dataPoint: TimeSeriesDataPoint): void {
+    const timestamp = dataPoint.timestamp
+    data.chartData.xData.push(timestamp)
+    data.chartData.seriesData[0].data.push(value)
+
+    if (this.timeRangeType === 'live' && this.duration) {
+      this.applyDurationFilter(data, this.duration)
+    } else {
+      if (data.chartData.xData.length > 50) {
+        data.chartData.xData.shift()
+        data.chartData.seriesData[0].data.shift()
+      }
+    }
+  }
+
+  private onLayoutUpdated(layout: any[]): void {
+    this.emitLayoutChanged(layout)
+  }
+
+  private emitLayoutChanged(layout: any[]): void {
+    this.$emit('layout-changed', layout)
+  }
+
+  private onItemResized(...args: any[]): void {
+    const i = String(args[0])
+    const newH = Number(args[1])
+    const newW = Number(args[2])
+    const nextLayout = this.widgets.map((w) => ({
+      x: w.x,
+      y: w.y,
+      w: String(w.id) === i ? newW : w.w,
+      h: String(w.id) === i ? newH : w.h,
+      i: String(w.id),
+      static: w.static,
+      minW: w.minW,
+      minH: w.minH,
+      maxW: w.maxW,
+      maxH: w.maxH,
+    }))
+    this.$emit('layout-changed', nextLayout)
+  }
+
+  private onItemResizing(...args: any[]): void {
+    this.onItemResized(...args)
+  }
+
+  private onWidgetMenuCommand(cmd: string, widget: WidgetModel): void {
+    this.handleWidgetCommand(cmd, widget)
+  }
+
+  private handleWidgetCommand(cmd: string, widget: WidgetModel): void {
+    if (cmd === 'edit') {
+      this.$emit('edit-widget', widget)
+    } else if (cmd === 'delete') {
+      if (widget.id) this.$emit('remove-widget', String(widget.id))
+    }
+  }
+
+  private onWidgetError(error: Error, widget: WidgetModel): void {
+    this.$emit('widget-error', { error, widget })
+  }
+
+  removeItem(itemId: string): void {
+    this.$delete(this.widgetDataStore, itemId)
+    this.$emit('remove-widget', itemId)
+  }
+
+  private async extractValuesFromPayload(payload: Buffer, widget: WidgetModel): Promise<{ [fieldName: string]: any }> {
+    try {
+      if (widget.schemaType && widget.schemaId) {
+        return await this.extractFromSchema(payload, widget)
+      }
+
+      if (widget.valueField && widget.valueField.trim() !== '' && this.isJsonPayload(payload)) {
+        const parsed = JSON.parse(payload.toString())
+        const allFields: { [fieldName: string]: any } = {}
+        this.flattenObject(parsed, '', allFields)
+        return allFields
+      }
+
+      const payloadString = payload.toString()
+      const numValue = parseFloat(payloadString)
+      const fieldName = widget.valueField ?? 'value'
+
+      return {
+        [fieldName]: isNaN(numValue) ? widget.fallbackValue : numValue,
+      }
+    } catch (error) {
+      const fieldName = widget.valueField ?? 'value'
+      return { [fieldName]: widget.fallbackValue }
+    }
+  }
+
+  private async extractFromSchema(payload: Buffer, widget: WidgetModel): Promise<{ [fieldName: string]: any }> {
+    try {
+      if (!widget.schemaId) {
+        throw new Error('Schema ID is required for schema-based extraction')
+      }
+
+      const schema = await this.scriptService.get(widget.schemaId)
+      if (!schema) {
+        throw new Error(`Schema not found: ${widget.schemaId}`)
+      }
+
+      let deserializedData: any
+
+      switch (widget.schemaType) {
+        case 'protobuf':
+          deserializedData = this.deserializeWithSchema(payload, schema.script, 'protobuf', widget.schemaMessageName)
+          break
+
+        case 'avro':
+          deserializedData = this.deserializeWithSchema(payload, schema.script, 'avro')
+          break
+
+        default:
+          throw new Error(`Unsupported schema type: ${widget.schemaType}`)
+      }
+
+      if (Buffer.isBuffer(deserializedData)) {
+        deserializedData = JSON.parse(deserializedData.toString())
+      } else if (typeof deserializedData === 'string') {
+        if (deserializedData.startsWith('{') && deserializedData.endsWith('}')) {
+          deserializedData = JSON.parse(deserializedData)
+        } else {
+          deserializedData = this.extractValuesFromProtobufString(deserializedData)
+        }
+      }
+
+      const result = this.extractAllFields(deserializedData, widget.valueField)
+      await this.updateWidgetSchemaValidationState(widget, 'valid', null)
+      return result
+    } catch (error) {
+      await this.updateWidgetSchemaValidationState(widget, 'invalid', (error as Error).message)
+      const fieldName = widget.valueField || 'value'
+      return { [fieldName]: widget.fallbackValue }
+    }
+  }
+
+  private extractAllFields(data: any, specificField?: string): { [fieldName: string]: any } {
+    const result: { [fieldName: string]: any } = {}
+    this.flattenObject(data, '', result)
+    return result
+  }
+
+  private extractValuesFromProtobufString(protobufString: string): Record<string, any> {
+    try {
+      const match = protobufString.match(/(\w+)\s*\{([^}]+)\}/)
+      if (match) {
+        const [, messageName, fieldsString] = match
+        const values: Record<string, any> = {}
+
+        const fieldMatches = fieldsString.matchAll(/(\w+):\s*([^,}]+)/g)
+        for (const fieldMatch of fieldMatches) {
+          const [, fieldName, fieldValue] = fieldMatch
+          values[fieldName] = this.parseFieldValue(fieldValue.trim())
+        }
+
+        values._messageType = messageName
+        return values
+      }
+
+      const numericMatches = protobufString.matchAll(/(\w+):\s*([0-9.-]+)/g)
+      const values: Record<string, any> = {}
+      for (const match of numericMatches) {
+        const [, fieldName, fieldValue] = match
+        values[fieldName] = this.parseFieldValue(fieldValue)
+      }
+
+      return values
+    } catch (error) {
+      return {}
+    }
+  }
+
+  private parseFieldValue(value: string): any {
+    const cleanValue = value.replace(/^["']|["']$/g, '')
+
+    const numValue = parseFloat(cleanValue)
+    if (!isNaN(numValue)) {
+      return numValue
+    }
+
+    if (cleanValue.toLowerCase() === 'true') return true
+    if (cleanValue.toLowerCase() === 'false') return false
+
+    return cleanValue
+  }
+
+  private flattenObject(obj: any, prefix: string, result: { [key: string]: any }): void {
+    for (const key in obj) {
+      const fullKey = prefix ? `${prefix}.${key}` : key
+      const value = obj[key]
+
+      if (typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean' || value === null) {
+        result[fullKey] = value
+      } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        this.flattenObject(value, fullKey, result)
+      }
+    }
+  }
+
+  private isJsonPayload(payload: Buffer): boolean {
+    try {
+      const str = payload.toString().trim()
+      return (str.startsWith('{') && str.endsWith('}')) || (str.startsWith('[') && str.endsWith(']'))
+    } catch {
+      return false
+    }
+  }
+
+  private deserializeWithSchema(
+    payload: Buffer,
+    rawSchema: string,
+    schemaType: SchemaType,
+    protobufMessageName?: string,
+    format?: PayloadType,
+  ): string | Buffer {
+    switch (schemaType) {
+      case 'protobuf':
+        if (!protobufMessageName) {
+          this.$message.error('Deserialization: No protobuf message name found when deserializing message.')
+          return payload
+        }
+        return deserializeBufferToProtobuf(payload, rawSchema, protobufMessageName, 'JSON')
+
+      case 'avro':
+        return deserializeBufferToAvro(payload, rawSchema, format)
+
+      default:
+        this.$message.error(`Deserialization: Schema type is not defined or is not supported.`)
+        return payload
+    }
+  }
+
+  private extractPrimaryValue(
+    dataPoint: TimeSeriesDataPoint,
+    widget: WidgetModel,
+  ): { value: number; fieldName: string } {
+    if (widget.valueField && widget.valueField.trim() !== '' && dataPoint.values[widget.valueField] !== undefined) {
+      const value = dataPoint.values[widget.valueField]
+      return {
+        value: typeof value === 'number' ? value : widget.fallbackValue,
+        fieldName: widget.valueField,
+      }
+    }
+
+    const entries = Object.entries(dataPoint.values)
+    const numericEntry = entries.find(([key, value]) => typeof value === 'number')
+
+    if (numericEntry) {
+      return {
+        value: numericEntry[1] as number,
+        fieldName: numericEntry[0],
+      }
+    }
+
+    return {
+      value: widget.fallbackValue,
+      fieldName: 'value',
+    }
+  }
+
+  private createInitialWidgetData(widgetType: WidgetType): BigNumberData | GaugeData | LineData {
+    switch (widgetType) {
+      case 'Big Number':
+        return {
+          value: null,
+          chartData: {
+            xData: [],
+            seriesData: [
+              {
+                name: 'value',
+                data: [],
+              },
+            ],
+          },
+        }
+      case 'Gauge':
+        return {
+          value: null,
+        }
+      case 'Line':
+        return {
+          chartData: {
+            xData: [],
+            seriesData: [
+              {
+                name: 'value',
+                data: [],
+              },
+            ],
+          },
+        }
+      default:
+        throw new Error(`Unknown widget type: ${widgetType}`)
+    }
+  }
+
+  private async updateWidgetSchemaValidationState(
+    widget: WidgetModel,
+    state: 'valid' | 'invalid',
+    error?: string | null,
+  ): Promise<void> {
+    if (!widget.id) return
+    try {
+      const { widgetService } = useServices()
+      const updatedWidget = await widgetService.get(widget.id)
+      if (updatedWidget) {
+        updatedWidget.schemaValidationState = state
+        updatedWidget.schemaValidationError = error || undefined
+        await widgetService.update(widget.id, updatedWidget)
+
+        this.updateLocalWidgetState(widget.id, {
+          schemaValidationState: state,
+          schemaValidationError: error || undefined,
+        })
+      }
+    } catch (error) {
+      this.handleError(error as Error, 'Update widget schema validation state')
+    }
+  }
+
+  private updateLocalWidgetState(widgetId: string, updates: Partial<WidgetModel>): void {
+    const localWidget = this.widgets.find((w) => w.id === widgetId)
+    if (localWidget) {
+      Object.assign(localWidget, updates)
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/variable.scss';
+@import '@/assets/scss/mixins.scss';
+
+.dashboard-canvas-root {
+  width: 100%;
+  min-height: 100%;
+  background: var(--color-bg-primary);
+  padding: 0;
+}
+
+.dashboard-canvas-grid {
+  width: 100%;
+  margin-top: 10px;
+  height: 100%;
+  min-height: 400px;
+
+  .vue-grid-layout {
+    background: var(--color-bg-primary);
+    border-radius: 4px;
+    min-height: 400px;
+    transition: background 0.2s;
+  }
+
+  .vue-grid-item:not(.vue-grid-placeholder) {
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-default);
+    border-radius: 4px;
+    box-shadow: 0 1px 4px 0 var(--color-shadow-leftlist);
+    transition: background 0.2s, border 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    overflow: hidden;
+    padding: 0;
+
+    &:hover {
+      border-color: var(--color-main-green);
+      background: var(--color-bg-hover);
+    }
+
+    .vue-resizable-handle {
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    &:hover .vue-resizable-handle {
+      opacity: 1;
+    }
+  }
+
+  .dashboard-canvas-grid-text {
+    font-size: 24px;
+    color: var(--color-text-title);
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+
+  ::v-deep .vue-grid-item.vue-grid-placeholder {
+    background: var(--color-main-green) !important;
+  }
+}
+
+.widget-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.widget-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+}
+
+.widget-title-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.widget-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-title);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.widget-warning {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--color-minor-red);
+  margin-top: 2px;
+  cursor: help;
+
+  .el-icon-warning {
+    font-size: 12px;
+  }
+
+  .el-icon-warning-outline {
+    font-size: 12px;
+    color: var(--color-text-light);
+  }
+
+  .warning-text {
+    font-weight: 500;
+  }
+}
+
+.widget-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-tips);
+  cursor: pointer;
+}
+
+.widget-body {
+  flex: 1;
+  min-height: 0;
+  padding: 8px;
+}
+</style>
+
+<style lang="scss">
+.dashboard-widget-dropdown {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
+  box-shadow: 0 4px 12px 0 var(--color-shadow-leftlist);
+  padding: 0;
+  border-radius: 4px;
+
+  .el-dropdown-menu {
+    background: var(--color-bg-card);
+    border: none;
+    padding: 8px 0;
+  }
+
+  .el-dropdown-menu__item {
+    color: var(--color-text-title);
+    line-height: 32px;
+    height: 32px;
+    padding: 4px 12px;
+    display: flex;
+    align-items: center;
+
+    .iconfont {
+      font-size: 18px;
+      margin-right: 5px;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--color-text-light);
+      &:hover {
+        color: var(--color-text-light);
+      }
+    }
+
+    &.is-danger {
+      color: var(--color-minor-red);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-main-green);
+      background: var(--color-light-green);
+    }
+
+    &.is-danger:hover,
+    &.is-danger:focus {
+      color: var(--color-minor-red);
+      background: var(--color-light-red);
+    }
+
+    &.is-warning {
+      color: var(--color-warning);
+    }
+
+    &.is-warning:hover,
+    &.is-warning:focus {
+      color: var(--color-warning);
+      background: var(--color-light-warning);
+    }
+
+    &.is-success {
+      color: var(--color-main-green);
+    }
+
+    &.is-success:hover,
+    &.is-success:focus {
+      color: var(--color-main-green);
+      background: var(--color-light-green);
+    }
+  }
+
+  .el-dropdown-menu__item--divided {
+    position: relative;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -4px;
+      height: 1px;
+      background: var(--color-border-default);
+    }
+  }
+}
+
+:global(.el-tooltip__popper) {
+  max-width: 300px;
+  white-space: pre-line;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/views/viewer/dashboard/DashboardsList.vue b/src/views/viewer/dashboard/DashboardsList.vue
new file mode 100644
index 000000000..6177a5857
--- /dev/null
+++ b/src/views/viewer/dashboard/DashboardsList.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-topbar">
+      <h1 class="dashboard-titlebar">{{ $t('viewer.dashboards') }}</h1>
+      <div class="dashboard-tailbar">
+        <el-tooltip placement="bottom" :open-delay="500" :content="$t('viewer.createDashboard')">
+          <a href="javascript:;" class="new-button" @click="createDashboard" style="margin-left: 8px">
+            <i class="iconfont icon-create-new"></i>
+          </a>
+        </el-tooltip>
+        <el-tooltip placement="bottom" :open-delay="500" :content="$t('viewer.hideDashboards')">
+          <a href="javascript:;" class="new-button" @click="$emit('toggle-list', false)">
+            <i class="iconfont icon-hide-connections"></i>
+          </a>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="dashboards-list">
+      <template v-if="!isLoadingData">
+        <el-tree
+          :indent="4"
+          draggable
+          ref="tree"
+          :data="dashboards"
+          :current-node-key="selectedId"
+          node-key="id"
+          highlight-current
+          @node-drop="handleDrop"
+          @node-click="handleNodeClick"
+          :allow-drop="allowDrop"
+        >
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <div
+                class="dashboard-item"
+                :class="{ selected: selectedId === data.id }"
+                @contextmenu.prevent="openContextMenu(data, $event)"
+              >
+                <div class="dashboard-icon">
+                  <i class="iconfont icon-bytes-statistics"></i>
+                </div>
+                <div class="client-info">
+                  <el-tooltip :content="`${data.name}`" :open-delay="500" placement="top">
+                    <div class="client-name">{{ data.name }}</div>
+                  </el-tooltip>
+                </div>
+              </div>
+            </span>
+          </template>
+        </el-tree>
+      </template>
+      <template v-else>
+        <el-skeleton class="dashboards-list-skeleton" :row="8" animated />
+      </template>
+      <contextmenu :visible.sync="showContextmenu" v-bind="contextmenuConfig">
+        <a href="javascript:;" class="context-menu__item" @click="handleEdit">
+          <i class="iconfont icon-edit"></i>Edit
+        </a>
+        <a href="javascript:;" class="context-menu__item danger" @click="handleDelete">
+          <i class="iconfont icon-delete"></i>Delete
+        </a>
+      </contextmenu>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import Contextmenu from '@/components/Contextmenu.vue'
+import '@/assets/font/iconfont'
+
+@Component({
+  components: { Contextmenu },
+})
+export default class DashboardsList extends Vue {
+  private isLoadingData: boolean = false
+  @Prop({ type: Array, default: () => [] }) readonly dashboards!: DashboardModel[]
+  @Prop({ type: String, default: null }) readonly selectedId!: string | null
+
+  // context menu state
+  private showContextmenu: boolean = false
+  private selectedDashboardForMenu: DashboardModel | null = null
+  private contextmenuConfig: ContextmenuModel = { top: 0, left: 0 }
+
+  private selectDashboard(dashboard: DashboardModel) {
+    this.$emit('dashboard-selected', dashboard)
+  }
+
+  private createDashboard() {
+    this.$emit('create-dashboard')
+  }
+
+  public upsertDashboard(dashboard: DashboardModel, selectAfter: boolean = false) {
+    if (!dashboard || !dashboard.id) return
+    this.$emit('upsert', { dashboard, selectAfter })
+  }
+
+  private handleNodeClick(data: DashboardModel) {
+    if (this.selectedId === data.id) return
+    this.selectDashboard(data)
+  }
+
+  private allowDrop(draggingNode: any, dropNode: any, type: 'prev' | 'inner' | 'next') {
+    return type !== 'inner'
+  }
+
+  private handleDrop(draggingNode: any, dropNode: any, position: 'before' | 'after' | 'inner') {
+    if (!draggingNode || !dropNode) return
+    if (position === 'inner') return
+    const sourceId = draggingNode.data.id
+    const targetId = dropNode.data.id
+    if (!sourceId || !targetId || sourceId === targetId) return
+    const list = [...this.dashboards]
+    const from = list.findIndex((d) => d.id === sourceId)
+    const to = list.findIndex((d) => d.id === targetId)
+    if (from === -1 || to === -1) return
+    const [moved] = list.splice(from, 1)
+    let insertIndex = to
+    if (position === 'after') insertIndex = to + (from < to ? 0 : 1)
+    if (position === 'before') insertIndex = to + (from < to ? -1 : 0)
+    insertIndex = Math.max(0, Math.min(insertIndex, list.length))
+    list.splice(insertIndex, 0, moved)
+    this.$emit(
+      'reordered',
+      list.map((d) => d.id),
+    )
+  }
+
+  @Watch('selectedId', { immediate: true })
+  private onSelectedIdChanged(val: string | null) {
+    this.$nextTick(() => {
+      const tree: any = this.$refs.tree
+      if (tree && val) {
+        tree.setCurrentKey(val)
+      }
+    })
+  }
+
+  @Watch('dashboards')
+  private onDashboardsChanged() {
+    this.$nextTick(() => {
+      const tree: any = this.$refs.tree
+      if (tree && this.selectedId) {
+        tree.setCurrentKey(this.selectedId)
+      }
+    })
+  }
+
+  private openContextMenu(row: DashboardModel, event: MouseEvent) {
+    if (this.selectedId !== row.id) {
+      this.handleNodeClick(row)
+    }
+    if (!this.showContextmenu) {
+      const { clientX, clientY } = event
+      this.contextmenuConfig.top = clientY
+      this.contextmenuConfig.left = clientX
+      this.showContextmenu = true
+      this.selectedDashboardForMenu = row
+    } else {
+      this.showContextmenu = false
+    }
+  }
+
+  private handleEdit() {
+    if (!this.selectedDashboardForMenu) return
+    this.$emit('edit-dashboard', this.selectedDashboardForMenu)
+    this.showContextmenu = false
+  }
+
+  private handleDelete() {
+    if (!this.selectedDashboardForMenu) return
+    this.$emit('delete-dashboard', this.selectedDashboardForMenu)
+    this.showContextmenu = false
+  }
+}
+</script>
+
+<style lang="scss" scope>
+@import '~@/assets/scss/variable.scss';
+@import '~@/assets/scss/mixins.scss';
+
+.dashboard-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .dashboard-topbar {
+    @include flex-space-between;
+    min-height: 10px;
+    height: 59px;
+    flex-shrink: 0;
+    -webkit-app-region: drag;
+
+    a {
+      -webkit-app-region: no-drag;
+    }
+
+    .new-button {
+      margin-right: 16px;
+
+      .icon-create-new,
+      .icon-hide-connections {
+        font-size: 20px;
+        color: var(--color-text-title);
+        &:hover {
+          color: var(--color-text-title);
+        }
+      }
+    }
+
+    .dashboard-titlebar {
+      padding: 16px;
+    }
+
+    .dashboard-tailbar {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .dashboards-list {
+    flex: 1;
+    overflow-y: hidden;
+
+    &:hover {
+      overflow-y: overlay;
+    }
+
+    .dashboards-list-skeleton {
+      margin: 0 16px;
+    }
+
+    .el-tree {
+      height: 100%;
+      background-color: var(--color-bg-primary);
+      .is-current > .el-tree-node__content {
+        background-color: var(--color-bg-item);
+      }
+      .el-tree-node__content {
+        margin: 0 8px;
+        height: 100%;
+        border-radius: 8px;
+        &:hover {
+          background-color: var(--color-bg-item);
+        }
+        &.selected {
+          background-color: var(--color-bg-item);
+        }
+      }
+    }
+
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .dashboard-item {
+      height: 48px;
+      width: 100%;
+      cursor: pointer;
+      position: relative;
+      transition: background 0.3s ease;
+      user-select: none;
+      margin: 4px 0;
+      border-radius: 8px;
+      padding: 0 0px;
+      display: flex;
+      align-items: center;
+
+      &.drag-before::before,
+      &.drag-after::after {
+        content: '';
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        height: 0;
+        border-top: 2px dashed var(--color-border-default);
+      }
+
+      &.drag-before::before {
+        top: -1px;
+      }
+
+      &.drag-after::after {
+        bottom: -1px;
+      }
+
+      .client-info {
+        flex: 1;
+
+        .client-name {
+          display: block;
+          font-size: $font-size--body;
+          font-weight: 500;
+          color: var(--color-text-title);
+          max-width: 200px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+
+          &.online {
+            color: var(--color-main-green);
+          }
+        }
+      }
+
+      .dashboard-icon {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-right: 8px;
+
+        .iconfont {
+          font-size: 16px;
+          color: var(--color-text-title);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/viewer/dashboard/WidgetConfig.vue b/src/views/viewer/dashboard/WidgetConfig.vue
new file mode 100644
index 000000000..6f2c2df03
--- /dev/null
+++ b/src/views/viewer/dashboard/WidgetConfig.vue
@@ -0,0 +1,884 @@
+<template>
+  <div class="widget-config card-form">
+    <div class="topbar">
+      <div class="topbar-left">
+        <a href="javascript:;" @click="$emit('cancel')"> <i class="el-icon-arrow-left"></i>{{ $t('common.back') }} </a>
+      </div>
+      <div class="topbar-center">
+        <h2>{{ $t('viewer.addVisualization') }}</h2>
+      </div>
+      <div class="topbar-right">
+        <a href="javascript:;" @click="handleSave" class="connect-btn">{{ $t('common.save') }}</a>
+      </div>
+    </div>
+
+    <el-form ref="form" label-position="right" label-width="160px" :model="formModel" :rules="rules">
+      <!-- General Settings -->
+      <div class="widget-section-header">
+        <h3>{{ $t('viewer.general') }}</h3>
+      </div>
+      <el-card shadow="never" class="widget-section-body item-card">
+        <el-row :gutter="10">
+          <el-col :span="22">
+            <el-form-item label-width="93px" :label="$t('viewer.type')" prop="type">
+              <el-select size="mini" v-model="formModel.type">
+                <el-option
+                  v-for="type in availableTypes"
+                  :key="type"
+                  :label="type.charAt(0).toUpperCase() + type.slice(1)"
+                  :value="type"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+          <el-col :span="22">
+            <el-form-item label-width="93px" :label="$t('viewer.title')" prop="title">
+              <el-input size="mini" v-model="formModel.title" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+        </el-row>
+      </el-card>
+
+      <!-- Preview -->
+      <el-card shadow="never" class="preview-card">
+        <div class="preview-header">
+          <h3>{{ $t('viewer.preview') }}</h3>
+          <el-tooltip content="Refresh the preview with random data" placement="top">
+            <a href="javascript:;" class="icon-oper" @click="refreshPreview">
+              <i class="el-icon-refresh-right"></i>
+            </a>
+          </el-tooltip>
+        </div>
+        <div class="preview-body">
+          <div v-if="!formModel.type" class="preview-placeholder">{{ $t('common.noData') }}</div>
+          <div v-else class="preview-widget">
+            <WidgetRenderer
+              :key="`preview-${previewRefreshKey}`"
+              :widget="previewWidget"
+              :data="previewData"
+              style="width: 100%; height: 100%"
+            />
+          </div>
+        </div>
+      </el-card>
+
+      <!-- Type-Specific Options -->
+      <div v-if="formModel.type" class="widget-options">
+        <div class="widget-section-header">
+          <h3>{{ formModel.type }} {{ $t('viewer.options') }}</h3>
+        </div>
+        <component :is="optionsComponent" :options.sync="formModel.widgetOptions" />
+      </div>
+      <!-- Threshold Configuration -->
+      <el-card shadow="never" class="widget-section-body item-card">
+        <el-row :gutter="20">
+          <el-col :span="22">
+            <ThresholdEditor v-model="thresholds" :thresholds-type.sync="thresholdsType" />
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <div class="widget-section-header">
+        <h3>{{ $t('viewer.dataSource') }}</h3>
+      </div>
+      <el-card shadow="never" class="widget-section-body item-card">
+        <el-row :gutter="10">
+          <el-col :span="22">
+            <el-form-item label-width="175px" :label="$t('viewer.connection')" prop="connectionId">
+              <ConnectionSelect v-model="formModel.connectionId" width="100%" size="mini" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+          <el-col :span="22">
+            <el-form-item label-width="175px" :label="$t('viewer.topicPattern')" prop="topicPattern">
+              <TopicSelect
+                v-model="formModel.topicPattern"
+                :connection-id="formModel.connectionId || ''"
+                width="100%"
+                size="mini"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+          <el-col :span="22">
+            <el-form-item
+              label-width="175px"
+              :label="$t('viewer.valueField')"
+              title="JSON path or field name for data extraction"
+            >
+              <el-input size="mini" v-model="formModel.valueField" placeholder="$.temp or temp" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+        </el-row>
+      </el-card>
+
+      <div class="widget-section-header">
+        <h3>{{ $t('script.schemaTab') }}</h3>
+      </div>
+      <el-card shadow="never" class="widget-section-body item-card">
+        <!-- Schema Validation Warning -->
+        <div v-if="formModel.schemaValidationState === 'invalid'" class="schema-warning">
+          <el-alert
+            :title="formModel.schemaValidationError || 'Schema validation is failing'"
+            type="warning"
+            :closable="false"
+            show-icon
+          />
+        </div>
+
+        <el-row :gutter="10">
+          <el-col :span="22">
+            <el-form-item label-width="175px" :label="$t('script.schemaType')">
+              <el-select size="mini" v-model="formModel.schemaType">
+                <el-option label="None" :value="undefined" />
+                <el-option label="Protobuf" value="protobuf" />
+                <el-option label="Avro" value="avro" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+          <el-col :span="22">
+            <el-form-item label-width="175px" :label="$t('script.schemaName')" title="Select stored schema">
+              <el-select
+                size="mini"
+                v-model="formModel.schemaId"
+                @change="handleSchemaChange"
+                :disabled="!formModel.schemaType"
+              >
+                <el-option
+                  v-for="schema in availableSchemas"
+                  :key="schema.id"
+                  :value="schema.id"
+                  :label="schema.name"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+          <el-col v-if="formModel.schemaType === 'protobuf'" :span="22">
+            <el-form-item label-width="175px" :label="$t('viewer.messageName')" title="Protobuf message name">
+              <el-input size="mini" v-model="formModel.schemaMessageName" placeholder="MyMessage" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="formModel.schemaType === 'protobuf'" :span="2"></el-col>
+          <el-col :span="22">
+            <el-form-item label-width="175px" :label="$t('viewer.fallbackValue')">
+              <el-input
+                type="number"
+                size="mini"
+                v-model.number="formModel.fallbackValue"
+                placeholder="0"
+                style="width: 90%"
+              />
+              <el-tooltip :content="$t('viewer.fallbackValueTip')">
+                <a href="javascript:;" class="icon-oper" style="margin-left: 10px">
+                  <i class="el-icon-warning-outline"></i>
+                </a>
+              </el-tooltip>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2"></el-col>
+        </el-row>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import BigNumberConfig from '@/components/widget-configs/BigNumberConfig.vue'
+import GaugeConfig from '@/components/widget-configs/GaugeConfig.vue'
+import LineConfig from '@/components/widget-configs/LineConfig.vue'
+import ConnectionSelect from '@/components/ConnectionSelect.vue'
+import TopicSelect from '@/components/TopicSelect.vue'
+import ThresholdEditor from '@/components/ThresholdEditor.vue'
+import { widgetRegistry } from '@/widgets/widgetRegistry'
+import WidgetRenderer from '@/widgets/WidgetRenderer.vue'
+import useServices from '@/database/useServices'
+
+@Component({
+  components: {
+    ConnectionSelect,
+    TopicSelect,
+    WidgetRenderer,
+    BigNumberConfig,
+    GaugeConfig,
+    LineConfig,
+    ThresholdEditor,
+  },
+})
+export default class WidgetConfig extends Vue {
+  @Prop({ type: Object, default: null }) readonly initialWidget!: Partial<WidgetModel> | null
+
+  // Schema management (following UseScript pattern)
+  private availableSchemas: ScriptModel[] = []
+  private defaultSchemaTypes = {
+    protobuf: {
+      extension: 'proto',
+    },
+    avro: {
+      extension: 'avsc',
+    },
+  }
+
+  private formModel: Partial<WidgetModel> = {
+    type: 'Big Number' as WidgetType,
+    title: '',
+
+    x: 0,
+    y: 0,
+    w: 4,
+    h: 6,
+    static: false,
+
+    connectionId: '',
+    topicPattern: '',
+    valueField: '',
+    fallbackValue: 0,
+
+    schemaType: undefined,
+    schemaId: '',
+    schemaMessageName: '',
+
+    widgetOptions: {},
+  }
+
+  // Threshold configuration (shared across all types)
+  private thresholds: any[] = []
+  private thresholdsType: 'Absolute' | 'Percentage' = 'Absolute'
+
+  // Preview refresh key to force re-rendering
+  private previewRefreshKey: number = 0
+
+  // Flag to track initialization to prevent clearing schema values during setup
+  private isInitializing: boolean = true
+
+  get availableTypes() {
+    return widgetRegistry.getAvailableTypes()
+  }
+
+  // === INITIALIZATION METHODS ===
+  private getBaseFormModel(): Partial<WidgetModel> {
+    return {
+      type: 'Big Number' as WidgetType,
+      title: '',
+      x: 0,
+      y: 0,
+      w: 4,
+      h: 6,
+      static: false,
+      connectionId: '',
+      topicPattern: '',
+      valueField: '',
+      fallbackValue: 0,
+      schemaType: undefined,
+      schemaId: '',
+      schemaMessageName: '',
+      widgetOptions: {},
+    }
+  }
+
+  private resetFormModel() {
+    this.formModel = this.getBaseFormModel()
+    this.thresholds = []
+    this.thresholdsType = 'Absolute'
+  }
+
+  private initializeFormModel(widget?: Partial<WidgetModel>) {
+    this.resetFormModel()
+
+    if (widget) {
+      this.applyWidgetData(widget)
+    } else {
+      this.applyDefaults()
+    }
+
+    this.initializeDerivedState()
+  }
+
+  private applyWidgetData(widget: Partial<WidgetModel>) {
+    this.formModel = {
+      ...this.getBaseFormModel(),
+      ...widget,
+      widgetOptions: widget.widgetOptions ? { ...widget.widgetOptions } : undefined,
+    }
+  }
+
+  private applyDefaults() {
+    const defaultType = 'Big Number' as WidgetType
+    this.formModel = {
+      ...this.getBaseFormModel(),
+      type: defaultType,
+      widgetOptions: { ...widgetRegistry.getDefaultOptions(defaultType) },
+    }
+  }
+
+  private initializeDerivedState() {
+    // Initialize thresholds from widget options
+    if (this.formModel.widgetOptions) {
+      this.thresholds = [...(this.formModel.widgetOptions.thresholds || [])]
+      this.thresholdsType = this.formModel.widgetOptions.thresholdsType || 'Absolute'
+    }
+  }
+
+  // === THRESHOLD MANAGEMENT ===
+  private get effectiveThresholds() {
+    return this.formModel.widgetOptions?.thresholds || []
+  }
+
+  private get effectiveThresholdsType() {
+    return this.formModel.widgetOptions?.thresholdsType || 'Absolute'
+  }
+
+  private updateThresholds(thresholds: any[], type: 'Absolute' | 'Percentage') {
+    if (!this.formModel.widgetOptions) {
+      this.formModel.widgetOptions = {}
+    }
+    this.formModel.widgetOptions.thresholds = [...thresholds]
+    this.formModel.widgetOptions.thresholdsType = type
+  }
+
+  @Watch('formModel.type')
+  onTypeChange(newType: WidgetType, oldType: WidgetType) {
+    if (!newType || this.isInitializing) return
+
+    // Only apply defaults if switching to a type without existing options
+    if (!this.formModel.widgetOptions || oldType !== newType) {
+      const defaults = widgetRegistry.getDefaultOptions(newType)
+      this.formModel.widgetOptions = {
+        ...defaults,
+        // Preserve thresholds across type changes
+        thresholds: this.formModel.widgetOptions?.thresholds || [],
+        thresholdsType: this.formModel.widgetOptions?.thresholdsType || 'Absolute',
+      }
+    }
+  }
+
+  get previewWidget(): WidgetModel | null {
+    if (!this.formModel.type) return null
+
+    const defaults = widgetRegistry.getDefaultOptions(this.formModel.type || 'Big Number')
+
+    const previewOptions = {
+      ...defaults,
+      ...this.formModel.widgetOptions,
+      color: this.formModel.widgetOptions?.color || '#00B572',
+    }
+
+    return {
+      id: 'preview-widget',
+      dashboardId: 'preview',
+      type: this.formModel.type || '',
+      title: this.formModel.title || 'Sample Widget',
+      schemaType: this.formModel.schemaType,
+      schemaId: this.formModel.schemaId || '',
+      schemaMessageName: this.formModel.schemaMessageName || '',
+      fallbackValue: this.formModel.fallbackValue || 0,
+      widgetOptions: previewOptions,
+      x: this.formModel.x ?? 0,
+      y: this.formModel.y ?? 0,
+      w: this.formModel.w ?? 4,
+      h: this.formModel.h ?? 4,
+      static: this.formModel.static ?? false,
+      connectionId: this.formModel.connectionId || '',
+      topicPattern: this.formModel.topicPattern || '',
+      valueField: this.formModel.valueField || '',
+    } as WidgetModel
+  }
+
+  async created() {
+    await this.initializeComponent()
+  }
+
+  private async initializeComponent() {
+    this.isInitializing = true
+
+    try {
+      // 1. Initialize form model
+      this.initializeFormModel(this.initialWidget || undefined)
+
+      // 2. Load external data
+      await this.loadSchemas()
+
+      // 3. Setup derived state
+      this.initializeDerivedState()
+    } finally {
+      this.isInitializing = false
+    }
+  }
+
+  @Watch('initialWidget', { immediate: false })
+  async onInitialWidgetChanged() {
+    await this.initializeComponent()
+  }
+
+  @Watch('formModel.schemaType')
+  async onSchemaTypeChange(newType: string, oldType: string) {
+    await this.loadSchemas()
+
+    // Only clear if user actively changed schema type (not during initialization)
+    if (!this.isInitializing && newType !== oldType) {
+      this.formModel.schemaId = ''
+      this.formModel.schemaMessageName = ''
+    }
+  }
+
+  @Watch('thresholds', { deep: true })
+  onThresholdsChange() {
+    this.updateThresholds(this.thresholds, this.thresholdsType)
+  }
+
+  @Watch('thresholdsType')
+  onThresholdsTypeChange() {
+    this.updateThresholds(this.thresholds, this.thresholdsType)
+  }
+
+  // === SCHEMA METHODS ===
+  private async loadSchemas() {
+    const { scriptService } = useServices()
+    const schemas: ScriptModel[] = (await scriptService.getAllSchema()) ?? []
+
+    if (!this.formModel.schemaType || !this.defaultSchemaTypes[this.formModel.schemaType]) {
+      this.availableSchemas = []
+      return
+    }
+
+    const extension = this.defaultSchemaTypes[this.formModel.schemaType].extension
+    this.availableSchemas = schemas.filter((s) => s.name.endsWith(extension))
+  }
+
+  private handleSchemaChange() {
+    this.formModel.schemaMessageName = ''
+  }
+
+  // === PREVIEW METHODS ===
+  private refreshPreview() {
+    this.previewRefreshKey++
+  }
+
+  // === VALIDATION METHODS ===
+  get rules() {
+    return {
+      type: [{ required: true, message: this.$t('common.inputRequired') }],
+      connectionId: [
+        {
+          required: true,
+          message: this.$t('common.inputRequired'),
+          validator: (rule: any, value: any, callback: any) => {
+            if (!this.formModel.connectionId) {
+              callback(new Error(String(this.$t('common.inputRequired'))))
+            } else {
+              callback()
+            }
+          },
+        },
+      ],
+      topicPattern: [
+        {
+          required: true,
+          message: this.$t('common.inputRequired'),
+          validator: (rule: any, value: any, callback: any) => {
+            if (!this.formModel.topicPattern) {
+              callback(new Error(String(this.$t('common.inputRequired'))))
+            } else {
+              callback()
+            }
+          },
+        },
+      ],
+    }
+  }
+
+  get defaultTitle(): string {
+    return this.formModel.title || 'New Widget'
+  }
+
+  get isDataSourceConfigured(): boolean {
+    return !!this.formModel.connectionId && !!this.formModel.topicPattern
+  }
+
+  get previewValue() {
+    if (!this.formModel.type) return null
+    const seed = this.previewRefreshKey * 1000 + this.formModel.type.length
+    switch (this.formModel.type) {
+      case 'Big Number':
+        return Math.round((75 + Math.sin(seed) * 10) * 10) / 10
+      case 'Gauge':
+        return Math.round((68 + Math.cos(seed) * 15) * 10) / 10
+      default:
+        return null
+    }
+  }
+
+  get previewChartData() {
+    if (!this.formModel.type) return null
+    const seed = this.previewRefreshKey * 1000 + this.formModel.type.length
+
+    const now = new Date()
+    const xData: string[] = []
+    const seriesData: number[] = []
+
+    for (let i = 29; i >= 0; i--) {
+      const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
+      xData.push(date.toISOString().split('T')[0])
+
+      let value: number
+      const randomSeed = (seed + i) * 0.1
+      switch (this.formModel.type) {
+        case 'Big Number':
+          value = 20 + Math.sin(randomSeed) * 5 + Math.sin(i * 0.2 + seed) * 3
+          break
+        case 'Line':
+          // Create more dramatic variations to make smooth/rough difference visible
+          const baseValue = 50
+          const wave1 = Math.sin(i * 0.4 + seed) * 25 // Primary wave
+          const wave2 = Math.sin(i * 0.8 + seed * 0.5) * 15 // Secondary wave
+          const wave3 = Math.sin(i * 1.5 + seed * 0.3) * 8 // High frequency wave
+          const noise = (Math.random() - 0.5) * 10 // Random noise
+
+          // Add some sharp transitions to make the difference more visible
+          const sharpTransition = i % 8 === 0 ? (Math.random() - 0.5) * 30 : 0
+
+          value = baseValue + wave1 + wave2 + wave3 + noise + sharpTransition
+          break
+        default:
+          value = 50 + Math.sin(randomSeed) * 30
+      }
+      seriesData.push(Math.round(value * 100) / 100)
+    }
+
+    return {
+      xData,
+      seriesData: [
+        {
+          name: 'value',
+          data: seriesData,
+        },
+      ],
+    }
+  }
+
+  get previewData() {
+    if (!this.formModel.type) return null
+
+    const chartData = this.previewChartData
+    const value = this.previewValue
+
+    switch (this.formModel.type) {
+      case 'Big Number':
+        return {
+          value,
+          fieldName: this.formModel.valueField || 'temperature',
+          chartData: chartData || { xData: [], seriesData: [{ name: 'value', data: [] }] },
+        } as BigNumberData
+      case 'Gauge':
+        return {
+          value,
+        } as GaugeData
+      case 'Line':
+        return {
+          chartData: chartData || { xData: [], seriesData: [{ name: 'value', data: [] }] },
+        } as LineData
+      default:
+        return null
+    }
+  }
+
+  private get vueForm(): VueForm {
+    return this.$refs.form as VueForm
+  }
+
+  // === SAVE METHODS ===
+  private handleSave() {
+    this.vueForm.validate((valid: boolean) => {
+      if (!valid) {
+        this.$message.warning(String(this.$t('viewer.inputValidationFailed')))
+        return
+      }
+
+      try {
+        if (!this.formModel.type) {
+          throw new Error(String(this.$t('viewer.widgetTypeRequired')))
+        }
+
+        if (!this.formModel.connectionId) {
+          throw new Error(String(this.$t('viewer.connectionRequired')))
+        }
+
+        if (!this.formModel.topicPattern) {
+          throw new Error(String(this.$t('viewer.topicPatternRequired')))
+        }
+
+        this.formModel.schemaValidationState = undefined
+        this.formModel.schemaValidationError = undefined
+
+        const payload: Partial<WidgetModel> = {
+          ...this.formModel,
+          title: this.formModel.title || '' || this.defaultTitle,
+        }
+
+        this.$emit('save', payload)
+      } catch (error) {
+        console.error('[WIDGET_CONFIG] Save error:', error)
+        this.$message.error(`Configuration error: ${(error as Error).message}`)
+      }
+    })
+  }
+
+  private get optionsComponent() {
+    if (!this.formModel.type) {
+      return null
+    }
+    let component = null
+    switch (this.formModel.type) {
+      case 'Big Number':
+        component = BigNumberConfig
+        break
+      case 'Gauge':
+        component = GaugeConfig
+        break
+      case 'Line':
+        component = LineConfig
+        break
+      default:
+        component = null
+    }
+    return component
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.widget-config {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0 16px;
+  .topbar {
+    -webkit-app-region: drag;
+    a {
+      -webkit-app-region: no-drag;
+    }
+  }
+  .topbar {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background-color: var(--color-bg-primary);
+  }
+  .el-form {
+    padding-top: 20px;
+  }
+
+  .preview-card {
+    margin-bottom: 12px;
+    .preview-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      h3 {
+        margin: 0;
+      }
+      .icon-oper {
+        color: var(--color-text-tips);
+        transition: 0.2s color ease;
+        &:hover {
+          color: var(--color-text-title);
+        }
+        .el-icon-refresh-right {
+          font-size: 16px;
+        }
+      }
+    }
+    .preview-body {
+      width: 100%;
+      height: 260px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .preview-placeholder {
+        color: var(--color-text-light);
+      }
+      .preview-widget {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .widget-options {
+    width: 100%;
+    .widget-section-header {
+      margin: 16px 0 8px 0;
+      h3 {
+        margin: 0;
+        font-size: 14px;
+      }
+    }
+    .item-card {
+      margin-bottom: 12px;
+    }
+  }
+
+  .el-card {
+    margin: 12px 0;
+  }
+
+  .el-button--mini {
+    background-color: var(--color-bg-normal);
+    border-color: var(--color-border-default);
+    color: var(--color-text-default);
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-bg-item);
+      border-color: var(--color-main-green);
+      color: var(--color-main-green);
+    }
+
+    &:active {
+      background-color: var(--color-bg-item);
+      border-color: var(--color-main-green);
+      color: var(--color-main-green);
+    }
+  }
+
+  .el-input-number {
+    .el-input-number__decrease,
+    .el-input-number__increase {
+      background-color: var(--color-bg-normal) !important;
+      border-color: var(--color-border-default) !important;
+      color: var(--color-text-default) !important;
+
+      &:hover {
+        background-color: var(--color-bg-item) !important;
+        color: var(--color-main-green) !important;
+      }
+    }
+
+    .el-input__inner {
+      background-color: var(--color-bg-normal);
+      border-color: var(--color-border-default);
+      color: var(--color-text-default);
+    }
+  }
+
+  .el-color-picker__trigger {
+    border-color: var(--color-border-default) !important;
+    background-color: var(--color-bg-normal) !important;
+  }
+
+  .el-select .el-input .el-select__caret {
+    color: var(--color-text-default);
+  }
+
+  .el-form-item__label {
+    color: var(--color-text-default) !important;
+  }
+
+  ::v-deep .el-button.color-button.el-button--mini {
+    height: 28px;
+    line-height: 26px;
+    padding: 0 8px;
+  }
+
+  .threshold-header {
+    font-weight: 600;
+    margin-top: 10px;
+    color: var(--color-text-title);
+  }
+
+  .threshold-editor {
+    .editor-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .editor-title {
+        color: var(--color-text-default);
+      }
+    }
+    .editor-row {
+      .editor-row {
+        display: flex;
+        align-items: center;
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .schema-warning {
+    margin-bottom: 16px;
+  }
+}
+
+.el-input input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.el-input input[type='number']::-webkit-inner-spin-button,
+.el-input input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.btn-props-plus,
+.btn-delete {
+  color: var(--color-main-green);
+  &:hover {
+    color: var(--color-main-green-hover);
+  }
+}
+
+::v-deep .el-form-item__error {
+  display: none;
+}
+</style>
+
+<style lang="scss">
+body.dark,
+body.night {
+  .el-select-dropdown {
+    background-color: var(--color-bg-messagebox) !important;
+    border-color: var(--color-border-default) !important;
+
+    .el-select-dropdown__item {
+      color: var(--color-text-default) !important;
+
+      &:hover {
+        background-color: var(--color-bg-item) !important;
+      }
+
+      &.selected {
+        color: var(--color-main-green) !important;
+        background-color: var(--color-bg-item) !important;
+      }
+    }
+  }
+
+  .el-color-dropdown {
+    background-color: var(--color-bg-messagebox) !important;
+    border-color: var(--color-border-default) !important;
+
+    .el-color-dropdown__value,
+    .el-color-picker__btns {
+      background-color: var(--color-bg-normal) !important;
+
+      .el-button {
+        background-color: var(--color-bg-normal) !important;
+        border-color: var(--color-border-default) !important;
+        color: var(--color-text-default) !important;
+
+        &:hover {
+          background-color: var(--color-bg-item) !important;
+          border-color: var(--color-main-green) !important;
+          color: var(--color-main-green) !important;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/viewer/dashboard/index.vue b/src/views/viewer/dashboard/index.vue
new file mode 100644
index 000000000..c593c29cc
--- /dev/null
+++ b/src/views/viewer/dashboard/index.vue
@@ -0,0 +1,667 @@
+<template>
+  <div class="dashboards">
+    <transition name="slide">
+      <div v-show="showDashboardsList" class="dashboards-left-panel">
+        <dashboards-list
+          ref="dashboardsList"
+          :dashboards="dashboards"
+          :selected-id="selectedDashboardId"
+          @toggle-list="showDashboardsList = $event"
+          @dashboard-selected="onDashboardSelected"
+          @create-dashboard="toCreateDashboard"
+          @reordered="onDashboardsReordered"
+          @edit-dashboard="onEditDashboardFromList"
+          @delete-dashboard="onDeleteDashboardFromList"
+        />
+      </div>
+    </transition>
+
+    <DashboardHeader
+      ref="header"
+      :show-dashboards-list="showDashboardsList"
+      :selected-dashboard-id="selectedDashboardId"
+      :dashboards="dashboards"
+      :selected-dashboard="selectedDashboard"
+      :time-range-model="timeRangeModel"
+      :time-range-type="timeRangeType"
+      :duration="duration"
+      :is-adding-widget="isAddingWidget"
+      @toggle-list="showDashboardsList = $event"
+      @dashboard-selected="onDashboardSelected"
+      @add-visualization="toAddVisualization"
+      @time-range-select="onTimeRangeSelect"
+      @create-dashboard="saveDashboard"
+      @save-dashboard="saveDashboard"
+      @cancel-add="cancelAdd"
+    />
+
+    <DashboardContent
+      :loading-state="loadingState"
+      :show-dashboards-list="showDashboardsList"
+      :selected-dashboard-id="selectedDashboardId"
+      :dashboard-widgets="dashboardWidgets"
+      :time-range="timeRange"
+      :time-range-type="timeRangeType"
+      :duration="duration"
+      :is-empty="isEmpty"
+      :selected-dashboard-has-widgets="selectedDashboardHasWidgets"
+      @create-dashboard="toCreateDashboard"
+      @add-visualization="toAddVisualization"
+      @layout-changed="onLayoutChanged"
+      @edit-widget="onEditWidget"
+      @remove-widget="onRemoveWidget"
+      @refresh-widgets="loadCurrentDashboardWidgets"
+      @create-widget="createWidget"
+      @cancel-add="cancelAdd"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DashboardsList from './DashboardsList.vue'
+import DashboardHeader from './DashboardHeader.vue'
+import DashboardContent from './DashboardContent.vue'
+import useServices from '@/database/useServices'
+import time from '@/utils/time'
+
+@Component({
+  components: {
+    DashboardsList,
+    DashboardHeader,
+    DashboardContent,
+  },
+})
+export default class Dashboards extends Vue {
+  private showDashboardsList: boolean = true
+  private isAddingWidget: boolean = false
+  private editingWidget: WidgetModel | null = null
+
+  // === CONSOLIDATED LOADING STATE ===
+  private loadingState = {
+    dashboards: false,
+    widgets: false,
+    initializing: false,
+  }
+
+  private dashboards: DashboardModel[] = []
+  private selectedDashboard: DashboardModel | null = null
+  private selectedDashboardId: string | null = null
+  private dashboardWidgets: WidgetModel[] = []
+
+  private isSelectingDashboard: boolean = false
+  private timeRange: [string, string] = [time.getDateBefore(24 * 60), time.getNowDate()]
+  private timeRangeType: 'live' | 'static' = 'static'
+  private duration: number = 24 * 60
+
+  get isEmpty(): boolean {
+    return this.dashboards.length === 0
+  }
+
+  get selectedDashboardHasWidgets(): boolean {
+    return this.dashboardWidgets.length > 0
+  }
+
+  get timeRangeModel(): [string, string] {
+    if (!this.timeRange || this.timeRange.length !== 2 || !this.timeRange[0] || !this.timeRange[1]) {
+      return [time.getDateBefore(24 * 60), time.getNowDate()]
+    }
+    return this.timeRange
+  }
+
+  set timeRangeModel(val: [string, string] | null) {
+    this.timeRange =
+      val && val.length === 2 && val[0] && val[1]
+        ? (val as [string, string])
+        : [time.getDateBefore(24 * 60), time.getNowDate()]
+  }
+
+  async mounted() {
+    await this.initializeComponent()
+  }
+
+  private async initializeComponent(): Promise<void> {
+    this.loadingState.initializing = true
+    try {
+      await this.loadDashboards()
+      await this.setInitialDashboardSelection()
+      await this.loadCurrentDashboardWidgets()
+    } finally {
+      this.loadingState.initializing = false
+    }
+  }
+
+  private handleError(error: Error, context: string, showUser: boolean = true): void {
+    console.error(`[DASHBOARDS-${context}] Error:`, error)
+    this.$log?.error?.(error.toString())
+    if (showUser) {
+      this.$message.error(`${context} failed: ${error.message}`)
+    }
+  }
+
+  private async loadDashboards(): Promise<void> {
+    this.loadingState.dashboards = true
+    try {
+      const { dashboardService } = useServices()
+      this.dashboards = await dashboardService.getAll()
+    } catch (error) {
+      this.handleError(error as Error, 'Loading dashboards')
+      this.dashboards = []
+    } finally {
+      this.loadingState.dashboards = false
+    }
+  }
+
+  private async setInitialDashboardSelection(): Promise<void> {
+    if (this.isEmpty) {
+      this.clearDashboardSelection()
+      return
+    }
+
+    const persistedId = this.getPersistedDashboardId()
+    const dashboard = persistedId ? this.dashboards.find((d) => d.id === persistedId) : this.dashboards[0]
+
+    if (dashboard) {
+      this.setSelectedDashboard(dashboard, false) // Don't persist on initial load
+    }
+  }
+
+  private async loadCurrentDashboardWidgets(): Promise<void> {
+    if (!this.selectedDashboardId) {
+      this.dashboardWidgets = []
+      return
+    }
+
+    this.loadingState.widgets = true
+    try {
+      const { widgetService } = useServices()
+      this.dashboardWidgets = await widgetService.getAll(this.selectedDashboardId)
+    } catch (error) {
+      this.handleError(error as Error, 'Loading dashboard widgets')
+      this.dashboardWidgets = []
+    } finally {
+      this.loadingState.widgets = false
+    }
+  }
+
+  private async refreshData(scope: 'dashboards' | 'widgets' | 'all' = 'all'): Promise<void> {
+    const promises: Promise<void>[] = []
+
+    if (scope === 'dashboards' || scope === 'all') {
+      promises.push(this.loadDashboards())
+    }
+
+    if (scope === 'widgets' || scope === 'all') {
+      promises.push(this.loadCurrentDashboardWidgets())
+    }
+
+    await Promise.all(promises)
+
+    // Update selected dashboard reference if dashboards were refreshed
+    if (scope === 'dashboards' || scope === 'all') {
+      if (this.selectedDashboardId) {
+        const found = this.dashboards.find((d) => d.id === this.selectedDashboardId)
+        if (found) {
+          this.selectedDashboard = found
+        } else {
+          this.clearDashboardSelection()
+        }
+      }
+    }
+  }
+
+  private setSelectedDashboard(dashboard: DashboardModel, persist: boolean = true): void {
+    this.selectedDashboard = dashboard
+    this.selectedDashboardId = dashboard.id || null
+
+    // Load time range settings from dashboard global settings
+    this.loadTimeRangeSettings()
+
+    if (persist && dashboard.id) {
+      this.persistDashboardId(dashboard.id)
+    }
+  }
+
+  private clearDashboardSelection(): void {
+    this.selectedDashboard = null
+    this.selectedDashboardId = null
+    this.dashboardWidgets = []
+    this.clearPersistedDashboardId()
+  }
+
+  private async selectDashboard(
+    dashboard: DashboardModel | string,
+    options: { persist?: boolean; skipConfirmation?: boolean } = {},
+  ): Promise<void> {
+    if (this.isSelectingDashboard) return
+    this.isSelectingDashboard = true
+
+    try {
+      // Handle string ID by finding the dashboard
+      const targetDashboard =
+        typeof dashboard === 'string' ? this.dashboards.find((d) => d.id === dashboard) : dashboard
+
+      if (!targetDashboard) {
+        this.handleError(new Error('Dashboard not found'), 'Dashboard selection', false)
+        return
+      }
+
+      this.setSelectedDashboard(targetDashboard, options.persist)
+      await this.loadCurrentDashboardWidgets()
+    } finally {
+      this.isSelectingDashboard = false
+    }
+  }
+
+  private async selectDashboardById(id: string): Promise<void> {
+    await this.selectDashboard(id)
+  }
+
+  private getPersistedDashboardId(): string | null {
+    try {
+      return window.localStorage.getItem('mqttx_last_dashboard_id')
+    } catch (e) {
+      return null
+    }
+  }
+
+  private persistDashboardId(id: string): void {
+    try {
+      window.localStorage.setItem('mqttx_last_dashboard_id', id)
+    } catch (e) {
+      this.$log?.error?.((e as Error).toString())
+    }
+  }
+
+  private clearPersistedDashboardId(): void {
+    try {
+      window.localStorage.removeItem('mqttx_last_dashboard_id')
+    } catch (e) {
+      this.$log?.error?.((e as Error).toString())
+    }
+  }
+
+  private async onDashboardSelected(dashboard: DashboardModel): Promise<void> {
+    await this.selectDashboard(dashboard)
+  }
+
+  private async onDashboardsReordered(newOrderIds: string[]): Promise<void> {
+    const idToDashboard = new Map(this.dashboards.map((d) => [d.id, d]))
+    this.dashboards = newOrderIds.map((id) => idToDashboard.get(id)).filter(Boolean) as DashboardModel[]
+
+    try {
+      const { dashboardService } = useServices()
+      const orderUpdates = newOrderIds
+        .map((id, index) => (id ? { id, orderId: index + 1 } : null))
+        .filter((update): update is { id: string; orderId: number } => update !== null)
+
+      const success = await dashboardService.updateOrders(orderUpdates)
+      if (!success) {
+        this.$message.error(String(this.$t('viewer.failedToSaveDashboardOrder')))
+        await this.refreshData('dashboards')
+      }
+    } catch (error) {
+      console.error('Error updating dashboard order:', error)
+      this.$message.error(String(this.$t('viewer.failedToSaveDashboardOrder')))
+      await this.refreshData('dashboards')
+    }
+  }
+
+  private onEditDashboardFromList(dashboard: DashboardModel): void {
+    this.setSelectedDashboard(dashboard)
+  }
+
+  private async onDeleteDashboardFromList(dashboard: DashboardModel): Promise<void> {
+    if (!dashboard?.id) return
+
+    try {
+      await this.$confirm(String(this.$t('common.confirmDelete')), String(this.$t('common.confirm')), {
+        type: 'warning',
+      })
+    } catch (e) {
+      return
+    }
+
+    await this.deleteDashboard(dashboard.id)
+  }
+
+  private async saveDashboard(dashboardData: Partial<DashboardModel>): Promise<void> {
+    const { dashboardService } = useServices()
+    const payload: Partial<DashboardModel> = {
+      name: (dashboardData.name || '').trim(),
+      description: (dashboardData.description || '').trim(),
+    }
+
+    if (!payload.name) {
+      this.$message.warning(String(this.$t('common.inputRequired')))
+      return
+    }
+
+    let result: DashboardModel | null | undefined = null
+    if (dashboardData.id) {
+      result = await dashboardService.update(dashboardData.id, payload)
+    } else {
+      result = await dashboardService.create(payload as DashboardModel)
+    }
+
+    if (result?.id) {
+      this.$message.success(String(this.$t('common.saveSuccess') || 'Saved'))
+      await this.refreshData('dashboards')
+      await this.selectDashboard(result)
+      this.notifyDashboardsList('upsert', result, true)
+    } else {
+      this.$message.error(String(this.$t('common.savefailed') || 'Save failed'))
+    }
+  }
+
+  private async deleteDashboard(id: string): Promise<void> {
+    const { dashboardService } = useServices()
+    const deleted = await dashboardService.delete(id)
+
+    if (deleted) {
+      this.$message.success(String(this.$t('common.deleteSuccess') || 'Deleted'))
+      await this.refreshData('dashboards')
+
+      if (this.isEmpty) {
+        this.clearDashboardSelection()
+      } else if (this.selectedDashboardId === id) {
+        await this.selectDashboard(this.dashboards[0])
+      }
+    } else {
+      this.$message.error(String(this.$t('common.deletefailed') || 'Delete failed'))
+    }
+  }
+
+  private notifyDashboardsList(action: string, dashboard: DashboardModel, selectAfter: boolean = false): void {
+    const listRef = this.$refs.dashboardsList as InstanceType<typeof DashboardsList>
+    if (listRef?.upsertDashboard) {
+      listRef.upsertDashboard(dashboard, selectAfter)
+    }
+  }
+
+  private async createWidget(widgetData: Partial<WidgetModel>): Promise<void> {
+    if (!this.selectedDashboardId) {
+      this.$message.error(String(this.$t('viewer.noDashboardSelected')))
+      return
+    }
+
+    try {
+      if (!widgetData.type) {
+        throw new Error(String(this.$t('viewer.widgetTypeRequired')))
+      }
+
+      if (!widgetData.connectionId) {
+        throw new Error(String(this.$t('viewer.connectionRequired')))
+      }
+
+      if (!widgetData.topicPattern) {
+        throw new Error(String(this.$t('viewer.topicPatternRequired')))
+      }
+
+      const { widgetService } = useServices()
+
+      const existingWidgets = await widgetService.getAll(this.selectedDashboardId)
+      const maxY = Math.max(0, ...existingWidgets.map((w) => w.y + w.h))
+
+      const payload: WidgetModel = {
+        type: widgetData.type,
+        title: widgetData.title || `${widgetData.type} Widget`,
+        dashboardId: this.selectedDashboardId,
+        x: widgetData.x ?? 0,
+        y: widgetData.y ?? maxY,
+        w: widgetData.w ?? 4,
+        h: widgetData.h ?? 6,
+        static: widgetData.static ?? false,
+        connectionId: widgetData.connectionId,
+        topicPattern: widgetData.topicPattern,
+        valueField: widgetData.valueField,
+        fallbackValue: widgetData.fallbackValue ?? 0,
+        schemaType: widgetData.schemaType,
+        schemaId: widgetData.schemaId,
+        schemaMessageName: widgetData.schemaMessageName,
+        widgetOptions: widgetData.widgetOptions ?? {},
+      }
+
+      const created = await widgetService.create(payload)
+
+      if (created?.id) {
+        this.$message.success(String(this.$t('common.saveSuccess') || 'Widget saved successfully'))
+        await this.loadCurrentDashboardWidgets()
+      } else {
+        throw new Error('Widget creation returned no ID')
+      }
+    } catch (error) {
+      this.$message.error(`Failed to create widget: ${(error as Error).message}`)
+    }
+  }
+
+  private layoutSaveTimer: number | null = null
+  private pendingLayoutUpdates: Array<{ id: string; x: number; y: number; w: number; h: number }> = []
+
+  private onLayoutChanged(layout: Array<{ i: string; x: number; y: number; w: number; h: number }>): void {
+    if (!Array.isArray(layout) || layout.length === 0) return
+
+    const idToWidget = new Map(this.dashboardWidgets.map((w) => [String(w.id), w]))
+
+    const changed: Array<{ id: string; x: number; y: number; w: number; h: number }> = []
+    layout.forEach((item) => {
+      const widget = idToWidget.get(item.i)
+      if (!widget) return
+      const hasChanged = widget.x !== item.x || widget.y !== item.y || widget.w !== item.w || widget.h !== item.h
+      if (hasChanged) {
+        // Instead of multiple $set calls, update the widget object once
+        const widgetIndex = this.dashboardWidgets.findIndex((w) => w.id === widget.id)
+        if (widgetIndex !== -1) {
+          const updatedWidget = { ...widget, x: item.x, y: item.y, w: item.w, h: item.h }
+          this.$set(this.dashboardWidgets, widgetIndex, updatedWidget)
+        }
+        if (widget.id) {
+          changed.push({ id: widget.id, x: item.x, y: item.y, w: item.w, h: item.h })
+        }
+      }
+    })
+
+    if (changed.length === 0) return
+
+    const nextMap = new Map<string, { id: string; x: number; y: number; w: number; h: number }>()
+    this.pendingLayoutUpdates.forEach((u) => nextMap.set(u.id, u))
+    changed.forEach((u) => nextMap.set(u.id, u))
+    this.pendingLayoutUpdates = Array.from(nextMap.values())
+
+    this.schedulePersistLayout()
+  }
+
+  private schedulePersistLayout(delayMs: number = 500): void {
+    if (this.layoutSaveTimer) {
+      window.clearTimeout(this.layoutSaveTimer)
+      this.layoutSaveTimer = null
+    }
+    this.layoutSaveTimer = window.setTimeout(() => {
+      this.persistLayoutUpdates().catch((err) => {
+        this.$log?.error?.((err as Error).toString())
+      })
+    }, delayMs)
+  }
+
+  private async persistLayoutUpdates(): Promise<void> {
+    const updates = this.pendingLayoutUpdates
+    this.pendingLayoutUpdates = []
+    if (!updates.length) return
+
+    try {
+      const { widgetService } = useServices()
+      await widgetService.updateMany(updates)
+    } catch (e) {
+      await this.loadCurrentDashboardWidgets()
+    }
+  }
+
+  private onEditWidget(widget: WidgetModel): void {
+    this.editingWidget = { ...widget }
+    this.isAddingWidget = true
+  }
+
+  private async onRemoveWidget(id: string): Promise<void> {
+    try {
+      await this.$confirm(String(this.$t('common.confirmDelete')), String(this.$t('common.confirm')), {
+        type: 'warning',
+      })
+    } catch (e) {
+      return
+    }
+    const { widgetService } = useServices()
+    await widgetService.delete(id)
+    this.$message.success(String(this.$t('common.deleteSuccess') || 'Deleted'))
+    this.dashboardWidgets = this.dashboardWidgets.filter((w) => w.id !== id)
+  }
+
+  beforeDestroy() {
+    if (this.layoutSaveTimer) {
+      window.clearTimeout(this.layoutSaveTimer)
+      this.layoutSaveTimer = null
+    }
+    this.pendingLayoutUpdates = []
+  }
+
+  private onTimeRangeSelect(options: { timeRange: [string, string] | null; duration: number; isLive: boolean }): void {
+    // Update the time range
+    this.timeRange = options.timeRange || [time.getDateBefore(24 * 60), time.getNowDate()]
+
+    // Convert duration from milliseconds to minutes for consistency with DashboardView
+    // Handle edge case where duration might be 0 or undefined
+    const durationInMinutes =
+      options.duration && options.duration > 0 ? Math.round(options.duration / (60 * 1000)) : 24 * 60 // Default to 24 hours if duration is invalid
+    this.duration = durationInMinutes
+
+    if (options.isLive) {
+      // Store live mode settings in dashboard global settings
+      this.timeRangeType = 'live'
+      this.saveTimeRangeSettings({
+        timeRange: this.timeRange,
+        isLive: true,
+        duration: durationInMinutes, // Store in minutes
+        type: 'live',
+      })
+    } else {
+      // Handle static ranges
+      this.timeRangeType = 'static'
+      this.saveTimeRangeSettings({
+        timeRange: this.timeRange,
+        isLive: false,
+        type: 'static',
+      })
+    }
+  }
+
+  private loadTimeRangeSettings(): void {
+    const settings = this.selectedDashboard?.globalSettings?.timeRange
+
+    if (settings) {
+      // Use saved settings if they exist
+      this.timeRangeType = settings.type || 'static'
+      this.duration = settings.duration || 24 * 60
+
+      if (settings.type === 'live') {
+        // For live mode, set time range to current time window
+        const now = new Date()
+        const start = new Date(now.getTime() - this.duration * 60 * 1000)
+        this.timeRange = [time.toFormat(start), time.toFormat(now)]
+      } else {
+        // For static mode, use saved time range
+        this.timeRange = settings.timeRange || [time.getDateBefore(24 * 60), time.getNowDate()]
+      }
+    } else {
+      // Only set defaults if no settings exist
+      this.timeRange = [time.getDateBefore(24 * 60), time.getNowDate()]
+      this.timeRangeType = 'static'
+      this.duration = 24 * 60
+    }
+  }
+
+  private async saveTimeRangeSettings(settings: {
+    timeRange: [string, string]
+    isLive: boolean
+    duration?: number
+    type: 'live' | 'static'
+  }): Promise<void> {
+    if (!this.selectedDashboard?.id) return
+
+    try {
+      const { dashboardService } = useServices()
+      const globalSettings = {
+        ...this.selectedDashboard.globalSettings,
+        timeRange: settings,
+      }
+
+      await dashboardService.update(this.selectedDashboard.id, {
+        globalSettings,
+      })
+
+      this.selectedDashboard.globalSettings = globalSettings
+    } catch (error) {
+      console.error('Failed to save time range settings:', error)
+      this.$message.error(String(this.$t('viewer.failedToSaveTimeRangeSettings')))
+    }
+  }
+
+  private toAddVisualization() {
+    this.isAddingWidget = true
+    this.editingWidget = null
+  }
+
+  private toCreateDashboard() {
+    ;(this.$refs.header as any).toCreateDashboard()
+  }
+
+  private cancelAdd() {
+    this.isAddingWidget = false
+    this.editingWidget = null
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/scss/variable.scss';
+@import '~@/assets/scss/mixins.scss';
+
+.dashboards {
+  position: relative;
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  margin: -14px 0 0 -14px;
+  .dashboards-left-panel {
+    position: absolute;
+    width: 230px;
+    height: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    z-index: 1000;
+    border-right: 1px solid var(--color-border-default);
+    background-color: var(--color-bg-primary);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: all 0.3s ease;
+  }
+  .slide-enter {
+    transform: translateX(-100%);
+  }
+  .slide-leave-to {
+    transform: translateX(-100%);
+  }
+
+  .slide-down-enter-active,
+  .slide-down-leave-active {
+    transition: all 0.25s ease;
+  }
+  .slide-down-enter,
+  .slide-down-leave-to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/views/viewer/index.vue b/src/views/viewer/index.vue
index 78cbf8771..ceea7cd21 100644
--- a/src/views/viewer/index.vue
+++ b/src/views/viewer/index.vue
@@ -7,6 +7,7 @@
     <div class="viewer-view-tabs">
       <el-tabs v-model="activeTab" @tab-click="handleTabClick">
         <el-tab-pane :label="$t('viewer.topicsTree')" name="TopicTree"></el-tab-pane>
+        <el-tab-pane :label="$t('viewer.dashboard')" name="Dashboard"></el-tab-pane>
         <el-tab-pane :label="$t('viewer.trafficMonitor')" name="TrafficMonitor"></el-tab-pane>
         <el-tab-pane :label="$t('viewer.payloadInspector')" name="PayloadInspector"></el-tab-pane>
       </el-tabs>
diff --git a/src/widgets/WidgetRenderer.vue b/src/widgets/WidgetRenderer.vue
new file mode 100644
index 000000000..856db4412
--- /dev/null
+++ b/src/widgets/WidgetRenderer.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="widget-renderer">
+    <!-- @ts-ignore -->
+    <component :is="widgetComponent" v-bind="widgetProps" @error="onError" />
+    <div v-if="!widgetComponent" class="widget-error">
+      <div class="error-message">{{ $t('viewer.unknownWidgetType') }}: {{ widget.type }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { widgetRegistry } from '@/widgets/widgetRegistry'
+
+@Component
+export default class WidgetRenderer extends Vue {
+  @Prop({ required: true }) readonly widget!: WidgetModel
+  @Prop({ default: undefined }) readonly data!: BigNumberData | GaugeData | LineData | undefined
+  @Prop({ default: 24 * 60 }) readonly duration!: number // Duration in minutes
+  @Prop({ default: 'static' }) readonly timeRangeType!: 'live' | 'static'
+
+  get widgetComponent() {
+    return widgetRegistry.getComponent(this.widget.type)
+  }
+
+  get widgetProps(): any {
+    const baseProps = {
+      id: `widget-${this.widget.id}`,
+      title: this.widget.title,
+    }
+
+    const options = this.widget.widgetOptions || {}
+
+    if (this.widget.type === 'Big Number') {
+      const bigOptions = options as BigNumberWidgetOptions
+      const bigNumberData = this.data as BigNumberData | undefined
+      const props = {
+        ...baseProps,
+        data: bigNumberData || { value: null, chartData: { xData: [], seriesData: [{ name: 'value', data: [] }] } },
+        min: bigOptions.min ?? 0,
+        max: bigOptions.max ?? 100,
+        thresholds: bigOptions.thresholds ?? [],
+        decimals: bigOptions.decimals ?? 1,
+        unit: bigOptions.unit ?? '',
+        color: bigOptions.color ?? '#00B572',
+        thresholdsType: bigOptions.thresholdsType ?? 'Absolute',
+        extractedFieldName: bigNumberData?.fieldName ?? '',
+        duration: this.duration,
+        timeRangeType: this.timeRangeType,
+      }
+      return props
+    } else if (this.widget.type === 'Gauge') {
+      const gaugeOptions = options as GaugeWidgetOptions
+      const gaugeData = this.data as GaugeData | undefined
+      const props = {
+        ...baseProps,
+        data: gaugeData || { value: null },
+        min: gaugeOptions.min ?? 0,
+        max: gaugeOptions.max ?? 100,
+        thresholds: gaugeOptions.thresholds ?? [],
+        decimals: gaugeOptions.decimals ?? 1,
+        unit: gaugeOptions.unit ?? '',
+        color: gaugeOptions.color ?? '#00B572',
+        thresholdsType: gaugeOptions.thresholdsType ?? 'Absolute',
+        valueField: gaugeData?.fieldName ?? this.widget.valueField ?? '',
+        duration: this.duration,
+        timeRangeType: this.timeRangeType,
+      }
+      return props
+    } else if (this.widget.type === 'Line') {
+      const lineOptions = options as LineWidgetOptions
+      const lineData = this.data as LineData | undefined
+      const props = {
+        ...baseProps,
+        data: lineData || { chartData: { xData: [], seriesData: [{ name: 'value', data: [] }] } },
+        smooth: lineOptions.smooth ?? true,
+        area: lineOptions.area ?? true,
+        color: lineOptions.color ?? '#00B572',
+        thresholds: lineOptions.thresholds ?? [],
+        thresholdsType: lineOptions.thresholdsType ?? 'Absolute',
+        duration: this.duration,
+        timeRangeType: this.timeRangeType,
+      }
+      return props
+    }
+
+    return baseProps
+  }
+
+  private onError(error: Error) {
+    console.error(`Widget ${this.widget.id} error:`, error)
+    this.$emit('error', error)
+  }
+}
+</script>
+
+<style scoped>
+.widget-renderer {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  overflow: hidden;
+}
+
+.widget-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-light);
+  text-align: center;
+  padding: 16px;
+  gap: 8px;
+}
+
+.error-message {
+  font-size: 14px;
+  opacity: 0.7;
+}
+</style>
diff --git a/src/widgets/widgetRegistry.ts b/src/widgets/widgetRegistry.ts
new file mode 100644
index 000000000..bece295b3
--- /dev/null
+++ b/src/widgets/widgetRegistry.ts
@@ -0,0 +1,89 @@
+import { AsyncComponent } from 'vue'
+
+const GaugeChart = () => import('@/components/charts/Gauge.vue')
+const BigNumberChart = () => import('@/components/charts/BigNumber.vue')
+const LineChart = () => import('@/components/charts/LineChart.vue')
+
+interface WidgetConfig {
+  component: AsyncComponent
+  defaultOptions?: any
+  minSize?: { w: number; h: number }
+  maxSize?: { w: number; h: number }
+}
+
+class WidgetRegistry {
+  private widgets = new Map<WidgetType, WidgetConfig>()
+
+  constructor() {
+    this.registerDefaults()
+  }
+
+  private registerDefaults() {
+    this.register('Gauge', {
+      component: GaugeChart,
+      defaultOptions: {
+        min: undefined,
+        max: undefined,
+        thresholds: [],
+        thresholdsType: 'Absolute',
+        decimals: 1,
+        unit: '',
+        color: '#00B572',
+      },
+      minSize: { w: 2, h: 2 },
+      maxSize: { w: 6, h: 6 },
+    })
+
+    this.register('Big Number', {
+      component: BigNumberChart,
+      defaultOptions: {
+        min: undefined,
+        max: undefined,
+        thresholds: [],
+        thresholdsType: 'Absolute',
+        decimals: 1,
+        unit: '',
+        color: '#00B572',
+      },
+      minSize: { w: 2, h: 1 },
+      maxSize: { w: 8, h: 4 },
+    })
+
+    this.register('Line', {
+      component: LineChart,
+      defaultOptions: { smooth: true, area: true, color: '#00B572' },
+      minSize: { w: 4, h: 3 },
+      maxSize: { w: 12, h: 8 },
+    })
+  }
+
+  register(type: WidgetType, config: WidgetConfig) {
+    this.widgets.set(type, config)
+  }
+
+  getComponent(type: WidgetType): AsyncComponent | null {
+    return this.widgets.get(type)?.component || null
+  }
+
+  getConfig(type: WidgetType): WidgetConfig | null {
+    return this.widgets.get(type) || null
+  }
+
+  getAvailableTypes(): WidgetType[] {
+    return Array.from(this.widgets.keys())
+  }
+
+  getDefaultOptions(type: WidgetType): any {
+    return this.widgets.get(type)?.defaultOptions || {}
+  }
+
+  getMinSize(type: WidgetType): { w: number; h: number } {
+    return this.widgets.get(type)?.minSize || { w: 1, h: 1 }
+  }
+
+  getMaxSize(type: WidgetType): { w: number; h: number } {
+    return this.widgets.get(type)?.maxSize || { w: 12, h: 12 }
+  }
+}
+
+export const widgetRegistry = new WidgetRegistry()
diff --git a/tsconfig.json b/tsconfig.json
index 343ae6e97..a08815218 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,6 +43,7 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
+    "src/**/*.d.ts",
     "tests/**/*.ts",
     "tests/**/*.tsx",
     "main/**/*.ts"