diff --git a/Backend/temperature_data.json b/Backend/temperature_data.json
index 11078d3..b5579ea 100644
--- a/Backend/temperature_data.json
+++ b/Backend/temperature_data.json
@@ -1 +1 @@
-[{"temperature": 21.69, "timestamp": "2024-11-11 16:28:54"}, {"temperature": 21.04, "timestamp": "2024-11-11 16:32:43"}, {"temperature": 21.57, "timestamp": "2024-11-11 16:32:55"}, {"temperature": 21.14, "timestamp": "2024-11-11 16:33:07"}, {"temperature": 28.63, "timestamp": "2024-11-11 16:33:19"}, {"temperature": 27.68, "timestamp": "2024-11-11 16:33:31"}, {"temperature": 26.9, "timestamp": "2024-11-11 16:33:43"}, {"temperature": 27.76, "timestamp": "2024-11-11 16:33:55"}, {"temperature": 24.88, "timestamp": "2024-11-11 16:34:07"}, {"temperature": 28.35, "timestamp": "2024-11-11 16:34:19"}, {"temperature": 28.9, "timestamp": "2024-11-11 16:34:32"}, {"temperature": 20.41, "timestamp": "2024-11-11 16:34:44"}, {"temperature": 20.08, "timestamp": "2024-11-11 16:34:56"}, {"temperature": 23.63, "timestamp": "2024-11-11 16:35:08"}, {"temperature": 28.94, "timestamp": "2024-11-11 16:35:20"}, {"temperature": 29.31, "timestamp": "2024-11-11 16:35:32"}, {"temperature": 29.25, "timestamp": "2024-11-11 16:35:44"}, {"temperature": 29.38, "timestamp": "2024-11-11 16:35:56"}, {"temperature": 28.29, "timestamp": "2024-11-11 16:36:08"}, {"temperature": 20.32, "timestamp": "2024-11-11 16:36:20"}, {"temperature": 21.49, "timestamp": "2024-11-11 16:36:32"}, {"temperature": 20.43, "timestamp": "2024-11-11 16:36:44"}, {"temperature": 29.15, "timestamp": "2024-11-12 11:47:20"}, {"temperature": 27.23, "timestamp": "2024-11-12 11:47:32"}, {"temperature": 29.69, "timestamp": "2024-11-12 11:47:44"}, {"temperature": 25.44, "timestamp": "2024-11-12 11:47:56"}, {"temperature": 21.2, "timestamp": "2024-11-12 11:48:08"}, {"temperature": 21.25, "timestamp": "2024-11-12 11:48:20"}, {"temperature": 27.21, "timestamp": "2024-11-12 11:48:32"}, {"temperature": 25.42, "timestamp": "2024-11-12 11:48:44"}, {"temperature": 28.4, "timestamp": "2024-11-12 11:48:56"}, {"temperature": 21.29, "timestamp": "2024-11-12 11:49:08"}, {"temperature": 28.47, "timestamp": "2024-11-12 11:49:20"}, {"temperature": 22.37, "timestamp": "2024-11-12 11:49:32"}, {"temperature": 27.71, "timestamp": "2024-11-12 11:49:44"}, {"temperature": 25.94, "timestamp": "2024-11-12 11:49:57"}, {"temperature": 23.82, "timestamp": "2024-11-12 11:50:09"}, {"temperature": 28.83, "timestamp": "2024-11-12 11:50:21"}, {"temperature": 25.36, "timestamp": "2024-11-12 11:50:33"}, {"temperature": 27.03, "timestamp": "2024-11-12 11:50:45"}, {"temperature": 23.79, "timestamp": "2024-11-12 11:50:57"}, {"temperature": 28.73, "timestamp": "2024-11-12 11:51:09"}, {"temperature": 26.65, "timestamp": "2024-11-12 11:51:21"}, {"temperature": 26.32, "timestamp": "2024-11-12 11:51:33"}, {"temperature": 24.51, "timestamp": "2024-11-12 11:51:45"}, {"temperature": 22.35, "timestamp": "2024-11-12 11:51:57"}, {"temperature": 23.27, "timestamp": "2024-11-12 11:52:09"}, {"temperature": 24.76, "timestamp": "2024-11-12 11:52:21"}, {"temperature": 20.23, "timestamp": "2024-11-12 11:52:33"}, {"temperature": 27.01, "timestamp": "2024-11-12 11:52:45"}, {"temperature": 23.0, "timestamp": "2024-11-12 11:52:58"}, {"temperature": 26.14, "timestamp": "2024-11-12 11:53:10"}, {"temperature": 28.28, "timestamp": "2024-11-12 11:53:22"}]
\ No newline at end of file
+[{"temperature": 20.44, "timestamp": "2024-11-12 12:35:21"}, {"temperature": 28.25, "timestamp": "2024-11-12 12:35:33"}, {"temperature": 28.03, "timestamp": "2024-11-12 12:35:45"}, {"temperature": 29.66, "timestamp": "2024-11-12 12:35:57"}, {"temperature": 25.99, "timestamp": "2024-11-12 12:36:09"}, {"temperature": 24.41, "timestamp": "2024-11-12 12:36:21"}, {"temperature": 20.51, "timestamp": "2024-11-12 12:36:33"}, {"temperature": 29.23, "timestamp": "2024-11-12 12:36:45"}, {"temperature": 25.97, "timestamp": "2024-11-12 12:36:57"}, {"temperature": 23.59, "timestamp": "2024-11-12 12:37:09"}, {"temperature": 25.58, "timestamp": "2024-11-12 12:37:21"}, {"temperature": 21.91, "timestamp": "2024-11-12 12:37:33"}, {"temperature": 24.9, "timestamp": "2024-11-12 12:37:46"}, {"temperature": 22.27, "timestamp": "2024-11-12 12:37:58"}, {"temperature": 27.72, "timestamp": "2024-11-12 12:38:10"}, {"temperature": 24.14, "timestamp": "2024-11-12 12:38:22"}, {"temperature": 20.27, "timestamp": "2024-11-12 12:38:34"}, {"temperature": 29.88, "timestamp": "2024-11-12 12:38:46"}, {"temperature": 23.76, "timestamp": "2024-11-12 12:38:58"}, {"temperature": 28.14, "timestamp": "2024-11-12 12:39:10"}, {"temperature": 20.42, "timestamp": "2024-11-12 12:39:22"}, {"temperature": 27.08, "timestamp": "2024-11-12 12:39:34"}, {"temperature": 22.0, "timestamp": "2024-11-12 12:39:46"}, {"temperature": 24.37, "timestamp": "2024-11-12 12:39:58"}, {"temperature": 23.1, "timestamp": "2024-11-12 12:40:10"}, {"temperature": 23.06, "timestamp": "2024-11-12 12:40:22"}, {"temperature": 21.73, "timestamp": "2024-11-12 12:40:34"}, {"temperature": 26.63, "timestamp": "2024-11-12 12:40:46"}, {"temperature": 28.59, "timestamp": "2024-11-12 12:40:58"}, {"temperature": 28.98, "timestamp": "2024-11-12 12:41:10"}, {"temperature": 22.56, "timestamp": "2024-11-12 12:41:23"}, {"temperature": 22.59, "timestamp": "2024-11-12 12:41:35"}, {"temperature": 29.17, "timestamp": "2024-11-12 12:41:47"}, {"temperature": 28.19, "timestamp": "2024-11-12 12:41:59"}, {"temperature": 29.28, "timestamp": "2024-11-12 12:42:11"}, {"temperature": 23.34, "timestamp": "2024-11-12 12:42:23"}, {"temperature": 25.0, "timestamp": "2024-11-12 12:42:35"}, {"temperature": 27.79, "timestamp": "2024-11-12 12:42:47"}, {"temperature": 29.45, "timestamp": "2024-11-12 12:42:59"}, {"temperature": 28.9, "timestamp": "2024-11-12 12:43:11"}, {"temperature": 24.93, "timestamp": "2024-11-12 12:43:23"}, {"temperature": 25.06, "timestamp": "2024-11-12 12:43:35"}, {"temperature": 23.21, "timestamp": "2024-11-12 12:43:47"}, {"temperature": 21.03, "timestamp": "2024-11-12 12:43:59"}, {"temperature": 23.84, "timestamp": "2024-11-12 12:44:11"}, {"temperature": 26.59, "timestamp": "2024-11-12 12:44:23"}, {"temperature": 29.14, "timestamp": "2024-11-12 12:44:35"}, {"temperature": 22.94, "timestamp": "2024-11-12 12:44:48"}, {"temperature": 28.96, "timestamp": "2024-11-12 12:45:00"}, {"temperature": 22.35, "timestamp": "2024-11-12 12:45:12"}, {"temperature": 28.82, "timestamp": "2024-11-12 12:45:24"}, {"temperature": 28.7, "timestamp": "2024-11-12 12:45:36"}, {"temperature": 26.66, "timestamp": "2024-11-12 12:45:48"}, {"temperature": 29.59, "timestamp": "2024-11-12 12:46:00"}, {"temperature": 24.65, "timestamp": "2024-11-12 12:46:12"}, {"temperature": 26.74, "timestamp": "2024-11-12 12:46:24"}, {"temperature": 20.57, "timestamp": "2024-11-12 12:46:36"}, {"temperature": 20.6, "timestamp": "2024-11-12 12:46:49"}, {"temperature": 23.69, "timestamp": "2024-11-12 12:47:01"}, {"temperature": 23.28, "timestamp": "2024-11-12 12:47:13"}, {"temperature": 25.92, "timestamp": "2024-11-12 12:47:25"}, {"temperature": 25.94, "timestamp": "2024-11-12 12:47:37"}, {"temperature": 26.27, "timestamp": "2024-11-12 12:47:49"}, {"temperature": 21.45, "timestamp": "2024-11-12 12:48:15"}, {"temperature": 28.43, "timestamp": "2024-11-12 12:48:27"}, {"temperature": 24.64, "timestamp": "2024-11-12 12:48:39"}, {"temperature": 28.08, "timestamp": "2024-11-12 12:48:51"}, {"temperature": 29.94, "timestamp": "2024-11-12 12:49:03"}, {"temperature": 20.67, "timestamp": "2024-11-12 12:49:15"}, {"temperature": 26.57, "timestamp": "2024-11-12 12:49:27"}, {"temperature": 28.62, "timestamp": "2024-11-12 12:49:39"}, {"temperature": 22.2, "timestamp": "2024-11-12 12:49:51"}, {"temperature": 25.53, "timestamp": "2024-11-12 12:50:03"}, {"temperature": 25.81, "timestamp": "2024-11-12 12:50:15"}, {"temperature": 20.24, "timestamp": "2024-11-12 12:50:28"}, {"temperature": 24.21, "timestamp": "2024-11-12 12:50:40"}, {"temperature": 20.43, "timestamp": "2024-11-12 12:50:52"}, {"temperature": 29.0, "timestamp": "2024-11-12 12:51:04"}, {"temperature": 24.87, "timestamp": "2024-11-12 12:51:16"}, {"temperature": 29.34, "timestamp": "2024-11-12 12:51:28"}, {"temperature": 24.85, "timestamp": "2024-11-12 12:51:40"}, {"temperature": 27.74, "timestamp": "2024-11-12 12:51:52"}, {"temperature": 27.54, "timestamp": "2024-11-12 12:52:04"}, {"temperature": 28.61, "timestamp": "2024-11-12 12:52:16"}, {"temperature": 27.13, "timestamp": "2024-11-12 12:52:28"}, {"temperature": 27.1, "timestamp": "2024-11-12 12:52:40"}, {"temperature": 27.84, "timestamp": "2024-11-12 12:52:52"}, {"temperature": 22.82, "timestamp": "2024-11-12 12:53:04"}, {"temperature": 20.41, "timestamp": "2024-11-12 12:53:17"}, {"temperature": 28.82, "timestamp": "2024-11-12 12:53:29"}, {"temperature": 21.7, "timestamp": "2024-11-12 12:53:41"}, {"temperature": 26.86, "timestamp": "2024-11-12 12:55:17"}, {"temperature": 21.95, "timestamp": "2024-11-12 12:55:29"}, {"temperature": 23.75, "timestamp": "2024-11-12 12:55:41"}]
\ No newline at end of file
diff --git a/Backend/templates/index.html b/Backend/templates/index.html
index 93205ed..c896874 100644
--- a/Backend/templates/index.html
+++ b/Backend/templates/index.html
@@ -1,253 +1,368 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Temperature Tracker</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
     <style>
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #f0f8ff;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-      }
-
-      .container {
-        background-color: #fff;
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        padding: 2rem;
-        width: 90%;
-        max-width: 900px;
-      }
-
-      h1 {
-        color: #0077b6;
-        text-align: center;
-        margin-bottom: 1.5rem;
-      }
-
-      .hero {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 2rem;
-      }
-
-      .hero-content {
-        flex: 1;
-        margin-right: 2rem;
-      }
-
-      .hero-content h2 {
-        color: #0077b6;
-        font-size: 2.5rem;
-        margin-bottom: 1rem;
-      }
-
-      .hero-content p {
-        color: #333;
-        font-size: 1.2rem;
-        line-height: 1.5;
-      }
-
-      .hero-image {
-        flex: 1;
-        max-width: 300px;
-      }
-
-      .hero-image img {
-        width: 100%;
-        height: auto;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-bottom: 2rem;
-      }
-
-      th,
-      td {
-        padding: 1rem;
-        text-align: center;
-        border-bottom: 1px solid #f0f0f0;
-      }
-
-      th {
-        background-color: #0077b6;
-        color: #fff;
-        font-weight: bold;
-      }
-
-      tbody tr:hover {
-        background-color: #f0f0f0;
-      }
-
-      .chart-container {
-        width: 100%;
-        height: 400px;
-      }
-
-      button {
-        background-color: #0077b6;
-        color: #fff;
-        border: none;
-        border-radius: 4px;
-        padding: 0.75rem 1.5rem;
-        font-size: 1rem;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-      }
-
-      button:hover {
-        background-color: #005a8d;
-      }
+        body {
+            font-family: "Roboto", sans-serif;
+            background-color: #f0f8ff;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 30px;
+            background: linear-gradient(135deg, #0077b6, #00b4d8);
+            border-radius: 12px;
+            color: white;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .header h1 {
+            margin: 0 0 15px 0;
+            font-size: 2.5em;
+        }
+
+        .header p {
+            margin: 0 0 20px 0;
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .weather-icon {
+            width: 120px;
+            height: 120px;
+            margin: 20px auto;
+        }
+
+        .card {
+            background-color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .search-container {
+            position: relative;
+            margin-bottom: 20px;
+        }
+
+        .search-container input {
+            width: 100%;
+            padding: 12px 40px 12px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+        }
+
+        .search-icon {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #666;
+        }
+
+        .chart-container {
+            height: 400px;
+            margin-bottom: 20px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+
+        th {
+            background-color: #0077b6;
+            color: #fff;
+        }
+
+        tbody tr {
+            cursor: pointer;
+        }
+
+        tbody tr:hover {
+            background-color: #f5f5f5;
+        }
+
+        .selected-row {
+            background-color: #e3f2fd;
+        }
+
+        .details-card {
+            display: none;
+            margin-top: 20px;
+        }
+
+        .details-card h3 {
+            color: #0077b6;
+            margin-top: 0;
+        }
+
+        .details-content {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .detail-item {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+        }
+
+        .detail-item h4 {
+            margin: 0 0 10px 0;
+            color: #0077b6;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2em;
+            }
+        }
+
+        /* Animation for the sun/cloud icon */
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+
+        .weather-icon {
+            animation: float 3s ease-in-out infinite;
+        }
     </style>
-  </head>
-  <body>
+</head>
+<body>
     <div class="container">
-      <div class="hero">
-        <div class="hero-content">
-          <h2>Welcome to the Temperature Tracker</h2>
-          <p>
-            Monitor and analyze your temperature data with our easy-to-use
-            application.
-          </p>
+        <div class="header">
+            <svg class="weather-icon" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- Sun -->
+                <circle cx="50" cy="50" r="20" fill="#FFD700" />
+                <g>
+                    <path d="M50 15 L50 5" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M50 95 L50 85" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M15 50 L5 50" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M95 50 L85 50" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M26 26 L19 19" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M81 81 L74 74" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M26 74 L19 81" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                    <path d="M81 19 L74 26" stroke="#FFD700" stroke-width="4" stroke-linecap="round"/>
+                </g>
+                <!-- Cloud -->
+                <path d="M65 60 C65 51.716 71.716 45 80 45 C88.284 45 95 51.716 95 60 C95 68.284 88.284 75 80 75 L65 75 C65 75 65 68.284 65 60Z" fill="white" fill-opacity="0.9"/>
+            </svg>
+            <h1>Weather Temperature Tracker</h1>
+            <p>Monitor and analyze temperature variations throughout the day with detailed weather conditions, humidity levels, and atmospheric pressure readings. Stay informed about changing weather patterns and environmental conditions in real-time.</p>
+        </div>
+
+        <div class="search-container">
+            <input type="text" id="searchInput" placeholder="Search by date (YYYY-MM-DD)">
+            <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+        </div>
+
+        <div class="card">
+            <div class="chart-container">
+                <canvas id="temperatureChart"></canvas>
+            </div>
         </div>
-        <div class="hero-image">
-          <img src="/api/placeholder/300/300" alt="Temperature Sensor" />
+
+        <div class="card">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Timestamp</th>
+                        <th>Temperature (°C)</th>
+                    </tr>
+                </thead>
+                <tbody id="temperatureData">
+                    <!-- Data will be populated here -->
+                </tbody>
+            </table>
+        </div>
+
+        <div id="detailsCard" class="card details-card">
+            <h3>Temperature Details</h3>
+            <div class="details-content">
+                <div class="detail-item">
+                    <h4>Date & Time</h4>
+                    <p id="detailTimestamp"></p>
+                </div>
+                <div class="detail-item">
+                    <h4>Temperature</h4>
+                    <p id="detailTemperature"></p>
+                </div>
+                <div class="detail-item">
+                    <h4>Additional Information</h4>
+                    <ul id="detailExtra">
+                        <li>Humidity: <span id="detailHumidity"></span></li>
+                        <li>Pressure: <span id="detailPressure"></span></li>
+                        <li>Weather: <span id="detailWeather"></span></li>
+                    </ul>
+                </div>
+            </div>
         </div>
-      </div>
-
-      <table>
-        <thead>
-          <tr>
-            <th>Timestamp</th>
-            <th>Temperature (°C)</th>
-          </tr>
-        </thead>
-        <tbody id="temperatureData">
-          {% for entry in temperature_data %}
-          <tr>
-            <td>{{ entry.timestamp }}</td>
-            <td>{{ entry.temperature }}</td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-
-      <div class="chart-container">
-        <canvas id="temperatureChart"></canvas>
-      </div>
-
-      <div style="text-align: center">
-        <button onclick="fetchTemperatureData()">Refresh Data</button>
-      </div>
     </div>
 
     <script>
-      let temperatureChart;
-
-      function updateChart(labels, temperatures) {
-        const ctx = document
-          .getElementById("temperatureChart")
-          .getContext("2d");
-
-        if (temperatureChart) {
-          temperatureChart.destroy(); // Destroy the old chart before updating
-        }
-
-        temperatureChart = new Chart(ctx, {
-          type: "line",
-          data: {
-            labels: labels,
-            datasets: [
-              {
-                label: "Temperature (°C)",
-                data: temperatures,
-                borderColor: "#0077b6",
-                backgroundColor: "rgba(0, 119, 182, 0.2)",
-                borderWidth: 2,
-                fill: true,
-                tension: 0.1,
-                pointRadius: 5,
-              },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                display: true,
-                title: {
-                  display: true,
-                  text: "Timestamp",
-                },
-              },
-              y: {
-                display: true,
-                title: {
-                  display: true,
-                  text: "Temperature (°C)",
-                },
-              },
-            },
-            plugins: {
-              title: {
-                display: false,
-              },
-            },
-          },
-        });
-      }
+        // Sample data - replace with your actual data
+        let temperatureData = [
+            { timestamp: '2024-03-01 10:00', temperature: 22.5, humidity: 45, pressure: 1013, weather: 'Clear' },
+            { timestamp: '2024-03-01 11:00', temperature: 23.1, humidity: 46, pressure: 1012, weather: 'Partly Cloudy' },
+            { timestamp: '2024-03-01 12:00', temperature: 24.2, humidity: 44, pressure: 1012, weather: 'Sunny' },
+            { timestamp: '2024-03-01 13:00', temperature: 25.0, humidity: 43, pressure: 1011, weather: 'Sunny' },
+            { timestamp: '2024-03-01 14:00', temperature: 24.8, humidity: 45, pressure: 1011, weather: 'Partly Cloudy' }
+        ];
 
-      function fetchTemperatureData() {
-        fetch("/api/temperature_data")
-          .then((response) => response.json())
-          .then((data) => {
-            const tableBody = document.getElementById("temperatureData");
-            tableBody.innerHTML = ""; // Clear the table before updating
+        let chart;
 
-            const labels = [];
-            const temperatures = [];
+        // Initialize the chart
+        function initChart(data) {
+            const ctx = document.getElementById('temperatureChart').getContext('2d');
+            
+            if (chart) {
+                chart.destroy();
+            }
 
-            data.forEach((entry) => {
-              const row = document.createElement("tr");
-              const timestampCell = document.createElement("td");
-              const tempCell = document.createElement("td");
+            chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(d => d.timestamp.split(' ')[1]),
+                    datasets: [{
+                        label: 'Temperature (°C)',
+                        data: data.map(d => d.temperature),
+                        borderColor: '#0077b6',
+                        backgroundColor: 'rgba(0, 119, 182, 0.1)',
+                        borderWidth: 2,
+                        pointRadius: 4,
+                        pointHoverRadius: 6,
+                        tension: 0.1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    onClick: (event, elements) => {
+                        if (elements.length > 0) {
+                            const index = elements[0].index;
+                            showDetails(data[index]);
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.1)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            });
+        }
 
-              timestampCell.textContent = entry.timestamp;
-              tempCell.textContent = entry.temperature;
+        // Update table with data
+        function updateTable(data) {
+            const tbody = document.getElementById('temperatureData');
+            tbody.innerHTML = '';
+            
+            data.forEach(entry => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${entry.timestamp}</td>
+                    <td>${entry.temperature}°C</td>
+                `;
+                row.onclick = () => showDetails(entry);
+                tbody.appendChild(row);
+            });
+        }
 
-              row.appendChild(timestampCell);
-              row.appendChild(tempCell);
-              tableBody.appendChild(row);
+        // Show details for selected temperature
+        function showDetails(entry) {
+            const detailsCard = document.getElementById('detailsCard');
+            document.getElementById('detailTimestamp').textContent = entry.timestamp;
+            document.getElementById('detailTemperature').textContent = `${entry.temperature}°C`;
+            document.getElementById('detailHumidity').textContent = `${entry.humidity}%`;
+            document.getElementById('detailPressure').textContent = `${entry.pressure} hPa`;
+            document.getElementById('detailWeather').textContent = entry.weather;
+            detailsCard.style.display = 'block';
 
-              labels.push(entry.timestamp);
-              temperatures.push(entry.temperature);
+            // Highlight selected row
+            const rows = document.querySelectorAll('#temperatureData tr');
+            rows.forEach(row => {
+                row.classList.remove('selected-row');
+                if (row.cells[0].textContent === entry.timestamp) {
+                    row.classList.add('selected-row');
+                }
             });
+        }
 
-            updateChart(labels, temperatures);
-          })
-          .catch((error) => console.error("Error fetching data:", error));
-      }
+        // Search functionality
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            const searchValue = e.target.value.toLowerCase();
+            const filteredData = temperatureData.filter(entry => 
+                entry.timestamp.toLowerCase().includes(searchValue)
+            );
+            initChart(filteredData);
+            updateTable(filteredData);
+            document.getElementById('detailsCard').style.display = 'none';
+        });
+
+        // Initialize the page
+        initChart(temperatureData);
+        updateTable(temperatureData);
+
+        // Optional: Fetch real data from API
+        function fetchTemperatureData() {
+            fetch('/api/temperature_data')
+                .then(response => response.json())
+                .then(data => {
+                    temperatureData = data;
+                    initChart(data);
+                    updateTable(data);
+                })
+                .catch(error => console.error('Error fetching data:', error));
+        }
 
-      // Fetch data when the page loads
-      fetchTemperatureData();
-      // Optionally, set up periodic data fetch
-      setInterval(fetchTemperatureData, 10000);
+        // Uncomment to enable periodic data fetch
+        setInterval(fetchTemperatureData, 10000);
     </script>
-  </body>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/temperature_data.json b/temperature_data.json
deleted file mode 100644
index 0637a08..0000000
--- a/temperature_data.json
+++ /dev/null
@@ -1 +0,0 @@
-[]
\ No newline at end of file