diff --git a/public/trends.html b/public/trends.html
index b704fc1..6478cbb 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -17,29 +17,25 @@
     <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
   </header>
 
-  <div class="page-container">
+  <div class="page-container trends">
     <h1>Trends</h1>
 
-    <!-- Timeframe slider -->
-    <div style="display:flex; align-items:center; margin-bottom:1rem;">
-      <input id="timeframe-slider" type="range" min="0" max="4" value="0" style="flex:1;">
-      <span id="timeframe-label" style="margin-left:1rem; white-space:nowrap;"></span>
+    <div class="trends-controls">
+      <input id="timeframe-slider" type="range" min="0" max="4" value="0">
+      <span id="timeframe-label"></span>
     </div>
 
-    <!-- Metric toggles -->
-    <div style="margin-bottom:1rem;">
+    <div class="trends-metrics">
       <label><input type="checkbox" name="metric" value="temperature" checked> Temperature</label>
       <label><input type="checkbox" name="metric" value="humidity"    checked> Humidity</label>
       <label><input type="checkbox" name="metric" value="heatIndex"   checked> Heat Index</label>
     </div>
 
-    <!-- Chart -->
-    <div id="chart-container">
+    <div class="chart-container">
       <canvas id="trend-chart"></canvas>
     </div>
 
-    <!-- Scrollable, sortable data table -->
-    <div id="trends-table-container">
+    <div class="table-wrapper">
       <table id="trends-table">
         <thead>
           <tr>
@@ -56,9 +52,7 @@
     </div>
   </div>
 
-  <!-- Server‐injected initial data -->
   <!--INITIAL_DATA-->
-
   <script src="/scripts/trends.js"></script>
 </body>
 </html>