diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index b779ef6f5..050adbfa1 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -6,7 +6,7 @@ repos:
     hooks:
       - id: eslint
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.9.6"
+    rev: "v0.9.7"
     hooks:
       - id: ruff
         args: [--fix, --exit-non-zero-on-fix]
diff --git a/htdocs/sites/obhistory.js b/htdocs/sites/obhistory.js
new file mode 100644
index 000000000..c3d9040e5
--- /dev/null
+++ b/htdocs/sites/obhistory.js
@@ -0,0 +1,99 @@
+// ES Module
+import $ from '/js/jquery.module.js';
+let station = null;
+let network = null;
+let metar_show = false;
+let madis_show = false;
+let month = null;
+let day = null;
+let year = null;
+
+function updateButton(label){
+    const btn = $(`#${label}`);
+    let uri = `${window.location.origin}${window.location.pathname}`+
+    `?station=${station}&network=${network}&year=${btn.data("year")}`+
+    `&month=${btn.data("month")}&day=${btn.data("day")}`;
+    if (metar_show){
+        uri += "&metar=1";
+    }
+    if (madis_show){
+        uri += "&madis=1";
+    }
+    btn.attr("href", uri);
+}
+function updateURI(){
+    // Add CGI vars that control the METAR and MADIS show buttons
+    let uri = `${window.location.origin}${window.location.pathname}?`+
+        `station=${station}&network=${network}&year=${year}`+
+        `&month=${month}&day=${day}`;
+    if (metar_show){
+        uri += "&metar=1";
+    }
+    if (madis_show){
+        uri += "&madis=1";
+    }
+    window.history.pushState({}, "", uri);
+    updateButton("prevbutton");
+    updateButton("nextbutton");
+}
+function showMETAR(){
+    $(".metar").css("display", "table-row");
+    if (madis_show){
+        $(".hfmetar").css("display", "table-row");
+    }
+    $("#metar_toggle").html("<i class=\"fa fa-minus\"></i> Hide METARs");
+}
+function toggleMETAR(){
+    if (metar_show){
+        // Hide both METARs and HFMETARs
+        $(".metar").css("display", "none");
+        $(".hfmetar").css("display", "none");
+        $("#metar_toggle").html("<i class=\"fa fa-plus\"></i> Show METARs");
+        $("#hmetar").val("0");
+    } else{
+        // show
+        showMETAR();
+        $("#hmetar").val("1");
+    }
+    metar_show = !metar_show;
+    updateURI();
+}
+function showMADIS(){
+    $("tr[data-madis=1]").css("display", "table-row");
+    if (metar_show){
+        $(".hfmetar").css("display", "table-row");
+    }
+    $("#madis_toggle").html("<i class=\"fa fa-minus\"></i> Hide High Frequency MADIS");
+}
+function toggleMADIS(){
+    if (madis_show){
+        // Hide MADIS
+        $("tr[data-madis=1]").css("display", "none");
+        $(".hfmetar").css("display", "none");
+        $("#madis_toggle").html("<i class=\"fa fa-plus\"></i> Show High Frequency MADIS");
+        $("#hmadis").val("0");
+    } else {
+        // Show
+        showMADIS();
+        $("#hmadis").val("1");
+    }
+    madis_show = !madis_show;
+    updateURI();
+}
+$().ready(() => {
+    station = $("#station").val();
+    network = $("#network").val();
+    metar_show = $("#hmetar").val() === "1";
+    madis_show = $("#hmadis").val() === "1";
+    month = $("#theform").data("month");
+    day = $("#theform").data("day");
+    year = $("#theform").data("year");
+    $("#metar_toggle").click(toggleMETAR);
+    $("#madis_toggle").click(toggleMADIS);
+    if (metar_show) {
+        showMETAR();
+    }
+    if (madis_show) {
+        showMADIS();
+    }
+});
diff --git a/htdocs/sites/obhistory.php b/htdocs/sites/obhistory.php
index 5194adb2d..1934f4e67 100644
--- a/htdocs/sites/obhistory.php
+++ b/htdocs/sites/obhistory.php
@@ -228,99 +228,7 @@ function scan_formatter($i, $row){
     "year" => date("Y", $date),
     "month" => date("m", $date), "day" => date("d", $date)
 );
-$madis_show = ($madis == "1") ? "true" : "false";
-$metar_show = ($metar == "1") ? "true" : "false";
-$t->jsextra = <<<EOF
-<script type="text/javascript">
-var metar_show = {$metar_show};
-var madis_show = {$madis_show};
-var station = "{$station}";
-var network = "{$network}";
-var month = "{$month}";
-var day = "{$day}";
-var year = "{$year}";
-function updateButton(label){
-    var btn = $("#" + label);
-    var uri = window.location.origin + window.location.pathname + "?station=" +
-    station + "&network=" + network  + "&year=" + btn.data("year")
-    + "&month=" + btn.data("month")  + "&day=" + btn.data("day");
-    if (metar_show){
-        uri += "&metar=1";
-    }
-    if (madis_show){
-        uri += "&madis=1";
-    }
-    btn.attr("href", uri);
-}
-function updateURI(){
-    // Add CGI vars that control the METAR and MADIS show buttons
-    var uri = window.location.origin + window.location.pathname + "?station=" +
-        station + "&network=" + network  + "&year=" + year
-        + "&month=" + month  + "&day=" + day;
-    if (metar_show){
-        uri += "&metar=1";
-    }
-    if (madis_show){
-        uri += "&madis=1";
-    }
-    window.history.pushState({}, "", uri);
-    updateButton("prevbutton");
-    updateButton("nextbutton");
-}
-function showMETAR(){
-    $(".metar").css("display", "table-row");
-    if (madis_show){
-        $(".hfmetar").css("display", "table-row");
-    }
-    $("#metar_toggle").html("<i class=\"fa fa-minus\"></i> Hide METARs");
-}
-function toggleMETAR(){
-    if (metar_show){
-        // Hide both METARs and HFMETARs
-        $(".metar").css("display", "none");
-        $(".hfmetar").css("display", "none");
-        $("#metar_toggle").html("<i class=\"fa fa-plus\"></i> Show METARs");
-        $("#hmetar").val("0");
-    } else{
-        // show
-        showMETAR();
-        $("#hmetar").val("1");
-    }
-    metar_show = !metar_show;
-    updateURI();
-}
-function showMADIS(){
-    $("tr[data-madis=1]").css("display", "table-row");
-    if (metar_show){
-        $(".hfmetar").css("display", "table-row");
-    }
-    $("#madis_toggle").html("<i class=\"fa fa-minus\"></i> Hide High Frequency MADIS");
-}
-function toggleMADIS(){
-    if (madis_show){
-        // Hide MADIS
-        $("tr[data-madis=1]").css("display", "none");
-        $(".hfmetar").css("display", "none");
-        $("#madis_toggle").html("<i class=\"fa fa-plus\"></i> Show High Frequency MADIS");
-        $("#hmadis").val("0");
-    } else {
-        // Show
-        showMADIS();
-        $("#hmadis").val("1");
-    }
-    madis_show = !madis_show;
-    updateURI();
-}
-$(document).ready(function(){
-    if (metar_show) {
-        showMETAR();
-    }
-    if (madis_show) {
-        showMADIS();
-    }
-});
-</script>
-EOF;
+$t->jsextra = '<script type="module" src="obhistory.js"></script>';
 $dstr = date("d F Y", $date);
 $tzname =  $metadata["tzname"];
 
@@ -329,11 +237,44 @@ function toggleMADIS(){
 $ds = daySelect(date("d", $date));
 
 $mbutton = (preg_match("/ASOS/", $network)) ?
-    "<a onclick=\"javascript:toggleMETAR();\" class=\"btn btn-success\" id=\"metar_toggle\"><i class=\"fa fa-plus\"></i> Show METARs</a>" .
-    " &nbsp; <a onclick=\"javascript:toggleMADIS();\" class=\"btn btn-success\" id=\"madis_toggle\"><i class=\"fa fa-plus\"></i> Show High Frequency MADIS</a>"
+    '<button type="button" class="btn btn-success" id="metar_toggle">'.
+    '<i class="fa fa-plus"></i> Show METARs</button>'.
+    ' &nbsp; <button type="button" class="btn btn-success" id="madis_toggle">'.
+    '<i class="fa fa-plus"></i> Show High Frequency MADIS</button>'
     : "";
-
-$content = <<<EOF
+    $buttons = sprintf(
+        "<a id=\"prevbutton\" " .
+            "data-year=\"%s\" data-month=\"%s\" data-day=\"%s\" " .
+            "href=\"obhistory.php?network=%s&station=%s&year=%s&month=%s&day=%s\" " .
+            "class=\"btn btn-default\"><i class=\"fa fa-arrow-left\"></i> ".
+            "Previous Day</a>",
+        date("Y", $yesterday),
+        date("m", $yesterday),
+        date("d", $yesterday),
+        $network,
+        $station,
+        date("Y", $yesterday),
+        date("m", $yesterday),
+        date("d", $yesterday)
+    );
+    
+    if ($tomorrow) {
+        $buttons .= sprintf(
+            "<a id=\"nextbutton\" " .
+                "data-year=\"%s\" data-month=\"%s\" data-day=\"%s\" " .
+                "href=\"obhistory.php?network=%s&station=%s&year=%s&month=%s&day=%s\" " .
+                "class=\"btn btn-default\">Next Day <i class=\"fa fa-arrow-right\"></i></a>",
+            date("Y", $tomorrow),
+            date("m", $tomorrow),
+            date("d", $tomorrow),
+            $network,
+            $station,
+            date("Y", $tomorrow),
+            date("m", $tomorrow),
+            date("d", $tomorrow)
+        );
+    
+$content = <<<EOM
 <style>
 .high {
   color: #F00;
@@ -353,10 +294,11 @@ function toggleMADIS(){
 </style>
 
 <h3>{$dstr} Observation History, [{$station}] {$metadata["name"]}, timezone: {$tzname}</h3>
-<form name="theform" method="GET">
+<form id="theform" name="theform" method="GET"
+ data-year="{$year}" data-month="{$month}" data-day="{$day}">
 <strong>Select Date:</strong>
-<input type="hidden" value="{$station}" name="station" />
-<input type="hidden" value="{$network}" name="network" />
+<input id="station" type="hidden" value="{$station}" name="station" />
+<input id="network" type="hidden" value="{$network}" name="network" />
 <input id="hmetar" type="hidden" value="{$metar}" name="metar" />
 <input id="hmadis" type="hidden" value="{$madis}" name="madis" />
 {$ys}
@@ -366,37 +308,7 @@ function toggleMADIS(){
 <input type="submit" value="Change Date" />
 </form>
 <p>{$mbutton}</p>
-EOF;
-$content .= sprintf(
-    "<a id=\"prevbutton\" " .
-        "data-year=\"%s\" data-month=\"%s\" data-day=\"%s\" " .
-        "href=\"obhistory.php?network=%s&station=%s&year=%s&month=%s&day=%s\" " .
-        "class=\"btn btn-default\">Previous Day</a>",
-    date("Y", $yesterday),
-    date("m", $yesterday),
-    date("d", $yesterday),
-    $network,
-    $station,
-    date("Y", $yesterday),
-    date("m", $yesterday),
-    date("d", $yesterday)
-);
-
-if ($tomorrow) {
-    $content .= sprintf(
-        "<a id=\"nextbutton\" " .
-            "data-year=\"%s\" data-month=\"%s\" data-day=\"%s\" " .
-            "href=\"obhistory.php?network=%s&station=%s&year=%s&month=%s&day=%s\" " .
-            "class=\"btn btn-default\">Next Day</a>",
-        date("Y", $tomorrow),
-        date("m", $tomorrow),
-        date("d", $tomorrow),
-        $network,
-        $station,
-        date("Y", $tomorrow),
-        date("m", $tomorrow),
-        date("d", $tomorrow)
-    );
+EOM;
 }
 $notes = '';
 if ($network == "ISUSM") {
@@ -557,10 +469,12 @@ function toggleMADIS(){
 EOM;
 }
 
-$content .= <<<EOF
+$content .= <<<EOM
 
 {$errdiv}
 
+{$buttons}
+
 <table class="table table-striped table-bordered" id="datatable">
 <thead>
 {$header}
@@ -570,6 +484,8 @@ function toggleMADIS(){
 </tbody>
 </table>
 
+{$buttons}
+
 <p>The <a href="{$wsuri}">IEM API webservice</a> that provided data to this
 page.  For more details, see <a href="/api/1/docs#/default/service_obhistory__fmt__get">documentation</a>.</p>
 
@@ -577,6 +493,6 @@ function toggleMADIS(){
 <ul>
 {$notes}
 </ul>
-EOF;
+EOM;
 $t->content = $content;
 $t->render('sites.phtml');
diff --git a/pylib/iemweb/autoplot/index.py b/pylib/iemweb/autoplot/index.py
index 50e635876..02a8caeaa 100644
--- a/pylib/iemweb/autoplot/index.py
+++ b/pylib/iemweb/autoplot/index.py
@@ -192,21 +192,26 @@ def station_handler(value, arg: dict, fdict, res, typ: str):
     return netselect + " " + select + map_select_widget(network, arg["name"])
 
 
-def ugc_select(state, ugc):
+def ugc_select(state: str, ugc: str) -> str:
     """Generate a select for a given state."""
-    pgconn, cursor = get_dbconnc("postgis")
-    cursor.execute(
-        "SELECT ugc, name from ugcs WHERE substr(ugc, 1, 2) = %s and "
-        "end_ts is null ORDER by name ASC",
-        (state,),
-    )
+    sql = """
+    with data as (
+        select ugc, case when end_ts is not null then
+        to_char(begin_ts, 'YYYY-mm-dd') || '-' || to_char(end_ts, 'YYYY-mm-dd')
+        else null end as rng, name,
+        row_number() OVER (PARTITION by ugc ORDER by end_ts nulls first)
+        from ugcs where substr(ugc, 1, 2) = :state)
+    select ugc, name, rng from data where row_number = 1
+    order by name asc, ugc asc
+    """
     ar = {}
-    for row in cursor:
-        ar[row["ugc"]] = (
-            f"{row['name']} {'(Zone)' if row['ugc'][2] == 'Z' else ''}"
-        )
-    cursor.close()
-    pgconn.close()
+    with get_sqlalchemy_conn("postgis") as conn:
+        res = conn.execute(sql_helper(sql), {"state": state})
+        for row in res:
+            name = f"{row[1]} {'(Zone)' if row[0][2] == 'Z' else ''}"
+            if row[2] is not None:
+                name += f" {row[2]}"
+            ar[row[0]] = name
     return make_select("ugc", ugc, ar, cssclass="iemselect2")