feat(ui): Enhance AppClickUserData management for proper cleanup and tracking

- Introduced a new helper function to parse ISO 8601-like timestamps into epoch seconds.
- Improved the handling of timezones, allowing for better accuracy in arrival time calculations.
- Refactored arrival data fetching to ensure UI updates only when data changes.
- Enhanced error handling for arrival data retrieval, providing clearer messages for various error states.
- Updated formatting functions for arrival times to handle both relative and absolute formats more robustly.

main/CMakeLists.txt

@@ -1,5 +1,20 @@
 set(requires esp-tls spi_flash nvs_flash esp_event esp_netif esp_http_client esp_http_server esp_wifi esp_psram esp_lvgl_port)
-file(GLOB_RECURSE SRCS "main.cpp" "*.cpp" "*.c" "ui/**/*.cpp" "ui/**/*.c" "external/**/*.cpp" "external/**/*.c")
+
+# Start the source list with the known root source
+set(SRCS "${CMAKE_CURRENT_LIST_DIR}/main.cpp")
+# Delegate source collection to per-directory CMakeLists (non-recursive)
+set(SUBDIRS "display" "external" "ui" "io" "network" "info" "common" "font")
+foreach(dir IN LISTS SUBDIRS)
+    if(EXISTS "${CMAKE_CURRENT_LIST_DIR}/${dir}/CMakeLists.txt")
+        include("${CMAKE_CURRENT_LIST_DIR}/${dir}/CMakeLists.txt")
+    else()
+        file(GLOB DIR_SRCS "${CMAKE_CURRENT_LIST_DIR}/${dir}/*.c" "${CMAKE_CURRENT_LIST_DIR}/${dir}/*.cpp")
+        if(DIR_SRCS)
+            list(APPEND SRCS ${DIR_SRCS})
+        endif()
+    endif()
+endforeach()
+
 
 
 # Path to the source JSON in this component

main/common/CMakeLists.txt

@@ -0,0 +1 @@
+# common/ currently contains headers; no sources to add by default

main/display/CMakeLists.txt

@@ -0,0 +1,5 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/eink_display_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/epd_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/lvgl_handler.cpp"
+)

main/display/eink_display_handler.cpp

@@ -13,22 +13,31 @@
 #define MINIMUM_POWER_ON_DELAY_MS 100
 #define PARTIAL_REFRESH_THRESHOLD 5  // Full refresh every N partial refreshes
 
-static uint8_t* DRAW_BUFFER; // 1 bit per pixel
+// Static flag to prevent multiple instances (these buffers are large, only one display allowed)
-static uint8_t* OLD_DRAW_BUFFER; // 1 bit per pixel
+static bool display_instance_exists = false;
-static uint8_t* black_data;
-static uint8_t* white_data;
 
 EInkDisplayHandler::EInkDisplayHandler() {
-  black_data = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  if (display_instance_exists) {
-  white_data = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+    ESP_LOGE(TAG, "Only one EInkDisplayHandler instance allowed!");
-  DRAW_BUFFER = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+    return;
-  OLD_DRAW_BUFFER = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  }
-  memset(black_data, 0xFF, DISPLAY_BUFFER_SIZE); // eink uses 1 for black
+  display_instance_exists = true;
-  memset(white_data, 0x00, DISPLAY_BUFFER_SIZE);
+  
-  memset(DRAW_BUFFER, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  black_data_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  memset(OLD_DRAW_BUFFER, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  white_data_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  draw_buffer_ = DRAW_BUFFER;
+  draw_buffer_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
-  old_buffer_ = OLD_DRAW_BUFFER;
+  old_buffer_ = static_cast<uint8_t*>(heap_caps_malloc(DISPLAY_BUFFER_SIZE, MALLOC_CAP_SPIRAM));
+  
+  // Check for allocation failures
+  if (!black_data_ || !white_data_ || !draw_buffer_ || !old_buffer_) {
+    ESP_LOGE(TAG, "Failed to allocate display buffers!");
+    return;
+  }
+  
+  memset(black_data_, 0xFF, DISPLAY_BUFFER_SIZE); // eink uses 1 for black
+  memset(white_data_, 0x00, DISPLAY_BUFFER_SIZE);
+  memset(draw_buffer_, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
+  memset(old_buffer_, 0x00, DISPLAY_BUFFER_SIZE); // start with all white (0 = white in e-ink)
 
   refresh_mutex_ = xSemaphoreCreateMutex();
   if (refresh_mutex_ == nullptr) {
@@ -46,18 +55,23 @@ EInkDisplayHandler::~EInkDisplayHandler() {
   if (tp_io_handle_ != nullptr) {
     esp_lcd_panel_io_del(tp_io_handle_);
   }
-  if (black_data != nullptr) {
+  if (black_data_ != nullptr) {
-    heap_caps_free(black_data);
+    heap_caps_free(black_data_);
+    black_data_ = nullptr;
   }
-  if (white_data != nullptr) {
+  if (white_data_ != nullptr) {
-    heap_caps_free(white_data);
+    heap_caps_free(white_data_);
+    white_data_ = nullptr;
   }
-  if (DRAW_BUFFER != nullptr) {
+  if (draw_buffer_ != nullptr) {
-    heap_caps_free(DRAW_BUFFER);
+    heap_caps_free(draw_buffer_);
+    draw_buffer_ = nullptr;
   }
-  if (OLD_DRAW_BUFFER != nullptr) {
+  if (old_buffer_ != nullptr) {
-    heap_caps_free(OLD_DRAW_BUFFER);
+    heap_caps_free(old_buffer_);
+    old_buffer_ = nullptr;
   }
+  display_instance_exists = false;
 }
 
 esp_err_t EInkDisplayHandler::deep_sleep_display(void) {
@@ -185,7 +199,7 @@ esp_err_t EInkDisplayHandler::full_write(const uint8_t* framebuffer, const bool
         ESP_LOGE(TAG, "Failed to send old data command: %s", esp_err_to_name(err));
         return err;
       }
-      err = epd_handler_.transfer_spi_data(white_basemap ? black_data : white_data, DISPLAY_BUFFER_SIZE, transaction_guard.transaction_id()); // Send all white data (0xFF)
+      err = epd_handler_.transfer_spi_data(white_basemap ? black_data_ : white_data_, DISPLAY_BUFFER_SIZE, transaction_guard.transaction_id()); // Send all white data (0xFF)
       if (err != ESP_OK) {
         ESP_LOGE(TAG, "Failed to send all white data for old data: %s", esp_err_to_name(err));
         return err;
@@ -449,7 +463,7 @@ esp_err_t EInkDisplayHandler::partial_refresh(const uint8_t* incoming_partial_fr
 esp_err_t EInkDisplayHandler::clear_display(void) {
   ESP_LOGV(TAG, "Clearing display to all white...");
 
-  esp_err_t err = full_write(white_data, false);
+  esp_err_t err = full_write(white_data_, false);
   if (err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to clear display: %s", esp_err_to_name(err));
     return err;

main/display/eink_display_handler.h

@@ -90,9 +90,11 @@ private:
   esp_lcd_panel_io_handle_t tp_io_handle_ = nullptr;
   esp_lcd_touch_handle_t tp_handle_ = nullptr;
 
-  // this buffer reflects the current display state (1=black, 0=white)
+  // Display buffers (1=black, 0=white)
   uint8_t* draw_buffer_ = nullptr;
   uint8_t* old_buffer_ = nullptr;
+  uint8_t* black_data_ = nullptr;  // All 0xFF (black pattern)
+  uint8_t* white_data_ = nullptr;  // All 0x00 (white pattern)
   RefreshArea refresh_area_ = { 0, 0, 0, 0 };
 };
 

main/display/epd_handler.cpp

@@ -4,6 +4,7 @@
 #include "common/constants.h"
 #include "esp_lcd_touch_gt911.h"
 #include <driver/i2c.h>
+#include <esp_cache.h>
 #define TAG "EPDHandler"
 
 #define BUSY_ACTIVE_LEVEL   0  // BUSY pin is active low
@@ -213,10 +214,29 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
   size_t remaining = length;
   gpio_set_level(PIN_DC, 1); // Data mode
 
-  // Allocate a temporary buffer for inverted data (only if inverted)
+  // Check if data is in PSRAM (needs cache sync and staging buffer)
+  bool data_in_psram = (esp_ptr_external_ram((void*)data) != 0);
+  
+  if (data_in_psram) {
+    // Flush cache to ensure DMA sees the latest data in PSRAM
+    esp_err_t cache_err = esp_cache_msync((void*)data, length, ESP_CACHE_MSYNC_FLAG_DIR_C2M);
+    if (cache_err != ESP_OK) {
+      ESP_LOGW(TAG, "Cache sync failed: %s", esp_err_to_name(cache_err));
+    }
+  }
+
+  // Use staging buffer in internal DMA-capable RAM
+  // PSRAM cannot be allocated with MALLOC_CAP_DMA, so we always use a staging buffer
+  uint8_t* staging_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA | MALLOC_CAP_INTERNAL);
+  if (staging_buffer == nullptr) {
+    ESP_LOGE(TAG, "Failed to allocate DMA staging buffer");
+    return ESP_ERR_NO_MEM;
+  }
+  
+  // Additional buffer needed only for inverted data
   uint8_t* temp_transfer_buffer = nullptr;
   if (inverted) {
-    temp_transfer_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA);
+    temp_transfer_buffer = (uint8_t*)heap_caps_malloc(DMA_TRANSFER_CHUNK_SIZE, MALLOC_CAP_DMA | MALLOC_CAP_INTERNAL);
     if (temp_transfer_buffer == nullptr) {
       ESP_LOGE(TAG, "Failed to allocate memory for inverted data transfer buffer");
       ESP_LOGI(TAG, "Current free heap size: %u bytes", esp_get_free_heap_size());
@@ -229,31 +249,27 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
   while (remaining > 0) {
     size_t transfer_size = (remaining < DMA_TRANSFER_CHUNK_SIZE) ? remaining : DMA_TRANSFER_CHUNK_SIZE;
 
-    const uint8_t* transfer_buffer = nullptr;
+    // Copy data to DMA-capable staging buffer
+    // Required because PSRAM cannot be allocated with MALLOC_CAP_DMA
     if (inverted) {
-      // Invert only the current chunk into the temporary buffer
+      // Invert while copying
       for (size_t i = 0; i < transfer_size; ++i) {
-        temp_transfer_buffer[i] = ~data[offset + i];
+        staging_buffer[i] = ~data[offset + i];
       }
-      transfer_buffer = temp_transfer_buffer;
     } else {
-      transfer_buffer = data + offset;
+      // Straight copy from PSRAM to internal DMA buffer
+      memcpy(staging_buffer, data + offset, transfer_size);
     }
 
     spi_transaction_t t = {};
     t.length = transfer_size * 8;  // Length in bits
-    t.tx_buffer = transfer_buffer;
+    t.tx_buffer = staging_buffer;
 
     esp_err_t ret = spi_device_polling_transmit(spi_, &t);
     if (ret != ESP_OK) {
       ESP_LOGE(TAG, "Failed to send SPI chunk at offset %zu: %s", offset, esp_err_to_name(ret));
-      if (ret == ESP_ERR_NO_MEM) {
+      heap_caps_free(staging_buffer);
-        ESP_LOGE(TAG, "Current free heap size: %u bytes", esp_get_free_heap_size());
-        ESP_LOGE(TAG, "Current free DMA-capable memory size: %u bytes",
-          heap_caps_get_free_size(MALLOC_CAP_DMA));
-      }
       if (inverted && temp_transfer_buffer != nullptr) {
-        // Free the temporary inverted buffer
         heap_caps_free(temp_transfer_buffer);
       }
       return ret;
@@ -269,8 +285,8 @@ esp_err_t EPDHandler::transfer_spi_data(const uint8_t* data, const size_t& lengt
     }
   }
 
+  heap_caps_free(staging_buffer);
   if (inverted && temp_transfer_buffer != nullptr) {
-    // Free the temporary inverted buffer
     heap_caps_free(temp_transfer_buffer);
   }
 

main/display/lvgl_handler.cpp

@@ -26,6 +26,10 @@ LVGLHandler::~LVGLHandler() {
     lv_draw_buf_destroy(lvgl_draw_buf_);
     lvgl_draw_buf_ = nullptr;
   }
+  if (lvgl_draw_buf_2_ != nullptr) {
+    lv_draw_buf_destroy(lvgl_draw_buf_2_);
+    lvgl_draw_buf_2_ = nullptr;
+  }
 }
 
 esp_err_t LVGLHandler::initLVGL(EventGroupHandle_t system_event_group) {
@@ -217,17 +221,31 @@ esp_err_t LVGLHandler::initLVGLDisplay_() {
     return ESP_FAIL;
   }
 
-  // Create a draw buffer covering the entire display
+  // Create two draw buffers for double buffering to improve performance
   lvgl_draw_buf_ = lv_draw_buf_create(DISPLAY_WIDTH, DISPLAY_HEIGHT, LV_COLOR_FORMAT_I1, LV_STRIDE_AUTO);
   if (lvgl_draw_buf_ == nullptr) {
-    ESP_LOGE(TAG, "Failed to create LVGL draw buffer");
+    ESP_LOGE(TAG, "Failed to create LVGL draw buffer 1");
     lv_display_delete(lvgl_display_);
     lvgl_display_ = nullptr;
     lvgl_port_unlock();
     return ESP_FAIL;
   }
-  lv_display_set_draw_buffers(lvgl_display_, lvgl_draw_buf_, nullptr);
+
+  lvgl_draw_buf_2_ = lv_draw_buf_create(DISPLAY_WIDTH, DISPLAY_HEIGHT, LV_COLOR_FORMAT_I1, LV_STRIDE_AUTO);
+  if (lvgl_draw_buf_2_ == nullptr) {
+    ESP_LOGE(TAG, "Failed to create LVGL draw buffer 2");
+    lv_draw_buf_destroy(lvgl_draw_buf_);
+    lvgl_draw_buf_ = nullptr;
+    lv_display_delete(lvgl_display_);
+    lvgl_display_ = nullptr;
+    lvgl_port_unlock();
+    return ESP_FAIL;
+  }
+
+  // Set both buffers for double buffering
+  lv_display_set_draw_buffers(lvgl_display_, lvgl_draw_buf_, lvgl_draw_buf_2_);
   lv_display_set_render_mode(lvgl_display_, LV_DISPLAY_RENDER_MODE);
+
   //
   // Configure LVGL display
   lv_display_set_color_format(lvgl_display_, LV_COLOR_FORMAT_I1);

main/display/lvgl_handler.h

@@ -31,4 +31,5 @@ private:
   lv_display_t* lvgl_display_ = nullptr;
   lv_indev_t* lvgl_touch_indev_ = nullptr;
   lv_draw_buf_t* lvgl_draw_buf_ = nullptr;
+  lv_draw_buf_t* lvgl_draw_buf_2_ = nullptr;
 };

main/external/CMakeLists.txt

@@ -0,0 +1,6 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/mtr.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/station_info.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/line_info.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/mtr/arrival.cpp"
+)

main/external/mtr/arrival.cpp

@@ -21,6 +21,8 @@ StationArrivalInfo::StationArrivalInfo(
     return;
   }
 
+  ESP_LOGD(TAG, "Parsing arrival JSON for %s-%s", train_line_code.c_str(), train_station_code.c_str());
+
   // Parse status
   cJSON* status_json = cJSON_GetObjectItem(arrival_json, "status");
   if (status_json && cJSON_IsNumber(status_json)) {
@@ -30,7 +32,7 @@ StationArrivalInfo::StationArrivalInfo(
     }
   }
 
-  // TODO: verify the arrival json parsing
+  ESP_LOGD(TAG, "Status: %d, Message: %s", (int)_status, _message.c_str());
 
       // Parse message (if present)
   cJSON* message_json = cJSON_GetObjectItem(arrival_json, "message");

main/external/mtr/arrival.h

@@ -1,7 +1,5 @@
 #pragma once
-#include "external/mtr/arrival.h"
 #include "cJSON.h"
-#include "external/mtr/mtr.h"
 #include <string>
 #include <vector>
 

main/external/mtr/line_info.cpp

@@ -17,6 +17,14 @@ LineInfo::LineInfo(cJSON* line_json) {
     ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'code' field");
   }
 
+  // Parse line name
+  cJSON* name_json = cJSON_GetObjectItem(line_json, "name");
+  if (name_json && cJSON_IsString(name_json)) {
+    _name = name_json->valuestring;
+  } else {
+    ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'name' field");
+  }
+
   // Parse line color (note: field is 'line_color' in JSON, not 'color')
   cJSON* color_json = cJSON_GetObjectItem(line_json, "line_color");
   if (color_json && cJSON_IsString(color_json)) {
@@ -43,3 +51,12 @@ LineInfo::LineInfo(cJSON* line_json) {
     ESP_LOGW(LINE_INFO_TAG, "Missing or invalid 'stations' array");
   }
 }
+
+const char* LineInfo::get_station_name(const std::string& station_code) const {
+  for (const auto& station : _stations) {
+    if (std::string(station.code()) == station_code) {
+      return station.name();
+    }
+  }
+  return "";
+}

main/external/mtr/line_info.h

@@ -20,6 +20,10 @@ public:
     return _code.c_str();
   }
   // caller does not own the returned char pointers
+  const char* name() const {
+    return _name.c_str();
+  }
+  // caller does not own the returned char pointers
   const char* color() const {
     return _color.c_str();
   }
@@ -31,6 +35,8 @@ public:
     return &_stations;
   }
 
+  const char* get_station_name(const std::string& station_code) const;
+
   friend class MTRNextTrainHandler;
 
 private:
@@ -40,6 +46,7 @@ private:
   );
 
   std::string _code;
+  std::string _name;
   std::string _color;
   std::vector<StationInfo> _stations;
 };

main/external/mtr/mtr.cpp

@@ -8,12 +8,13 @@
 #include "cJSON.h"
 #include "esp_log.h"
 #include <string>
-#include <sstream>
+#include <stdlib.h>
+#include <string.h>
+#include "esp_crt_bundle.h"
 
 static const char* TAG = "MTRNextTrainHandler";
 
 // MTR Next Train API endpoint
-// Note: This is a placeholder - replace with actual MTR API endpoint
 static const char* MTR_API_BASE = "https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php";
 
 MTRNextTrainHandler::MTRNextTrainHandler() {
@@ -102,43 +103,70 @@ MtrArrivalErrorCode MTRNextTrainHandler::get_next_arrival_info(
   }
 
   // Build API URL
-  std::ostringstream url;
+  std::string url_str = MTR_API_BASE;
-  url << MTR_API_BASE << "?line=" << line_code << "&sta=" << station_code;
+  url_str += "?line=";
+  url_str += line_code;
+  url_str += "&sta=";
+  url_str += station_code;
   if (lang == Language::EN) {
-    url << "&lang=en";
+    url_str += "&lang=en";
   }
-
-  std::string url_str = url.str();
   ESP_LOGI(TAG, "Fetching arrival info from: %s", url_str.c_str());
 
   // Create HTTP client configuration
   esp_http_client_config_t http_config = {};
   http_config.url = url_str.c_str();
-  http_config.timeout_ms = 10000;
+  http_config.timeout_ms = 15000;
   http_config.transport_type = HTTP_TRANSPORT_OVER_SSL;
-  http_config.use_global_ca_store = true;
+  http_config.crt_bundle_attach = esp_crt_bundle_attach;
-  http_config.skip_cert_common_name_check = false;
+
+  // Retry logic for connection failures
+  constexpr int MAX_RETRIES = 2;
+  esp_err_t err = ESP_FAIL;
+  char* buffer = nullptr;
+  int total_len = 0;
+
+  for (int retry = 0; retry <= MAX_RETRIES; retry++) {
+    if (retry > 0) {
+      ESP_LOGW(TAG, "Retrying HTTP request (%d/%d)", retry, MAX_RETRIES);
+      vTaskDelay(pdMS_TO_TICKS(500));
+    }
+
+    // Create HTTP client configuration for each attempt
+    esp_http_client_config_t http_config = {};
+    http_config.url = url_str.c_str();
+    http_config.timeout_ms = 15000;
+    http_config.transport_type = HTTP_TRANSPORT_OVER_SSL;
+    http_config.crt_bundle_attach = esp_crt_bundle_attach;
 
     // Get HTTP handler and perform request
     auto http_handler = network_handler->get_http_handler(std::move(http_config));
     if (!http_handler) {
       ESP_LOGE(TAG, "Failed to create HTTP handler");
-    return MtrArrivalErrorCode::UNKNOWN;
+      continue;
     }
 
-  esp_err_t err = http_handler->perform_request();
+    err = http_handler->perform_request();
     if (err != ESP_OK) {
       ESP_LOGE(TAG, "HTTP request failed: %s", esp_err_to_name(err));
-    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+      continue;
     }
 
     // Get response body
-  char* buffer = nullptr;
-  int total_len = 0;
     http_handler->get_body(buffer, total_len);
 
-  if (!buffer || total_len <= 0) {
+    if (buffer && total_len > 0) {
-    ESP_LOGE(TAG, "Empty response from MTR API");
+      break;
+    }
+
+    if (buffer) {
+      free(buffer);
+      buffer = nullptr;
+    }
+  }
+
+  if (err != ESP_OK || !buffer || total_len <= 0) {
+    ESP_LOGE(TAG, "Failed to get response after retries");
     if (buffer) {
       free(buffer);
     }
@@ -146,21 +174,49 @@ MtrArrivalErrorCode MTRNextTrainHandler::get_next_arrival_info(
   }
 
   ESP_LOGI(TAG, "Received %d bytes from MTR API", total_len);
-  ESP_LOGD(TAG, "Response: %s", buffer);
 
-  // Parse JSON response
+  ESP_LOGI(TAG, "Parsing full API response");
-  cJSON* arrival_json = cJSON_Parse(buffer);
+  cJSON* root_json = cJSON_Parse(buffer);
-  free(buffer);
+  delete[] buffer;
 
-  if (!arrival_json) {
+  if (!root_json) {
-    ESP_LOGE(TAG, "Failed to parse MTR API response");
+    const char* error_ptr = cJSON_GetErrorPtr();
+    if (error_ptr) {
+      ESP_LOGE(TAG, "Failed to parse MTR API response at position: %s", error_ptr);
+    } else {
+      ESP_LOGE(TAG, "Failed to parse MTR API response - unknown error");
+    }
     return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
   }
 
-  // Create StationArrivalInfo object
+  cJSON* data_json = cJSON_GetObjectItem(root_json, "data");
-  out_info = new StationArrivalInfo(mtr_data, arrival_json, line_code, station_code);
+  if (!data_json) {
+    ESP_LOGE(TAG, "Could not find 'data' object in response");
+    cJSON_Delete(root_json);
+    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+  }
 
-  cJSON_Delete(arrival_json);
+  std::string station_key = line_code + "-" + station_code;
+  cJSON* station_json = cJSON_GetObjectItem(data_json, station_key.c_str());
+  if (!station_json) {
+    ESP_LOGE(TAG, "Could not find station key '%s' in data object", station_key.c_str());
+    cJSON_Delete(root_json);
+    return MtrArrivalErrorCode::NO_ARRIVAL_INFO;
+  }
+
+  cJSON* status_json = cJSON_GetObjectItem(root_json, "status");
+  if (status_json && cJSON_IsNumber(status_json)) {
+    cJSON_AddItemToObject(station_json, "status", cJSON_Duplicate(status_json, 1));
+  }
+
+  cJSON* message_json = cJSON_GetObjectItem(root_json, "message");
+  if (message_json && cJSON_IsString(message_json)) {
+    cJSON_AddItemToObject(station_json, "message", cJSON_Duplicate(message_json, 1));
+  }
+
+  out_info = new StationArrivalInfo(mtr_data, station_json, line_code, station_code);
+
+  cJSON_Delete(root_json);
 
   ESP_LOGI(TAG, "Successfully retrieved arrival info for %s/%s", line_code.c_str(), station_code.c_str());
   return MtrArrivalErrorCode::NONE;

main/info/CMakeLists.txt

@@ -0,0 +1,3 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/info.cpp"
+)

main/io/CMakeLists.txt

@@ -0,0 +1,4 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/fs_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/nvs_handler.cpp"
+)

main/io/nvs_handler.cpp

@@ -129,6 +129,7 @@ esp_err_t NVSStorageHandler::process_all(KeyValueProcessor processor, void* arg)
     // call the processor with the key and value
     std::string key_str = info.key;
     processor(arg, key_str, this->get(key_str));
+    nvs_close(temp_handle);
   }
   return ESP_OK;
 }
@@ -156,6 +157,7 @@ esp_err_t NVSStorageHandler::process_filtered(const std::string& key_prefix, Key
       }
       // call the processor with the key and value
       processor(arg, std::string(info.key), this->get(std::string(info.key)));
+      nvs_close(temp_handle);
     }
   }
   return ESP_OK;
@@ -186,6 +188,7 @@ esp_err_t NVSStorageHandler::process_filtered(FilterFunc filter_func, KeyValuePr
       }
       // call the processor with the key and value
       processor(arg, key_str, this->get(key_str));
+      nvs_close(temp_handle);
     }
   }
   return ESP_OK;

main/main.cpp

@@ -28,6 +28,7 @@
 #include <esp_task_wdt.h>
 
 #include "lvgl.h"
+#include <esp_netif_sntp.h>
 
 // nvs storage namespaces, 15 characters max
 #define DEFAULT_STORAGE_NAMESPACE "storage"
@@ -43,7 +44,9 @@ void init_queues(
 
 void app_main(void) {
   display_chip_info();
-
+  // set to hkt
+  setenv("TZ", "HKT-8", 1);
+  tzset();
   // Initialize default event loop early - required for UI events
   esp_err_t err = esp_event_loop_create_default();
   if (err != ESP_OK && err != ESP_ERR_INVALID_STATE) {
@@ -105,13 +108,15 @@ void app_main(void) {
   ESP_LOGI(TAG, "Waiting for system to be ready...\n");
   xEventGroupWaitBits(
     system_event_group,
-    // DISPLAY_READY_BIT | STORAGE_READY_BIT | NETWORK_READY_BIT,
+    DISPLAY_READY_BIT | NETWORK_READY_BIT,
-    DISPLAY_READY_BIT,
     // do not clear on exit, require explicit reset
     pdFALSE,
     pdTRUE,
     portMAX_DELAY
   );
+  esp_sntp_config_t config = ESP_NETIF_SNTP_DEFAULT_CONFIG("pool.ntp.org");
+  esp_netif_sntp_init(&config);
+
   ESP_LOGI(TAG, "System is ready. Starting main application...\n");
 
   AppRegistry& app_registry = AppRegistry::instance();

main/network/CMakeLists.txt

@@ -0,0 +1,7 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/http_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/wifi_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/web_server_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/udp_client.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/network.cpp"
+)

main/network/http_handler.cpp

@@ -2,16 +2,55 @@
 #include "esp_http_client.h"
 #include "esp_log.h"
 #include "string.h"
+#include <cstring>
+#include <algorithm>
+
+esp_err_t http_event_handler(esp_http_client_event_t *evt) {
+  HttpHandler* handler = static_cast<HttpHandler*>(evt->user_data);
+  
+  switch (evt->event_id) {
+    case HTTP_EVENT_ON_DATA:
+      if (handler && evt->data_len > 0) {
+        // Pre-allocate with some extra capacity to reduce reallocations
+        size_t new_capacity = handler->response_size + evt->data_len + 1;
+        // Double capacity if we already have data, to amortize reallocation cost
+        if (handler->response_size > 0) {
+          new_capacity = std::max(new_capacity, (handler->response_size * 2) + 1);
+          new_capacity = std::min(new_capacity, (size_t)65536); // Cap at 64KB
+        }
+        char* new_buffer = new char[new_capacity];
+        if (handler->response_buffer && handler->response_size > 0) {
+          memcpy(new_buffer, handler->response_buffer, handler->response_size);
+          delete[] handler->response_buffer;
+        }
+        memcpy(new_buffer + handler->response_size, evt->data, evt->data_len);
+        handler->response_size += evt->data_len;
+        new_buffer[handler->response_size] = '\0';
+        handler->response_buffer = new_buffer;
+        handler->response_capacity = new_capacity;
+      }
+      break;
+    default:
+      break;
+  }
+  return ESP_OK;
+}
 
 HttpHandler::HttpHandler(const esp_http_client_config_t&& config, WifiHandler* wifiHandler)
-  : wifiHandler(wifiHandler) {
+  : wifiHandler(wifiHandler), response_buffer(nullptr), response_size(0) {
-  this->client = esp_http_client_init(&config);
+  esp_http_client_config_t modified_config = config;
+  modified_config.event_handler = http_event_handler;
+  modified_config.user_data = this;
+  this->client = esp_http_client_init(&modified_config);
 }
 
 HttpHandler::~HttpHandler() {
   if (this->client) {
     esp_http_client_cleanup(this->client);
   }
+  if (response_buffer) {
+    delete[] response_buffer;
+  }
 }
 
 esp_err_t HttpHandler::set_method(esp_http_client_method_t method) {
@@ -34,18 +73,13 @@ void HttpHandler::get_body(
   char*& buffer,
   int& total_len
 ) {
-  total_len = esp_http_client_get_content_length(this->client);
+  total_len = response_size;
-  buffer = new char[total_len + 1]; // +1 for null-terminator
+  if (response_buffer && response_size > 0) {
-  if (buffer) {
+    buffer = new char[response_size + 1];
-    int read_len = esp_http_client_read(this->client, buffer, total_len);
+    memcpy(buffer, response_buffer, response_size);
-    if (read_len >= 0) {
+    buffer[response_size] = '\0';
-      buffer[read_len] = '\0'; // null-terminate
   } else {
-      delete[] buffer;
     buffer = nullptr;
     total_len = 0;
   }
-  } else {
-    total_len = 0;
-  }
 }

main/network/http_handler.h

@@ -41,6 +41,7 @@ public:
 
   // only NetworkHandler can create HttpHandler instances
   friend class NetworkHandler;
+  friend esp_err_t http_event_handler(esp_http_client_event_t *evt);
   // disable copy constructor and assignment operator
   HttpHandler(const HttpHandler&) = delete;
   HttpHandler& operator=(const HttpHandler&) = delete;
@@ -52,4 +53,7 @@ private:
   esp_http_client_handle_t client;
   // backreference to WifiHandler to ensure WiFi is connected, DO NOT DELETE
   WifiHandler* wifiHandler;
+  char* response_buffer;
+  size_t response_size;
+  size_t response_capacity = 0;
 };

main/ui/CMakeLists.txt

@@ -0,0 +1,14 @@
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/ui_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/root_layout.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/interaction_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/events.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/apps/registry.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/widgets/textarea.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/widgets/button.cpp"
+)
+
+# Apps control: include apps/CMakeLists.txt which selects which apps to add
+if(EXISTS "${CMAKE_CURRENT_LIST_DIR}/apps/CMakeLists.txt")
+    include("${CMAKE_CURRENT_LIST_DIR}/apps/CMakeLists.txt")
+endif()

main/ui/apps/CMakeLists.txt

@@ -0,0 +1,19 @@
+# Control which apps are included in the build.
+# Override `ENABLED_APPS` from the top-level CMake command line to change apps.
+if(NOT DEFINED ENABLED_APPS)
+    set(ENABLED_APPS "iotdis" "travel")
+    endif()
+message(STATUS "Enabled apps: ${ENABLED_APPS}")
+
+foreach(app IN LISTS ENABLED_APPS)
+    set(APP_DIR "${CMAKE_CURRENT_LIST_DIR}/${app}")
+    if(EXISTS "${APP_DIR}/CMakeLists.txt")
+        include("${APP_DIR}/CMakeLists.txt")
+    else()
+        message(WARNING "App '${app}' has no CMakeLists.txt — attempting to add any sources directly")
+        file(GLOB APP_SRCS "${APP_DIR}/*.c" "${APP_DIR}/*.cpp" "${APP_DIR}/*/*.c" "${APP_DIR}/*/*.cpp")
+        if(APP_SRCS)
+            list(APPEND SRCS ${APP_SRCS})
+        endif()
+    endif()
+endforeach()

main/ui/apps/iotdis/CMakeLists.txt

@@ -0,0 +1,12 @@
+# Explicit list of iotdis app sources
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/web/web_handlers.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/descriptor.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/settings/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/app.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/bridge/bridge.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main.cpp"
+)

main/ui/apps/iotdis/bridge/bridge.cpp

@@ -135,19 +135,9 @@ void IotDisBridge::poll_task_(void* param) {
   ESP_LOGI(TAG, "Polling task started");
 
   while (!bridge->stop_polling_) {
-    ESP_LOGI(TAG, "Polling for status update...");
     bridge->poll_status_();
-    ESP_LOGI(TAG, "poll_status_() returned");
+    // Yield to allow other tasks to run
-
-    // Yield to allow display updates to complete
     taskYIELD();
-
-    // Use longer interval if in error state
-    int interval = (bridge->consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR)
-      ? ERROR_POLL_INTERVAL_MS
-      : POLL_INTERVAL_MS;
-    ESP_LOGI(TAG, "Next poll in %d ms", interval);
-    vTaskDelay(pdMS_TO_TICKS(interval));
   }
 
   ESP_LOGI(TAG, "Polling task stopped");
@@ -161,44 +151,49 @@ void IotDisBridge::poll_status_() {
     return;
   }
 
-  // First check for any unsolicited push messages (non-blocking)
+  // Continuously listen for messages (blocking with timeout)
-  std::string push_message;
+  // Use longer timeout if in error state
-  esp_err_t err = udp_client_.receive_response(push_message, 0);  // 0 = non-blocking
+  int listen_timeout = (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR)
+    ? ERROR_POLL_INTERVAL_MS
+    : POLL_INTERVAL_MS;
+
+  ESP_LOGI(TAG, "Listening for messages (timeout: %dms)", listen_timeout);
+  std::string message;
+  esp_err_t err = udp_client_.receive_response(message, listen_timeout);
+
+  if (err == ESP_OK && !message.empty()) {
+    // Received a message (either push update or status response)
+    ESP_LOGI(TAG, "Received message: %s", message.c_str());
 
-  if (err == ESP_OK && !push_message.empty()) {
-    // Received push update from remote
-    ESP_LOGI(TAG, "Received push update: %s", push_message.c_str());
     StatusUpdateEventData event_data {
       .state = StatusUpdateEventData::VoiceState::UNKNOWN
     };
 
-    if (push_message == MUTED_RESPONSE) {
+    if (message == MUTED_RESPONSE) {
       event_data.state = StatusUpdateEventData::VoiceState::MUTED;
-    } else if (push_message == UNMUTED_RESPONSE) {
+    } else if (message == UNMUTED_RESPONSE) {
       event_data.state = StatusUpdateEventData::VoiceState::UNMUTED;
     }
 
-    // Reset failure counter on successful push update
+    // Reset failure counter on successful message
     if (event_data.state != StatusUpdateEventData::VoiceState::UNKNOWN) {
       consecutive_failures_ = 0;
-    }
 
+      ESP_LOGI(TAG, "Invoking status update callback with state: %d", event_data.state);
       if (on_status_update_callback_) {
         on_status_update_callback_(event_data, status_event_user_data_);
       }
-
+    } else {
-    // Got push update, skip polling
+      ESP_LOGW(TAG, "Received unknown message: %s", message.c_str());
-    if (event_data.state != StatusUpdateEventData::VoiceState::UNKNOWN) {
-      return;
     }
-  }
+  } else if (err == ESP_ERR_TIMEOUT) {
-
+    // Timeout - send STATUS command to verify connection is still alive
-  // Send STATUS command for polling
+    ESP_LOGI(TAG, "Listen timeout, sending STATUS command to verify connection");
-  ESP_LOGI(TAG, "Sending STATUS command for polling");
     err = udp_client_.send_command(STATUS_COMMAND);
+
     if (err != ESP_OK) {
       consecutive_failures_++;
-    ESP_LOGW(TAG, "Failed to send STATUS command for polling. Consecutive failures: %d",
+      ESP_LOGW(TAG, "Failed to send STATUS command. Consecutive failures: %d",
         consecutive_failures_);
 
       if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
@@ -209,41 +204,14 @@ void IotDisBridge::poll_status_() {
           );
         }
       }
-    return;
-  }
-
-  // Wait for response to STATUS command
-  ESP_LOGI(TAG, "Waiting for response to STATUS command (timeout: %dms)", RESPONSE_TIMEOUT_MS);
-  std::string response;
-  err = udp_client_.receive_response(response, RESPONSE_TIMEOUT_MS);
-  ESP_LOGI(TAG, "Received response from STATUS command: err=%d", err);
-
-  if (err == ESP_OK) {
-    // Success - reset failure counter
-    consecutive_failures_ = 0;
-    ESP_LOGI(TAG, "STATUS response: %s", response.c_str());
-
-    StatusUpdateEventData event_data {
-      .state = StatusUpdateEventData::VoiceState::UNKNOWN
-    };
-    if (response == MUTED_RESPONSE) {
-      event_data.state = StatusUpdateEventData::VoiceState::MUTED;
-    } else if (response == UNMUTED_RESPONSE) {
-      event_data.state = StatusUpdateEventData::VoiceState::UNMUTED;
-    }
-
-    ESP_LOGI(TAG, "Invoking status update callback with state: %d", event_data.state);
-    if (on_status_update_callback_) {
-      on_status_update_callback_(event_data, status_event_user_data_);
-      ESP_LOGI(TAG, "Status update callback returned");
     }
+    // The response to STATUS command will be received in the next iteration
   } else {
-    // Timeout or error
+    // Error receiving
     consecutive_failures_++;
-    ESP_LOGW(TAG, "No response to STATUS (failures: %d, error: %d)", consecutive_failures_, err);
+    ESP_LOGW(TAG, "Error receiving message: %d (failures: %d)", err, consecutive_failures_);
 
     if (consecutive_failures_ >= MAX_FAILURES_BEFORE_ERROR) {
-      ESP_LOGW(TAG, "Max failures reached, sending ERROR state");
       if (on_status_update_callback_) {
         on_status_update_callback_(
           StatusUpdateEventData { .state = StatusUpdateEventData::VoiceState::ERROR },
@@ -252,6 +220,4 @@ void IotDisBridge::poll_status_() {
       }
     }
   }
-
-  ESP_LOGI(TAG, "poll_status_ complete");
 }

main/ui/apps/iotdis/ui/main.cpp

@@ -1,9 +1,11 @@
 #include "ui/apps/iotdis/ui/main.h"
 #include "ui/apps/iotdis/app.h"
 #include "ui/interaction_handler.h"
+#include "ui/widgets/button.h"
 #include "esp_log.h"
 #include "esp_lvgl_port.h"
 
+#define LVGL_LOCK_TIMEOUT 4000  // milliseconds
 static const char* TAG = "MainUI";
 
 MainUI::~MainUI() {
@@ -34,7 +36,7 @@ void MainUI::create_ui_(lv_obj_t* parent) {
     return;
   }
 
-  if (!lvgl_port_lock(pdMS_TO_TICKS(100))) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
     ESP_LOGE(TAG, "Failed to acquire LVGL lock for UI creation");
     return;
   }
@@ -81,12 +83,12 @@ void MainUI::create_ui_(lv_obj_t* parent) {
   lv_label_set_text(status_text_label_, "Unknown Status");
 
   // Mute button
-  mute_button_ = lv_btn_create(center_container);
+  mute_button_ = button_create(center_container);
   lv_obj_set_size(mute_button_, 200, 60);
-
   lv_obj_t* mute_label = lv_label_create(mute_button_);
   lv_label_set_text(mute_label, "MUTE");
   lv_obj_center(mute_label);
+  lv_obj_set_style_text_color(mute_label, lv_color_black(), 0);
 
   // === Bottom Section: Settings and Config Prompt ===
   lv_obj_t* bottom_container = lv_obj_create(parent);
@@ -103,12 +105,13 @@ void MainUI::create_ui_(lv_obj_t* parent) {
   lv_obj_set_style_text_color(config_prompt_, lv_color_black(), 0);
 
   // Settings button (right side)
-  settings_button_ = lv_btn_create(bottom_container);
+  settings_button_ = button_create(bottom_container);
   lv_obj_set_size(settings_button_, 60, 60);
 
   lv_obj_t* settings_icon = lv_label_create(settings_button_);
   lv_label_set_text(settings_icon, LV_SYMBOL_SETTINGS);
   lv_obj_center(settings_icon);
+  lv_obj_set_style_text_color(settings_icon, lv_color_black(), 0);
 
   ESP_LOGI(TAG, "Main UI created");
   lvgl_port_unlock();
@@ -130,14 +133,14 @@ esp_err_t MainUI::register_on_mute_button_clicked(lv_event_cb_t cb, void* user_d
   return ESP_OK;
 }
 
-void MainUI::update_status(VoiceState state) {
+bool MainUI::update_status(VoiceState state) {
   if (!status_icon_label_ || !status_text_label_) {
-    return;
+    return false;
   }
 
-  if (!lvgl_port_lock(pdMS_TO_TICKS(100))) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
     ESP_LOGW(TAG, "Failed to acquire LVGL lock for status update");
-    return;
+    return false;
   }
 
   switch (state) {
@@ -167,6 +170,7 @@ void MainUI::update_status(VoiceState state) {
       break;
   }
   lvgl_port_unlock();
+  return true;
 }
 
 void MainUI::show_error_notification(bool show) {
@@ -174,7 +178,7 @@ void MainUI::show_error_notification(bool show) {
     return;
   }
 
-  if (!lvgl_port_lock(pdMS_TO_TICKS(100))) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
     ESP_LOGW(TAG, "Failed to acquire LVGL lock for error notification update");
     return;
   }
@@ -191,7 +195,7 @@ void MainUI::update_config_prompt(bool configured) {
     return;
   }
 
-  if (!lvgl_port_lock(pdMS_TO_TICKS(100))) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_LOCK_TIMEOUT))) {
     ESP_LOGW(TAG, "Failed to acquire LVGL lock for config prompt update");
     return;
   }

main/ui/apps/iotdis/ui/main.h

@@ -56,7 +56,7 @@ public:
    * @brief Update status display with current voice state
    * @param state Current voice state
    */
-  void update_status(VoiceState state);
+  bool update_status(VoiceState state);
 
   /**
    * @brief Show or hide error notification banner

main/ui/apps/iotdis/ui/main_handler.cpp

@@ -106,7 +106,7 @@ void MainUIHandler::send_mute_command_() {
 }
 
 void MainUIHandler::on_status_update_(StatusUpdateEventData data) {
-  ESP_LOGI(TAG, "on_status_update_ called with state: %d", data.state);
+  ESP_LOGI(TAG, "on_status_update_ called with state: %d, current_state_: %d", data.state, current_state_);
 
   // Update state in thread-safe manner
   bool update_ui = false;
@@ -114,7 +114,6 @@ void MainUIHandler::on_status_update_(StatusUpdateEventData data) {
     if (data.state != current_state_) {
       update_ui = true;
     }
-    current_state_ = data.state;
     xSemaphoreGive(state_mutex_);
     ESP_LOGI(TAG, "State updated in mutex");
   }
@@ -125,18 +124,18 @@ void MainUIHandler::on_status_update_(StatusUpdateEventData data) {
     return;
   }
   ESP_LOGI(TAG, "Calling update_ui_()");
-  update_ui_();
+  update_ui_(&data.state);
   ESP_LOGI(TAG, "on_status_update_ complete");
 }
 
-void MainUIHandler::update_ui_() {
+void MainUIHandler::update_ui_(StatusUpdateEventData::VoiceState* state_ptr) {
   ESP_LOGI(TAG, "update_ui_ called");
 
   if (main_ui_) {
     StatusUpdateEventData::VoiceState state;
     if (state_mutex_ && xSemaphoreTake(state_mutex_, pdMS_TO_TICKS(100)) == pdTRUE) {
 
-      state = current_state_;
+      state = state_ptr ? *state_ptr : current_state_;
       xSemaphoreGive(state_mutex_);
     } else {
       state = StatusUpdateEventData::VoiceState::UNKNOWN;
@@ -164,7 +163,13 @@ void MainUIHandler::update_ui_() {
     ESP_LOGI(TAG, "Calling main_ui_->update_status() with ui_state: %d", ui_state);
 
     // Lock LVGL before calling UI functions from another task
-    main_ui_->update_status(ui_state);
+    bool success = main_ui_->update_status(ui_state);
+    if (!success) {
+      ESP_LOGW(TAG, "main_ui_->update_status() failed");
+    } else {
+      // Update current state only on successful UI update
+      current_state_ = state;
+    }
     ESP_LOGI(TAG, "main_ui_->update_status() returned");
   }
 

main/ui/apps/iotdis/ui/main_handler.h

@@ -35,7 +35,7 @@ private:
   void on_mute_button_clicked_();
   void on_status_update_(StatusUpdateEventData data);
   void send_mute_command_();
-  void update_ui_();
+  void update_ui_(StatusUpdateEventData::VoiceState* state = nullptr);
 
   std::unique_ptr<MainUI> main_ui_ = nullptr;
   std::unique_ptr<IotDisBridge> bridge_ = nullptr;
@@ -49,4 +49,3 @@ private:
   lv_event_cb_t on_settings_callback_ = nullptr;
   void* settings_callback_user_data_ = nullptr;
 };
-

main/ui/apps/iotdis/web/web_handlers.cpp

@@ -21,16 +21,16 @@ esp_err_t WebHandler::start_web_server() {
 
   auth_key_ = generate_auth_key_();
 
-  esp_err_t ret = web_server_->start(
+  uint16_t port = web_server_->start(
     auth_key_,
     8080
   );
-  if (ret != ESP_OK) {
+  if (port == 0) {
     ESP_LOGE(TAG, "Failed to start web server");
-    return ret;
+    return ESP_FAIL;
   }
 
-  ret = register_web_endpoints_();
+  esp_err_t ret = register_web_endpoints_();
   if (ret != ESP_OK) {
     ESP_LOGE(TAG, "Failed to register web endpoints");
     web_server_->stop();

main/ui/apps/registry.cpp

@@ -1,9 +1,11 @@
 #include "ui/apps/registry.h"
 
 #include "ui/apps/iotdis/descriptor.h"
+#include "ui/apps/travel/descriptor.h"
 
 esp_err_t AppRegistry::init(void) {
   register_app(std::make_unique<IotDisDescriptor>());
+  register_app(std::make_unique<TravelDescriptor>());
 
   return ESP_OK;
 }

main/ui/apps/travel/CMakeLists.txt

@@ -0,0 +1,11 @@
+# Explicit list of travel app sources
+list(APPEND SRCS
+    "${CMAKE_CURRENT_LIST_DIR}/web/web_handlers.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/descriptor.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/settings/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/app.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/settings.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main_handler.cpp"
+    "${CMAKE_CURRENT_LIST_DIR}/ui/main.cpp"
+)

main/ui/apps/travel/app.cpp

@@ -0,0 +1,131 @@
+#include "ui/apps/travel/app.h"
+#include "ui/apps/travel/ui/main_handler.h"
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "common/system_context.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelApp";
+
+TravelApp::TravelApp()
+  : main_ui_handler_(nullptr)
+  , settings_ui_handler_(nullptr)
+  , current_page_(Page::MAIN)
+  , setting_handler_(nullptr)
+  , network_handler_(nullptr)
+  , interaction_handler_(nullptr) {
+  setting_handler_ = std::make_unique<travel::SettingHandler>(
+    std::make_unique<NVSStorageHandler>(TravelApp::NVS_NAMESPACE)
+  );
+}
+
+TravelApp::~TravelApp() { }
+
+esp_err_t TravelApp::init(lv_obj_t* container, InteractionHandler* interaction_handler) {
+  ESP_LOGI(TAG, "Initializing Travel app");
+
+  container_ = container;
+  interaction_handler_ = interaction_handler;
+
+  // Initialize storage
+  setting_handler_->init(nullptr);
+
+  // Load saved settings
+  setting_handler_->load_settings();
+
+  // Get network handler from system context
+  network_handler_ = SystemContext::instance().get_network_handler();
+
+  // Create main UI handler
+  main_ui_handler_ = std::make_unique<travel::MainUIHandler>();
+  main_ui_handler_->init(container, interaction_handler_, setting_handler_.get(), network_handler_);
+
+  // Register settings button callback
+  main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+
+  current_page_ = Page::MAIN;
+
+  return ESP_OK;
+}
+
+esp_err_t TravelApp::deinit() {
+  ESP_LOGI(TAG, "Deinitializing Travel app");
+
+  // Clean up UI handlers
+  if (settings_ui_handler_) {
+    settings_ui_handler_->deinit();
+    settings_ui_handler_.reset();
+  }
+
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  return ESP_OK;
+}
+
+std::string TravelApp::get_name() const {
+  return "Travel";
+}
+
+bool TravelApp::on_back_button_pressed() {
+  // If on settings page, go back to main page
+  if (current_page_ == Page::SETTINGS) {
+    // Clean up settings handler
+    if (settings_ui_handler_) {
+      settings_ui_handler_->deinit();
+      settings_ui_handler_.reset();
+    }
+
+    // Reload settings in case they were updated
+    setting_handler_->load_settings();
+
+    // Recreate main UI handler with updated settings
+    if (!main_ui_handler_) {
+      main_ui_handler_ = std::make_unique<travel::MainUIHandler>();
+      main_ui_handler_->init(container_, interaction_handler_, setting_handler_.get(), network_handler_);
+      main_ui_handler_->register_on_settings_button_clicked(on_settings_button_clicked_static, this);
+    }
+
+    current_page_ = Page::MAIN;
+    return true;
+  }
+
+  // Let system handle back (return to app icons)
+  return false;
+}
+
+void TravelApp::set_network_handler(NetworkHandler* network_handler) {
+  network_handler_ = network_handler;
+}
+
+// ============================================================================
+// Private Methods
+// ============================================================================
+
+void TravelApp::show_settings_page() {
+  ESP_LOGI(TAG, "Showing settings page");
+
+  // Hide main UI handler
+  if (main_ui_handler_) {
+    main_ui_handler_->deinit();
+    main_ui_handler_.reset();
+  }
+
+  // Create settings UI handler
+  settings_ui_handler_ = std::make_unique<travel::SettingsUIHandler>();
+  settings_ui_handler_->init(container_, interaction_handler_, setting_handler_.get(), network_handler_);
+
+  current_page_ = Page::SETTINGS;
+}
+
+// ============================================================================
+// Static Callbacks
+// ============================================================================
+
+void TravelApp::on_settings_button_clicked_static(void* user_data) {
+  TravelApp* app = static_cast<TravelApp*>(user_data);
+  if (app) {
+    app->show_settings_page();
+  }
+}

main/ui/apps/travel/app.h

@@ -0,0 +1,72 @@
+#pragma once
+
+#include "ui/apps/app.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/apps/travel/ui/main_handler.h"
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "io/nvs_handler.h"
+#include "network/network.h"
+#include <string>
+#include <memory>
+
+// Forward declarations
+namespace travel {
+class MainUIHandler;
+class SettingsUIHandler;
+class SettingHandler;
+}
+
+/**
+ * @brief Travel App - MTR Station Arrival Time Display
+ *
+ * Displays estimated arrival times for configured MTR routes.
+ * Features:
+ * - Support for all MTR lines from assets
+ * - Save up to 5 (station, destination) route pairs
+ * - Poll every 30 seconds (configurable 10-120s)
+ * - Traditional Chinese by default
+ * - E-ink optimized (no animations, static layout)
+ * - Web-based configuration via QR code
+ */
+class TravelApp : public UIApp {
+public:
+  TravelApp();
+  ~TravelApp() override;
+
+  esp_err_t init(lv_obj_t* container, InteractionHandler* interaction_handler) override;
+  esp_err_t deinit(void) override;
+  std::string get_name(void) const override;
+  bool on_back_button_pressed(void) override;
+
+  // Set network handler for API calls
+  void set_network_handler(NetworkHandler* network_handler);
+
+private:
+  // UI handlers
+  std::unique_ptr<travel::MainUIHandler> main_ui_handler_;
+  std::unique_ptr<travel::SettingsUIHandler> settings_ui_handler_;
+
+  // Current page tracking
+  enum class Page {
+    MAIN,
+    SETTINGS
+  };
+  Page current_page_;
+
+  // Settings handler (shared across handlers)
+  std::unique_ptr<travel::SettingHandler> setting_handler_;
+
+  // Network handler (not owned, set externally)
+  NetworkHandler* network_handler_;
+
+  // Interaction handler (not owned)
+  InteractionHandler* interaction_handler_;
+
+  static constexpr const char* NVS_NAMESPACE = "travel_app";
+
+  // Private methods
+  void show_settings_page();
+
+  // UI callback forwarders
+  static void on_settings_button_clicked_static(void* user_data);
+};

main/ui/apps/travel/descriptor.cpp

@@ -0,0 +1,12 @@
+#include "ui/apps/travel/descriptor.h"
+#include "ui/apps/travel/app.h"
+
+TravelDescriptor::TravelDescriptor()
+  : AppDescriptor("Travel", std::make_unique<TravelApp>()) { }
+
+void TravelDescriptor::draw_icon(lv_obj_t* parent) {
+  // Draw train icon using LVGL symbol
+  lv_obj_t* icon = lv_label_create(parent);
+  lv_label_set_text(icon, LV_SYMBOL_DRIVE);  // Using drive symbol as train
+  lv_obj_center(icon);
+}

main/ui/apps/travel/descriptor.h

@@ -0,0 +1,14 @@
+#pragma once
+
+#include "ui/apps/app.h"
+
+// Forward declaration
+class TravelApp;
+
+class TravelDescriptor : public AppDescriptor {
+public:
+  TravelDescriptor();
+  ~TravelDescriptor() override = default;
+
+  void draw_icon(lv_obj_t* parent) override;
+};

main/ui/apps/travel/settings/settings_handler.cpp

@@ -0,0 +1,171 @@
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "cJSON.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettings";
+
+namespace travel {
+
+SettingHandler::SettingHandler(std::unique_ptr<NVSStorageHandler> storage)
+  : routes_()
+  , polling_interval_sec_(DEFAULT_POLLING_INTERVAL)
+  , storage_(std::move(storage)) {
+}
+
+esp_err_t SettingHandler::init(const EventGroupHandle_t& system_event_group) {
+  storage_->init(system_event_group);
+  return ESP_OK;
+}
+
+void SettingHandler::load_settings() {
+  // Load polling interval
+  std::string poll_str = storage_->get(NVS_KEY_POLLING);
+  if (!poll_str.empty()) {
+    polling_interval_sec_ = std::stoul(poll_str);
+    if (polling_interval_sec_ < MIN_POLLING_INTERVAL ||
+        polling_interval_sec_ > MAX_POLLING_INTERVAL) {
+      polling_interval_sec_ = DEFAULT_POLLING_INTERVAL;
+    }
+  }
+
+  // Load routes - clear existing settings as per new format
+  routes_.clear();
+  std::string routes_json = storage_->get(NVS_KEY_ROUTES);
+  if (!routes_json.empty()) {
+    routes_from_json(routes_json);
+  }
+
+  ESP_LOGI(TAG, "Loaded %d routes, polling interval: %d seconds",
+           static_cast<int>(routes_.size()), static_cast<int>(polling_interval_sec_));
+}
+
+void SettingHandler::save_settings() {
+  // Save polling interval
+  storage_->put(NVS_KEY_POLLING, std::to_string(polling_interval_sec_));
+
+  // Save routes
+  std::string routes_json = routes_to_json();
+  storage_->put(NVS_KEY_ROUTES, routes_json);
+
+  ESP_LOGI(TAG, "Saved %d routes, polling interval: %d seconds",
+           static_cast<int>(routes_.size()), static_cast<int>(polling_interval_sec_));
+}
+
+void SettingHandler::add_route(const RoutePair& route) {
+  if (routes_.size() >= MAX_ROUTES) {
+    ESP_LOGW(TAG, "Maximum number of routes reached (%d)", static_cast<int>(MAX_ROUTES));
+    return;
+  }
+
+  // Check for duplicates
+  for (const auto& existing : routes_) {
+    if (existing == route) {
+      ESP_LOGW(TAG, "Route already exists");
+      return;
+    }
+  }
+
+  routes_.push_back(route);
+  ESP_LOGI(TAG, "Added route: %s -> %s", route.station_name.c_str(), route.direction_name.c_str());
+}
+
+void SettingHandler::remove_route(size_t index) {
+  if (index < routes_.size()) {
+    ESP_LOGI(TAG, "Removing route at index %d", static_cast<int>(index));
+    routes_.erase(routes_.begin() + index);
+  }
+}
+
+void SettingHandler::clear_routes() {
+  routes_.clear();
+  ESP_LOGI(TAG, "Cleared all routes");
+}
+
+void SettingHandler::set_polling_interval(uint32_t seconds) {
+  if (seconds < MIN_POLLING_INTERVAL) {
+    seconds = MIN_POLLING_INTERVAL;
+  } else if (seconds > MAX_POLLING_INTERVAL) {
+    seconds = MAX_POLLING_INTERVAL;
+  }
+  polling_interval_sec_ = seconds;
+  ESP_LOGI(TAG, "Set polling interval to %d seconds", static_cast<int>(seconds));
+}
+
+std::string SettingHandler::routes_to_json() const {
+  cJSON* root = cJSON_CreateArray();
+
+  for (const auto& route : routes_) {
+    cJSON* route_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(route_obj, "line_code", route.line_code.c_str());
+    cJSON_AddStringToObject(route_obj, "line_name", route.line_name.c_str());
+    cJSON_AddStringToObject(route_obj, "line_color", route.line_color.c_str());
+    cJSON_AddStringToObject(route_obj, "station_code", route.station_code.c_str());
+    cJSON_AddStringToObject(route_obj, "station_name", route.station_name.c_str());
+    cJSON_AddStringToObject(route_obj, "direction", route.direction.c_str());
+    cJSON_AddStringToObject(route_obj, "direction_name", route.direction_name.c_str());
+    cJSON_AddItemToArray(root, route_obj);
+  }
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  std::string result(json_str ? json_str : "[]");
+  if (json_str) {
+    free(json_str);
+  }
+  cJSON_Delete(root);
+
+  return result;
+}
+
+void SettingHandler::routes_from_json(const std::string& json) {
+  routes_.clear();
+
+  cJSON* root = cJSON_Parse(json.c_str());
+  if (!root || !cJSON_IsArray(root)) {
+    ESP_LOGE(TAG, "Failed to parse routes JSON");
+    if (root) {
+      cJSON_Delete(root);
+    }
+    return;
+  }
+
+  int array_size = cJSON_GetArraySize(root);
+  for (int i = 0; i < array_size && i < static_cast<int>(MAX_ROUTES); i++) {
+    cJSON* route_obj = cJSON_GetArrayItem(root, i);
+    if (!route_obj || !cJSON_IsObject(route_obj)) {
+      continue;
+    }
+
+    RoutePair route;
+    cJSON* item;
+
+    item = cJSON_GetObjectItem(route_obj, "line_code");
+    if (item && cJSON_IsString(item)) route.line_code = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "line_name");
+    if (item && cJSON_IsString(item)) route.line_name = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "line_color");
+    if (item && cJSON_IsString(item)) route.line_color = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "station_code");
+    if (item && cJSON_IsString(item)) route.station_code = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "station_name");
+    if (item && cJSON_IsString(item)) route.station_name = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "direction");
+    if (item && cJSON_IsString(item)) route.direction = item->valuestring;
+
+    item = cJSON_GetObjectItem(route_obj, "direction_name");
+    if (item && cJSON_IsString(item)) route.direction_name = item->valuestring;
+
+    if (!route.line_code.empty() && !route.station_code.empty() && !route.direction.empty()) {
+      routes_.push_back(route);
+    }
+  }
+
+  cJSON_Delete(root);
+  ESP_LOGI(TAG, "Loaded %d routes from JSON", static_cast<int>(routes_.size()));
+}
+
+} // namespace travel

main/ui/apps/travel/settings/settings_handler.h

@@ -0,0 +1,58 @@
+#pragma once
+
+#include "freertos/FreeRTOS.h"
+#include <string>
+#include <vector>
+#include <memory>
+#include "io/nvs_handler.h"
+#include "ui/apps/travel/types.h"
+
+namespace travel {
+
+/**
+ * @brief Settings handler for Travel app
+ *
+ * Manages NVS persistence of route pairs and polling interval.
+ */
+class SettingHandler {
+public:
+  explicit SettingHandler(std::unique_ptr<NVSStorageHandler> storage);
+  ~SettingHandler() = default;
+
+  esp_err_t init(const EventGroupHandle_t& system_event_group);
+
+  void load_settings();
+  void save_settings();
+
+  bool is_configured() const { return !routes_.empty(); }
+
+  // Route management
+  void add_route(const RoutePair& route);
+  void remove_route(size_t index);
+  void clear_routes();
+  const std::vector<RoutePair>& get_routes() const { return routes_; }
+  size_t get_route_count() const { return routes_.size(); }
+
+  // Polling interval (seconds)
+  uint32_t get_polling_interval() const { return polling_interval_sec_; }
+  void set_polling_interval(uint32_t seconds);
+
+  static constexpr size_t MAX_ROUTES = 5;
+  static constexpr uint32_t DEFAULT_POLLING_INTERVAL = 30;
+  static constexpr uint32_t MIN_POLLING_INTERVAL = 10;
+  static constexpr uint32_t MAX_POLLING_INTERVAL = 120;
+
+private:
+  static constexpr const char* NVS_KEY_ROUTES = "routes";
+  static constexpr const char* NVS_KEY_POLLING = "poll_interval";
+
+  std::vector<RoutePair> routes_;
+  uint32_t polling_interval_sec_ = DEFAULT_POLLING_INTERVAL;
+  std::unique_ptr<NVSStorageHandler> storage_;
+
+  // JSON serialization helpers
+  std::string routes_to_json() const;
+  void routes_from_json(const std::string& json);
+};
+
+} // namespace travel

main/ui/apps/travel/types.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <string>
+#include <vector>
+
+namespace travel {
+
+/**
+ * @brief Structure representing a monitored route (station -> direction pair)
+ */
+struct RoutePair {
+  std::string line_code;      // Line code (e.g., "ISL", "TWL")
+  std::string line_name;      // Line name in Traditional Chinese (e.g., "港島綫")
+  std::string line_color;     // Hex color code (e.g., "#007DC5")
+  std::string station_code;   // Station code (e.g., "CEN")
+  std::string station_name;   // Station name in TC (e.g., "中環")
+  std::string direction;      // Direction terminal code (e.g., "CHW" for "柴灣方向")
+  std::string direction_name; // Direction name in TC (e.g., "柴灣方向")
+
+  bool operator==(const RoutePair& other) const {
+    return line_code == other.line_code &&
+           station_code == other.station_code &&
+           direction == other.direction;
+  }
+};
+
+/**
+ * @brief Structure representing a single arrival display entry
+ */
+struct ArrivalDisplay {
+  std::string arrival_time;       // Formatted arrival time (e.g., "2分鐘")
+  std::string arrival_time_full;  // Full time (e.g., "14:32") if available
+  std::string direction;          // Direction terminal name (e.g., "柴灣方向")
+  std::string platform;           // Platform number if available
+};
+
+/**
+ * @brief Structure representing all arrival data for a route
+ */
+struct RouteArrivalData {
+  RoutePair route;
+  std::vector<ArrivalDisplay> arrivals;  // List of upcoming trains in direction
+  bool is_valid = false;
+  std::string error_message;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/main.cpp

@@ -0,0 +1,321 @@
+#include "ui/apps/travel/ui/main.h"
+#include "display/lvgl_handler.h"
+#include "font/noto_sans_tc_14.c"
+#include "esp_log.h"
+
+static const char* TAG = "TravelMainUI";
+#define LVGL_PORT_LOCK_TIMEOUT_MS 6000
+
+namespace travel {
+
+  MainUI::MainUI() = default;
+
+  MainUI::~MainUI() {
+    deinit();
+  }
+
+  esp_err_t MainUI::init(lv_obj_t* parent) {
+    if (!parent) {
+      ESP_LOGE(TAG, "Parent is null");
+      return ESP_ERR_INVALID_ARG;
+    }
+
+    parent_ = parent;
+
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return ESP_ERR_TIMEOUT;
+    }
+
+    // Create main container
+    container_ = lv_obj_create(parent_);
+    lv_obj_set_size(container_, LV_PCT(100), LV_PCT(100));
+    lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
+    lv_obj_set_style_pad_all(container_, 5, 0);
+    lv_obj_set_style_bg_opa(container_, LV_OPA_TRANSP, 0);
+    lv_obj_set_style_border_width(container_, 0, 0);
+    // Disable animations and scrolling for e-ink
+    lv_obj_set_style_anim_time(container_, 0, 0);
+    lv_obj_clear_flag(container_, LV_OBJ_FLAG_SCROLLABLE);
+
+    create_header_();
+    create_route_displays_();
+
+    // Message label for errors/empty state
+    msg_label_ = lv_label_create(container_);
+    lv_obj_set_width(msg_label_, LV_PCT(100));
+    lv_label_set_text(msg_label_, "");
+    lv_obj_set_style_text_font(msg_label_, &noto_sans_tc_14, 0);
+    lv_obj_add_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    // Refresh time label at bottom
+    refresh_time_label_ = lv_label_create(container_);
+    lv_obj_set_width(refresh_time_label_, LV_PCT(100));
+    lv_label_set_text(refresh_time_label_, "");
+    lv_obj_set_style_text_font(refresh_time_label_, &noto_sans_tc_14, 0);
+    lv_obj_set_style_text_color(refresh_time_label_, lv_color_black(), 0);
+
+    lvgl_port_unlock();
+
+    return ESP_OK;
+  }
+
+  esp_err_t MainUI::deinit() {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return ESP_ERR_TIMEOUT;
+    }
+
+    if (container_) {
+      lv_obj_del(container_);
+      container_ = nullptr;
+    }
+
+    // Reset all pointers
+    header_label_ = nullptr;
+    settings_btn_ = nullptr;
+    refresh_time_label_ = nullptr;
+    msg_label_ = nullptr;
+    for (auto& display : route_displays_) {
+      display.container = nullptr;
+      display.header = nullptr;
+      for (int i = 0; i < MAX_ARRIVALS_PER_ROUTE; i++) {
+        display.arrival_labels[i] = nullptr;
+      }
+    }
+
+    lvgl_port_unlock();
+    parent_ = nullptr;
+
+    return ESP_OK;
+  }
+
+  void MainUI::create_header_() {
+    // Header container
+    lv_obj_t* header = lv_obj_create(container_);
+    lv_obj_set_size(header, LV_PCT(100), 35);
+    lv_obj_set_flex_flow(header, LV_FLEX_FLOW_ROW);
+    lv_obj_set_flex_align(header, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+    lv_obj_set_style_pad_hor(header, 5, 0);
+    lv_obj_set_style_bg_opa(header, LV_OPA_TRANSP, 0);
+    lv_obj_set_style_border_width(header, 0, 0);
+    lv_obj_set_style_border_width(header, 1, 0);
+    lv_obj_set_style_border_side(header, LV_BORDER_SIDE_BOTTOM, 0);
+    lv_obj_set_style_border_color(header, lv_color_black(), 0);
+    lv_obj_set_style_anim_time(header, 0, 0);
+    lv_obj_clear_flag(header, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Title label
+    header_label_ = lv_label_create(header);
+    lv_label_set_text(header_label_, "MTR到站時間");
+    lv_obj_set_style_text_font(header_label_, &noto_sans_tc_14, 0);
+
+    // Settings button
+    settings_btn_ = lv_btn_create(header);
+    lv_obj_set_size(settings_btn_, 30, 30);
+    lv_obj_t* btn_label = lv_label_create(settings_btn_);
+    lv_label_set_text(btn_label, LV_SYMBOL_SETTINGS);
+    lv_obj_center(btn_label);
+    lv_obj_set_style_anim_time(settings_btn_, 0, 0);
+  }
+
+  void MainUI::create_route_displays_() {
+    for (int i = 0; i < MAX_DISPLAY_ROUTES; i++) {
+      RouteDisplay& display = route_displays_[i];
+
+      // Container for each route
+      display.container = lv_obj_create(container_);
+      lv_obj_set_size(display.container, LV_PCT(100), LV_SIZE_CONTENT);
+      lv_obj_set_flex_flow(display.container, LV_FLEX_FLOW_COLUMN);
+      lv_obj_set_style_pad_all(display.container, 3, 0);
+      lv_obj_set_style_bg_opa(display.container, LV_OPA_TRANSP, 0);
+      lv_obj_set_style_border_width(display.container, 0, 0);
+      lv_obj_set_style_border_width(display.container, 1, 0);
+      lv_obj_set_style_border_side(display.container, LV_BORDER_SIDE_BOTTOM, 0);
+      lv_obj_set_style_border_color(display.container, lv_color_black(), 0);
+      lv_obj_set_style_anim_time(display.container, 0, 0);
+      lv_obj_clear_flag(display.container, LV_OBJ_FLAG_SCROLLABLE);
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);  // Hidden by default
+
+      // Route header (station -> destination with line color)
+      display.header = lv_label_create(display.container);
+      lv_obj_set_width(display.header, LV_PCT(100));
+      lv_label_set_text(display.header, "");
+      lv_obj_set_style_text_font(display.header, &noto_sans_tc_14, 0);
+
+      // Arrival labels (up to 3 per route)
+      for (int j = 0; j < MAX_ARRIVALS_PER_ROUTE; j++) {
+        display.arrival_labels[j] = lv_label_create(display.container);
+        lv_obj_set_width(display.arrival_labels[j], LV_PCT(100));
+        lv_label_set_text(display.arrival_labels[j], "");
+        lv_obj_set_style_text_font(display.arrival_labels[j], &noto_sans_tc_14, 0);
+        lv_obj_set_style_pad_left(display.arrival_labels[j], 10, 0);
+      }
+    }
+  }
+
+  void MainUI::update_arrivals(const std::vector<RouteArrivalData>& arrival_data) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide message label only if it's currently visible
+    if (!lv_obj_has_flag(msg_label_, LV_OBJ_FLAG_HIDDEN)) {
+      lv_obj_add_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Update each route display
+    for (int i = 0; i < MAX_DISPLAY_ROUTES; i++) {
+      if (i < static_cast<int>(arrival_data.size())) {
+        update_route_display_(route_displays_[i], arrival_data[i]);
+      } else {
+        // Hide unused route displays if currently visible
+        if (route_displays_[i].cached_visible) {
+          lv_obj_add_flag(route_displays_[i].container, LV_OBJ_FLAG_HIDDEN);
+          route_displays_[i].cached_visible = false;
+        }
+      }
+    }
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::update_route_display_(RouteDisplay& display, const RouteArrivalData& data) {
+    // Show container if hidden
+    if (!display.cached_visible) {
+      lv_obj_clear_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+      display.cached_visible = true;
+    }
+
+    // Update header text (station -> direction)
+    std::string header_text = data.route.station_name + " -> " + data.route.direction_name;
+    if (header_text != display.cached_header_text) {
+      lv_label_set_text(display.header, header_text.c_str());
+      display.cached_header_text = header_text;
+    }
+
+    // Update line color only if changed
+    if (data.route.line_color != display.cached_line_color) {
+      if (!data.route.line_color.empty()) {
+        lv_color_t line_color = hex_to_lv_color_(data.route.line_color);
+        lv_obj_set_style_text_color(display.header, line_color, 0);
+      }
+      display.cached_line_color = data.route.line_color;
+    }
+
+    // Update arrival labels - only if text changed
+    for (int i = 0; i < MAX_ARRIVALS_PER_ROUTE; i++) {
+      std::string arrival_text = "";
+      bool should_show = (i < static_cast<int>(data.arrivals.size()));
+
+      if (should_show) {
+        const auto& arrival = data.arrivals[i];
+        arrival_text = "  " + arrival.arrival_time;
+        if (!arrival.arrival_time_full.empty()) {
+          arrival_text += " (" + arrival.arrival_time_full + ")";
+        }
+        arrival_text += " " + arrival.direction;
+      }
+
+      if (arrival_text != display.cached_arrival_texts[i]) {
+        lv_label_set_text(display.arrival_labels[i], arrival_text.c_str());
+        display.cached_arrival_texts[i] = arrival_text;
+      }
+
+      // Handle visibility only if changed
+      if (should_show != display.cached_arrival_visible[i]) {
+        if (should_show) {
+          lv_obj_clear_flag(display.arrival_labels[i], LV_OBJ_FLAG_HIDDEN);
+        } else {
+          lv_obj_add_flag(display.arrival_labels[i], LV_OBJ_FLAG_HIDDEN);
+        }
+        display.cached_arrival_visible[i] = should_show;
+      }
+    }
+
+    // Show error if any
+    if (!data.is_valid && !data.error_message.empty()) {
+      std::string error_text = "  錯誤: " + data.error_message;
+      if (error_text != display.cached_arrival_texts[0]) {
+        lv_label_set_text(display.arrival_labels[0], error_text.c_str());
+        display.cached_arrival_texts[0] = error_text;
+      }
+      if (!display.cached_arrival_visible[0]) {
+        lv_obj_clear_flag(display.arrival_labels[0], LV_OBJ_FLAG_HIDDEN);
+        display.cached_arrival_visible[0] = true;
+      }
+    }
+  }
+
+  void MainUI::update_last_refresh_time(const std::string& time_str) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    std::string full_text = "更新: " + time_str;
+    if (full_text != cached_refresh_time_text) {
+      lv_label_set_text(refresh_time_label_, full_text.c_str());
+      cached_refresh_time_text = full_text;
+    }
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::show_no_routes_message() {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide all route displays
+    for (auto& display : route_displays_) {
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Show message
+    lv_label_set_text(msg_label_, "請按右上角設定按鈕添加路線");
+    lv_obj_clear_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::show_error_message(const std::string& message) {
+    if (!lvgl_port_lock(pdMS_TO_TICKS(LVGL_PORT_LOCK_TIMEOUT_MS))) {
+      ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+      return;
+    }
+
+    // Hide all route displays
+    for (auto& display : route_displays_) {
+      lv_obj_add_flag(display.container, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    // Show error message
+    lv_label_set_text(msg_label_, ("錯誤: " + message).c_str());
+    lv_obj_clear_flag(msg_label_, LV_OBJ_FLAG_HIDDEN);
+
+    lvgl_port_unlock();
+  }
+
+  void MainUI::register_settings_button_callback(lv_event_cb_t cb, void* user_data) {
+    if (settings_btn_) {
+      lv_obj_add_event_cb(settings_btn_, cb, LV_EVENT_CLICKED, user_data);
+    }
+  }
+
+  lv_color_t MainUI::hex_to_lv_color_(const std::string& hex_color) {
+    if (hex_color.length() < 7 || hex_color[0] != '#') {
+      return lv_color_black();
+    }
+
+    unsigned int r = std::stoi(hex_color.substr(1, 2), nullptr, 16);
+    unsigned int g = std::stoi(hex_color.substr(3, 2), nullptr, 16);
+    unsigned int b = std::stoi(hex_color.substr(5, 2), nullptr, 16);
+
+    return lv_color_make(r, g, b);
+  }
+
+} // namespace travel

main/ui/apps/travel/ui/main.h

@@ -0,0 +1,67 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include "ui/apps/travel/types.h"
+#include <vector>
+#include <memory>
+
+namespace travel {
+
+/**
+ * @brief Main UI for Travel app - displays train arrivals
+ *
+ * E-ink optimized: no animations, static layout, no scrolling
+ */
+class MainUI {
+public:
+  MainUI();
+  ~MainUI();
+
+  esp_err_t init(lv_obj_t* parent);
+  esp_err_t deinit();
+
+  // Update display with arrival data
+  void update_arrivals(const std::vector<RouteArrivalData>& arrival_data);
+  void update_last_refresh_time(const std::string& time_str);
+  void show_no_routes_message();
+  void show_error_message(const std::string& message);
+
+  // Register settings button callback
+  void register_settings_button_callback(lv_event_cb_t cb, void* user_data);
+
+private:
+  lv_obj_t* parent_ = nullptr;
+  lv_obj_t* container_ = nullptr;
+  lv_obj_t* header_label_ = nullptr;
+  lv_obj_t* settings_btn_ = nullptr;
+  lv_obj_t* refresh_time_label_ = nullptr;
+  lv_obj_t* msg_label_ = nullptr;
+  std::string cached_refresh_time_text;
+
+  // Route display containers (up to MAX_ROUTES)
+  struct RouteDisplay {
+    lv_obj_t* container = nullptr;
+    lv_obj_t* header = nullptr;
+    lv_obj_t* arrival_labels[3] = {nullptr, nullptr, nullptr};  // Show up to 3 arrivals per route
+
+    // Cached values for change detection
+    std::string cached_header_text;
+    std::string cached_line_color;
+    std::string cached_arrival_texts[3];
+    bool cached_arrival_visible[3] = {false, false, false};
+    bool cached_visible = false;
+  };
+  RouteDisplay route_displays_[5];
+
+  static constexpr int MAX_DISPLAY_ROUTES = 5;
+  static constexpr int MAX_ARRIVALS_PER_ROUTE = 3;
+
+  void create_header_();
+  void create_route_displays_();
+  void clear_route_display_(RouteDisplay& display);
+  void update_route_display_(RouteDisplay& display, const RouteArrivalData& data);
+  lv_color_t hex_to_lv_color_(const std::string& hex_color);
+};
+
+} // namespace travel

main/ui/apps/travel/ui/main_handler.cpp

@@ -0,0 +1,479 @@
+#include "ui/apps/travel/ui/main_handler.h"
+#include "display/lvgl_handler.h"
+#include "external/mtr/line_info.h"
+#include "esp_log.h"
+#include <ctime>
+#include <iomanip>
+#include <sstream>
+#include <algorithm>
+#include <cctype>
+
+static const char* TAG = "TravelMainHandler";
+
+namespace travel {
+
+  // Helper functions shared by formatting routines
+  namespace {
+    // Parse an ISO 8601-like timestamp into epoch seconds (UTC).
+    // Supports formats like: 2024-01-15T14:30:00+08:00, 2026-02-03 23:08:22, or ...Z
+    bool parse_iso_to_epoch(const std::string& s, time_t& out_epoch) {
+      auto trim_copy = [](const std::string& in) {
+        size_t a = 0;
+        size_t b = in.size();
+        while (a < b && std::isspace((unsigned char)in[a])) ++a;
+        while (b > a && std::isspace((unsigned char)in[b - 1])) --b;
+        return in.substr(a, b - a);
+        };
+
+      std::string s_trim = trim_copy(s);
+      // Accept either 'T' or space (also lowercase 't') as date/time separator
+      size_t t_pos = s_trim.find_first_of("Tt ");
+      if (t_pos == std::string::npos) return false;
+
+      std::string date = trim_copy(s_trim.substr(0, t_pos));
+      std::string tzpart;
+      std::string timepart = trim_copy(s_trim.substr(t_pos + 1));
+
+      // Extract timezone (Z or +HH:MM or +HHMM or +HH)
+      size_t zpos = timepart.find_first_of("Zz");
+      if (zpos != std::string::npos) {
+        tzpart = "Z";
+        timepart = trim_copy(timepart.substr(0, zpos));
+      } else {
+        // Find first '+' or '-' AFTER the numeric time portion
+        size_t plus = std::string::npos;
+        for (size_t i = 0; i < timepart.size(); ++i) {
+          if (timepart[i] == '+' || timepart[i] == '-') { plus = i; break; }
+        }
+        if (plus != std::string::npos) {
+          tzpart = trim_copy(timepart.substr(plus));
+          timepart = trim_copy(timepart.substr(0, plus));
+        }
+      }
+
+      int year = 0, month = 0, day = 0;
+      if (sscanf(date.c_str(), "%d-%d-%d", &year, &month, &day) != 3) {
+        // Try alternative separators like '/'
+        if (sscanf(date.c_str(), "%d/%d/%d", &year, &month, &day) != 3) return false;
+      }
+
+      int hour = 0, min = 0, sec = 0;
+      // Remove fractional seconds if present (e.g., 10:34:52.123)
+      size_t dot = timepart.find('.');
+      if (dot != std::string::npos) timepart = timepart.substr(0, dot);
+
+      int time_parsed = sscanf(timepart.c_str(), "%d:%d:%d", &hour, &min, &sec);
+      if (time_parsed < 2) {
+        // Try hour only or hour:minute
+        if (sscanf(timepart.c_str(), "%d:%d", &hour, &min) == 2) {
+          sec = 0;
+        } else {
+          return false;
+        }
+      }
+
+      int parsed_offset_seconds = 0; // seconds east of UTC
+      bool has_tz = false;
+      if (!tzpart.empty()) {
+        has_tz = true;
+        if (tzpart == "Z" || tzpart == "z") {
+          parsed_offset_seconds = 0;
+        } else {
+          char sign = tzpart[0];
+          int oh = 0, om = 0;
+          std::string tznum = tzpart.substr(1);
+          // Accept +HH:MM, +HHMM, or +HH
+          if (sscanf(tznum.c_str(), "%d:%d", &oh, &om) == 2) {
+            parsed_offset_seconds = oh * 3600 + om * 60;
+          } else if (sscanf(tznum.c_str(), "%d", &oh) == 1) {
+            // If tz like 0800, interpret as HHMM when length>=3
+            if (tznum.size() >= 3 && tznum.find(':') == std::string::npos && tznum.size() <= 4) {
+              if (tznum.size() == 4) {
+                int hh = 0, mm = 0;
+                if (sscanf(tznum.c_str(), "%2d%2d", &hh, &mm) == 2) {
+                  oh = hh; om = mm;
+                }
+              }
+              parsed_offset_seconds = oh * 3600 + om * 60;
+            } else {
+              parsed_offset_seconds = oh * 3600;
+            }
+          }
+          if (sign == '-') parsed_offset_seconds = -parsed_offset_seconds;
+        }
+      }
+
+      std::tm tm = {};
+      tm.tm_year = year - 1900;
+      tm.tm_mon = month - 1;
+      tm.tm_mday = day;
+      tm.tm_hour = hour;
+      tm.tm_min = min;
+      tm.tm_sec = sec;
+      tm.tm_isdst = -1;
+
+      time_t now = time(nullptr);
+      std::tm local_tm = *std::localtime(&now);
+      std::tm gm_tm = *std::gmtime(&now);
+      time_t local_epoch = mktime(&local_tm);
+      time_t gm_epoch = mktime(&gm_tm);
+      int local_offset = static_cast<int>(difftime(local_epoch, gm_epoch));
+
+      time_t epoch_assuming_local = mktime(&tm);
+      if (epoch_assuming_local == (time_t)-1) return false;
+
+      if (!has_tz) {
+        // No timezone provided: assume local time
+        out_epoch = epoch_assuming_local;
+      } else {
+        // Adjust when parsed time had a specific timezone
+        out_epoch = epoch_assuming_local + (local_offset - parsed_offset_seconds);
+      }
+      return true;
+    }
+
+    std::string format_epoch_HHMM(time_t epoch) {
+      std::tm at = *std::localtime(&epoch);
+      char buf[6];
+      strftime(buf, sizeof(buf), "%H:%M", &at);
+      return std::string(buf);
+    }
+  }
+
+  MainUIHandler::MainUIHandler()
+    : main_ui_(std::make_unique<MainUI>())
+    , mtr_handler_(std::make_unique<MTRNextTrainHandler>()) {
+    refresh_mutex_ = xSemaphoreCreateMutex();
+  }
+
+  MainUIHandler::~MainUIHandler() {
+    deinit();
+    if (refresh_mutex_) {
+      vSemaphoreDelete(refresh_mutex_);
+    }
+  }
+
+  esp_err_t MainUIHandler::init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  ) {
+    ESP_LOGI(TAG, "Initializing main UI handler");
+
+    setting_handler_ = setting_handler;
+    network_handler_ = network_handler;
+
+    // Initialize UI
+    esp_err_t err = main_ui_->init(parent);
+    if (err != ESP_OK) {
+      ESP_LOGE(TAG, "Failed to init main UI");
+      return err;
+    }
+
+    // Register settings button callback
+    main_ui_->register_settings_button_callback(on_settings_button_clicked_static_, this);
+
+    // Check if configured
+    if (!setting_handler_->is_configured()) {
+      main_ui_->show_no_routes_message();
+      return ESP_OK;
+    }
+
+    // Start polling task
+    polling_running_ = true;
+    BaseType_t task_created = xTaskCreate(
+      polling_task_,
+      "travel_poll",
+      8192,
+      this,
+      5,
+      &polling_task_handle_
+    );
+
+    if (task_created != pdPASS) {
+      ESP_LOGE(TAG, "Failed to create polling task");
+      polling_running_ = false;
+      return ESP_ERR_NO_MEM;
+    }
+
+    // Do initial refresh
+    fetch_and_update_arrivals_();
+
+    return ESP_OK;
+  }
+
+  esp_err_t MainUIHandler::deinit() {
+    ESP_LOGI(TAG, "Deinitializing main UI handler");
+
+    // Stop polling task
+    if (polling_task_handle_) {
+      polling_running_ = false;
+      // Wait for task to finish
+      vTaskDelay(pdMS_TO_TICKS(100));
+      polling_task_handle_ = nullptr;
+    }
+
+    // Deinit UI
+    if (main_ui_) {
+      main_ui_->deinit();
+    }
+
+    return ESP_OK;
+  }
+
+  void MainUIHandler::register_on_settings_button_clicked(SettingsButtonCallback cb, void* user_data) {
+    on_settings_callback_ = cb;
+    settings_callback_user_data_ = user_data;
+  }
+
+  void MainUIHandler::force_refresh() {
+    if (xSemaphoreTake(refresh_mutex_, pdMS_TO_TICKS(1000)) == pdTRUE) {
+      fetch_and_update_arrivals_();
+      xSemaphoreGive(refresh_mutex_);
+    }
+  }
+
+  void MainUIHandler::polling_task_(void* param) {
+    MainUIHandler* handler = static_cast<MainUIHandler*>(param);
+
+    while (handler->polling_running_) {
+      uint32_t interval_ms = handler->setting_handler_->get_polling_interval() * 1000;
+
+      if (xSemaphoreTake(handler->refresh_mutex_, pdMS_TO_TICKS(1000)) == pdTRUE) {
+        handler->fetch_and_update_arrivals_();
+        xSemaphoreGive(handler->refresh_mutex_);
+      }
+
+      // Delay until next poll
+      vTaskDelay(pdMS_TO_TICKS(interval_ms));
+    }
+
+    vTaskDelete(nullptr);
+  }
+
+  void MainUIHandler::fetch_and_update_arrivals_() {
+    if (!network_handler_ || !setting_handler_) {
+      return;
+    }
+
+    const auto& routes = setting_handler_->get_routes();
+    if (routes.empty()) {
+      main_ui_->show_no_routes_message();
+      return;
+    }
+
+    std::vector<RouteArrivalData> arrival_data;
+
+    for (const auto& route : routes) {
+      RouteArrivalData data;
+      data.route = route;
+
+      // Fetch arrival info from MTR API
+      std::string line_code = route.line_code;
+      std::string station_code = route.station_code;
+      StationArrivalInfo* arrival_info = nullptr;
+
+      MtrArrivalErrorCode error = mtr_handler_->get_next_arrival_info(
+        network_handler_,
+        line_code,
+        station_code,
+        arrival_info,
+        Language::TC  // Traditional Chinese
+      );
+
+      if (error == MtrArrivalErrorCode::NONE && arrival_info) {
+        // Determine which direction (UP or DOWN) to filter based on terminal station
+        const auto* up_arrivals = arrival_info->up_arrivals();
+        const auto* down_arrivals = arrival_info->down_arrivals();
+
+        // Get all lines to find station positions
+        std::vector<LineInfo> lines = mtr_handler_->get_lines();
+
+        // Find current line and determine direction
+        bool filter_up = false;
+        bool filter_down = false;
+
+        for (const auto& line : lines) {
+          if (std::string(line.code()) == line_code) {
+            const auto* stations = line.stations();
+            if (stations) {
+              // Find index of current station and terminal station
+              size_t current_idx = SIZE_MAX;
+              size_t terminal_idx = SIZE_MAX;
+
+              for (size_t i = 0; i < stations->size(); i++) {
+                if (std::string(stations->at(i).code()) == station_code) {
+                  current_idx = i;
+                }
+                if (std::string(stations->at(i).code()) == route.direction) {
+                  terminal_idx = i;
+                }
+              }
+
+              // Determine direction: if terminal is at higher index, it's DOWN
+              if (current_idx != SIZE_MAX && terminal_idx != SIZE_MAX) {
+                if (terminal_idx > current_idx) {
+                  filter_down = true;
+                } else {
+                  filter_up = true;
+                }
+              }
+            }
+            break;
+          }
+        }
+
+        // Filter arrivals based on direction
+        auto process_arrivals = [&](const std::vector<ArrivalInfo>* arrivals) {
+          if (!arrivals) return;
+          for (const auto& arrival : *arrivals) {
+            ArrivalDisplay display;
+            display.arrival_time = format_arrival_time_(arrival.arrival_time());
+            display.arrival_time_full = format_arrival_time_full_(arrival.arrival_time());
+            display.direction = route.direction_name;
+            data.arrivals.push_back(display);
+          }
+          };
+
+        if (filter_up) {
+          process_arrivals(up_arrivals);
+        }
+        if (filter_down) {
+          process_arrivals(down_arrivals);
+        }
+
+        data.is_valid = true;
+
+        // Clean up
+        delete arrival_info;
+      } else {
+        data.is_valid = false;
+        switch (error) {
+          case MtrArrivalErrorCode::LINE_NOT_FOUND:
+            data.error_message = "路線不存在";
+            break;
+          case MtrArrivalErrorCode::STATION_NOT_FOUND:
+            data.error_message = "車站不存在";
+            break;
+          case MtrArrivalErrorCode::NO_ARRIVAL_INFO:
+            data.error_message = "無到站資料";
+            break;
+          default:
+            data.error_message = "無法連接";
+            break;
+        }
+      }
+
+      arrival_data.push_back(data);
+    }
+
+    // Update UI only if data changed
+    if (has_arrival_data_changed_(arrival_data)) {
+      main_ui_->update_arrivals(arrival_data);
+      cached_arrival_data_ = arrival_data;
+    }
+    main_ui_->update_last_refresh_time(get_current_time_string_());
+  }
+
+  std::string MainUIHandler::format_arrival_time_(const std::string& api_time) {
+    // Keep fallback for numeric minute strings (e.g., "0", "6", "15")
+    if (!api_time.empty() && std::all_of(api_time.begin(), api_time.end(), [](char c) { return std::isdigit((unsigned char)c); })) {
+      return api_time + "分鐘";
+    }
+
+    time_t arrival_epoch = 0;
+    if (parse_iso_to_epoch(api_time, arrival_epoch)) {
+      time_t now = time(nullptr);
+      double diff_seconds = difftime(arrival_epoch, now);
+      if (diff_seconds < 0) diff_seconds = 0; // already arrived -> show 0
+      int minutes = static_cast<int>((diff_seconds + 59) / 60); // round up
+
+      if (minutes < 60) {
+        return std::to_string(minutes) + "分鐘";
+      }
+    }
+
+    // Only relative minutes are returned from this function.
+    ESP_LOGW(TAG, "Unable to parse arrival time for relative format: %s", api_time.c_str());
+    return std::string();
+  }
+
+  std::string MainUIHandler::format_arrival_time_full_(const std::string& api_time) {
+    // Returns absolute time for display (e.g., "14:32")
+    // Returns empty string for relative times
+    if (api_time.length() <= 2) {
+      ESP_LOGW(TAG, "Arrival time appears to be relative, no full time available: %s", api_time.c_str());
+      return "";
+    }
+
+    time_t arrival_epoch = 0;
+    if (parse_iso_to_epoch(api_time, arrival_epoch)) {
+      return format_epoch_HHMM(arrival_epoch);
+    }
+
+    // fallback: extract HH:MM
+    size_t t_pos = api_time.find('T');
+    if (t_pos != std::string::npos && api_time.length() > t_pos + 5) {
+      return api_time.substr(t_pos + 1, 5);
+    }
+
+    ESP_LOGW(TAG, "Unable to parse arrival time for full format: %s", api_time.c_str());
+    return std::string();
+  }
+
+  std::string MainUIHandler::get_current_time_string_() {
+    time_t now = time(nullptr);
+    std::tm tm = *std::localtime(&now);
+
+    char buffer[32];
+    // Return absolute local date and time: YYYY-MM-DD HH:MM
+    strftime(buffer, sizeof(buffer), "%Y-%m-%d %H:%M", &tm);
+    return std::string(buffer);
+  }
+
+  bool MainUIHandler::has_arrival_data_changed_(const std::vector<RouteArrivalData>& new_data) {
+    if (new_data.size() != cached_arrival_data_.size()) {
+      return true;
+    }
+
+    for (size_t i = 0; i < new_data.size(); i++) {
+      const auto& new_route = new_data[i];
+      const auto& cached_route = cached_arrival_data_[i];
+
+      if (new_route.route.station_code != cached_route.route.station_code ||
+        new_route.route.direction != cached_route.route.direction ||
+        new_route.is_valid != cached_route.is_valid ||
+        new_route.error_message != cached_route.error_message) {
+        return true;
+      }
+
+      if (new_route.arrivals.size() != cached_route.arrivals.size()) {
+        return true;
+      }
+
+      for (size_t j = 0; j < new_route.arrivals.size(); j++) {
+        if (new_route.arrivals[j].arrival_time != cached_route.arrivals[j].arrival_time ||
+          new_route.arrivals[j].arrival_time_full != cached_route.arrivals[j].arrival_time_full) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  void MainUIHandler::on_settings_button_clicked_static_(lv_event_t* e) {
+    MainUIHandler* handler = static_cast<MainUIHandler*>(lv_event_get_user_data(e));
+    if (handler) {
+      handler->on_settings_button_clicked_();
+    }
+  }
+
+  void MainUIHandler::on_settings_button_clicked_() {
+    if (on_settings_callback_) {
+      on_settings_callback_(settings_callback_user_data_);
+    }
+  }
+
+} // namespace travel

main/ui/apps/travel/ui/main_handler.h

@@ -0,0 +1,74 @@
+#pragma once
+
+#include "ui/apps/travel/ui/main.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/interaction_handler.h"
+#include "external/mtr/arrival.h"
+#include "external/mtr/mtr.h"
+#include "network/network.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "freertos/semphr.h"
+#include "esp_err.h"
+#include <memory>
+#include <vector>
+#include <atomic>
+
+namespace travel {
+
+/**
+ * @brief Main UI Handler for Travel app
+ *
+ * Manages the MainUI instance, polling task, and MTR API interactions.
+ * Runs a background task to periodically fetch arrival data.
+ */
+class MainUIHandler {
+public:
+  // Callback type for settings button
+  using SettingsButtonCallback = void (*)(void* user_data);
+
+  MainUIHandler();
+  ~MainUIHandler();
+
+  esp_err_t init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  esp_err_t deinit();
+
+  void register_on_settings_button_clicked(SettingsButtonCallback cb, void* user_data);
+  void force_refresh();
+
+private:
+  static void polling_task_(void* param);
+  static void on_settings_button_clicked_static_(lv_event_t* e);
+
+  void on_settings_button_clicked_();
+  void fetch_and_update_arrivals_();
+  bool has_arrival_data_changed_(const std::vector<RouteArrivalData>& new_data);
+  std::string format_arrival_time_(const std::string& api_time);
+  std::string format_arrival_time_full_(const std::string& api_time);
+  std::string get_current_time_string_();
+
+  std::unique_ptr<MainUI> main_ui_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+  std::unique_ptr<MTRNextTrainHandler> mtr_handler_;
+
+  // Polling task
+  TaskHandle_t polling_task_handle_ = nullptr;
+  std::atomic<bool> polling_running_{false};
+  SemaphoreHandle_t refresh_mutex_ = nullptr;
+
+  // Callback for settings button
+  SettingsButtonCallback on_settings_callback_ = nullptr;
+  void* settings_callback_user_data_ = nullptr;
+
+  std::vector<RouteArrivalData> cached_arrival_data_;
+
+  static constexpr uint32_t LVGL_LOCK_TIMEOUT_MS = 4000;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/settings.cpp

@@ -0,0 +1,151 @@
+#include "ui/apps/travel/ui/settings.h"
+#include "display/lvgl_handler.h"
+#include "font/noto_sans_tc_14.c"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettingsUI";
+
+namespace travel {
+
+SettingsUI::SettingsUI() = default;
+
+SettingsUI::~SettingsUI() {
+  deinit();
+}
+
+esp_err_t SettingsUI::init(lv_obj_t* parent) {
+  if (!parent) {
+    ESP_LOGE(TAG, "Parent is null");
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  parent_ = parent;
+
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  // Create main container
+  container_ = lv_obj_create(parent_);
+  lv_obj_set_size(container_, LV_PCT(100), LV_PCT(100));
+  lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
+  lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+  lv_obj_set_style_pad_all(container_, 10, 0);
+  lv_obj_set_style_bg_opa(container_, LV_OPA_TRANSP, 0);
+  lv_obj_set_style_border_width(container_, 0, 0);
+  // Disable animations and scrolling for e-ink
+  lv_obj_set_style_anim_time(container_, 0, 0);
+  lv_obj_clear_flag(container_, LV_OBJ_FLAG_SCROLLABLE);
+
+  // Title
+  title_label_ = lv_label_create(container_);
+  lv_label_set_text(title_label_, "設定路線");
+  lv_obj_set_style_text_font(title_label_, &noto_sans_tc_14, 0);
+  lv_obj_set_style_pad_bottom(title_label_, 10, 0);
+
+  // QR Code container
+  lv_obj_t* qr_container = lv_obj_create(container_);
+  lv_obj_set_size(qr_container, QR_CODE_SIZE + 10, QR_CODE_SIZE + 10);
+  lv_obj_set_style_bg_color(qr_container, lv_color_white(), 0);
+  lv_obj_set_style_border_width(qr_container, 2, 0);
+  lv_obj_set_style_border_color(qr_container, lv_color_black(), 0);
+  lv_obj_set_style_anim_time(qr_container, 0, 0);
+  lv_obj_clear_flag(qr_container, LV_OBJ_FLAG_SCROLLABLE);
+
+  // QR Code
+  qr_code_ = lv_qrcode_create(qr_container);
+  lv_qrcode_set_size(qr_code_, QR_CODE_SIZE);
+  lv_qrcode_set_dark_color(qr_code_, lv_color_black());
+  lv_qrcode_set_light_color(qr_code_, lv_color_white());
+  lv_obj_center(qr_code_);
+
+  // URL label
+  url_label_ = lv_label_create(container_);
+  lv_obj_set_width(url_label_, LV_PCT(100));
+  lv_label_set_text(url_label_, "");
+  lv_obj_set_style_text_font(url_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(url_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(url_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_pad_top(url_label_, 10, 0);
+
+  // Status message
+  status_label_ = lv_label_create(container_);
+  lv_obj_set_width(status_label_, LV_PCT(100));
+  lv_label_set_text(status_label_, "正在啟動伺服器...");
+  lv_obj_set_style_text_font(status_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(status_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_pad_top(status_label_, 15, 0);
+
+  // Instructions
+  instruction_label_ = lv_label_create(container_);
+  lv_obj_set_width(instruction_label_, LV_PCT(100));
+  lv_label_set_text(instruction_label_,
+    "請使用手機掃描QR碼或瀏覽器開啟網址\n"
+    "以設定MTR路線");
+  lv_obj_set_style_text_font(instruction_label_, &noto_sans_tc_14, 0);
+  lv_label_set_long_mode(instruction_label_, LV_LABEL_LONG_WRAP);
+  lv_obj_set_style_text_align(instruction_label_, LV_TEXT_ALIGN_CENTER, 0);
+  lv_obj_set_style_text_color(instruction_label_, lv_color_hex(0x606060), 0);
+  lv_obj_set_style_pad_top(instruction_label_, 15, 0);
+
+  lvgl_port_unlock();
+
+  return ESP_OK;
+}
+
+esp_err_t SettingsUI::deinit() {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return ESP_ERR_TIMEOUT;
+  }
+
+  if (container_) {
+    lv_obj_del(container_);
+    container_ = nullptr;
+  }
+
+  title_label_ = nullptr;
+  qr_code_ = nullptr;
+  url_label_ = nullptr;
+  status_label_ = nullptr;
+  instruction_label_ = nullptr;
+
+  lvgl_port_unlock();
+  parent_ = nullptr;
+
+  return ESP_OK;
+}
+
+void SettingsUI::update_qr_code(const std::string& url) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return;
+  }
+
+  if (qr_code_) {
+    lv_qrcode_update(qr_code_, url.c_str(), url.length());
+  }
+
+  if (url_label_) {
+    lv_label_set_text(url_label_, url.c_str());
+  }
+
+  lvgl_port_unlock();
+}
+
+void SettingsUI::update_status_message(const std::string& message) {
+  if (!lvgl_port_lock(pdMS_TO_TICKS(1000))) {
+    ESP_LOGE(TAG, "Failed to acquire LVGL lock");
+    return;
+  }
+
+  if (status_label_) {
+    lv_label_set_text(status_label_, message.c_str());
+  }
+
+  lvgl_port_unlock();
+}
+
+} // namespace travel

main/ui/apps/travel/ui/settings.h

@@ -0,0 +1,38 @@
+#pragma once
+
+#include "lvgl.h"
+#include "esp_err.h"
+#include <string>
+
+namespace travel {
+
+/**
+ * @brief Settings UI for Travel app
+ *
+ * Displays QR code for web configuration.
+ * E-ink optimized: no animations, static layout.
+ */
+class SettingsUI {
+public:
+  SettingsUI();
+  ~SettingsUI();
+
+  esp_err_t init(lv_obj_t* parent);
+  esp_err_t deinit();
+
+  void update_qr_code(const std::string& url);
+  void update_status_message(const std::string& message);
+
+private:
+  lv_obj_t* parent_ = nullptr;
+  lv_obj_t* container_ = nullptr;
+  lv_obj_t* title_label_ = nullptr;
+  lv_obj_t* qr_code_ = nullptr;
+  lv_obj_t* url_label_ = nullptr;
+  lv_obj_t* status_label_ = nullptr;
+  lv_obj_t* instruction_label_ = nullptr;
+
+  static constexpr int QR_CODE_SIZE = 160;
+};
+
+} // namespace travel

main/ui/apps/travel/ui/settings_handler.cpp

@@ -0,0 +1,85 @@
+#include "ui/apps/travel/ui/settings_handler.h"
+#include "display/lvgl_handler.h"
+#include "esp_log.h"
+
+static const char* TAG = "TravelSettingsHandler";
+
+namespace travel {
+
+SettingsUIHandler::SettingsUIHandler()
+  : settings_ui_(std::make_unique<SettingsUI>())
+  , web_handler_(nullptr) {
+}
+
+SettingsUIHandler::~SettingsUIHandler() {
+  deinit();
+}
+
+esp_err_t SettingsUIHandler::init(
+  lv_obj_t* parent,
+  InteractionHandler* interaction_handler,
+  SettingHandler* setting_handler,
+  NetworkHandler* network_handler
+) {
+  ESP_LOGI(TAG, "Initializing settings UI handler");
+
+  setting_handler_ = setting_handler;
+  network_handler_ = network_handler;
+
+  // Initialize UI
+  esp_err_t err = settings_ui_->init(parent);
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to init settings UI");
+    return err;
+  }
+
+  // Start web server
+  start_web_server_();
+
+  return ESP_OK;
+}
+
+esp_err_t SettingsUIHandler::deinit() {
+  ESP_LOGI(TAG, "Deinitializing settings UI handler");
+
+  // Stop web server
+  if (web_handler_) {
+    web_handler_->stop_web_server();
+    web_handler_.reset();
+  }
+
+  // Deinit UI
+  if (settings_ui_) {
+    settings_ui_->deinit();
+  }
+
+  return ESP_OK;
+}
+
+void SettingsUIHandler::start_web_server_() {
+  if (!setting_handler_ || !network_handler_) {
+    ESP_LOGE(TAG, "Cannot start web server - missing handlers");
+    settings_ui_->update_status_message("設定錯誤");
+    return;
+  }
+
+  // Create web handler
+  web_handler_ = std::make_unique<WebHandler>(setting_handler_, network_handler_);
+
+  // Start server
+  esp_err_t err = web_handler_->start_web_server();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to start web server: %s", esp_err_to_name(err));
+    settings_ui_->update_status_message("無法啟動伺服器");
+    return;
+  }
+
+  // Update QR code with URL
+  std::string url = web_handler_->get_url();
+  settings_ui_->update_qr_code(url);
+  settings_ui_->update_status_message("伺服器運行中");
+
+  ESP_LOGI(TAG, "Web server started at %s", url.c_str());
+}
+
+} // namespace travel

main/ui/apps/travel/ui/settings_handler.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#include "ui/apps/travel/ui/settings.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "ui/apps/travel/web/web_handlers.h"
+#include "ui/interaction_handler.h"
+#include "network/network.h"
+#include "esp_err.h"
+#include <memory>
+
+namespace travel {
+
+/**
+ * @brief Settings UI Handler for Travel app
+ *
+ * Manages the SettingsUI instance, web server, and settings persistence.
+ */
+class SettingsUIHandler {
+public:
+  SettingsUIHandler();
+  ~SettingsUIHandler();
+
+  esp_err_t init(
+    lv_obj_t* parent,
+    InteractionHandler* interaction_handler,
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  esp_err_t deinit();
+
+private:
+  void start_web_server_();
+
+  std::unique_ptr<SettingsUI> settings_ui_;
+  std::unique_ptr<WebHandler> web_handler_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+};
+
+} // namespace travel

main/ui/apps/travel/web/web_handlers.cpp

@@ -0,0 +1,729 @@
+#include "ui/apps/travel/web/web_handlers.h"
+#include "esp_log.h"
+#include "cJSON.h"
+#include <cstring>
+#include <sstream>
+#include <iomanip>
+
+static const char* TAG = "TravelWebHandler";
+
+namespace travel {
+
+WebHandler::WebHandler(
+  SettingHandler* setting_handler,
+  NetworkHandler* network_handler
+)
+  : web_server_(std::make_unique<WebServerHandler>())
+  , setting_handler_(setting_handler)
+  , network_handler_(network_handler)
+  , mtr_handler_(std::make_unique<MTRNextTrainHandler>())
+  , auth_key_(generate_auth_key_()) {
+}
+
+WebHandler::~WebHandler() {
+  stop_web_server();
+}
+
+std::string WebHandler::generate_auth_key_() {
+  // Generate a random 16-character hex key
+  std::stringstream ss;
+  for (int i = 0; i < 8; i++) {
+    ss << std::hex << std::setw(2) << std::setfill('0') << (esp_random() & 0xFF);
+  }
+  return ss.str();
+}
+
+esp_err_t WebHandler::start_web_server() {
+  uint16_t port = web_server_->start(auth_key_, WEB_SERVER_PORT);
+  if (port == 0) {
+    ESP_LOGE(TAG, "Failed to start web server");
+    return ESP_FAIL;
+  }
+
+  esp_err_t err = register_web_endpoints_();
+  if (err != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to register endpoints: %s", esp_err_to_name(err));
+    web_server_->stop();
+    return err;
+  }
+
+  ESP_LOGI(TAG, "Web server started on port %d", port);
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::stop_web_server() {
+  if (web_server_) {
+    web_server_->stop();
+  }
+  return ESP_OK;
+}
+
+std::string WebHandler::get_url() const {
+  std::string ip = get_device_ip();
+  if (ip.empty()) {
+    return "";
+  }
+  return "http://" + ip + ":" + std::to_string(WEB_SERVER_PORT) + "/?auth=" + auth_key_;
+}
+
+std::string WebHandler::get_device_ip() const {
+  if (!network_handler_) {
+    return "";
+  }
+  return network_handler_->get_wifi_handler().get_current_ip();
+}
+
+uint16_t WebHandler::get_port() const {
+  return WEB_SERVER_PORT;
+}
+
+esp_err_t WebHandler::register_web_endpoints_() {
+  // Main settings page
+  httpd_uri_t settings_uri = {
+    .uri = "/",
+    .method = HTTP_GET,
+    .handler = settings_page_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&settings_uri));
+
+  // Get MTR lines
+  httpd_uri_t lines_uri = {
+    .uri = "/api/lines",
+    .method = HTTP_GET,
+    .handler = get_lines_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&lines_uri));
+
+  // Get saved routes
+  httpd_uri_t routes_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_GET,
+    .handler = get_routes_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&routes_uri));
+
+  // Add route
+  httpd_uri_t add_route_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_POST,
+    .handler = add_route_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&add_route_uri));
+
+  // Remove route
+  httpd_uri_t remove_route_uri = {
+    .uri = "/api/routes",
+    .method = HTTP_DELETE,
+    .handler = remove_route_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&remove_route_uri));
+
+  // Save settings (polling interval)
+  httpd_uri_t save_uri = {
+    .uri = "/api/settings",
+    .method = HTTP_POST,
+    .handler = save_settings_handler_,
+    .user_ctx = this
+  };
+  ESP_ERROR_CHECK(web_server_->register_uri_handler(&save_uri));
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::settings_page_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Check auth
+  char auth_param[33] = {0};
+  if (httpd_req_get_url_query_str(req, auth_param, sizeof(auth_param)) == ESP_OK) {
+    char auth_value[33] = {0};
+    if (httpd_query_key_value(auth_param, "auth", auth_value, sizeof(auth_value)) == ESP_OK) {
+      if (handler->auth_key_ != auth_value) {
+        httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Unauthorized");
+        return ESP_FAIL;
+      }
+    } else {
+      httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Missing auth");
+      return ESP_FAIL;
+    }
+  } else {
+    httpd_resp_send_err(req, HTTPD_401_UNAUTHORIZED, "Missing auth");
+    return ESP_FAIL;
+  }
+
+  // HTML page with inline CSS and JavaScript
+  const char* html = R"html(
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MTR Travel Settings</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f5f5;
+      padding: 20px;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    h1 { font-size: 24px; margin-bottom: 20px; color: #333; }
+    h2 { font-size: 18px; margin: 20px 0 10px; color: #555; }
+    .card {
+      background: white;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 15px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .form-group { margin-bottom: 15px; }
+    label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; }
+    select, input[type="number"] {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    button {
+      background: #007DC5;
+      color: white;
+      border: none;
+      padding: 12px 20px;
+      border-radius: 4px;
+      font-size: 16px;
+      cursor: pointer;
+      width: 100%;
+    }
+    button:hover { background: #005a8c; }
+    button.secondary {
+      background: #6c757d;
+    }
+    button.danger {
+      background: #dc3545;
+    }
+    .route-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      background: #f8f9fa;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+    .route-info { flex: 1; }
+    .route-line {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 3px;
+      color: white;
+      font-size: 12px;
+      margin-right: 5px;
+    }
+    .status { margin-top: 10px; padding: 10px; border-radius: 4px; }
+    .status.success { background: #d4edda; color: #155724; }
+    .status.error { background: #f8d7da; color: #721c24; }
+    .slider-container {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    input[type="range"] { flex: 1; }
+    .value-display { min-width: 60px; text-align: right; }
+  </style>
+</head>
+<body>
+  <h1>MTR Travel 設定</h1>
+
+  <div class="card">
+    <h2>新增路線</h2>
+    <div class="form-group">
+      <label>路線</label>
+      <select id="line_select" onchange="updateStations()">
+        <option value="">請選擇路線</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>出發站</label>
+      <select id="station_select">
+        <option value="">請先選擇路線</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>方向</label>
+      <select id="direction_select">
+        <option value="">請先選擇路線</option>
+      </select>
+    </div>
+    <button onclick="addRoute()">新增路線</button>
+  </div>
+
+  <div class="card">
+    <h2>已儲存路線</h2>
+    <div id="routes_list"></div>
+  </div>
+
+  <div class="card">
+    <h2>更新頻率</h2>
+    <div class="form-group">
+      <label>資料更新間隔</label>
+      <div class="slider-container">
+        <input type="range" id="interval_slider" min="10" max="120" value="30" step="5"
+               oninput="updateIntervalDisplay()">
+        <span class="value-display"><span id="interval_value">30</span> 秒</span>
+      </div>
+    </div>
+    <button onclick="saveSettings()">儲存設定</button>
+  </div>
+
+  <div id="status"></div>
+
+  <script>
+    let linesData = [];
+    let routesData = [];
+
+    // Load initial data
+    async function init() {
+      await loadLines();
+      await loadRoutes();
+      updateIntervalDisplay();
+    }
+
+    async function loadLines() {
+      try {
+        const response = await fetch('/api/lines');
+        linesData = await response.json();
+        const select = document.getElementById('line_select');
+        select.innerHTML = '<option value="">請選擇路線</option>';
+        linesData.forEach(line => {
+          const option = document.createElement('option');
+          option.value = line.code;
+          option.textContent = line.name;
+          select.appendChild(option);
+        });
+      } catch (err) {
+        showStatus('無法載入路線資料', 'error');
+      }
+    }
+
+    async function loadRoutes() {
+      try {
+        const response = await fetch('/api/routes');
+        const data = await response.json();
+        routesData = data.routes || [];
+        document.getElementById('interval_slider').value = data.polling_interval || 30;
+        renderRoutes();
+      } catch (err) {
+        showStatus('無法載入路線', 'error');
+      }
+    }
+
+    function updateStations() {
+      const lineCode = document.getElementById('line_select').value;
+      const stationSelect = document.getElementById('station_select');
+      const directionSelect = document.getElementById('direction_select');
+
+      if (!lineCode) {
+        stationSelect.innerHTML = '<option value="">請先選擇路線</option>';
+        directionSelect.innerHTML = '<option value="">請先選擇路線</option>';
+        return;
+      }
+
+      const line = linesData.find(l => l.code === lineCode);
+      if (!line) return;
+
+      const stationsHtml = line.stations.map(s =>
+        `<option value="${s.code}">${s.name}</option>`
+      ).join('');
+
+      stationSelect.innerHTML = '<option value="">請選擇車站</option>' + stationsHtml;
+
+      const stations = line.stations;
+      if (stations.length >= 2) {
+        const firstStation = stations[0];
+        const lastStation = stations[stations.length - 1];
+        const directionsHtml =
+          `<option value="${firstStation.code}">${firstStation.name}方向</option>` +
+          `<option value="${lastStation.code}">${lastStation.name}方向</option>`;
+        directionSelect.innerHTML = '<option value="">請選擇方向</option>' + directionsHtml;
+      } else {
+        directionSelect.innerHTML = '<option value="">路線車站不足</option>';
+      }
+    }
+
+    function renderRoutes() {
+      const container = document.getElementById('routes_list');
+      if (routesData.length === 0) {
+        container.innerHTML = '<p style="color: #666;">尚未設定路線</p>';
+        return;
+      }
+
+      container.innerHTML = routesData.map((route, index) => `
+        <div class="route-item">
+          <div class="route-info">
+            <span class="route-line" style="background: ${route.line_color}">${route.line_name}</span>
+            ${route.station_name} → ${route.direction_name}
+          </div>
+          <button class="danger" style="width: auto; padding: 5px 10px;"
+                  onclick="removeRoute(${index})">刪除</button>
+        </div>
+      `).join('');
+    }
+
+    async function addRoute() {
+      const lineCode = document.getElementById('line_select').value;
+      const stationCode = document.getElementById('station_select').value;
+      const directionCode = document.getElementById('direction_select').value;
+
+      if (!lineCode || !stationCode || !directionCode) {
+        showStatus('請選擇路線、出發站和方向', 'error');
+        return;
+      }
+
+      if (stationCode === directionCode) {
+        showStatus('出發站和方向不能相同', 'error');
+        return;
+      }
+
+      const line = linesData.find(l => l.code === lineCode);
+      const station = line.stations.find(s => s.code === stationCode);
+      const direction = line.stations.find(s => s.code === directionCode);
+
+      const route = {
+        line_code: lineCode,
+        line_name: line.name,
+        line_color: line.color,
+        station_code: stationCode,
+        station_name: station.name,
+        direction: directionCode,
+        direction_name: direction.name + '方向'
+      };
+
+      try {
+        const response = await fetch('/api/routes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(route)
+        });
+
+        if (response.ok) {
+          showStatus('路線已新增', 'success');
+          await loadRoutes();
+        } else {
+          const err = await response.text();
+          showStatus('新增失敗: ' + err, 'error');
+        }
+      } catch (err) {
+        showStatus('新增失敗', 'error');
+      }
+    }
+
+    async function removeRoute(index) {
+      try {
+        const response = await fetch('/api/routes', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ index: index })
+        });
+
+        if (response.ok) {
+          showStatus('路線已刪除', 'success');
+          await loadRoutes();
+        } else {
+          showStatus('刪除失敗', 'error');
+        }
+      } catch (err) {
+        showStatus('刪除失敗', 'error');
+      }
+    }
+
+    function updateIntervalDisplay() {
+      const value = document.getElementById('interval_slider').value;
+      document.getElementById('interval_value').textContent = value;
+    }
+
+    async function saveSettings() {
+      const interval = parseInt(document.getElementById('interval_slider').value);
+
+      try {
+        const response = await fetch('/api/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ polling_interval: interval })
+        });
+
+        if (response.ok) {
+          showStatus('設定已儲存', 'success');
+        } else {
+          showStatus('儲存失敗', 'error');
+        }
+      } catch (err) {
+        showStatus('儲存失敗', 'error');
+      }
+    }
+
+    function showStatus(message, type) {
+      const statusDiv = document.getElementById('status');
+      statusDiv.className = 'status ' + type;
+      statusDiv.textContent = message;
+      setTimeout(() => {
+        statusDiv.className = '';
+        statusDiv.textContent = '';
+      }, 3000);
+    }
+
+    init();
+  </script>
+</body>
+</html>
+  )html";
+
+  httpd_resp_set_type(req, "text/html");
+  httpd_resp_send(req, html, strlen(html));
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::get_lines_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Get all lines from MTR handler
+  std::vector<LineInfo> lines = handler->mtr_handler_->get_lines();
+
+  cJSON* root = cJSON_CreateArray();
+  for (const auto& line : lines) {
+    cJSON* line_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(line_obj, "code", line.code());
+    cJSON_AddStringToObject(line_obj, "name", line.name());
+    cJSON_AddStringToObject(line_obj, "color", line.color());
+
+    // Add stations
+    cJSON* stations_arr = cJSON_CreateArray();
+    const auto* stations = line.stations();
+    if (stations) {
+      for (const auto& station : *stations) {
+        cJSON* station_obj = cJSON_CreateObject();
+        cJSON_AddStringToObject(station_obj, "code", station.code());
+        cJSON_AddStringToObject(station_obj, "name", station.name());
+        cJSON_AddItemToArray(stations_arr, station_obj);
+      }
+    }
+    cJSON_AddItemToObject(line_obj, "stations", stations_arr);
+
+    cJSON_AddItemToArray(root, line_obj);
+  }
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  cJSON_Delete(root);
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, json_str ? json_str : "[]", json_str ? strlen(json_str) : 2);
+
+  if (json_str) {
+    free(json_str);
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::get_routes_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  cJSON* root = cJSON_CreateObject();
+
+  // Add routes
+  cJSON* routes_arr = cJSON_CreateArray();
+  const auto& routes = handler->setting_handler_->get_routes();
+  for (const auto& route : routes) {
+    cJSON* route_obj = cJSON_CreateObject();
+    cJSON_AddStringToObject(route_obj, "line_code", route.line_code.c_str());
+    cJSON_AddStringToObject(route_obj, "line_name", route.line_name.c_str());
+    cJSON_AddStringToObject(route_obj, "line_color", route.line_color.c_str());
+    cJSON_AddStringToObject(route_obj, "station_code", route.station_code.c_str());
+    cJSON_AddStringToObject(route_obj, "station_name", route.station_name.c_str());
+    cJSON_AddStringToObject(route_obj, "direction", route.direction.c_str());
+    cJSON_AddStringToObject(route_obj, "direction_name", route.direction_name.c_str());
+    cJSON_AddItemToArray(routes_arr, route_obj);
+  }
+  cJSON_AddItemToObject(root, "routes", routes_arr);
+
+  // Add polling interval
+  cJSON_AddNumberToObject(root, "polling_interval", handler->setting_handler_->get_polling_interval());
+
+  char* json_str = cJSON_PrintUnformatted(root);
+  cJSON_Delete(root);
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, json_str ? json_str : "{}", json_str ? strlen(json_str) : 2);
+
+  if (json_str) {
+    free(json_str);
+  }
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::add_route_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[512];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  RoutePair route;
+  cJSON* item;
+
+  item = cJSON_GetObjectItem(root, "line_code");
+  if (item && cJSON_IsString(item)) route.line_code = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "line_name");
+  if (item && cJSON_IsString(item)) route.line_name = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "line_color");
+  if (item && cJSON_IsString(item)) route.line_color = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "station_code");
+  if (item && cJSON_IsString(item)) route.station_code = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "station_name");
+  if (item && cJSON_IsString(item)) route.station_name = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "direction");
+  if (item && cJSON_IsString(item)) route.direction = item->valuestring;
+
+  item = cJSON_GetObjectItem(root, "direction_name");
+  if (item && cJSON_IsString(item)) route.direction_name = item->valuestring;
+
+  cJSON_Delete(root);
+
+  if (route.line_code.empty() || route.station_code.empty() || route.direction.empty()) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing required fields");
+    return ESP_FAIL;
+  }
+
+  // Add route
+  handler->setting_handler_->add_route(route);
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::remove_route_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[128];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON* index_item = cJSON_GetObjectItem(root, "index");
+  if (!index_item || !cJSON_IsNumber(index_item)) {
+    cJSON_Delete(root);
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing index");
+    return ESP_FAIL;
+  }
+
+  int index = index_item->valueint;
+  cJSON_Delete(root);
+
+  handler->setting_handler_->remove_route(index);
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+esp_err_t WebHandler::save_settings_handler_(httpd_req_t* req) {
+  WebHandler* handler = static_cast<WebHandler*>(req->user_ctx);
+
+  // Read request body
+  char buf[256];
+  int received = 0;
+  int remaining = req->content_len;
+
+  std::string body;
+  while (remaining > 0) {
+    received = httpd_req_recv(req, buf, std::min(remaining, (int)sizeof(buf) - 1));
+    if (received <= 0) {
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Failed to read request");
+      return ESP_FAIL;
+    }
+    buf[received] = '\0';
+    body += buf;
+    remaining -= received;
+  }
+
+  // Parse JSON
+  cJSON* root = cJSON_Parse(body.c_str());
+  if (!root) {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON* interval_item = cJSON_GetObjectItem(root, "polling_interval");
+  if (interval_item && cJSON_IsNumber(interval_item)) {
+    uint32_t interval = interval_item->valueint;
+    handler->setting_handler_->set_polling_interval(interval);
+  }
+
+  cJSON_Delete(root);
+
+  handler->setting_handler_->save_settings();
+
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_send(req, "{\"success\":true}", 16);
+
+  return ESP_OK;
+}
+
+} // namespace travel

main/ui/apps/travel/web/web_handlers.h

@@ -0,0 +1,58 @@
+#pragma once
+
+#include "esp_http_server.h"
+#include <string>
+#include <memory>
+#include "network/web_server_handler.h"
+#include "ui/apps/travel/settings/settings_handler.h"
+#include "external/mtr/mtr.h"
+#include "network/network.h"
+
+namespace travel {
+
+/**
+ * @brief HTTP request handlers for Travel app settings web interface
+ *
+ * These handlers serve the web configuration page for MTR routes.
+ */
+class WebHandler {
+public:
+  WebHandler(
+    SettingHandler* setting_handler,
+    NetworkHandler* network_handler
+  );
+  ~WebHandler();
+
+  esp_err_t start_web_server();
+  esp_err_t stop_web_server();
+
+  std::string get_url() const;
+  std::string get_device_ip() const;
+  uint16_t get_port() const;
+
+  bool is_running() const {
+    return web_server_ && web_server_->is_running();
+  }
+
+private:
+  std::string generate_auth_key_();
+  esp_err_t register_web_endpoints_();
+
+  // HTTP handlers
+  static esp_err_t settings_page_handler_(httpd_req_t* req);
+  static esp_err_t get_lines_handler_(httpd_req_t* req);
+  static esp_err_t get_routes_handler_(httpd_req_t* req);
+  static esp_err_t add_route_handler_(httpd_req_t* req);
+  static esp_err_t remove_route_handler_(httpd_req_t* req);
+  static esp_err_t save_settings_handler_(httpd_req_t* req);
+
+  std::unique_ptr<WebServerHandler> web_server_;
+  SettingHandler* setting_handler_ = nullptr;
+  NetworkHandler* network_handler_ = nullptr;
+  std::unique_ptr<MTRNextTrainHandler> mtr_handler_;
+
+  std::string auth_key_;
+  static constexpr uint16_t WEB_SERVER_PORT = 8081;
+};
+
+} // namespace travel

main/ui/ui_handler.cpp

@@ -1,6 +1,7 @@
 #include "ui/ui_handler.h"
 #include "ui/apps/registry.h"
 #include "esp_log.h"
+#include <algorithm>
 
 #define TAG "UIHandler"
 
@@ -11,6 +12,11 @@ struct AppClickUserData {
 
 UIHandler::~UIHandler() {
   deinit();
+  // Clean up all allocated AppClickUserData
+  for (void* data : app_click_user_data_) {
+    delete static_cast<AppClickUserData*>(data);
+  }
+  app_click_user_data_.clear();
 }
 
 esp_err_t UIHandler::init(void) {
@@ -267,6 +273,10 @@ esp_err_t UIHandler::create_main_screen_(lv_obj_t* parent) {
     // Center the icon container
     lv_obj_center(app_icon_container);
 
+    // Create and track user data for the callback
+    auto* click_data = new AppClickUserData { this, name };
+    app_click_user_data_.push_back(click_data);
+    
     // Register click event to switch to the app
     lv_obj_add_event_cb(app_icon_container,
       [](lv_event_t* e) {
@@ -282,7 +292,7 @@ esp_err_t UIHandler::create_main_screen_(lv_obj_t* parent) {
         }
       },
       LV_EVENT_CLICKED,
-      new AppClickUserData { this, name }
+      click_data
     );
   }
 

main/ui/ui_handler.h

@@ -7,6 +7,7 @@
 #include "ui/interaction_handler.h"
 #include "lvgl.h"
 #include <memory>
+#include <vector>
 
 /**
  * @brief UI Handler - manages app lifecycle and rendering
@@ -115,4 +116,7 @@ private:
   lv_obj_t* main_screen_ = nullptr;    ///< Root screen
   RootLayout root_layout_;            ///< Main screen layout manager
   AppDescriptor* active_descriptor_ = nullptr;  ///< Currently active app descriptor (managed by AppRegistry)
+  
+  // Track allocated user data for cleanup
+  std::vector<void*> app_click_user_data_;
 };

main/ui/widgets/button.cpp

@@ -0,0 +1,12 @@
+#include "ui/widgets/button.h"
+
+lv_obj_t* button_create(lv_obj_t* parent) {
+  lv_obj_t* button = lv_button_create(parent);
+  lv_obj_set_style_bg_color(button, lv_color_white(), 0);
+  lv_obj_set_style_border_color(button, lv_color_black(), 0);
+  lv_obj_set_style_border_width(button, 2, 0);
+  lv_anim_delete(button, nullptr);
+
+  return button;
+}
+

main/ui/widgets/button.h

@@ -0,0 +1,4 @@
+#pragma once
+#include "lvgl.h"
+
+lv_obj_t* button_create(lv_obj_t* parent);

main/ui/widgets/widgets.h

@@ -0,0 +1,4 @@
+#pragma once
+
+#include "main/ui/widgets/button.h"
+#include "main/ui/widgets/textarea.h"