diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 95848f1..d6fa027 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -29,6 +29,7 @@ const App: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showThreads, setShowThreads] = useState(false);
+  const [timeWindow, setTimeWindow] = useState<5 | 15 | 30>(5);
   
   // Track previous values for network rate calculation
   const [prevNetworkRx, setPrevNetworkRx] = useState<number>(0);
@@ -282,11 +283,34 @@ const App: React.FC = () => {
 
       </header>
       <main className="main-content">
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
+          <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.2)', borderRadius: '4px', overflow: 'hidden' }}>
+            {([5, 15, 30] as const).map((w, i) => (
+              <button
+                key={w}
+                onClick={() => setTimeWindow(w)}
+                style={{
+                  padding: '5px 14px',
+                  fontSize: '12px',
+                  background: timeWindow === w ? 'rgba(102, 126, 234, 0.5)' : 'rgba(255, 255, 255, 0.07)',
+                  border: 'none',
+                  borderRight: i < 2 ? '1px solid rgba(255, 255, 255, 0.2)' : 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  fontWeight: timeWindow === w ? '600' : 'normal',
+                  fontFamily: 'inherit',
+                }}
+              >
+                {w}m
+              </button>
+            ))}
+          </div>
+        </div>
         <div className="dashboard">
-          <CPUMonitor data={systemInfo?.cpu} history={history} />
-          <MemoryMonitor data={systemInfo?.memory} history={history} />
-          <DiskMonitor data={systemInfo?.disk} history={history} />
-          <NetworkMonitor data={systemInfo?.network} history={history} />
+          <CPUMonitor data={systemInfo?.cpu} history={history} timeWindow={timeWindow} />
+          <MemoryMonitor data={systemInfo?.memory} history={history} timeWindow={timeWindow} />
+          <DiskMonitor data={systemInfo?.disk} history={history} timeWindow={timeWindow} />
+          <NetworkMonitor data={systemInfo?.network} history={history} timeWindow={timeWindow} />
           {/* {batteryInfo?.available && <BatteryMonitor batteryInfo={batteryInfo} />} */}
         </div>
         <ProcessList
diff --git a/src/renderer/components/CPUMonitor.tsx b/src/renderer/components/CPUMonitor.tsx
index f8d3a2f..9b87ead 100644
--- a/src/renderer/components/CPUMonitor.tsx
+++ b/src/renderer/components/CPUMonitor.tsx
@@ -15,18 +15,19 @@ interface CPUMonitorProps {
     cpu: number;
     perCore?: number[];
   }>;
+  timeWindow?: 5 | 15 | 30;
 }
 
-const CPUMonitor: React.FC<CPUMonitorProps> = ({ data, history = [] }) => {
+const CPUMonitor: React.FC<CPUMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
   const [showPerCore, setShowPerCore] = React.useState(true);
   const usage = data?.usage ?? 0;
   const cores = data?.cores ?? 0;
   const perCore = data?.perCore ?? [];
 
-  // Get last 5 minutes of data (150 data points at 2-second intervals)
+  // Slice history to the selected time window (30 data points per minute at 2s intervals)
   const recentHistory = useMemo(() => {
-    return history.slice(-150);
-  }, [history]);
+    return history.slice(-(timeWindow * 30));
+  }, [history, timeWindow]);
 
   const chartData = useMemo(() => {
     if (showPerCore && perCore.length > 0) {
diff --git a/src/renderer/components/DiskMonitor.tsx b/src/renderer/components/DiskMonitor.tsx
index e1c1328..dccc825 100644
--- a/src/renderer/components/DiskMonitor.tsx
+++ b/src/renderer/components/DiskMonitor.tsx
@@ -10,17 +10,18 @@ interface DiskMonitorProps {
     diskRead: number;
     diskWrite: number;
   }>;
+  timeWindow?: 5 | 15 | 30;
 }
 
-const DiskMonitor: React.FC<DiskMonitorProps> = ({ data, history = [] }) => {
+const DiskMonitor: React.FC<DiskMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
   const read = data?.read ?? 0;
   const write = data?.write ?? 0;
   const disks = data?.disks ?? [];
 
-  // Get last 5 minutes of data (150 data points at 2-second intervals)
+  // Slice history to the selected time window (30 data points per minute at 2s intervals)
   const recentHistory = useMemo(() => {
-    return history.slice(-150);
-  }, [history]);
+    return history.slice(-(timeWindow * 30));
+  }, [history, timeWindow]);
 
   const chartData = useMemo(() => {
     return {
diff --git a/src/renderer/components/MemoryMonitor.tsx b/src/renderer/components/MemoryMonitor.tsx
index 8aa5bad..45e9950 100644
--- a/src/renderer/components/MemoryMonitor.tsx
+++ b/src/renderer/components/MemoryMonitor.tsx
@@ -11,9 +11,10 @@ interface MemoryMonitorProps {
     memory: number;
     swap: number;
   }>;
+  timeWindow?: 5 | 15 | 30;
 }
 
-const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [] }) => {
+const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
   const total = data?.total ?? 0;
   const used = data?.used ?? 0;
   const usagePercent = total > 0 ? (used / total) * 100 : 0;
@@ -22,10 +23,10 @@ const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [] }) =>
   const usedSwap = data?.usedSwap ?? 0;
   const swapPercent = totalSwap > 0 ? (usedSwap / totalSwap) * 100 : 0;
 
-  // Get last 5 minutes of data (150 data points at 2-second intervals)
+  // Slice history to the selected time window (30 data points per minute at 2s intervals)
   const recentHistory = useMemo(() => {
-    return history.slice(-150);
-  }, [history]);
+    return history.slice(-(timeWindow * 30));
+  }, [history, timeWindow]);
 
   const chartData = useMemo(() => {
     return {
diff --git a/src/renderer/components/NetworkMonitor.tsx b/src/renderer/components/NetworkMonitor.tsx
index 5a832e8..e2c32d2 100644
--- a/src/renderer/components/NetworkMonitor.tsx
+++ b/src/renderer/components/NetworkMonitor.tsx
@@ -23,9 +23,10 @@ interface NetworkMonitorProps {
     networkRx: number;
     networkTx: number;
   }>;
+  timeWindow?: 5 | 15 | 30;
 }
 
-const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [] }) => {
+const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
   const rx = data?.rx ?? 0;
   const tx = data?.tx ?? 0;
   const incomingInterfaces = data?.interfaces ?? [];
@@ -55,10 +56,10 @@ const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [] }) =
   // Convert map to array for rendering
   const interfaces = Array.from(persistedInterfaces.values());
 
-  // Get last 5 minutes of data (150 data points at 2-second intervals)
+  // Slice history to the selected time window (30 data points per minute at 2s intervals)
   const recentHistory = useMemo(() => {
-    return history.slice(-150);
-  }, [history]);
+    return history.slice(-(timeWindow * 30));
+  }, [history, timeWindow]);
 
   const chartData = useMemo(() => {
     return {