diff --git a/ush/soca/gdassoca_obsstats.py b/utils/soca/fig_gallery/gdassoca_obsstats.py
similarity index 98%
rename from ush/soca/gdassoca_obsstats.py
rename to utils/soca/fig_gallery/gdassoca_obsstats.py
index ac6f42185..3f92f799d 100644
--- a/ush/soca/gdassoca_obsstats.py
+++ b/utils/soca/fig_gallery/gdassoca_obsstats.py
@@ -86,8 +86,7 @@ def plot_timeseries(self, ocean, variable, inst="", dirout=""):
 
         # Improve layout and show plot
         plt.tight_layout(rect=[0, 0.03, 1, 0.95])
-        plt.savefig(f'{dirout}/{inst}_{variable}_{ocean}_test.png')
-
+        plt.savefig(f'{dirout}/{inst}_{variable}_{ocean}.png')
 
 if __name__ == "__main__":
     epilog = ["Usage examples: ./gdassoca_obsstats.py --exps cp1/COMROOT/cp1 cp2/COMROOT/cp2 --inst sst_abi_g16_l3c --dirout cp1vscp2"]
diff --git a/utils/soca/fig_gallery/time_series_omb.html b/utils/soca/fig_gallery/time_series_omb.html
new file mode 100644
index 000000000..4e06b5e56
--- /dev/null
+++ b/utils/soca/fig_gallery/time_series_omb.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .gallery {
+            display: none; /* Initially hide the gallery */
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            grid-gap: 16px;
+            padding: 16px;
+        }
+        img {
+            width: 90%;
+            height: auto;
+            border: 1px solid #ccc;
+            box-shadow: 2px 2px 6px #888888;
+        }
+        .button {
+            margin: 5px;
+            padding: 3px 10px;
+            cursor: pointer;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 0.6em; /* Smaller font size */
+        }
+        .button:hover, .active {
+            background-color: #0056b3;
+        }
+        select {
+            padding: 3px 10px; /* Reduced padding */
+            font-size: 0.4em; /* Smaller font size */
+            border-radius: 5px;
+            cursor: pointer;
+            border: 1px solid #ccc;
+        }
+        input[type="text"] {
+            width: 70%; /* Increased width */
+            display: inline-block;
+            vertical-align: middle; /* Aligns label with input */
+        }
+        label {
+            display: inline-block;
+            vertical-align: bottom; /* Aligns label with input */
+            padding-top: 12px; /* Aligns text vertically with input */
+            margin-right: 5px; /* Adds some space between label and input */
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <!-- Label and input for base path -->
+        <label for="basePathInput">Path to figures: </label>
+        <input type="text" id="basePathInput" placeholder="Enter base path for images" value="/path/to/figures/">
+    </div>
+    <div>
+        <!-- Buttons for selecting oceans -->
+        <button class="button" id="Arctic" onclick="showImages(currentType, 'Arctic')">Arctic</button>
+        <button class="button" id="Atlantic" onclick="showImages(currentType, 'Atlantic')">Atlantic</button>
+        <button class="button" id="Indian" onclick="showImages(currentType, 'Indian')">Indian</button>
+        <button class="button" id="Pacific" onclick="showImages(currentType, 'Pacific')">Pacific</button>
+        <button class="button" id="Southern" onclick="showImages(currentType, 'Southern')">Southern</button>
+    </div>
+    <div>
+        <!-- Dropdown for selecting type of observation -->
+        <select id="typeSelect" onchange="setType(this.value)">
+            <option value="adt_rads_all">ADT RADS All</option>
+            <option value="sst_abi_g16_l3c">SST ABI G16 L3C</option>
+            <option value="sst_abi_g17_l3c">SST ABI G17 L3C</option>
+            <option value="sst_ahi_h08_l3c">SST AHI H08 L3C</option>
+            <option value="sst_avhrr_ma_l3u">SST AVHRR MA L3C</option>
+            <option value="sst_avhrr_mb_l3u">SST AVHRR MB L3C</option>
+            <option value="sst_avhrr_mc_l3u">SST AVHRR MC L3C</option>
+            <option value="sst_viirs_n20_l3u">SST VIIRS N20 L3C</option>
+            <option value="sst_viirs_npp_l3u">SST VIIRS NPP L3C</option>
+            <option value="icec_amsr2_north">ICEC AMSR2 NORTH</option>
+            <option value="icec_amsr2_south">ICEC AMSR2 SOUTH</option>
+
+        </select>
+    </div>
+
+    <div id="imageContainer"></div>
+
+    <script>
+        var currentType = 'adt_rads_all'; // Default observation type
+        var currentOcean = ''; // Default ocean, empty at start
+
+        function setType(type) {
+            currentType = type;
+            if (currentOcean) { // Only update if an ocean is already selected
+                showImages(currentType, currentOcean);
+            }
+        }
+
+        function showImages(type, ocean) {
+            currentOcean = ocean;
+            var basePath = document.getElementById('basePathInput').value;
+            updateActiveButton(ocean, 'button'); // Update active state for ocean buttons
+            var container = document.getElementById('imageContainer');
+            container.innerHTML = `<div class="gallery" style="display: grid;">
+                <img src="${basePath}${type}_ombg_noqc_${ocean}.png" alt="${ocean} No QC">
+                <img src="${basePath}${type}_ombg_qc_${ocean}.png" alt="${ocean} QC">
+            </div>`;
+        }
+
+        function updateActiveButton(selectedId, buttonClass) {
+            var buttons = document.querySelectorAll('.' + buttonClass);
+            buttons.forEach(button => {
+                if (button.id === selectedId) {
+                    button.classList.add('active');
+                } else {
+                    button.classList.remove('active');
+                }
+            });
+        }
+    </script>
+</body>
+</html>
