AIR QUALITY MONITOR

make this div ih the center not at the right. in btween

index.html

@@ -131,11 +131,39 @@
         </div>
       </div>
     </div>
+    <!-- Middle Column -->
+    <div class="lg:col-span-6 space-y-6">
+      <!-- Air Quality Card -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="md:col-span-2">
+          <air-quality-card></air-quality-card>
+        </div>
+      <!-- Gauges Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div id="gauge-co2" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-co" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-voc" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-smoke" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+      </div>
+
+      <!-- AQI Chart -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-xl font-bold flex items-center">
+            <i data-feather="bar-chart-2" class="mr-2"></i> AQI History
+          </h2>
+          <button id="exportDataBtn" class="text-sm bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg transition-all">
+            Export Data
+          </button>
+        </div>
+        <div class="h-64">
+          <canvas id="aqiHistoryChart"></canvas>
+        </div>
+      </div>
+    </div>
+
     <!-- Right Column -->
     <div class="lg:col-span-3 space-y-6">
-      <!-- Air Quality Card -->
-      <air-quality-card></air-quality-card>
-      
       <!-- Connection Status -->
 <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
         <h2 class="text-xl font-bold mb-4 flex items-center">