diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 0e68b6e..151b271 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -27,7 +27,7 @@ export default defineConfig({
         {
           text: "At NERSC",
           items: [
-            { text: "Quickstart", link: "/nersc/index" },
+            { text: "Getting Started", link: "/nersc/index" },
             {
               text: "Developers' Installation",
               link: "/nersc/developers_installation",
@@ -61,7 +61,7 @@ export default defineConfig({
           text: "QuickView",
           items: [
             { text: "What is QuickView?", link: "/guides/quickview/index" },
-            { text: "Quickstart", link: "/guides/quickview/quickstart" },
+            { text: "Getting Started", link: "/guides/quickview/getting_started" },
             { text: "UI Overview", link: "/guides/quickview/ui_overview" },
             { text: "Keyboard Shortcuts", link: "/guides/quickview/shortcuts" },
             { text: "File Selection", link: "/guides/quickview/file_selection", },
@@ -76,7 +76,7 @@ export default defineConfig({
           text: "QuickCompare",
           items: [
             { text: "What is QuickCompare?", link: "/guides/quickcompare/index", },
-            { text: "Quickstart",            link: "/guides/quickcompare/quickstart" },
+            { text: "Getting Started",            link: "/guides/quickcompare/getting_started" },
             { text: "UI Overview",           link: "/guides/quickcompare/ui_overview_and_shortcuts" },
             { text: "Modes of Comparison",   link: "/guides/quickcompare/modes_of_comparison", },
             { text: "Variables and Slices",  link: "/guides/quickcompare/variable_and_slice_selection", },
diff --git a/docs/gallery/gallery_eamv2_aerosols_ne30.png b/docs/gallery/gallery_eamv2_aerosols_ne30.png
new file mode 100644
index 0000000..50c7e7d
Binary files /dev/null and b/docs/gallery/gallery_eamv2_aerosols_ne30.png differ
diff --git a/docs/gallery/index.md b/docs/gallery/index.md
index d72b4a0..0148358 100644
--- a/docs/gallery/index.md
+++ b/docs/gallery/index.md
@@ -1,4 +1,11 @@
 
+## Aerosol concentrations in EAMv2 displayed by [QuickView](/guides/quickview/index) {#eamv2-aerosols}
+
+Horizontal mesh is ne30pg2 (~165 km).
+Simulation was performed by Hui Wan at PNNL.
+
+![EAMv2 aerosols](/gallery/gallery_eamv2_aerosols_ne30.png){ width="100%", align=center }
+
 
 ## SCREAM simulation output displayed by [QuickView](/guides/quickview/index) {#scream}
 
diff --git a/docs/gallery/quickview-state_gallery_aerosols.json b/docs/gallery/quickview-state_gallery_aerosols.json
new file mode 100644
index 0000000..6e11e80
--- /dev/null
+++ b/docs/gallery/quickview-state_gallery_aerosols.json
@@ -0,0 +1,329 @@
+{
+  "origin": {
+    "user": "huiwan",
+    "created": "2026-05-26 14:11:07.411284",
+    "comment": ""
+  },
+  "files": {
+    "simulation": "/global/cfs/cdirs/m4359/www/huiwan/vis/202511_compare/v2_ndg_cdnc_ssat_diag_simple_pd.eam.h0.2011-01.nc",
+    "connectivity": "/global/cfs/cdirs/m4359/www/huiwan/vis/202511_compare/connectivity_ne30pg2_TEMPEST.scrip.nc"
+  },
+  "variables-selection": [
+    "num_a1",
+    "num_a2",
+    "num_a3",
+    "so4_a1",
+    "so4_a2",
+    "so4_a3",
+    "ncl_a1",
+    "ncl_a2",
+    "ncl_a3"
+  ],
+  "layout": {
+    "aspect-ratio": 0.5,
+    "grouped": false,
+    "active": "auto_layout",
+    "tools": [],
+    "help": false,
+    "camera": {
+      "zoom": 9991937.963069865,
+      "position": [
+        999193.7963069864,
+        0.0,
+        77928734.37784009
+      ],
+      "focal_point": [
+        999193.7963069864,
+        0.0,
+        0.5
+      ],
+      "view_up": [
+        0.0,
+        1.0,
+        0.0
+      ],
+      "clipping_range": [
+        76154309.68191113,
+        80350337.16096354
+      ]
+    }
+  },
+  "data-selection": {
+    "crop_longitude": [
+      -180,
+      180
+    ],
+    "crop_latitude": [
+      -90,
+      90
+    ],
+    "projection": [
+      "Mollweide"
+    ],
+    "animation_track": "lev",
+    "lev_idx": 63
+  },
+  "views": [
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "num_a1",
+      "config": {
+        "order": 2,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "Yellow - Gray - Blue",
+        "invert": true,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": false,
+        "color_range": [
+          9959794.0,
+          4005174528.0
+        ],
+        "color_value_min": "9959794.0",
+        "color_value_max": "4005174528.0"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "num_a2",
+      "config": {
+        "order": 1,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "Yellow - Gray - Blue",
+        "invert": true,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": false,
+        "color_range": [
+          1879615.875,
+          11933620224.0
+        ],
+        "color_value_min": "1879615.875",
+        "color_value_max": "11933620224.0"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "num_a3",
+      "config": {
+        "order": 3,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "Yellow - Gray - Blue",
+        "invert": true,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": false,
+        "color_range": [
+          10968.1357421875,
+          24592876.0
+        ],
+        "color_value_min": "10968.1357421875",
+        "color_value_max": "24592876.0"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "so4_a1",
+      "config": {
+        "order": 6,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "batlow",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 7,
+        "override_range": true,
+        "color_range": [
+          2e-10,
+          2e-08
+        ],
+        "color_value_min": "2e-10",
+        "color_value_max": "2e-08"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "so4_a2",
+      "config": {
+        "order": 5,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "batlow",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 8,
+        "override_range": true,
+        "color_range": [
+          4e-12,
+          4e-10
+        ],
+        "color_value_min": "4e-12",
+        "color_value_max": "4e-10"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "so4_a3",
+      "config": {
+        "order": 7,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "batlow",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "log",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": true,
+        "color_range": [
+          1e-11,
+          1e-09
+        ],
+        "color_value_min": "1e-11",
+        "color_value_max": "1e-9"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "ncl_a1",
+      "config": {
+        "order": 12,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "BuGnYl",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "linear",
+        "discrete_log": false,
+        "n_discrete_colors": 6,
+        "override_range": true,
+        "color_range": [
+          2e-12,
+          2e-09
+        ],
+        "color_value_min": "2e-12",
+        "color_value_max": "2e-09"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "ncl_a2",
+      "config": {
+        "order": 11,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "BuGnYl",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "linear",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": true,
+        "color_range": [
+          2e-15,
+          2e-12
+        ],
+        "color_value_min": "2e-15",
+        "color_value_max": "2e-12"
+      }
+    },
+    {
+      "type": [
+        "time",
+        "lev",
+        "ncol"
+      ],
+      "name": "ncl_a3",
+      "config": {
+        "order": 13,
+        "size": 4,
+        "offset": 0,
+        "break_row": false
+      },
+      "colormap": {
+        "preset": "BuGnYl",
+        "invert": false,
+        "color_blind": false,
+        "use_log_scale": "linear",
+        "discrete_log": false,
+        "n_discrete_colors": 4,
+        "override_range": true,
+        "color_range": [
+          2e-11,
+          2e-08
+        ],
+        "color_value_min": "2e-11",
+        "color_value_max": "2e-08"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/guides/dev/what_is_where.md b/docs/guides/dev/what_is_where.md
index 4e02f4b..a8a9a7d 100644
--- a/docs/guides/dev/what_is_where.md
+++ b/docs/guides/dev/what_is_where.md
@@ -1,6 +1,10 @@
 ## Key bindings
 
 - Defined in `src/e3sm_quickview/app.py`. Look for `mt.bind`
-- Hints in drawers: `src/e3sm_quickview/components/tools.py`. Look for `keybinding=`.
+- Hints in control panels: `src/e3sm_quickview/components/tools.py`. Look for `keybinding=`.
 
 - Hints on landing page: `src/e3sm_quickview/components/doc.py`. Look for `keys=`.
+
+## Icons
+
+- Icons in control panels: `src/e3sm_quickview/components/toolbars.py`
diff --git a/docs/guides/quickcompare/quickstart.md b/docs/guides/quickcompare/getting_started.md
similarity index 97%
rename from docs/guides/quickcompare/quickstart.md
rename to docs/guides/quickcompare/getting_started.md
index c8b347f..2b6ddc6 100644
--- a/docs/guides/quickcompare/quickstart.md
+++ b/docs/guides/quickcompare/getting_started.md
@@ -1,4 +1,4 @@
-# Quickstart
+# Getting Started
 
 - Install and launch the app [on a personal computer](../install_and_launch) 
   or use it [at NERSC](/nersc/index).
diff --git a/docs/guides/quickcompare/index.md b/docs/guides/quickcompare/index.md
index a97dd06..8f39e6d 100644
--- a/docs/guides/quickcompare/index.md
+++ b/docs/guides/quickcompare/index.md
@@ -12,5 +12,5 @@ to a control simulation.
 Like [QuickView](/guides/quickview/index.md),
 QuickCompare can present multiple variables simultaneously.
 
-Useful links: see [Quickstart](./quickstart).
+Useful resources: see [linked page](./getting_started).
 
diff --git a/docs/guides/quickview/quickstart.md b/docs/guides/quickview/getting_started.md
similarity index 98%
rename from docs/guides/quickview/quickstart.md
rename to docs/guides/quickview/getting_started.md
index 1b1fb53..3d12ef7 100644
--- a/docs/guides/quickview/quickstart.md
+++ b/docs/guides/quickview/getting_started.md
@@ -1,4 +1,4 @@
-# Quickstart
+# Getting Started
 
 
 - Install and launch the app [on a personal computer](../install_and_launch) 
diff --git a/docs/guides/quickview/index.md b/docs/guides/quickview/index.md
index 06cbe05..ce91a63 100644
--- a/docs/guides/quickview/index.md
+++ b/docs/guides/quickview/index.md
@@ -15,7 +15,7 @@ QuickView's Python- and
 provides intuitive access to [ParaView](https://www.paraview.org/)'s powerful
 analysis and visualization capabilities without requiring a steep learning curve.
 
-Useful links: see [Quickstart](./quickstart).
+Useful resources: see [linked page](./getting_started).
 
 ## Why QuickView?
 
diff --git a/docs/guides/quickview/screenshots/viewport_grouped_ungrouped.png b/docs/guides/quickview/screenshots/viewport_grouped_ungrouped.png
new file mode 100644
index 0000000..cfbb8e0
Binary files /dev/null and b/docs/guides/quickview/screenshots/viewport_grouped_ungrouped.png differ
diff --git a/docs/guides/quickview/viewport_layout.md b/docs/guides/quickview/viewport_layout.md
index 1279eb0..cfd167c 100644
--- a/docs/guides/quickview/viewport_layout.md
+++ b/docs/guides/quickview/viewport_layout.md
@@ -1,7 +1,7 @@
 # Customizing Viewport Layout
 
 ::: tip Tip for users of QuickView version 1
-QuickView version 1 allowed the user to change the sizes and sequence
+QuickView version 1 allowed the user to change the sizes and locations
 of different contour plots in the viewport by drag-and-drop.
 Users' feedback indicated that arbitrary drag-and-drop can get confusing,
 and it was inconvenient to not have a way to reapply the same size to all views.
@@ -30,6 +30,8 @@ shown in the same color as the corresponding group tab in
 the [variable selection](./variable_selection) control panel.
 The screenshot above shows three variable groups.
 
+![Grouped or ungrouped views](./screenshots/viewport_grouped_ungrouped.png){ width="12%", align=right }
+
 This grouping in the viewport can be canceled (or reapplied) by using
 the `G` key or a "Grouped" versus "Ungrouped" toggle.
 
@@ -53,7 +55,8 @@ to swap contents.
 
 The viewport layout control panel has a few other toggles that, upon click,
 reveal additional sliders or buttons for simultaneously
-adjusting all views in the viewport, as shown in the screenshots below. 
+adjusting all views in the viewport, as shown in the screenshot below
+and explained in more detail in the subsequent subsections.
 
 
 ![toggles](./screenshots/viewport_adjustment_toggles_central.png){ width="100%", align=center }
@@ -78,5 +81,7 @@ with respect to the view frames. A click on the auto-zoom button resets the size
 
 A set of four buttons is provided for moving the plots left, right, up, or down
 with respect to the view frames, an operation commonly referred to as panning in graphical user interfaces.
+When the pan menu is expanded as in the screenshot below, the four arrow keys on
+the keyboard can also be used for panning.
 
 ![toggles](./screenshots/viewport_pan.png){ width="100%", align=center }
diff --git a/docs/webnews.md b/docs/webnews.md
index 476ade2..8b39325 100644
--- a/docs/webnews.md
+++ b/docs/webnews.md
@@ -1,7 +1,7 @@
 
 ## May 2026
 
-QuickView has been updated to version 2.7.4 with refined viewport control, a more compact slice selection panel, and various other small improvments in the UI.
+QuickView has been updated to version 2.7.7 with refined [viewport control](/guides/quickview/viewport_layout), a more compact [slice selection panel](/guides/quickview/slice_selection), and various other small improvments in the UI.
 
 ## April 2026