diff --git a/server/mock-socket-server.js b/server/mock-socket-server.js
index 8512172..909f060 100644
--- a/server/mock-socket-server.js
+++ b/server/mock-socket-server.js
@@ -101,6 +101,14 @@ io.on('connection', (socket) => {
   socket.emit('sensorData', { temperature: initialData.temperature, humidity: initialData.humidity });
   socket.emit('powerStatus', { powerCut: initialData.powerCut });
 
+  // Send initial system startup log
+  socket.emit('systemLog', {
+    type: 'success',
+    message: 'System initialized successfully',
+    source: 'system',
+    timestamp: new Date()
+  });
+
   // intervals object to clear later
   const intervals = {};
 
diff --git a/src/components/EnergyCharts.jsx b/src/components/EnergyCharts.jsx
index 2e1c8a9..c4038c2 100644
--- a/src/components/EnergyCharts.jsx
+++ b/src/components/EnergyCharts.jsx
@@ -62,8 +62,7 @@ const EnergyCharts = () => {
 
   return (
     <div className="space-y-4 sm:space-y-6">
-
-      {/* Real-time Charts */}
+      {/* Real-time Energy Consumption */}
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/src/components/StatusCard.jsx b/src/components/StatusCard.jsx
index b504497..a96dadf 100644
--- a/src/components/StatusCard.jsx
+++ b/src/components/StatusCard.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { useApp } from '../context/AppContext';
 
-const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
+const StatusCard = ({ title, value: propValue, subtitle: propSubtitle, icon, color: propColor, onClick }) => {
   const { state } = useApp();
 
   const getStatusColor = () => {
@@ -38,6 +38,11 @@ const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
 
   const warningLevel = getWarningLevel();
 
+  // Build derived values without mutating props
+  let value = propValue;
+  let subtitle = propSubtitle;
+  let color = propColor || 'status-offline';
+
   if (title === 'Inverter Status') {
     value = `${getStatusIcon()} ${state.inverterStatus.toUpperCase()}`;
     color = getStatusColor();
@@ -77,11 +82,25 @@ const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
     }
   }
 
+  if (title === 'Energy Usage') {
+    value = `${state.energyConsumption}W`;
+    if (state.energyConsumption > 500) {
+      subtitle = 'High consumption';
+      color = 'status-warning-battery';
+    } else if (state.energyConsumption > 300) {
+      subtitle = 'Moderate consumption';
+      color = 'status-standby';
+    } else {
+      subtitle = 'Low consumption';
+      color = 'status-online';
+    }
+  }
+
   return (
     <motion.div
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
-      className={`rounded-xl p-6 text-white shadow-lg cursor-pointer transition-all duration-300 ${color} status-card`}
+      className={`rounded-xl p-4 sm:p-6 text-white shadow-lg cursor-pointer transition-all duration-300 interactive ${color}`}
       onClick={onClick}
       role="button"
       tabIndex={0}
diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx
index 74630ca..600ef92 100644
--- a/src/context/AppContext.jsx
+++ b/src/context/AppContext.jsx
@@ -13,6 +13,7 @@ const initialState = {
   isManualMode: false,
   currentTime: new Date().toLocaleTimeString(),
   theme: 'light',
+  logs: [],
 };
 
 function appReducer(state, action) {
@@ -47,6 +48,18 @@ function appReducer(state, action) {
       return { ...state, currentTime: action.payload };
     case 'SET_THEME':
       return { ...state, theme: action.payload };
+    case 'ADD_LOG':
+      const newLog = {
+        id: Date.now() + Math.random(),
+        ...action.payload,
+        timestamp: action.payload.timestamp || new Date()
+      };
+      return { 
+        ...state, 
+        logs: [newLog, ...state.logs].slice(0, 1000) // Keep max 1000 logs
+      };
+    case 'CLEAR_LOGS':
+      return { ...state, logs: [] };
     default:
       return state;
   }
diff --git a/src/context/SocketContext.jsx b/src/context/SocketContext.jsx
index de997db..ad6cc36 100644
--- a/src/context/SocketContext.jsx
+++ b/src/context/SocketContext.jsx
@@ -41,6 +41,14 @@ export function SocketProvider({ children }) {
         message: 'Connected to real-time server',
         timestamp: new Date(),
       });
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: 'success', 
+          message: 'Connected to real-time server', 
+          source: 'system' 
+        } 
+      });
     });
 
     newSocket.on('disconnect', () => {
@@ -89,10 +97,28 @@ export function SocketProvider({ children }) {
 
     newSocket.on('inverterStatus', (data) => {
       dispatch({ type: 'UPDATE_INVERTER_STATUS', payload: data.status });
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: 'info', 
+          message: `Inverter status changed to ${data.status}`, 
+          source: 'inverter' 
+        } 
+      });
     });
 
     newSocket.on('powerStatus', (data) => {
       dispatch({ type: 'UPDATE_POWER_STATUS', payload: data.powerCut });
+      const logType = data.powerCut ? 'warning' : 'success';
+      const logMessage = data.powerCut ? 'Power cut detected! Running on inverter' : 'Grid power restored';
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: logType, 
+          message: logMessage, 
+          source: 'power' 
+        } 
+      });
       if (data.powerCut) {
         addNotification({
           type: 'warning',
@@ -104,14 +130,65 @@ export function SocketProvider({ children }) {
 
     newSocket.on('batteryUpdate', (data) => {
       dispatch({ type: 'UPDATE_BATTERY_LEVEL', payload: data.level });
+      let logType = 'info';
+      let logMessage = `Battery level updated to ${data.level}%`;
+      
+      if (data.level <= 20) {
+        logType = 'error';
+        logMessage = `Critical battery level: ${data.level}%`;
+      } else if (data.level <= 30) {
+        logType = 'warning';
+        logMessage = `Low battery warning: ${data.level}%`;
+      }
+      
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: logType, 
+          message: logMessage, 
+          source: 'battery' 
+        } 
+      });
     });
 
     newSocket.on('energyUpdate', (data) => {
       dispatch({ type: 'UPDATE_ENERGY_DATA', payload: data.consumption });
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: 'info', 
+          message: `Energy consumption: ${data.consumption}W`, 
+          source: 'energy' 
+        } 
+      });
     });
 
     newSocket.on('sensorData', (data) => {
       dispatch({ type: 'UPDATE_SENSOR_DATA', payload: data });
+      let logType = 'info';
+      let logMessage = `Temperature: ${data.temperature}°C, Humidity: ${data.humidity}%`;
+      
+      if (data.temperature > 60) {
+        logType = 'error';
+        logMessage = `Critical temperature warning: ${data.temperature}°C`;
+      } else if (data.temperature > 50) {
+        logType = 'warning';
+        logMessage = `High temperature: ${data.temperature}°C`;
+      }
+      
+      dispatch({ 
+        type: 'ADD_LOG', 
+        payload: { 
+          type: logType, 
+          message: logMessage, 
+          source: 'sensor' 
+        } 
+      });
+    });
+
+    // Listen for direct log events from server
+    newSocket.on('systemLog', (logData) => {
+      dispatch({ type: 'ADD_LOG', payload: logData });
     });
 
     // Surface server-side notifications and command acknowledgements
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 5075456..46c6d45 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -133,34 +133,10 @@ const Dashboard = () => {
         role="region"
         aria-label="System status cards"
       >
-        <StatusCard
-          title="Inverter Status"
-          value="Online"
-          subtitle="All systems normal"
-          icon="🔌"
-          color="status-online"
-        />
-        <StatusCard
-          title="Power Supply"
-          value="Grid Active"
-          subtitle="Stable power supply"
-          icon="⚡"
-          color="status-online"
-        />
-        <StatusCard
-          title="Battery Level"
-          value="75%"
-          subtitle="Adequate charge"
-          icon="🔋"
-          color="status-online"
-        />
-        <StatusCard
-          title="Temperature"
-          value="45°C"
-          subtitle="Normal temperature"
-          icon="🌡️"
-          color="status-online"
-        />
+        <StatusCard title="Inverter Status" icon="🔌" />
+        <StatusCard title="Power Supply" icon="⚡" />
+        <StatusCard title="Battery Level" icon="🔋" />
+        <StatusCard title="Temperature" icon="🌡️" />
       </motion.div>
 
       {/* Energy Usage Card - Separate row for better mobile layout */}
@@ -172,41 +148,9 @@ const Dashboard = () => {
         role="region"
         aria-label="Energy usage information"
       >
-        <StatusCard
-          title="Energy Usage"
-          value="320W"
-          subtitle="Moderate consumption"
-          icon="📊"
-          color="status-standby"
-        />
-      </motion.div>
-
-      {/* Utility Functions Display Cards */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.3 }}
-        className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"
-      >
-        <StatusCard
-          title="Estimated Backup Time"
-          value={backupTime}
-          subtitle={`At ${currentConsumption}W consumption`}
-          icon="⏱️"
-          color="status-online"
-        />
-        <StatusCard
-          title="System Efficiency"
-          value={`${efficiencyData.percentage}%`}
-          subtitle={`Rating: ${efficiencyData.rating}`}
-          icon="⚡"
-          color={
-            efficiencyData.color === "green"
-              ? "status-online"
-              : efficiencyData.color === "yellow"
-              ? "status-warning"
-              : "status-error"
-          }
+        <StatusCard 
+          title="Energy Usage" 
+          icon="📊" 
         />
       </motion.div>
 
diff --git a/src/pages/Logs.jsx b/src/pages/Logs.jsx
index 3d8a669..27d3eea 100644
--- a/src/pages/Logs.jsx
+++ b/src/pages/Logs.jsx
@@ -1,62 +1,48 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { formatTime, formatDate } from '../utils/format';
+import { useApp } from '../context/AppContext';
 
 const Logs = () => {
+  const { state, dispatch } = useApp();
   const [filter, setFilter] = useState('all');
+  const [sourceFilter, setSourceFilter] = useState('all');
   const [searchTerm, setSearchTerm] = useState('');
+  const [isAutoScroll, setIsAutoScroll] = useState(true);
 
-  // Mock logs data
-  const mockLogs = [
-    {
-      id: 1,
-      type: 'info',
-      message: 'System started successfully',
-      timestamp: new Date(Date.now() - 3600000),
-      source: 'system'
-    },
-    {
-      id: 2,
-      type: 'warning',
-      message: 'Power cut detected, switching to inverter',
-      timestamp: new Date(Date.now() - 3000000),
-      source: 'power'
-    },
-    {
-      id: 3,
-      type: 'error',
-      message: 'Battery level critical (15%)',
-      timestamp: new Date(Date.now() - 2400000),
-      source: 'battery'
-    },
-    {
-      id: 4,
-      type: 'info',
-      message: 'Grid power restored',
-      timestamp: new Date(Date.now() - 1800000),
-      source: 'power'
-    },
-    {
-      id: 5,
-      type: 'success',
-      message: 'Battery charging started',
-      timestamp: new Date(Date.now() - 1200000),
-      source: 'battery'
-    },
-    {
-      id: 6,
-      type: 'info',
-      message: 'Scheduled maintenance check completed',
-      timestamp: new Date(Date.now() - 600000),
-      source: 'system'
-    }
-  ];
+  // Real-time logs from state
+  const logs = state.logs || [];
+
+  const filteredLogs = useMemo(() => {
+    return logs.filter(log => {
+      const matchesFilter = filter === 'all' || log.type === filter;
+      const matchesSource = sourceFilter === 'all' || log.source === sourceFilter;
+      const matchesSearch = log.message.toLowerCase().includes(searchTerm.toLowerCase());
+      return matchesFilter && matchesSource && matchesSearch;
+    });
+  }, [logs, filter, sourceFilter, searchTerm]);
 
-  const filteredLogs = mockLogs.filter(log => {
-    const matchesFilter = filter === 'all' || log.type === filter;
-    const matchesSearch = log.message.toLowerCase().includes(searchTerm.toLowerCase());
-    return matchesFilter && matchesSearch;
-  });
+  const clearLogs = useCallback(() => {
+    dispatch({ type: 'CLEAR_LOGS' });
+  }, [dispatch]);
+
+  const exportLogs = useCallback(() => {
+    const logsData = filteredLogs.map(log => ({
+      timestamp: log.timestamp,
+      type: log.type,
+      source: log.source,
+      message: log.message
+    }));
+    
+    const dataStr = JSON.stringify(logsData, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `system-logs-${new Date().toISOString().split('T')[0]}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [filteredLogs]);
 
   const getLogColor = (type) => {
     switch (type) {
@@ -78,6 +64,26 @@ const Logs = () => {
     }
   };
 
+  const getSeverityBadge = (type) => {
+    switch (type) {
+      case 'error': return 'HIGH';
+      case 'warning': return 'MED';
+      case 'success': return 'LOW';
+      case 'info': return 'LOW';
+      default: return 'LOW';
+    }
+  };
+
+  const getSeverityColor = (type) => {
+    switch (type) {
+      case 'error': return 'bg-red-600 text-white';
+      case 'warning': return 'bg-orange-500 text-white';
+      default: return 'bg-green-500 text-white';
+    }
+  };
+
+  const uniqueSources = [...new Set(logs.map(log => log.source))];
+
   return (
     <div className="min-h-screen bg-gray-50 p-4">
       <motion.div
@@ -85,56 +91,150 @@ const Logs = () => {
         animate={{ opacity: 1, y: 0 }}
         className="mb-8"
       >
-        <h1 className="text-3xl font-bold text-gray-900">System Logs</h1>
-        <p className="text-gray-600 mt-2">Detailed history of system events and activities</p>
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Real-Time System Logs</h1>
+            <p className="text-gray-600 mt-2">Live monitoring of system events and activities</p>
+            <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
+              <span>📊 Total Logs: {logs.length}</span>
+              <span>🔍 Filtered: {filteredLogs.length}</span>
+              <span className={`flex items-center space-x-1 ${isAutoScroll ? 'text-green-600' : 'text-gray-500'}`}>
+                <span>🔄</span>
+                <span>Auto-scroll: {isAutoScroll ? 'ON' : 'OFF'}</span>
+              </span>
+            </div>
+          </div>
+          <div className="mt-4 lg:mt-0 flex space-x-2">
+            <button
+              onClick={() => setIsAutoScroll(!isAutoScroll)}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                isAutoScroll 
+                  ? 'bg-green-600 text-white' 
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
+              {isAutoScroll ? '⏸️ Pause' : '▶️ Resume'}
+            </button>
+            <button
+              onClick={exportLogs}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            >
+              📥 Export
+            </button>
+            <button
+              onClick={clearLogs}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
+            >
+              🗑️ Clear
+            </button>
+          </div>
+        </div>
       </motion.div>
 
-      {/* Filters and Search */}
+      {/* Enhanced Filters and Search */}
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.1 }}
         className="bg-white rounded-xl shadow-lg p-6 mb-8"
       >
-        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
-          <div className="flex flex-wrap gap-2">
-            {['all', 'info', 'success', 'warning', 'error'].map((type) => (
+        <div className="space-y-4">
+          {/* Log Type Filters */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Filter by Type</label>
+            <div className="flex flex-wrap gap-2">
+              {['all', 'info', 'success', 'warning', 'error'].map((type) => (
+                <button
+                  key={type}
+                  onClick={() => setFilter(type)}
+                  className={`px-4 py-2 rounded-lg font-medium capitalize transition-colors ${
+                    filter === type
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  }`}
+                >
+                  {type === 'all' ? '🔄 All' : `${getLogIcon(type)} ${type}`}
+                  {type !== 'all' && (
+                    <span className="ml-2 bg-white/20 px-2 py-0.5 rounded text-xs">
+                      {logs.filter(l => l.type === type).length}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Source Filters */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Filter by Source</label>
+            <div className="flex flex-wrap gap-2">
               <button
-                key={type}
-                onClick={() => setFilter(type)}
-                className={`px-4 py-2 rounded-lg font-medium capitalize transition-colors ${
-                  filter === type
-                    ? 'bg-blue-600 text-white'
+                onClick={() => setSourceFilter('all')}
+                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                  sourceFilter === 'all'
+                    ? 'bg-purple-600 text-white'
                     : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                 }`}
               >
-                {type}
+                🔄 All Sources
               </button>
-            ))}
+              {uniqueSources.map((source) => (
+                <button
+                  key={source}
+                  onClick={() => setSourceFilter(source)}
+                  className={`px-4 py-2 rounded-lg font-medium capitalize transition-colors ${
+                    sourceFilter === source
+                      ? 'bg-purple-600 text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  }`}
+                >
+                  {source}
+                  <span className="ml-2 bg-white/20 px-2 py-0.5 rounded text-xs">
+                    {logs.filter(l => l.source === source).length}
+                  </span>
+                </button>
+              ))}
+            </div>
           </div>
-          <div className="lg:w-64">
+
+          {/* Search */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Search Logs</label>
             <input
               type="text"
-              placeholder="Search logs..."
+              placeholder="Search log messages..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
         </div>
       </motion.div>
 
-      {/* Logs List */}
+      {/* Real-Time Logs List */}
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.2 }}
         className="bg-white rounded-xl shadow-lg overflow-hidden"
       >
-        <div className="overflow-x-auto">
+        <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-gray-900">Live Log Stream</h3>
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+              <span className="text-sm text-gray-600">Live</span>
+            </div>
+          </div>
+        </div>
+        
+        <div className="overflow-x-auto max-h-96 overflow-y-auto" style={{ scrollBehavior: isAutoScroll ? 'smooth' : 'auto' }}>
           <table className="w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-gray-50 sticky top-0">
               <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Severity
+                </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Type
                 </th>
@@ -153,11 +253,16 @@ const Logs = () => {
               {filteredLogs.map((log, index) => (
                 <motion.tr
                   key={log.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: index * 0.1 }}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.05 }}
                   className="hover:bg-gray-50 transition-colors"
                 >
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getSeverityColor(log.type)}`}>
+                      {getSeverityBadge(log.type)}
+                    </span>
+                  </td>
                   <td className="px-6 py-4 whitespace-nowrap">
                     <span className={`badge inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${getLogColor(log.type)} ${log.type}`}>
                       <span className="mr-2">{getLogIcon(log.type)}</span>
@@ -165,10 +270,14 @@ const Logs = () => {
                     </span>
                   </td>
                   <td className="px-6 py-4">
-                    <div className="text-sm font-medium text-gray-900">{log.message}</div>
+                    <div className="text-sm font-medium text-gray-900 max-w-md truncate" title={log.message}>
+                      {log.message}
+                    </div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <span className="text-sm text-gray-500 capitalize">{log.source}</span>
+                    <span className="text-sm text-gray-500 capitalize bg-gray-100 px-2 py-1 rounded">
+                      {log.source}
+                    </span>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="text-sm text-gray-900">{formatTime(log.timestamp)}</div>
@@ -183,8 +292,18 @@ const Logs = () => {
         {filteredLogs.length === 0 && (
           <div className="text-center py-12">
             <div className="text-4xl mb-4">📋</div>
-            <p className="text-gray-500 text-lg">No logs found</p>
-            <p className="text-gray-400 text-sm">Try changing your filters or search term</p>
+            <p className="text-gray-500 text-lg">
+              {logs.length === 0 
+                ? 'No logs yet - start the socket server to see real-time events' 
+                : 'No logs match your filters'
+              }
+            </p>
+            <p className="text-gray-400 text-sm mt-1">
+              {logs.length === 0 
+                ? 'Run: node server/mock-socket-server.js'
+                : 'Try changing your filters or search term'
+              }
+            </p>
           </div>
         )}
       </motion.div>