diff --git a/public/css/style.css b/public/css/style.css
index 4dbaff6..6d3f246 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -869,6 +869,240 @@ input:checked+.slider:before {
   box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
 }
 
+/* Server Detail Modal Enhancements */
+.detail-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-metrics-list {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.metric-item {
+  margin-bottom: 8px;
+  border-radius: var(--radius-md);
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.metric-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.metric-item-header:hover {
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.metric-label-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.metric-label {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.metric-value {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--accent-indigo);
+}
+
+.metric-item-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(0, 0, 0, 0.1);
+  border-top: 0px solid transparent;
+}
+
+.metric-item.active .metric-item-content {
+  max-height: 350px;
+  border-top: 1px solid var(--border-color);
+}
+
+.metric-item.active {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: var(--accent-indigo);
+}
+
+.chart-controls {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+}
+
+.time-range-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.time-range-selector {
+  display: flex;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 2px;
+}
+
+.time-range-btn {
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.time-range-btn:hover {
+  color: var(--text-primary);
+}
+
+.time-range-btn.active {
+  background: var(--accent-indigo);
+  color: white;
+}
+
+.custom-range-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 2px 2px 2px 10px;
+}
+
+.custom-range-input {
+  width: 90px;
+  background: transparent;
+  border: none;
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  outline: none;
+  font-family: var(--font-mono);
+}
+
+.absolute-range-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 2px 2px 2px 10px;
+}
+
+.time-input {
+  background: transparent;
+  border: none;
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  outline: none;
+  font-family: var(--font-mono);
+  padding: 2px 0;
+}
+
+/* Specific styling for datetime-local icon/color in some browsers */
+.time-input::-webkit-calendar-picker-indicator {
+  filter: invert(0.5);
+  cursor: pointer;
+}
+
+.light-theme .time-input::-webkit-calendar-picker-indicator {
+  filter: invert(0);
+}
+
+.btn-custom-go {
+  padding: 4px 8px;
+  font-size: 0.7rem;
+  border: none;
+  background: var(--accent-indigo);
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-custom-go:hover {
+  opacity: 0.9;
+}
+
+.detail-chart-wrapper {
+  height: 200px;
+  padding: 0 10px 10px 10px;
+  position: relative;
+}
+
+.detail-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--border-color);
+  margin-top: 10px;
+}
+
+.info-item {
+  background: var(--bg-card);
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.info-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 5px;
+}
+
+.info-value {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.chevron-icon {
+  width: 20px;
+  height: 20px;
+  transition: transform 0.3s ease;
+  color: var(--text-secondary);
+}
+
+.metric-item.active .chevron-icon {
+  transform: rotate(180deg);
+  color: var(--accent-indigo);
+}
+
+/* Light Theme Adjustments */
+.light-theme .metric-item-content {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.light-theme .detail-info-grid {
+  background: var(--border-color);
+}
+
 /* Usage bars in table */
 .usage-bar {
   display: flex;
diff --git a/public/index.html b/public/index.html
index 8132fba..4a5c383 100644
--- a/public/index.html
+++ b/public/index.html
@@ -367,56 +367,36 @@
     
     <!-- Server Detail Modal -->
     <div class="modal-overlay" id="serverDetailModal">
-      <div class="modal" style="max-width: 600px;">
+      <div class="modal" style="max-width: 800px; width: 95%;">
         <div class="modal-header">
-          <h2 id="serverDetailTitle">服务器详情</h2>
+          <div style="display: flex; flex-direction: column;">
+            <h2 id="serverDetailTitle" style="margin-bottom: 4px;">服务器详情</h2>
+            <div id="serverDetailSubtitle" style="font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-mono);"></div>
+          </div>
           <button class="modal-close" id="serverDetailClose">&times;</button>
         </div>
-        <div class="modal-body" id="serverDetailBody">
-          <div id="detailLoading" style="text-align: center; padding: 20px; display: none;">
+        <div class="modal-body" id="serverDetailBody" style="padding: 0;">
+          <div id="detailLoading" style="text-align: center; padding: 40px; display: none;">
             <div class="dot dot-pulse" style="display: inline-block; width: 12px; height: 12px; background: var(--accent-indigo);"></div>
-            <span style="margin-left: 10px; color: var(--text-secondary);">正在从数据库读取详情...</span>
+            <span style="margin-left: 10px; color: var(--text-secondary);">正在从数据源读取详情...</span>
           </div>
-          <div class="detail-grid" id="detailGrid">
-            <div class="detail-item">
-              <span class="detail-label">CPU 忙碌率 (Busy)</span>
-              <span class="detail-value" id="detailCpuBusy">0%</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">系统负载 (Load)</span>
-              <span class="detail-value" id="detailSysLoad">0%</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">内存使用率 (RAM)</span>
-              <span class="detail-value" id="detailMemUsedPct">0%</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">SWAP 使用率</span>
-              <span class="detail-value" id="detailSwapUsedPct">0%</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">根分区使用率 (/)</span>
-              <span class="detail-value" id="detailRootFsUsedPct">0%</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">CPU 核心总数</span>
-              <span class="detail-value" id="detailCpuCores">0 核心</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">物理内存总量</span>
-              <span class="detail-value" id="detailMemTotal">0 GB</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">运行时间 (Uptime)</span>
-              <span class="detail-value" id="detailUptime">0天 0小时</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">网络接收速率 (RX)</span>
-              <span class="detail-value" id="detailNetRx">0 Mbps</span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">网络发送速率 (TX)</span>
-              <span class="detail-value" id="detailNetTx">0 Mbps</span>
+          <div class="detail-container" id="detailContainer">
+            <!-- Metric Items are injected here -->
+            <div class="detail-metrics-list" id="detailMetricsList"></div>
+            
+            <div class="detail-info-grid" id="detailInfoGrid">
+              <div class="info-item">
+                <span class="info-label">CPU 核心总数</span>
+                <span class="info-value" id="detailCpuCores">0 核心</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">物理内存总量</span>
+                <span class="info-value" id="detailMemTotal">0 GB</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">运行时间 (Uptime)</span>
+                <span class="info-value" id="detailUptime">0天 0小时</span>
+              </div>
             </div>
           </div>
         </div>
diff --git a/public/js/app.js b/public/js/app.js
index 9d36687..a2aebd6 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -65,24 +65,20 @@
     serverDetailModal: document.getElementById('serverDetailModal'),
     serverDetailClose: document.getElementById('serverDetailClose'),
     serverDetailTitle: document.getElementById('serverDetailTitle'),
-    detailGrid: document.getElementById('detailGrid'),
+    serverDetailSubtitle: document.getElementById('serverDetailSubtitle'),
+    detailMetricsList: document.getElementById('detailMetricsList'),
     detailLoading: document.getElementById('detailLoading'),
-    detailCpuBusy: document.getElementById('detailCpuBusy'),
-    detailSysLoad: document.getElementById('detailSysLoad'),
-    detailMemUsedPct: document.getElementById('detailMemUsedPct'),
-    detailSwapUsedPct: document.getElementById('detailSwapUsedPct'),
-    detailRootFsUsedPct: document.getElementById('detailRootFsUsedPct'),
     detailCpuCores: document.getElementById('detailCpuCores'),
     detailMemTotal: document.getElementById('detailMemTotal'),
     detailUptime: document.getElementById('detailUptime'),
-    detailNetRx: document.getElementById('detailNetRx'),
-    detailNetTx: document.getElementById('detailNetTx')
+    detailContainer: document.getElementById('detailContainer')
   };
 
   // ---- State ----
   let previousMetrics = null;
   let networkChart = null;
   let user = null; // Currently logged in user
+  let currentServerDetail = { instance: null, job: null, source: null, charts: {} };
 
   // ---- Initialize ----
   function init() {
@@ -431,52 +427,185 @@
 
   // ---- Server Detail ----
   async function openServerDetail(instance, job, source) {
-    dom.serverDetailTitle.textContent = `${job} - 服务器详情`;
+    currentServerDetail = { instance, job, source, charts: {} };
+    dom.serverDetailTitle.textContent = `${job}`;
+    dom.serverDetailSubtitle.textContent = `${instance} (${source})`;
     dom.serverDetailModal.classList.add('active');
-    
+
     // Show loading
-    dom.detailGrid.style.opacity = '0.3';
+    dom.detailContainer.style.opacity = '0.3';
     dom.detailLoading.style.display = 'block';
+    dom.detailMetricsList.innerHTML = '';
 
     try {
       const url = `/api/metrics/server-details?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}`;
       const response = await fetch(url);
       if (!response.ok) throw new Error('Fetch failed');
       const data = await response.json();
-      
+
       renderServerDetail(data);
     } catch (err) {
       console.error('Error fetching server details:', err);
     } finally {
-      dom.detailGrid.style.opacity = '1';
+      dom.detailContainer.style.opacity = '1';
       dom.detailLoading.style.display = 'none';
     }
   }
 
   function closeServerDetail() {
     dom.serverDetailModal.classList.remove('active');
+    // Destroy charts
+    Object.values(currentServerDetail.charts).forEach(chart => {
+      if (chart && chart.destroy) chart.destroy();
+    });
+    currentServerDetail = { instance: null, job: null, source: null, charts: {} };
   }
 
   function renderServerDetail(data) {
-    dom.detailCpuBusy.textContent = formatPercent(data.cpuBusy);
-    dom.detailSysLoad.textContent = data.sysLoad.toFixed(1) + '%';
-    dom.detailMemUsedPct.textContent = formatPercent(data.memUsedPct);
-    dom.detailSwapUsedPct.textContent = formatPercent(data.swapUsedPct);
-    dom.detailRootFsUsedPct.textContent = formatPercent(data.rootFsUsedPct);
     dom.detailCpuCores.textContent = data.cpuCores + ' 核心';
     dom.detailMemTotal.textContent = formatBytes(data.memTotal);
-    
+
     // Uptime formatting
     const uptimeSec = data.uptime;
     const days = Math.floor(uptimeSec / 86400);
     const hours = Math.floor((uptimeSec % 86400) / 3600);
     const mins = Math.floor((uptimeSec % 3600) / 60);
     dom.detailUptime.textContent = `${days}天 ${hours}小时 ${mins}分`;
-    
-    dom.detailNetRx.textContent = formatBandwidth(data.netRx);
-    dom.detailNetTx.textContent = formatBandwidth(data.netTx);
+
+    // Define metrics to show
+    const metrics = [
+      { key: 'cpuBusy', label: 'CPU 忙碌率 (Busy)', value: formatPercent(data.cpuBusy) },
+      { key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
+      { key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
+      { key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
+      { key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
+      { key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
+      { key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) }
+    ];
+
+    dom.detailMetricsList.innerHTML = metrics.map(m => `
+        <div class="metric-item" id="metric-${m.key}">
+            <div class="metric-item-header" onclick="toggleMetricExpand('${m.key}')">
+                <div class="metric-label-group">
+                    <span class="metric-label">${m.label}</span>
+                    <span class="metric-value">${m.value}</span>
+                </div>
+                <svg class="chevron-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </div>
+            <div class="metric-item-content">
+                <div class="chart-controls">
+                    <div class="time-range-group">
+                        <div class="time-range-selector">
+                            <button class="time-range-btn active" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
+                        </div>
+                        <div class="custom-range-selector">
+                            <input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
+                        </div>
+                        <div class="absolute-range-selector">
+                            <input type="datetime-local" class="time-input" id="start-time-${m.key}">
+                            <span style="color: var(--text-secondary); font-size: 0.7rem;">至</span>
+                            <input type="datetime-local" class="time-input" id="end-time-${m.key}">
+                            <button class="btn-custom-go" onclick="loadCustomMetricHistory('${m.key}', event)">查询</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-chart-wrapper">
+                    <canvas id="chart-${m.key}"></canvas>
+                </div>
+            </div>
+        </div>
+    `).join('');
   }
 
+  window.toggleMetricExpand = async function (metricKey) {
+    const el = document.getElementById(`metric-${metricKey}`);
+    const wasActive = el.classList.contains('active');
+
+    // Close all others
+    document.querySelectorAll('.metric-item').forEach(item => item.classList.remove('active'));
+
+    if (!wasActive) {
+      el.classList.add('active');
+      // Initial load
+      loadMetricHistory(metricKey, '1h');
+    }
+  };
+
+  window.loadMetricHistory = async function (metricKey, range, event, start = null, end = null) {
+    if (event) {
+      event.stopPropagation();
+      const group = event.target.closest('.time-range-group');
+      if (group) {
+        group.querySelectorAll('.time-range-btn').forEach(btn => btn.classList.remove('active'));
+        if (event.target.classList.contains('time-range-btn')) {
+          event.target.classList.add('active');
+        }
+      }
+    }
+
+    const canvas = document.getElementById(`chart-${metricKey}`);
+    if (!canvas) return;
+
+    let chart = currentServerDetail.charts[metricKey];
+    if (!chart) {
+      let unit = '';
+      if (metricKey.includes('Pct') || metricKey === 'cpuBusy') unit = '%';
+      if (metricKey.startsWith('net')) unit = 'B/s';
+
+      chart = new MetricChart(canvas, unit);
+      currentServerDetail.charts[metricKey] = chart;
+    }
+
+    try {
+      const { instance, job, source } = currentServerDetail;
+      let url = `/api/metrics/server-history?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}&metric=${metricKey}`;
+
+      if (start && end) {
+        url += `&start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
+      } else {
+        url += `&range=${range}`;
+      }
+
+      const res = await fetch(url);
+      if (!res.ok) throw new Error('Query failed');
+      const data = await res.json();
+      chart.setData(data);
+    } catch (err) {
+      console.error(`Error loading history for ${metricKey}:`, err);
+    }
+  };
+
+  window.loadCustomMetricHistory = async function (metricKey, event) {
+    if (event) event.stopPropagation();
+
+    const rangeInput = document.getElementById(`custom-range-${metricKey}`);
+    const startInput = document.getElementById(`start-time-${metricKey}`);
+    const endInput = document.getElementById(`end-time-${metricKey}`);
+
+    const range = (rangeInput.value || '').trim().toLowerCase();
+    const startTime = startInput.value;
+    const endTime = endInput.value;
+
+    if (startTime && endTime) {
+      // Absolute range
+      loadMetricHistory(metricKey, null, event, startTime, endTime);
+    } else if (range) {
+      // Relative range
+      if (!/^\d+[smhd]$/.test(range)) {
+        alert('格式不正确，请使用如: 2h, 30m, 1d 等格式');
+        return;
+      }
+      loadMetricHistory(metricKey, range, event);
+    } else {
+      alert('请输入相对范围或选择具体时间范围');
+    }
+  };
+
   // ---- Network History ----
   async function fetchNetworkHistory() {
     try {
diff --git a/public/js/chart.js b/public/js/chart.js
index 7ee2262..53b2a88 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -273,3 +273,154 @@ class AreaChart {
     if (this.animFrame) cancelAnimationFrame(this.animFrame);
   }
 }
+
+class MetricChart {
+  constructor(canvas, unit = '') {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.data = { timestamps: [], values: [] };
+    this.unit = unit; // '%', 'B/s', etc.
+    this.dpr = window.devicePixelRatio || 1;
+    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
+    this.animProgress = 0;
+    
+    this._resize = this.resize.bind(this);
+    window.addEventListener('resize', this._resize);
+    this.resize();
+  }
+
+  resize() {
+    const parent = this.canvas.parentElement;
+    if (!parent) return;
+    const rect = parent.getBoundingClientRect();
+    if (rect.width === 0) return;
+    this.width = rect.width;
+    this.height = rect.height;
+    this.canvas.width = this.width * this.dpr;
+    this.canvas.height = this.height * this.dpr;
+    this.canvas.style.width = this.width + 'px';
+    this.canvas.style.height = this.height + 'px';
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.draw();
+  }
+
+  setData(data) {
+    this.data = data || { timestamps: [], values: [] };
+    this.animate();
+  }
+
+  animate() {
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+    const start = performance.now();
+    const duration = 500;
+    const step = (now) => {
+      const elapsed = now - start;
+      this.animProgress = Math.min(elapsed / duration, 1);
+      this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
+      this.draw();
+      if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
+    };
+    this.animFrame = requestAnimationFrame(step);
+  }
+
+  draw() {
+    const ctx = this.ctx;
+    const w = this.width;
+    const h = this.height;
+    const p = this.padding;
+    const chartW = w - p.left - p.right;
+    const chartH = h - p.top - p.bottom;
+
+    ctx.clearRect(0, 0, w, h);
+
+    const { timestamps, values } = this.data;
+    if (!timestamps || timestamps.length < 2) {
+      ctx.fillStyle = '#5a6380';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
+      return;
+    }
+
+    // Find max with cushion
+    let maxVal = Math.max(...values, 0.1);
+    if (this.unit === '%' && maxVal <= 100) {
+        if (maxVal > 80) maxVal = 100;
+        else if (maxVal > 40) maxVal = 80;
+        else if (maxVal > 20) maxVal = 50;
+        else maxVal = 25;
+    } else {
+        maxVal = maxVal * 1.25;
+    }
+
+    const len = timestamps.length;
+    const xStep = chartW / (len - 1);
+    const getX = (i) => p.left + i * xStep;
+    const getY = (val) => p.top + chartH - (val / (maxVal || 1)) * chartH * this.animProgress;
+
+    // Grid
+    ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 3; i++) {
+      const y = p.top + (chartH / 3) * i;
+      ctx.beginPath();
+      ctx.moveTo(p.left, y);
+      ctx.lineTo(p.left + chartW, y);
+      ctx.stroke();
+      
+      const v = (maxVal * (1 - i / 3));
+      ctx.fillStyle = '#5a6380';
+      ctx.font = '9px "JetBrains Mono", monospace';
+      ctx.textAlign = 'right';
+      
+      let label = '';
+      if (this.unit === 'B/s') {
+          label = window.formatBandwidth ? window.formatBandwidth(v) : v.toFixed(0);
+      } else {
+          label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
+      }
+      ctx.fillText(label, p.left - 8, y + 3);
+    }
+
+    // Path
+    ctx.beginPath();
+    ctx.moveTo(getX(0), getY(values[0]));
+    for (let i = 1; i < len; i++) {
+        const prevX = getX(i - 1);
+        const currX = getX(i);
+        const prevY = getY(values[i - 1]);
+        const currY = getY(values[i]);
+        const midX = (prevX + currX) / 2;
+        ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+    }
+    
+    // Stroke
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth = 2;
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+
+    // Fill
+    ctx.lineTo(getX(len - 1), p.top + chartH);
+    ctx.lineTo(getX(0), p.top + chartH);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
+    grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
+    grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
+    ctx.fillStyle = grad;
+    ctx.fill();
+    
+    // Last point pulse
+    const lastX = getX(len - 1);
+    const lastY = getY(values[len - 1]);
+    ctx.beginPath();
+    ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
+    ctx.fillStyle = '#6366f1';
+    ctx.fill();
+  }
+
+  destroy() {
+    window.removeEventListener('resize', this._resize);
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+  }
+}
diff --git a/server/index.js b/server/index.js
index ecdbfed..a76d918 100644
--- a/server/index.js
+++ b/server/index.js
@@ -626,6 +626,26 @@ app.get('/api/metrics/server-details', async (req, res) => {
   }
 });
 
+// Get historical metrics for a specific server
+app.get('/api/metrics/server-history', async (req, res) => {
+  const { instance, job, source, metric, range, start, end } = req.query;
+  
+  if (!instance || !job || !source || !metric) {
+    return res.status(400).json({ error: 'instance, job, source, and metric are required' });
+  }
+
+  try {
+    const [rows] = await db.query('SELECT url FROM prometheus_sources WHERE name = ?', [source]);
+    if (rows.length === 0) return res.status(404).json({ error: 'Source not found' });
+    const sourceUrl = rows[0].url;
+
+    const data = await prometheusService.getServerHistory(sourceUrl, instance, job, metric, range, start, end);
+    res.json(data);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // SPA fallback
 app.get('*', (req, res, next) => {
   if (req.path.startsWith('/api/') || req.path.includes('.')) return next();
diff --git a/server/prometheus-service.js b/server/prometheus-service.js
index 24a1f76..896d6e7 100644
--- a/server/prometheus-service.js
+++ b/server/prometheus-service.js
@@ -448,6 +448,85 @@ async function getServerDetails(baseUrl, instance, job) {
   return results;
 }
 
+/**
+ * Get historical metrics for a specific server (node)
+ */
+async function getServerHistory(baseUrl, instance, job, metric, range = '1h', start = null, end = null) {
+  const url = normalizeUrl(baseUrl);
+  const node = instance;
+  
+  // Map metric keys to Prometheus expressions
+  const metricMap = {
+    cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`,
+    sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
+    memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`,
+    swapUsedPct: `((node_memory_SwapTotal_bytes{instance="${node}",job="${job}"} - node_memory_SwapFree_bytes{instance="${node}",job="${job}"}) / (node_memory_SwapTotal_bytes{instance="${node}",job="${job}"})) * 100`,
+    rootFsUsedPct: `100 - ((node_filesystem_avail_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!="rootfs"} * 100) / node_filesystem_size_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!="rootfs"})`,
+    netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
+    netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`
+  };
+
+  const expr = metricMap[metric];
+  if (!expr) throw new Error('Invalid metric for history');
+
+  let duration, step, queryStart, queryEnd;
+
+  if (start && end) {
+    queryStart = Math.floor(new Date(start).getTime() / 1000);
+    queryEnd = Math.floor(new Date(end).getTime() / 1000);
+    duration = queryEnd - queryStart;
+    if (duration <= 0) throw new Error('End time must be after start time');
+    // Reasonable step for fixed range
+    step = Math.max(15, Math.floor(duration / 100));
+  } else {
+    // Relative range logic
+    const rangeMap = {
+      '15m': { duration: 900, step: 15 },
+      '30m': { duration: 1800, step: 30 },
+      '1h': { duration: 3600, step: 60 },
+      '6h': { duration: 21600, step: 300 },
+      '12h': { duration: 43200, step: 600 },
+      '24h': { duration: 86400, step: 900 },
+      '2d': { duration: 172800, step: 1800 },
+      '7d': { duration: 604800, step: 3600 }
+    };
+
+    if (rangeMap[range]) {
+      duration = rangeMap[range].duration;
+      step = rangeMap[range].step;
+    } else {
+      // Try to parse relative time string like "2h", "30m", "1d"
+      const match = range.match(/^(\d+)([smhd])$/);
+      if (match) {
+          const val = parseInt(match[1]);
+          const unit = match[2];
+          const multipliers = { s: 1, m: 60, h: 3600, d: 86400 };
+          duration = val * (multipliers[unit] || 3600);
+          // Calculate a reasonable step for ~60-120 data points
+          step = Math.max(15, Math.floor(duration / 100));
+      } else {
+          duration = 3600;
+          step = 60;
+      }
+    }
+    queryEnd = Math.floor(Date.now() / 1000);
+    queryStart = queryEnd - duration;
+  }
+
+  try {
+    const result = await queryRange(url, expr, queryStart, queryEnd, step);
+    if (!result || result.length === 0) return { timestamps: [], values: [] };
+    
+    return {
+      timestamps: result[0].values.map(v => v[0] * 1000),
+      values: result[0].values.map(v => parseFloat(v[1]))
+    };
+  } catch (err) {
+    console.error(`[Prometheus] Error fetching history for ${metric} on ${node}:`, err.message);
+    throw err;
+  }
+}
+
 module.exports = {
   testConnection,
   query,
@@ -457,5 +536,6 @@ module.exports = {
   mergeNetworkHistories,
   getCpuHistory,
   mergeCpuHistories,
-  getServerDetails
+  getServerDetails,
+  getServerHistory
 };