From f930f268391a9d5888a4b7e4db88da58473ae056 Mon Sep 17 00:00:00 2001
From: chrisnov-it <contact@chrisnov.com>
Date: Tue, 23 Jun 2026 13:33:04 +0800
Subject: [PATCH] Add CLAUDE.md + dark mode sweep across all 12 remaining
 templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CLAUDE.md: project overview, architecture, conventions, key files
- Dark mode now covers: trading_bots, portfolio, backtesting, history,
  bot_detail, backtest_history, settings, notifications, profile,
  ramadan, forex, stocks — all 12 templates
- Consistent dark:bg-slate-800/700/900 + dark:text-gray-*/white patterns

Co-Authored-By: Claude <noreply@anthropic.com>
---
 CLAUDE.md                       | 65 +++++++++++++++++++++++++
 templates/backtest_history.html | 12 ++---
 templates/backtesting.html      | 40 ++++++++--------
 templates/bot_detail.html       | 28 +++++------
 templates/forex.html            | 26 +++++-----
 templates/history.html          | 26 +++++-----
 templates/notifications.html    |  6 +--
 templates/portfolio.html        | 34 ++++++-------
 templates/profile.html          | 24 +++++-----
 templates/ramadan.html          | 84 ++++++++++++++++-----------------
 templates/settings.html         | 46 +++++++++---------
 templates/stocks.html           | 26 +++++-----
 templates/trading_bots.html     | 78 +++++++++++++++---------------
 13 files changed, 280 insertions(+), 215 deletions(-)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..278c5f2
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,65 @@
+# CLAUDE.md — QuantumBotX
+
+## Project Overview
+AI-powered modular trading bot built with Python & Flask.
+Supports MetaTrader 5 + CCXT with backtesting, strategy testing, and web dashboard.
+
+## Architecture
+```
+Flask Web UI (Jinja2 + Tailwind CSS + Chart.js)
+    ↓
+API Routes (core/routes/ — 21 endpoints)
+    ↓
+Controller (core/bots/controller.py)
+    ↓
+TradingBot / CCXTTradingBot (core/bots/)
+    ↓
+23 Strategies (core/strategies/)
+    ↓
+BrokerFactory (core/brokers/broker_factory.py)
+    ↓
+10 Broker Adapters (MT5, Binance, cTrader, IBKR...)
+    ↓
+BrokerInterface (core/interfaces/broker_interface.py)
+```
+
+## Branches
+- `main` — MT5-only, stable, working
+- `refactor/universal-architecture` — active development, CCXT + broker-agnostic
+
+## Key Files
+| File | Purpose |
+|------|---------|
+| `run.py` | App entry point |
+| `core/bots/controller.py` | Bot lifecycle (start/stop/update) |
+| `core/brokers/broker_factory.py` | Broker instantiation |
+| `core/interfaces/broker_interface.py` | Broker abstraction contract |
+| `core/strategies/` | 23 trading strategies |
+| `core/backtesting/enhanced_engine.py` | Backtesting engine |
+| `templates/base.html` | Main layout (sidebar + header + dark mode) |
+| `static/js/main.js` | Dark mode toggle + notification system |
+
+## UI Conventions
+- Dark mode: Tailwind `class` strategy, localStorage `dark-mode` key
+- Icons: Font Awesome 6 via CDN
+- Charts: Chart.js via CDN
+- i18n: Custom system (ID/EN toggle in header)
+
+## Commands
+```bash
+python run.py              # Start dev server
+python testing/ccxt_smoke_test.py  # Test CCXT connection
+```
+
+## VPS / Deploy
+- Docker setup: `docker compose up` (Python 3.13)
+- No automated CI/CD yet (unlike `landing` repo)
+
+## Docs (excluded from git — in .gitignore)
+- `TASKS.md` — sprint tasks
+- `MEMORY.md` — product memory
+- `WALKTHROUGH.md` — daily guide
+- `RETROSPECT.md` — decision log
+
+## Memory
+Stored at `C:\Users\umeck\.claude\projects\D--dev-chrisnov-it-chrisnov-landing\memory\quantumbotx\`
diff --git a/templates/backtest_history.html b/templates/backtest_history.html
index f2cbb85..0ed232c 100644
--- a/templates/backtest_history.html
+++ b/templates/backtest_history.html
@@ -3,12 +3,12 @@
 {% block title %}Backtest History{% endblock %}
 
 {% block content %}
-<h2 class="text-2xl font-bold text-gray-800 mb-4">Riwayat Hasil Backtest</h2>
-<p class="text-gray-600 mb-6">Daftar semua simulasi backtest yang telah dijalankan dan disimpan.</p>
+<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Riwayat Hasil Backtest</h2>
+<p class="text-gray-600 dark:text-gray-300 mb-6">Daftar semua simulasi backtest yang telah dijalankan dan disimpan.</p>
 
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Kolom Daftar Riwayat -->
-    <div class="lg:col-span-1 bg-white p-4 rounded-lg shadow">
+    <div class="lg:col-span-1 bg-white dark:bg-slate-800 p-4 rounded-lg shadow dark:shadow-slate-900/50">
         <h3 class="font-bold text-lg mb-2">Daftar Pengujian</h3>
         <div id="history-list-container" class="max-h-[600px] overflow-y-auto">
             <!-- Daftar akan dimuat di sini oleh JavaScript -->
@@ -17,10 +17,10 @@
     </div>
 
     <!-- Kolom Detail Hasil -->
-    <div id="detail-container" class="lg:col-span-2 bg-white p-6 rounded-lg shadow">
+    <div id="detail-container" class="lg:col-span-2 bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
         <div id="detail-view" class="hidden">
             <h3 class="text-xl font-bold mb-2">Detail Hasil Backtest</h3>
-            <p class="text-sm text-gray-500 mb-4">ID: <span id="detail-id"></span> | Tanggal: <span id="detail-timestamp"></span></p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">ID: <span id="detail-id"></span> | Tanggal: <span id="detail-timestamp"></span></p>
             
             <div id="detail-summary" class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"></div>
             
@@ -31,7 +31,7 @@
             <div id="detail-params"></div>
             <div id="detail-log"></div>
         </div>
-        <div id="detail-placeholder" class="text-center text-gray-500 py-10">
+        <div id="detail-placeholder" class="text-center text-gray-500 dark:text-gray-400 py-10">
             <i class="fas fa-search-plus text-4xl mb-4"></i>
             <p>Pilih salah satu hasil dari daftar di samping untuk melihat detailnya.</p>
         </div>
diff --git a/templates/backtesting.html b/templates/backtesting.html
index 5fe92ed..b26848a 100644
--- a/templates/backtesting.html
+++ b/templates/backtesting.html
@@ -6,23 +6,23 @@
 
 {% block content %}
 <div class="flex justify-between items-center mb-4">
-    <h2 class="text-2xl font-bold text-gray-800" data-i18n="nav.backtest">Strategy Backtester</h2>
+    <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="nav.backtest">Strategy Backtester</h2>
     <div class="flex space-x-2">
-        <a href="{{ url_for('backtest_history_page') }}" class="bg-gray-200 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-300">
+        <a href="{{ url_for('backtest_history_page') }}" class="bg-gray-200 dark:bg-slate-700 text-gray-800 dark:text-white py-2 px-4 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-slate-600">
             <i class="fas fa-history mr-2"></i><span data-i18n="action.view">Lihat Riwayat</span>
         </a>
     </div>
 </div>
 
 <!-- Enhanced Engine Info -->
-<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+<div class="mb-6 p-4 bg-blue-50 dark:bg-slate-700 border border-blue-200 dark:border-slate-600 rounded-lg">
     <div class="flex items-start">
         <div class="flex-shrink-0">
             <i class="fas fa-rocket text-blue-600 text-xl"></i>
         </div>
         <div class="ml-3">
-            <h3 class="text-sm font-medium text-blue-800" data-i18n="backtest.enhanced_engine_active">🚀 Enhanced Backtesting Engine Active</h3>
-            <div class="mt-1 text-sm text-blue-700">
+            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300" data-i18n="backtest.enhanced_engine_active">🚀 Enhanced Backtesting Engine Active</h3>
+            <div class="mt-1 text-sm text-blue-700 dark:text-blue-200">
                 <p data-i18n="backtest.includes">Your backtesting now includes:</p>
                 <ul class="mt-1 list-disc list-inside text-xs space-y-1">
                     <li>✅ <strong data-i18n="backtest.realistic_spread">Realistic spread costs</strong> - <span data-i18n="backtest.actual_costs">Actual trading costs deducted</span></li>
@@ -37,41 +37,41 @@
 
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Kolom Konfigurasi -->
-    <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow">
+    <div class="lg:col-span-1 bg-white dark:bg-slate-800 p-6 rounded-lg shadow">
         <form id="backtest-form">
             <div class="space-y-4">
                 <div>
-                    <label for="strategy-select" class="block text-sm font-medium text-gray-700" data-i18n="label.strategy">Pilih Strategi</label>
-                    <select id="strategy-select" name="strategy" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></select>
+                    <label for="strategy-select" class="block text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.strategy">Pilih Strategi</label>
+                    <select id="strategy-select" name="strategy" class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm"></select>
                 </div>
                 <div>
-                    <label for="data-file" class="block text-sm font-medium text-gray-700" data-i18n="backtest.upload_data">Unggah Data Historis (CSV)</label>
-                    <input type="file" id="data-file" name="file" accept=".csv" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" required>
+                    <label for="data-file" class="block text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="backtest.upload_data">Unggah Data Historis (CSV)</label>
+                    <input type="file" id="data-file" name="file" accept=".csv" class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 dark:file:bg-slate-600 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-slate-500" required>
                 </div>
 
                 <!-- Risk Management Inputs (Enhanced Engine) -->
-                <div class="grid grid-cols-2 gap-4 pt-4 border-t">
+                <div class="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-slate-700">
                     <div>
-                        <label for="sl_atr_multiplier" class="block text-sm font-medium text-gray-700">
+                        <label for="sl_atr_multiplier" class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                             <span data-i18n="label.sl_atr">SL (ATR Multiplier)</span> 
                             <span class="text-xs text-blue-600" data-i18n="backtest.enhanced">🚀 Enhanced</span>
                         </label>
                         <input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" min="0.5" max="5.0" 
-                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                        <p class="text-xs text-gray-500 mt-1" data-i18n="backtest.dynamic_sl">Dynamic SL based on volatility</p>
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="backtest.dynamic_sl">Dynamic SL based on volatility</p>
                     </div>
                     <div>
-                        <label for="tp_atr_multiplier" class="block text-sm font-medium text-gray-700">
+                        <label for="tp_atr_multiplier" class="block text-sm font-medium text-gray-700 dark:text-gray-200">
                             <span data-i18n="label.tp_atr">TP (ATR Multiplier)</span> 
                             <span class="text-xs text-blue-600" data-i18n="backtest.enhanced">🚀 Enhanced</span>
                         </label>
                         <input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" min="1.0" max="10.0" 
-                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                        <p class="text-xs text-gray-500 mt-1" data-i18n="backtest.dynamic_tp">Dynamic TP based on volatility</p>
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="backtest.dynamic_tp">Dynamic TP based on volatility</p>
                     </div>
                 </div>
 
-                <div id="params-container" class="space-y-4 pt-4 border-t">
+                <div id="params-container" class="space-y-4 pt-4 border-t border-gray-200 dark:border-slate-700">
                     <!-- Parameter akan dimuat di sini -->
                     <span data-i18n="bots.strategy_params_loaded">Parameter strategi akan dimuat di sini</span>
                 </div>
@@ -83,7 +83,7 @@
     </div>
 
     <!-- Kolom Hasil -->
-    <div id="results-container" class="lg:col-span-2 bg-white p-6 rounded-lg shadow hidden">
+    <div id="results-container" class="lg:col-span-2 bg-white dark:bg-slate-800 p-6 rounded-lg shadow hidden">
         <h3 class="text-xl font-bold mb-4" data-i18n="backtest.results">Hasil Backtest</h3>
         <div id="results-summary" class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"></div>
         <div class="mb-6">
@@ -93,7 +93,7 @@
     </div>
     <div id="loading-spinner" class="lg:col-span-2 flex items-center justify-center hidden">
         <i class="fas fa-spinner fa-spin text-blue-500 text-4xl"></i>
-        <p class="ml-4 text-gray-600" data-i18n="backtest.running">Menjalankan simulasi...</p>
+        <p class="ml-4 text-gray-600 dark:text-gray-300" data-i18n="backtest.running">Menjalankan simulasi...</p>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/bot_detail.html b/templates/bot_detail.html
index 7052768..39d6baa 100644
--- a/templates/bot_detail.html
+++ b/templates/bot_detail.html
@@ -6,39 +6,39 @@
 
 {% block content %}
 <!-- Header Halaman -->
-<div class="flex justify-between items-start mb-6 bg-white p-4 rounded-lg shadow">
+<div class="flex justify-between items-start mb-6 bg-white dark:bg-slate-800 p-4 rounded-lg shadow dark:shadow-slate-900/50">
     <div>
-        <h2 id="bot-name-header" class="text-2xl font-bold text-gray-800">Memuat...</h2>
-        <p id="bot-market-header" class="text-gray-600">Memuat detail bot...</p>
+        <h2 id="bot-name-header" class="text-2xl font-bold text-gray-800 dark:text-white">Memuat...</h2>
+        <p id="bot-market-header" class="text-gray-600 dark:text-gray-300">Memuat detail bot...</p>
     </div>
-    <div id="bot-status-badge" class="px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-800">Memuat Status...</div>
+    <div id="bot-status-badge" class="px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-800 dark:text-white">Memuat Status...</div>
 </div>
 
 <!-- Layout Grid Utama -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Kolom Kiri (Log Aktivitas) -->
-    <div class="lg:col-span-2 bg-white rounded-lg shadow">
-        <div class="p-4 border-b"><h3 class="text-lg font-semibold text-gray-800">Log Aktivitas</h3></div>
+    <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
+        <div class="p-4 border-b dark:border-slate-700"><h3 class="text-lg font-semibold text-gray-800 dark:text-white">Log Aktivitas</h3></div>
         <div id="history-log-container" class="overflow-y-auto" style="max-height: 60vh;">
-            <p class="text-center text-gray-500 p-4">Memuat riwayat...</p>
+            <p class="text-center text-gray-500 dark:text-gray-400 p-4">Memuat riwayat...</p>
         </div>
     </div>
 
     <!-- Kolom Kanan (Info & Analisis) -->
     <div class="space-y-6">
         
-        <div class="bg-white rounded-lg shadow p-4">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">Parameter</h3>
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-4">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-2 mb-3">Parameter</h3>
             <div id="bot-parameters-container" class="text-sm space-y-2">
-                <p class="text-center text-gray-500">Memuat...</p>
+                <p class="text-center text-gray-500 dark:text-gray-400">Memuat...</p>
             </div>
         </div>
-        <div class="bg-white rounded-lg shadow p-4">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">Analisis Real-Time</h3>
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-4">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-2 mb-3">Analisis Real-Time</h3>
             <div id="bot-analysis-container" class="text-sm space-y-2">
-                <p class="text-center text-gray-500">Memuat...</p>
+                <p class="text-center text-gray-500 dark:text-gray-400">Memuat...</p>
             </div>
-            <div id="analysis-signal" class="mt-4 text-center font-bold text-lg p-2 rounded-md bg-gray-100 text-gray-600">-</div>                         
+            <div id="analysis-signal" class="mt-4 text-center font-bold text-lg p-2 rounded-md bg-gray-100 text-gray-600 dark:text-gray-300">-</div>                         
         </div>
     </div>
 </div>
diff --git a/templates/forex.html b/templates/forex.html
index 1a28225..1c31067 100644
--- a/templates/forex.html
+++ b/templates/forex.html
@@ -7,35 +7,35 @@
 {% block content %}
 <div class="flex justify-between items-center mb-6">
     <div>
-        <h2 class="text-2xl font-bold text-gray-800" data-i18n="market.forex_title">Pasar Forex</h2>
-        <p class="text-gray-600" data-i18n="market.forex_description">Data harga real-time dari pasar valuta asing.</p>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="market.forex_title">Pasar Forex</h2>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="market.forex_description">Data harga real-time dari pasar valuta asing.</p>
     </div>
 </div>
 
-<div class="bg-white rounded-lg shadow overflow-x-auto">
+<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 overflow-x-auto">
     <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.pair">Pasangan</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.bid_price">Harga Bid</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.ask_price">Harga Ask</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.spread">Spread</th>
-                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.pair">Pasangan</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.bid_price">Harga Bid</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.ask_price">Harga Ask</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.spread">Spread</th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
             </tr>
         </thead>
-        <tbody id="forex-table-body" class="bg-white divide-y divide-gray-200">
-            <tr><td colspan="5" class="p-4 text-center text-gray-500" data-i18n="market.loading">Memuat data forex...</td></tr>
+        <tbody id="forex-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200">
+            <tr><td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="market.loading">Memuat data forex...</td></tr>
         </tbody>
     </table>
 </div>
 
 <!-- Modal -->
 <div id="forex-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
-    <div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white">
+    <div class="relative top-20 mx-auto p-5 border dark:border-slate-700 w-1/2 shadow-lg dark:shadow-slate-900/50 rounded-md bg-white dark:bg-slate-800">
         <div class="mt-3 text-center">
-            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"></h3>
+            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"></h3>
             <div class="mt-2 px-7 py-3">
-                <p class="text-sm text-gray-500" id="modal-content"></p>
+                <p class="text-sm text-gray-500 dark:text-gray-400" id="modal-content"></p>
             </div>
             <div class="items-center px-4 py-3">
                 <button id="close-modal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300">
diff --git a/templates/history.html b/templates/history.html
index a79c34d..e94b8be 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -7,26 +7,26 @@
 {% block content %}
 <div class="flex justify-between items-center mb-6">
     <div>
-        <h2 class="text-2xl font-bold text-gray-800" data-i18n="history.title">Riwayat Transaksi Global</h2>
-        <p class="text-gray-600" data-i18n="history.description">Semua transaksi yang telah ditutup dari akun MetaTrader 5.</p>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="history.title">Riwayat Transaksi Global</h2>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="history.description">Semua transaksi yang telah ditutup dari akun MetaTrader 5.</p>
     </div>
 </div>
 
-<div class="bg-white rounded-lg shadow overflow-hidden">
-    <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
+<div class="bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+        <thead class="bg-gray-50 dark:bg-slate-700">
             <tr>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('symbol')"><span data-i18n="history.symbol">Simbol</span> <span id="symbol-sort-icon"></span></th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('type')"><span data-i18n="history.type">Tipe</span> <span id="type-sort-icon"></span></th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('volume')"><span data-i18n="history.volume">Volume</span> <span id="volume-sort-icon"></span></th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('profit')"><span data-i18n="history.profit">Profit</span> <span id="profit-sort-icon"></span></th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('time')"><span data-i18n="history.close_time">Waktu Penutupan</span> <span id="time-sort-icon"></span></th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('magic')"><span data-i18n="history.magic">Magic Number</span> <span id="magic-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('symbol')"><span data-i18n="history.symbol">Simbol</span> <span id="symbol-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('type')"><span data-i18n="history.type">Tipe</span> <span id="type-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('volume')"><span data-i18n="history.volume">Volume</span> <span id="volume-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('profit')"><span data-i18n="history.profit">Profit</span> <span id="profit-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('time')"><span data-i18n="history.close_time">Waktu Penutupan</span> <span id="time-sort-icon"></span></th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('magic')"><span data-i18n="history.magic">Magic Number</span> <span id="magic-sort-icon"></span></th>
             </tr>
         </thead>
-        <tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
+        <tbody id="history-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
             <!-- Data akan dimuat di sini oleh JavaScript -->
-            <tr><td colspan="6" class="p-4 text-center text-gray-500" data-i18n="history.loading">Memuat riwayat...</td></tr>
+            <tr><td colspan="6" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="history.loading">Memuat riwayat...</td></tr>
         </tbody>
     </table>
 </div>
diff --git a/templates/notifications.html b/templates/notifications.html
index 27bcd22..7f7e7e3 100644
--- a/templates/notifications.html
+++ b/templates/notifications.html
@@ -5,11 +5,11 @@
 {% block title %}Notifikasi{% endblock %}
 
 {% block content %}
-<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="nav.notifications">Notifikasi</h2>
-<div class="bg-white rounded-lg shadow">
+<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="nav.notifications">Notifikasi</h2>
+<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
     <!-- Kontainer ini akan diisi oleh JavaScript -->
     <div id="notifications-container" class="divide-y divide-gray-200">
-        <p class="p-6 text-center text-gray-500" data-i18n="notifications.loading">Memuat notifikasi...</p>
+        <p class="p-6 text-center text-gray-500 dark:text-gray-400" data-i18n="notifications.loading">Memuat notifikasi...</p>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/portfolio.html b/templates/portfolio.html
index 1fc9bec..fb1b474 100644
--- a/templates/portfolio.html
+++ b/templates/portfolio.html
@@ -6,8 +6,8 @@
 {% block content %}
 <div class="flex justify-between items-center mb-6">
     <div>
-        <h2 class="text-2xl font-bold text-gray-800" data-i18n="portfolio.title">Portfolio Real-Time</h2>
-        <p class="text-gray-600" data-i18n="portfolio.description">Posisi trading yang sedang terbuka di akun broker aktif.</p>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="portfolio.title">Portfolio Real-Time</h2>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="portfolio.description">Posisi trading yang sedang terbuka di akun broker aktif.</p>
     </div>
     <div id="portfolio-summary" class="text-right">
         <!-- Summary akan dimuat di sini -->
@@ -17,33 +17,33 @@
 <!-- Grid untuk menampung dua chart -->
 <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
     <!-- Chart P/L (lebih lebar) -->
-    <div class="lg:col-span-3 bg-white rounded-lg shadow p-4">
-        <h3 class="text-lg font-semibold text-gray-800 mb-2" data-i18n="portfolio.pnl_chart">Grafik Profit/Loss Terbuka (Real-Time)</h3>
+    <div class="lg:col-span-3 bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" data-i18n="portfolio.pnl_chart">Grafik Profit/Loss Terbuka (Real-Time)</h3>
         <div style="height: 250px;"><canvas id="pnlChart"></canvas></div>
     </div>
     
     <!-- Chart Alokasi Aset (lebih kecil) -->
-    <div class="lg:col-span-2 bg-white rounded-lg shadow p-4">
-        <h3 class="text-lg font-semibold text-gray-800 mb-2" data-i18n="portfolio.allocation_chart">Alokasi Aset</h3>
+    <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" data-i18n="portfolio.allocation_chart">Alokasi Aset</h3>
         <div style="height: 250px;"><canvas id="assetAllocationChart"></canvas></div>
     </div>
 </div>
 
 <!-- Tabel Posisi Terbuka -->
-<table class="min-w-full bg-white rounded-lg shadow overflow-hidden">
-    <thead class="bg-gray-50">
+<table class="min-w-full bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
+    <thead class="bg-gray-50 dark:bg-slate-700">
         <tr>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.symbol">Simbol</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.type">Tipe</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.volume">Volume</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.open_price">Harga Buka</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Price</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.profit_loss">Profit/Loss</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.magic">Magic Number</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.symbol">Simbol</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.type">Tipe</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.volume">Volume</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.open_price">Harga Buka</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Current Price</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.profit_loss">Profit/Loss</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.magic">Magic Number</th>
         </tr>
     </thead>
-    <tbody id="portfolio-table-body" class="bg-white divide-y divide-gray-200">
-        <tr><td colspan="7" class="p-4 text-center text-gray-500" data-i18n="portfolio.loading">Memuat posisi terbuka...</td></tr>
+    <tbody id="portfolio-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+        <tr><td colspan="7" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="portfolio.loading">Memuat posisi terbuka...</td></tr>
     </tbody>
 </table>
 
diff --git a/templates/profile.html b/templates/profile.html
index 6f2a8bc..19f3d3d 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -5,34 +5,34 @@
 {% block title %}Profil{% endblock %}
 
 {% block content %}
-<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="profile.my_profile">Profil Saya</h2>
+<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="profile.my_profile">Profil Saya</h2>
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <div class="lg:col-span-1">
-        <div class="bg-white rounded-lg shadow p-6">
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
             <div class="flex flex-col items-center">
                 <div class="w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-4xl font-bold mb-4">RC</div>
-                <h3 id="profile-display-name" class="text-xl font-bold text-gray-800" data-i18n="profile.loading">Memuat...</h3>
+                <h3 id="profile-display-name" class="text-xl font-bold text-gray-800 dark:text-white" data-i18n="profile.loading">Memuat...</h3>
                 <p id="profile-join-date" class="text-xs text-gray-400 mt-2" data-i18n="profile.joined_since">Bergabung sejak: Juli 2025</p>
             </div>
         </div>
     </div>
     <div class="lg:col-span-2">
-        <div class="bg-white rounded-lg shadow">
-            <div class="p-6 border-b">
-                <h3 class="text-lg font-semibold text-gray-800" data-i18n="settings.profile">Profil</h3>
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
+            <div class="p-6 border-b dark:border-slate-700">
+                <h3 class="text-lg font-semibold text-gray-800 dark:text-white" data-i18n="settings.profile">Profil</h3>
             </div>
             <form id="profile-form" class="p-6 space-y-4">
                 <div>
-                    <label for="profile-name" class="text-sm font-medium text-gray-700" data-i18n="label.full_name">Nama Lengkap</label>
-                    <input type="text" id="profile-name" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
+                    <label for="profile-name" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.full_name">Nama Lengkap</label>
+                    <input type="text" id="profile-name" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500" required>
                 </div>
                 <div>
-                    <label for="profile-email" class="text-sm font-medium text-gray-700" data-i18n="label.email">Alamat Email</label>
-                    <input type="email" id="profile-email" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required readonly>
+                    <label for="profile-email" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.email">Alamat Email</label>
+                    <input type="email" id="profile-email" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500" required readonly>
                 </div>
                 <div>
-                    <label for="profile-password" class="text-sm font-medium text-gray-700" data-i18n="label.password">Ganti Password (kosongkan jika tidak ingin diubah)</label>
-                    <input type="password" id="profile-password" data-i18n-placeholder="profile.password_placeholder" placeholder="••••••••" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    <label for="profile-password" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.password">Ganti Password (kosongkan jika tidak ingin diubah)</label>
+                    <input type="password" id="profile-password" data-i18n-placeholder="profile.password_placeholder" placeholder="••••••••" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
                 </div>
                 <button type="submit" id="save-profile-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700" data-i18n="msg.save_changes">Simpan Perubahan</button>
             </form>
diff --git a/templates/ramadan.html b/templates/ramadan.html
index 1861137..cf29c16 100644
--- a/templates/ramadan.html
+++ b/templates/ramadan.html
@@ -7,8 +7,8 @@
 <div class="container mx-auto px-4 py-8">
     <!-- Header -->
     <div class="mb-8 text-center">
-        <h1 class="text-3xl font-bold text-gray-800 mb-2" data-i18n="ramadan.title">🌙 Ramadan Trading Mode</h1>
-        <p class="text-gray-600" data-i18n="ramadan.subtitle">Bulan suci dengan fitur trading yang menghormati ibadah puasa</p>
+        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-2" data-i18n="ramadan.title">🌙 Ramadan Trading Mode</h1>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="ramadan.subtitle">Bulan suci dengan fitur trading yang menghormati ibadah puasa</p>
         <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
             <p class="text-blue-800">
                 <i class="fas fa-info-circle"></i> <span data-i18n="ramadan.info">Mode ini aktif secara otomatis selama bulan Ramadan dan akan menyesuaikan pengaturan trading Anda untuk menghormati waktu ibadah. Anda tidak perlu mengaktifkannya secara manual.</span>
@@ -17,24 +17,24 @@
     </div>
 
     <!-- Current Status Card -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
         <div class="flex justify-between items-center mb-4">
-            <h2 class="text-xl font-semibold text-gray-800" data-i18n="ramadan.status">Status Ramadan</h2>
+            <h2 class="text-xl font-semibold text-gray-800 dark:text-white" data-i18n="ramadan.status">Status Ramadan</h2>
             <span id="ramadan-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800" data-i18n="ramadan.loading">
                 Loading...
             </span>
         </div>
         
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="border rounded-lg p-4">
-                <div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.period">Periode Ramadan</div>
+            <div class="border dark:border-slate-700 rounded-lg p-4">
+                <div class="text-sm text-gray-500 dark:text-gray-400 mb-1" data-i18n="ramadan.period">Periode Ramadan</div>
                 <div id="ramadan-period" class="text-lg font-semibold text-blue-600" data-i18n="ramadan.loading">
                     Loading...
                 </div>
             </div>
             
-            <div class="border rounded-lg p-4">
-                <div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.greeting">Salam Ramadan</div>
+            <div class="border dark:border-slate-700 rounded-lg p-4">
+                <div class="text-sm text-gray-500 dark:text-gray-400 mb-1" data-i18n="ramadan.greeting">Salam Ramadan</div>
                 <div id="ramadan-greeting" class="text-lg font-semibold text-green-600" data-i18n="ramadan.loading">
                     Loading...
                 </div>
@@ -43,80 +43,80 @@
     </div>
 
     <!-- Iftar Countdown -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.iftar_countdown">⏱️ Hitung Mundur Iftar</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
+        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.iftar_countdown">⏱️ Hitung Mundur Iftar</h2>
         
         <div class="flex justify-center items-center">
             <div class="text-center mx-4">
-                <div id="iftar-hours" class="text-4xl font-bold text-gray-800">00</div>
-                <div class="text-sm text-gray-500" data-i18n="ramadan.hours">Jam</div>
+                <div id="iftar-hours" class="text-4xl font-bold text-gray-800 dark:text-white">00</div>
+                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.hours">Jam</div>
             </div>
             <div class="text-4xl font-bold text-gray-300">:</div>
             <div class="text-center mx-4">
-                <div id="iftar-minutes" class="text-4xl font-bold text-gray-800">00</div>
-                <div class="text-sm text-gray-500" data-i18n="ramadan.minutes">Menit</div>
+                <div id="iftar-minutes" class="text-4xl font-bold text-gray-800 dark:text-white">00</div>
+                <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.minutes">Menit</div>
             </div>
         </div>
         
-        <div class="text-center mt-4 text-gray-600">
+        <div class="text-center mt-4 text-gray-600 dark:text-gray-300">
             <span data-i18n="ramadan.until">Sampai</span> <span id="next-prayer" data-i18n="ramadan.iftar">Iftar</span>
         </div>
     </div>
 
     <!-- Trading Adjustments -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.trading_adjustments">⚙️ Penyesuaian Trading</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
+        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.trading_adjustments">⚙️ Penyesuaian Trading</h2>
         
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.fasting_times">Waktu Istirahat Puasa</h3>
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.fasting_times">Waktu Istirahat Puasa</h3>
                 <div class="space-y-3">
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.suhoor">Sahur</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.suhoor_time">03:30 - 05:00 WIB</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.suhoor_time">03:30 - 05:00 WIB</div>
                         </div>
                     </div>
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-orange-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.iftar_time">Iftar</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.iftar_time_range">18:00 - 19:30 WIB</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.iftar_time_range">18:00 - 19:30 WIB</div>
                         </div>
                     </div>
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-purple-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.tarawih">Tarawih</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.tarawih_time">20:00 - 21:30 WIB</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.tarawih_time">20:00 - 21:30 WIB</div>
                         </div>
                     </div>
                 </div>
             </div>
             
             <div>
-                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.risk_adjustments">Penyesuaian Risiko</h3>
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.risk_adjustments">Penyesuaian Risiko</h3>
                 <div class="space-y-3">
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.reduced_risk_mode">Reduced Risk Mode</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.reduced_risk_description">20% pengurangan risiko selama puasa</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.reduced_risk_description">20% pengurangan risiko selama puasa</div>
                         </div>
                     </div>
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-blue-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.patience_mode">Patience Mode</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.patience_mode_description">Fokus pada kualitas bukan kuantitas</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.patience_mode_description">Fokus pada kualitas bukan kuantitas</div>
                         </div>
                     </div>
                     <div class="flex items-center">
                         <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
                         <div>
                             <div class="font-medium" data-i18n="ramadan.optimal_hours">Optimal Hours</div>
-                            <div class="text-sm text-gray-500" data-i18n="ramadan.optimal_hours_time">22:00 - 03:00 WIB</div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.optimal_hours_time">22:00 - 03:00 WIB</div>
                         </div>
                     </div>
                 </div>
@@ -125,32 +125,32 @@
     </div>
 
     <!-- Zakat Calculator -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.zakat_calculator">💰 Kalkulator Zakat Trading</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
+        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.zakat_calculator">💰 Kalkulator Zakat Trading</h2>
         
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_information">Informasi Zakat</h3>
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.zakat_information">Informasi Zakat</h3>
                 <div class="space-y-3">
-                    <div class="border rounded-lg p-3">
-                        <div class="text-sm text-gray-500" data-i18n="ramadan.gold_nisab">Nisab Emas</div>
+                    <div class="border dark:border-slate-700 rounded-lg p-3">
+                        <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.gold_nisab">Nisab Emas</div>
                         <div class="text-lg font-semibold">85 gram</div>
                     </div>
-                    <div class="border rounded-lg p-3">
-                        <div class="text-sm text-gray-500" data-i18n="ramadan.silver_nisab">Nisab Perak</div>
+                    <div class="border dark:border-slate-700 rounded-lg p-3">
+                        <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.silver_nisab">Nisab Perak</div>
                         <div class="text-lg font-semibold">595 gram</div>
                     </div>
-                    <div class="border rounded-lg p-3">
-                        <div class="text-sm text-gray-500" data-i18n="ramadan.zakat_percentage">Persentase Zakat</div>
+                    <div class="border dark:border-slate-700 rounded-lg p-3">
+                        <div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.zakat_percentage">Persentase Zakat</div>
                         <div class="text-lg font-semibold">2.5%</div>
                     </div>
                 </div>
             </div>
             
             <div>
-                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_reminder">Pengingat Zakat</h3>
-                <div class="border rounded-lg p-4 bg-blue-50">
-                    <p class="text-gray-700">
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.zakat_reminder">Pengingat Zakat</h3>
+                <div class="border dark:border-slate-700 rounded-lg p-4 bg-blue-50">
+                    <p class="text-gray-700 dark:text-gray-200">
                         <span data-i18n="ramadan.zakat_trading_reminder">Zakat perdagangan: 2.5% dari profit trading selama 1 tahun hijriah. Jangan lupa menghitung zakat dari profit trading Anda selama Ramadan.</span>
                     </p>
                 </div>
@@ -159,11 +159,11 @@
     </div>
 
     <!-- Patience Reminder -->
-    <div class="bg-white rounded-lg shadow-md p-6">
-        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.patience_reminder">🧘‍♂️ Pengingat Kesabaran</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6">
+        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.patience_reminder">🧘‍♂️ Pengingat Kesabaran</h2>
         
-        <div class="border rounded-lg p-6 bg-green-50 text-center">
-            <div id="patience-reminder" class="text-lg text-gray-700 italic" data-i18n="ramadan.loading">
+        <div class="border dark:border-slate-700 rounded-lg p-6 bg-green-50 text-center">
+            <div id="patience-reminder" class="text-lg text-gray-700 dark:text-gray-200 italic" data-i18n="ramadan.loading">
                 Loading...
             </div>
         </div>
@@ -185,7 +185,7 @@ function updateRamadanStatus(status) {
         periodElement.textContent = `${status.start_date} sampai ${status.end_date}`;
         greetingElement.textContent = status.greeting;
     } else {
-        statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
+        statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:text-white';
         statusElement.textContent = 'Tidak Aktif';
         periodElement.textContent = 'Bukan periode Ramadan';
         greetingElement.textContent = 'Saatnya berpuasa, saatnya trading dengan berkah';
diff --git a/templates/settings.html b/templates/settings.html
index bebfa07..6c9c652 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -5,38 +5,38 @@
 {% block title %}Pengaturan{% endblock %}
 
 {% block content %}
-<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="settings.title">Pengaturan</h2>
+<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="settings.title">Pengaturan</h2>
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <div class="lg:col-span-2 space-y-6">
-        <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="profile-title" data-i18n="settings.profile">Profil</h3>
+        <div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="profile-title" data-i18n="settings.profile">Profil</h3>
             <div class="space-y-4">
                 <div>
-                    <label class="text-sm font-medium text-gray-700" id="full-name-label" data-i18n="label.full_name">Nama Lengkap</label>
-                    <input type="text" value="Reynov Christian" id="full-name-input" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="full-name-label" data-i18n="label.full_name">Nama Lengkap</label>
+                    <input type="text" value="Reynov Christian" id="full-name-input" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
                 </div>
                 <div>
-                    <label class="text-sm font-medium text-gray-700" id="email-label" data-i18n="label.email">Alamat Email</label>
-                    <input type="email" value="contact@chrisnov.com" id="email-input" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm" readonly>
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="email-label" data-i18n="label.email">Alamat Email</label>
+                    <input type="email" value="contact@chrisnov.com" id="email-input" class="mt-1 block w-full px-3 py-2 bg-gray-100 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm" readonly>
                 </div>
                 <button id="save-profile-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700" data-i18n="msg.save_changes">Simpan Perubahan</button>
             </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="preferences-title" data-i18n="settings.preferences">Preferensi</h3>
+        <div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="preferences-title" data-i18n="settings.preferences">Preferensi</h3>
             <div class="space-y-4">
                 <div>
-                    <label class="text-sm font-medium text-gray-700" id="language-label" data-i18n="settings.language">Bahasa</label>
-                    <select id="language-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="language-label" data-i18n="settings.language">Bahasa</label>
+                    <select id="language-select" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
                         <option value="id" data-i18n="settings.indonesian">Indonesia</option>
                         <option value="en" data-i18n="settings.english">English</option>
                     </select>
-                    <p class="text-xs text-gray-500 mt-1">Application language settings</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Application language settings</p>
                 </div>
                 <div>
-                    <label class="text-sm font-medium text-gray-700" id="theme-label" data-i18n="settings.theme">Tema</label>
-                    <select id="theme-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="theme-label" data-i18n="settings.theme">Tema</label>
+                    <select id="theme-select" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
                         <option value="light" data-i18n="settings.light">Terang</option>
                         <option value="dark" data-i18n="settings.dark">Gelap (Segera Hadir)</option>
                     </select>
@@ -45,8 +45,8 @@
             </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="api-keys-title" data-i18n="settings.api_keys">API Keys Bursa</h3>
+        <div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="api-keys-title" data-i18n="settings.api_keys">API Keys Bursa</h3>
             <div class="space-y-4">
                 <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                     <div class="flex">
@@ -60,7 +60,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="text-sm text-gray-600" id="api-placeholder-text" data-i18n="settings.api_placeholder">
+                <div class="text-sm text-gray-600 dark:text-gray-300" id="api-placeholder-text" data-i18n="settings.api_placeholder">
                     Fitur ini akan tersedia di QuantumBotX API versi mendatang.
                 </div>
             </div>
@@ -68,23 +68,23 @@
     </div>
 
     <div class="lg:col-span-1 space-y-6">
-        <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="quick-settings-title" data-i18n="settings.quick_settings">Pengaturan Cepat</h3>
+        <div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="quick-settings-title" data-i18n="settings.quick_settings">Pengaturan Cepat</h3>
             <div class="space-y-4">
                 <div class="flex items-center justify-between">
-                    <span class="text-sm text-gray-700" id="notifications-label" data-i18n="settings.email_notifications">Notifikasi Email</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-200" id="notifications-label" data-i18n="settings.email_notifications">Notifikasi Email</span>
                     <input type="checkbox" id="email-notifications" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                 </div>
                 <div class="flex items-center justify-between">
-                    <span class="text-sm text-gray-700" id="auto-update-label" data-i18n="settings.auto_update">Update Otomatis Strategi</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-200" id="auto-update-label" data-i18n="settings.auto_update">Update Otomatis Strategi</span>
                     <input type="checkbox" id="auto-update" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                 </div>
                 <div class="flex items-center justify-between">
-                    <span class="text-sm text-gray-700" id="demo-mode-label" data-i18n="settings.demo_mode">Mode Demo</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-200" id="demo-mode-label" data-i18n="settings.demo_mode">Mode Demo</span>
                     <input type="checkbox" id="demo-mode" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                 </div>
                 <hr class="my-4">
-                <div class="text-sm text-gray-600" id="version-info">
+                <div class="text-sm text-gray-600 dark:text-gray-300" id="version-info">
                     <strong data-i18n="settings.version">Versi:</strong> 2.0.0<br>
                     <strong data-i18n="settings.last_updated">Terakhir Update:</strong> September 2025
                 </div>
diff --git a/templates/stocks.html b/templates/stocks.html
index 384d97d..6a71db1 100644
--- a/templates/stocks.html
+++ b/templates/stocks.html
@@ -7,35 +7,35 @@
 {% block content %}
 <div class="flex justify-between items-center mb-6">
     <div>
-        <h2 class="text-2xl font-bold text-gray-800" data-i18n="market.stocks_title">Pasar Saham</h2>
-        <p class="text-gray-600" data-i18n="market.stocks_description">Data harga real-time dari pasar saham global.</p>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="market.stocks_title">Pasar Saham</h2>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="market.stocks_description">Data harga real-time dari pasar saham global.</p>
     </div>
 </div>
 
-<div class="bg-white rounded-lg shadow overflow-x-auto">
+<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 overflow-x-auto">
     <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.stock">Saham</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.price">Harga</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.change_24h">Perubahan 24j</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.time">Waktu</th>
-                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.stock">Saham</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.price">Harga</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.change_24h">Perubahan 24j</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.time">Waktu</th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
             </tr>
         </thead>
-        <tbody id="stocks-table-body" class="bg-white divide-y divide-gray-200">
-            <tr><td colspan="5" class="p-4 text-center text-gray-500" data-i18n="market.loading_stocks">Memuat data saham...</td></tr>
+        <tbody id="stocks-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200">
+            <tr><td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="market.loading_stocks">Memuat data saham...</td></tr>
         </tbody>
     </table>
 </div>
 
 <!-- Modal -->
 <div id="stock-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
-    <div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white">
+    <div class="relative top-20 mx-auto p-5 border dark:border-slate-700 w-1/2 shadow-lg dark:shadow-slate-900/50 rounded-md bg-white dark:bg-slate-800">
         <div class="mt-3 text-center">
-            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"></h3>
+            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"></h3>
             <div class="mt-2 px-7 py-3">
-                <p class="text-sm text-gray-500" id="modal-content"></p>
+                <p class="text-sm text-gray-500 dark:text-gray-400" id="modal-content"></p>
             </div>
             <div class="items-center px-4 py-3">
                 <button id="close-modal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300">
diff --git a/templates/trading_bots.html b/templates/trading_bots.html
index c850d84..c17afb3 100644
--- a/templates/trading_bots.html
+++ b/templates/trading_bots.html
@@ -11,8 +11,8 @@
 <!-- Header Halaman: Judul di kiri, tombol di kanan -->
 <div class="flex justify-between items-center mb-6">
     <div>
-        <h2 class="text-2xl font-bold text-gray-800" data-i18n="bots.title">Trading Bots</h2>
-        <p class="text-gray-600" data-i18n="bots.manage">Kelola semua bot dan strategi Anda.</p>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="bots.title">Trading Bots</h2>
+        <p class="text-gray-600 dark:text-gray-300" data-i18n="bots.manage">Kelola semua bot dan strategi Anda.</p>
     </div>
     <div class="flex items-center space-x-2">
             <button id="start-all-btn" class="bg-green-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-green-600 transition flex items-center" data-i18n-title="bots.start_all_title" title="Jalankan semua bot yang dijeda">
@@ -22,35 +22,35 @@
             <button id="create-bot-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition flex items-center"><i class="fas fa-plus mr-2"></i> <span data-i18n="action.create_new_bot">Buat Bot Baru</span></button>
     </div>
 </div>
-<div class="bg-white rounded-lg shadow overflow-hidden">
-    <table class="min-w-full divide-y divide-gray-200" aria-label="Trading Bots Table">
-        <thead class="bg-gray-50">
+<div class="bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700" aria-label="Trading Bots Table">
+        <thead class="bg-gray-50 dark:bg-slate-700">
             <tr>
-                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.name_market">Nama / Pasar</th>
-                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.parameters">Parameter</th>
-                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.configuration">Konfigurasi</th>
-                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="label.status">Status</th>
-                <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.actions">Aksi</th>
+                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.name_market">Nama / Pasar</th>
+                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.parameters">Parameter</th>
+                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.configuration">Konfigurasi</th>
+                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="label.status">Status</th>
+                <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.actions">Aksi</th>
             </tr>
         </thead>
-        <tbody id="bots-table-body" class="bg-white divide-y divide-gray-200"></tbody>
+        <tbody id="bots-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700"></tbody>
     </table>
 </div>
 <!-- Modal untuk Membuat/Mengedit Bot -->
 <div id="create-bot-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50 p-4">
     <!-- PERBAIKAN: Panel modal kini menggunakan flexbox vertikal dan tinggi maksimal -->
-    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[90vh]">
+    <div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[90vh]">
         <!-- Loading Overlay -->
-        <div id="modal-loading-overlay" class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10 hidden">
+        <div id="modal-loading-overlay" class="absolute inset-0 bg-white dark:bg-slate-800 bg-opacity-75 flex items-center justify-center z-10 hidden">
             <i class="fas fa-spinner fa-spin text-blue-600 text-4xl"></i>
         </div>
         
         <!-- Header Modal (Tidak akan ikut ter-scroll) -->
-        <div class="flex-shrink-0 flex items-start justify-between p-5 border-b rounded-t">
-            <h3 id="modal-title" class="text-xl font-semibold text-gray-900" data-i18n="bots.create_new">
+        <div class="flex-shrink-0 flex items-start justify-between p-5 border-b border-gray-200 dark:border-slate-700 rounded-t">
+            <h3 id="modal-title" class="text-xl font-semibold text-gray-900 dark:text-white" data-i18n="bots.create_new">
                 🚀 Buat Bot Baru
             </h3>
-            <button type="button" id="cancel-create" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
+            <button type="button" id="cancel-create" class="text-gray-400 bg-transparent hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-white rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                 <i class="fas fa-times"></i>
                 <span class="sr-only" data-i18n="bots.close_modal">Tutup modal</span>
             </button>
@@ -62,34 +62,34 @@
                 <!-- Baris 1: Nama & Pasar -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                        <label for="name" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.bot_name">Nama Bot</label>
-                        <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_name" placeholder="Contoh: XAUUSD Hybrid H1" required>
+                        <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.bot_name">Nama Bot</label>
+                        <input type="text" name="name" id="name" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_name" placeholder="Contoh: XAUUSD Hybrid H1" required>
                     </div>
                     <div>
-                        <label for="market" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.market">Pasar</label>
-                        <input type="text" name="market" id="market" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_market" placeholder="Contoh: XAUUSD atau EURUSD" required>
+                        <label for="market" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.market">Pasar</label>
+                        <input type="text" name="market" id="market" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_market" placeholder="Contoh: XAUUSD atau EURUSD" required>
                     </div>
                 </div>
                 <!-- Baris 2: Lot, SL, TP -->
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                     <div>
-                        <label for="risk_percent" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.risk_per_trade">Risk per Trade (%)</label>
-                        <input type="number" name="risk_percent" id="risk_percent" value="1.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
+                        <label for="risk_percent" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.risk_per_trade">Risk per Trade (%)</label>
+                        <input type="number" name="risk_percent" id="risk_percent" value="1.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                     </div>
                     <div>
-                        <label for="sl_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.sl_atr">SL (ATR Multiplier)</label>
-                        <input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
+                        <label for="sl_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.sl_atr">SL (ATR Multiplier)</label>
+                        <input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                     </div>
                     <div>
-                        <label for="tp_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.tp_atr">TP (ATR Multiplier)</label>
-                        <input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
+                        <label for="tp_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.tp_atr">TP (ATR Multiplier)</label>
+                        <input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                     </div>
                 </div>
                 <!-- Baris 3: Timeframe & Interval -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                        <label for="timeframe" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.timeframe">Timeframe</label>
-                        <select id="timeframe" name="timeframe" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label for="timeframe" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.timeframe">Timeframe</label>
+                        <select id="timeframe" name="timeframe" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             <option value="M1" data-i18n="bots.timeframe_1m">1 Menit</option>
                             <option value="M5" data-i18n="bots.timeframe_5m">5 Menit</option>
                             <option value="M15" data-i18n="bots.timeframe_15m">15 Menit</option>
@@ -100,26 +100,26 @@
                         </select>
                     </div>
                     <div>
-                        <label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.check_interval">Interval Cek (detik)</label>
-                        <input type="number" name="check_interval_seconds" id="check_interval_seconds" value="60" step="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
+                        <label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.check_interval">Interval Cek (detik)</label>
+                        <input type="number" name="check_interval_seconds" id="check_interval_seconds" value="60" step="1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                     </div>
                 </div>
                 <!-- Strategy Switching Option -->
-                <div class="border-t pt-4">
+                <div class="border-t border-gray-200 dark:border-slate-700 pt-4">
                     <div class="flex items-center">
-                        <input type="checkbox" id="enable_strategy_switching" name="enable_strategy_switching" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
-                        <label for="enable_strategy_switching" class="ml-2 text-sm font-medium text-gray-900" data-i18n="bots.enable_strategy_switching">Aktifkan Automatic Strategy Switching</label>
+                        <input type="checkbox" id="enable_strategy_switching" name="enable_strategy_switching" class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-slate-600 border-gray-300 dark:border-slate-600 rounded focus:ring-blue-500">
+                        <label for="enable_strategy_switching" class="ml-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="bots.enable_strategy_switching">Aktifkan Automatic Strategy Switching</label>
                     </div>
-                    <p class="mt-1 text-xs text-gray-500" data-i18n="bots.strategy_switching_info">Jika diaktifkan, bot akan secara otomatis beralih ke strategi terbaik berdasarkan kinerja terkini.</p>
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" data-i18n="bots.strategy_switching_info">Jika diaktifkan, bot akan secara otomatis beralih ke strategi terbaik berdasarkan kinerja terkini.</p>
                 </div>
                 <!-- Baris 4: Strategi & Parameternya -->
                 <div>
-                    <label for="strategy" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.strategy">Strategi</label>
-                    <select id="strategy" name="strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
+                    <label for="strategy" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.strategy">Strategi</label>
+                    <select id="strategy" name="strategy" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                         <option value="" disabled selected data-i18n="bots.select_strategy">Pilih sebuah strategi</option>
                     </select>
                 </div>
-                <div id="strategy-params-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t">
+                <div id="strategy-params-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-200 dark:border-slate-700">
                     <!-- Parameter strategi akan dimuat di sini oleh JavaScript -->
                     <span data-i18n="bots.strategy_params_loaded">Parameter strategi akan dimuat di sini oleh JavaScript</span>
                 </div>
@@ -127,9 +127,9 @@
         </form>
 
         <!-- Footer Modal (Tidak akan ikut ter-scroll) -->
-        <div class="flex-shrink-0 flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
+        <div class="flex-shrink-0 flex items-center p-6 space-x-2 border-t border-gray-200 dark:border-slate-700 rounded-b">
             <button type="submit" id="submit-bot-btn" form="create-bot-form" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center" data-i18n="bots.create_bot">Buat Bot</button>
-            <button type="button" id="cancel-create-footer" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10" data-i18n="bots.cancel">Batal</button>
+            <button type="button" id="cancel-create-footer" class="text-gray-500 dark:text-gray-400 bg-white dark:bg-slate-800 hover:bg-gray-100 dark:hover:bg-slate-700/50 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 dark:border-slate-700 text-sm font-medium px-5 py-2.5 hover:text-gray-900 dark:hover:text-white focus:z-10" data-i18n="bots.cancel">Batal</button>
         </div>
     </div>
 </div>