diff --git a/microsoft-edge/devtools/css/reference-images/css-elements-styles-hov-hover.png b/microsoft-edge/devtools/css/reference-images/css-elements-styles-hov-hover.png
index 38a2216aa0..ee3bc6bdc4 100644
Binary files a/microsoft-edge/devtools/css/reference-images/css-elements-styles-hov-hover.png and b/microsoft-edge/devtools/css/reference-images/css-elements-styles-hov-hover.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/format-icon.png b/microsoft-edge/devtools/css/reference-images/format-icon.png
index f5c5b1970a..7b3a553a09 100644
Binary files a/microsoft-edge/devtools/css/reference-images/format-icon.png and b/microsoft-edge/devtools/css/reference-images/format-icon.png differ
diff --git a/microsoft-edge/devtools/css/reference-images/specific-pseudo-classes.png b/microsoft-edge/devtools/css/reference-images/specific-pseudo-classes.png
new file mode 100644
index 0000000000..96a6b1f7e8
Binary files /dev/null and b/microsoft-edge/devtools/css/reference-images/specific-pseudo-classes.png differ
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 39ba453fd2..fd0747e8cb 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 10/29/2021
+ms.date: 04/02/2026
 ---
 <!-- Copyright Kayce Basques
 
@@ -22,14 +22,50 @@ ms.date: 10/29/2021
    See the License for the specific language governing permissions and
    limitations under the License.  -->
 # CSS features reference
+<!-- https://developer.chrome.com/docs/devtools/css/reference/ -->
+
+<!-- todo: sync content in incoming, commented out sections -->
 
 Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.
 
 To learn the basics, see [Get started viewing and changing CSS](../css/index.md).
 
+**Detailed contents:**<!-- https://github.com/captainbrosset/WebToc -->
+* [Select an element](#select-an-element)
+* [View CSS](#view-css)
+   * [View the external stylesheet where a rule is defined](#view-the-external-stylesheet-where-a-rule-is-defined)
+   * [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element)
+   * [View CSS properties in alphabetical order](#view-css-properties-in-alphabetical-order)
+   * [View inherited CSS properties](#view-inherited-css-properties)
+   * [View an element's box model](#view-an-elements-box-model)
+   * [Search and filter the CSS of an element](#search-and-filter-the-css-of-an-element)
+   * [Toggle a pseudo-class](#toggle-a-pseudo-class)
+   * [View a page in print mode](#view-a-page-in-print-mode)
+   * [View used and unused CSS with the Coverage tool](#view-used-and-unused-css-with-the-coverage-tool)
+   * [Force print preview mode](#force-print-preview-mode)
+* [Change CSS](#change-css)
+   * [Two ways to add a CSS declaration to an element](#two-ways-to-add-a-css-declaration-to-an-element)
+      * [Adding an inline CSS declaration to an element](#adding-an-inline-css-declaration-to-an-element)
+      * [Adding a CSS declaration to an existing style rule](#adding-a-css-declaration-to-an-existing-style-rule)
+   * [Change a declaration name or value](#change-a-declaration-name-or-value)
+   * [Increment numerical declaration values](#increment-numerical-declaration-values)
+   * [Add a class to an element](#add-a-class-to-an-element)
+   * [Toggle a class](#toggle-a-class)
+   * [Add a style rule](#add-a-style-rule)
+      * [Select a stylesheet to add a rule to](#select-a-stylesheet-to-add-a-rule-to)
+      * [Add a style rule to a specific location](#add-a-style-rule-to-a-specific-location)
+   * [Toggle a declaration](#toggle-a-declaration)
+   * [Change colors with the Color Picker](#change-colors-with-the-color-picker)
+   * [Sample a color off the page with the Eyedropper](#sample-a-color-off-the-page-with-the-eyedropper)
+   * [Change angle value with the Angle Clock](#change-angle-value-with-the-angle-clock)
+   * [Change box and text shadows with the Shadow Editor](#change-box-and-text-shadows-with-the-shadow-editor)
+   * [Edit animation and transition timings with the Easing Editor](#edit-animation-and-transition-timings-with-the-easing-editor)
+* [See also](#see-also)
+
 
 <!-- ====================================================================== -->
 ## Select an element
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#select -->
 
 The **Elements** tool in DevTools lets you view or change the CSS of one element at a time.  The selected element is highlighted in the **DOM Tree**.  The styles of the element are shown in the **Styles** pane.  For a tutorial, see [View the CSS for an element](../css/index.md#view-the-css-for-an-element).
 
@@ -49,7 +85,40 @@ There are many ways to select an element:
 
 
 <!-- ====================================================================== -->
-## View the external stylesheet where a rule is defined
+## View CSS
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#view -->
+
+Use the **Elements** > **Styles** and **Computed** tabs to view CSS rules and diagnose CSS issues.
+
+
+<!-- ------------------------------ -->
+<!-- #### Navigate with links -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#links -->
+
+
+<!-- ------------------------------ -->
+<!-- #### View tooltips with CSS documentation, specificity, and custom property values -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#tooltips -->
+
+
+<!-- ---------- -->
+<!-- ###### View CSS documentation -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#view-docs -->
+
+
+<!-- ---------- -->
+<!-- ###### View selector specificity -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#selector-specificity -->
+
+
+<!-- ---------- -->
+<!-- ###### View the values of custom properties -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#custom-css -->
+
+
+<!-- ------------------------------ -->
+#### View the external stylesheet where a rule is defined
+<!-- not upstream -->
 
 In the **Styles** pane, click the link next to a CSS rule to open the external stylesheet that defines the rule.  The stylesheet opens in the **Editor** pane of the **Sources** tool.
 
@@ -62,8 +131,14 @@ In the following figure, after you click
 ![Viewing the stylesheet where a rule is defined](./reference-images/css-elements-styles-h1-highlight.png)
 
 
-<!-- ====================================================================== -->
-## View only the CSS that is actually applied to an element
+<!-- ------------------------------ -->
+<!-- #### View invalid, overridden, inactive, and other CSS -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#css-issues -->
+
+
+<!-- ------------------------------ -->
+#### View only the CSS that is actually applied to an element
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#computed -->
 
 The **Styles** pane shows you all of the rules that apply to an element, including declarations that have been overridden.  When you aren't interested in overridden declarations, use the **Computed** pane to view only the CSS that is actually being applied to an element.
 
@@ -82,20 +157,53 @@ The **Styles** pane shows you all of the rules that apply to an element, includi
    ![The Computed panel](./reference-images/css-elements-computed-h1.png)
 
 
-<!-- ====================================================================== -->
-## View CSS properties in alphabetical order
+<!-- ------------------------------ -->
+#### View CSS properties in alphabetical order
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#alphabetical -->
 
 Use the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element).
 
 
-<!-- ====================================================================== -->
-## View inherited CSS properties
+<!-- ------------------------------ -->
+#### View inherited CSS properties
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#inherited -->
 
 Check the **Show All** checkbox in the **Computed** pane.  See [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element).
 
 
-<!-- ====================================================================== -->
-## View an element's box model
+<!-- ------------------------------ -->
+<!-- #### View CSS at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#at-rules -->
+
+
+<!-- ---------- -->
+<!-- ###### View @property at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#property -->
+
+
+<!-- ---------- -->
+<!-- ###### View @supports at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#supports -->
+
+
+<!-- ---------- -->
+<!-- ###### View @scope at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#scope -->
+
+
+<!-- ---------- -->
+<!-- ###### View @font-palette-values at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#font-palette-values -->
+
+
+<!-- ---------- -->
+<!-- ###### View @position-try at-rules -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#filter -->
+
+
+<!-- ------------------------------ -->
+#### View an element's box model
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#box-model -->
 
 To view [the box model](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Box_model) of an element, go to the **Styles** pane.  If your DevTools window is narrow, the **Box Model** diagram is at the bottom of the panel.
 
@@ -106,8 +214,9 @@ In the following figure, the **Box Model** diagram in the **Styles** pane shows
 ![The Box Model diagram](./reference-images/css-elements-styles-h1-2.png)
 
 
-<!-- ====================================================================== -->
-## Search and filter the CSS of an element
+<!-- ------------------------------ -->
+#### Search and filter the CSS of an element
+<!-- Search and filter an element's CSS  https://developer.chrome.com/docs/devtools/css/reference/#filter -->
 
 Use the **Filter** text box on the **Styles** and **Computed** panes to search for specific CSS properties or values.
 
@@ -122,29 +231,70 @@ In the following figure, the **Computed** pane is filtered to only show declarat
 ![Filter the Computed panel](./reference-images/css-elements-computed-filter-100.png)
 
 
-<!-- ====================================================================== -->
-## Toggle a pseudo-class
+<!-- ------------------------------ -->
+<!-- #### Emulate a focused page -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#focus -->
 
-To toggle a pseudo-class, such as `:active`, `:focus`, `:hover`, or `:visited`:
-<!-- :focus-within, :focus-visible, :target. -->
 
-1. [Select an element](#select-an-element).
+<!-- ------------------------------ -->
+#### Toggle a pseudo-class
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#pseudo-class -->
+
+To toggle a pseudo-class:
 
-1. On the **Elements** tool, go to the **Styles** pane.
+1. Go to a webpage, such as [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
 
-1. Click **:hov**.
+1. Enter a task, such as **task 1**.
 
-1. Select the pseudo-class that you want to enable.
+1. Right-click the webpage, and then select **Inspect**.
 
-   The following figure shows toggling the `:hover` pseudo-class.  In the viewport, the `background-color: cornflowerblue` declaration is applied to the element, even though the element isn't actually being hovered over.
+   DevTools opens.
 
-   ![Toggle the :hover pseudo-class](./reference-images/css-elements-styles-hov-hover.png)
+1. Select the **Elements** tool.
+
+1. In the DOM tree, select the `<li class="task">` element.
+
+1. Select the **Styles** tab.
+
+1. In the upper right, click **:hov**.
+
+   Checkboxes are displayed.
+
+1. Select the checkbox for the pseudo-class that you want to enable, such as `:hover`:
+
+   ![Selecting the :hover pseudo-class](./reference-images/css-elements-styles-hov-hover.png)
+
+   In the rendered webpage, the circle next to the task name is filled with a checkmark, and a red X in a red circle appears in the right side of the task, as if the element is being hovered over, even though the element isn't actually being hovered over.
+
+The **Styles** tab shows the following pseudo-classes for all elements:
+* [`:active`](https://developer.mozilla.org/docs/Web/CSS/:active) - MDN.
+* [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus)
+* [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
+* [`:target`](https://developer.mozilla.org/docs/Web/CSS/:target)
+* [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover)
+* [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
+
+
+Additionally, some elements might have element-specific pseudo-classes.  When you select such an element, the **Styles** tab shows a **Force specific element state** section that you can expand and turn on pseudo-classes that are specific to the element, such as a **:read-write** checkbox:
+
+![The `Force specific element state` section of a 'textarea' element](./reference-images/specific-pseudo-classes.png)
 
 For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md#add-a-pseudostate-to-a-class).
 
 
-<!-- ====================================================================== -->
-## View a page in print mode
+<!-- ------------------------------ -->
+<!-- #### View inherited highlight pseudo-elements -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#view-inherited-highlight-pseudo-elements -->
+
+
+<!-- ------------------------------ -->
+<!-- #### View cascade layers -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#cascade-layers -->
+
+
+<!-- ------------------------------ -->
+#### View a page in print mode
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#print-mode -->
 
 To view a page in print mode:
 
@@ -155,8 +305,9 @@ To view a page in print mode:
 1. Click the **Emulate CSS Media** dropdown list, and then select **print**.
 
 
-<!-- ====================================================================== -->
-## View used and unused CSS with the Coverage tool
+<!-- ------------------------------ -->
+#### View used and unused CSS with the Coverage tool
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#coverage -->
 
 The **Coverage** tool shows you what CSS a page actually uses.
 
@@ -183,25 +334,40 @@ The **Coverage** tool shows you what CSS a page actually uses.
    ![A line-by-line breakdown of used and unused CSS](./reference-images/css-sources-css-coverage.png)
 
 
-<!-- ====================================================================== -->
-## Force print preview mode
+<!-- ------------------------------ -->
+#### Force print preview mode
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#print - links to https://developer.chrome.com/docs/devtools/css/print-preview -->
 
 See [Force DevTools into Print Preview mode](../css/print-preview.md).
 
 
 <!-- ====================================================================== -->
-<!-- ## Change CSS -->
-<!-- todo s/CSS declaration/declaration/ (or not) -->
+<!-- ## Copy CSS -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#copy-css -->
 
 
 <!-- ====================================================================== -->
-## Two ways to add a CSS declaration to an element
+## Change CSS
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#change -->
+
+This section lists all the ways you can change CSS in **Elements** > **Styles**.
+
+Additionally, you can:
+
+* Override CSS across page loads.  See [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md).
+* Save modified CSS to your local sources in a workspace.  See [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md).
+
+
+<!-- ------------------------------ -->
+#### Two ways to add a CSS declaration to an element
+<!-- Add a CSS declaration to an element  https://developer.chrome.com/docs/devtools/css/reference/#add-declaration -->
 
 The order of declarations affects how an element is styled.  You can add declarations either by adding an inline declaration, or by adding a declaration to a style rule.  These two approaches are described in the following sections.
 
 
-<!-- ====================================================================== -->
-## Adding an inline CSS declaration to an element
+<!-- ---------- -->
+###### Adding an inline CSS declaration to an element
+<!-- Add an inline declaration  https://developer.chrome.com/docs/devtools/css/reference/#add-declaration-inline -->
 
 Adding a inline declaration is equivalent to adding a `style` attribute to the HTML of an element.  For most scenarios, you probably want to use inline declarations.
 
@@ -224,8 +390,9 @@ In the following figure, the `margin-top` and `background-color` properties have
 ![Add inline declarations](./reference-images/css-elements-styles-margin-top-background-color.png)
 
 
-<!-- ====================================================================== -->
-## Adding a CSS declaration to an existing style rule
+<!-- ---------- -->
+###### Adding a CSS declaration to an existing style rule
+<!-- Add a declaration to a style rule  https://developer.chrome.com/docs/devtools/css/reference/#add-declaration-to-rule -->
 
 If you're debugging an element's styles and you need to specifically test what happens when a declaration is defined in different places, add a declaration to an existing style rule.
 
@@ -242,8 +409,9 @@ To add a declaration to an existing style rule:
 ![Adding a declaration to a style rule](./reference-images/css-elements-styles-border-bottom-style.png)
 
 
-<!-- ====================================================================== -->
-## Change a declaration name or value
+<!-- ------------------------------ -->
+#### Change a declaration name or value
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#change-declaration -->
 
 To change the name of a CSS declaration, double-click the declaration's name.
 
@@ -254,8 +422,19 @@ To change the value of a CSS declaration, double-click the declaration's value.
 To change a numerical value, type in the value, or use the arrow keys, per the next section.
 
 
-<!-- ====================================================================== -->
-## Increment numerical declaration values
+<!-- ------------------------------ -->
+<!-- #### Change enumerable values with keyboard shortcuts -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#values-shortcuts -->
+
+
+<!-- ------------------------------ -->
+<!-- #### Change length values -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#change-length-value -->
+
+
+<!-- ------------------------------ -->
+#### Increment numerical declaration values
+<!-- not upstream -->
 
 To change a numerical value of a CSS declaration, type in the value, or use the arrow keys to increment the value by a specific amount:
 
@@ -269,8 +448,9 @@ To change a numerical value of a CSS declaration, type in the value, or use the
 To decrement, press the **Down Arrow** (or **Page Down**) key instead of the **Up Arrow** (or **Page Up**) key.
 
 
-<!-- ====================================================================== -->
-## Add a class to an element
+<!-- ------------------------------ -->
+#### Add a class to an element
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#add-class -->
 
 To add a class to an element:
 
@@ -285,8 +465,13 @@ To add a class to an element:
    ![The Element Classes pane](./reference-images/css-elements-styles-filter-classes.png)
 
 
-<!-- ====================================================================== -->
-## Toggle a class
+<!-- ------------------------------ -->
+<!-- #### Emulate light and dark theme preferences and enable automatic dark mode -->
+
+
+<!-- ------------------------------ -->
+#### Toggle a class
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#toggle-class -->
 
 To enable or disable a class on an element:
 
@@ -297,8 +482,9 @@ To enable or disable a class on an element:
 1. Toggle the checkbox next to the class that you want to enable or disable.
 
 
-<!-- ====================================================================== -->
-## Add a style rule
+<!-- ------------------------------ -->
+#### Add a style rule
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#style-rule -->
 
 To add a new style rule:
 
@@ -311,8 +497,9 @@ To add a new style rule:
    ![Add a new style rule](./reference-images/css-elements-styles-style-new.png)
 
 
-<!-- ------------------------------ -->
-#### Select a stylesheet to add a rule to
+<!-- ---------- -->
+###### Select a stylesheet to add a rule to
+<!-- Choose which style sheet to add a rule to  https://developer.chrome.com/docs/devtools/css/reference/#style-rule-stylesheet -->
 
 By default, when adding a style rule, DevTools creates a new stylesheet named `inspector-stylesheet` in the document and then adds the new style rule in this stylesheet.
 
@@ -323,8 +510,9 @@ To instead add the rule in an existing stylesheet:
 ![Selecting a stylesheet](./reference-images/css-elements-styles-style-new-select-existing.png)
 
 
-<!-- ------------------------------ -->
-#### Add a style rule to a specific location
+<!-- ---------- -->
+###### Add a style rule to a specific location
+<!-- not upstream - todo: merge w/ above section? -->
 
 By default, adding a style rule by clicking on **New Style Rule** inserts the new rule beneath the **element.style** rule in the `inspector-stylesheet` stylesheet.
 
@@ -337,8 +525,9 @@ To add a style rule in a specific location of the **Styles** pane instead:
 ![Insert Style Rule Below](./reference-images/css-elements-styles-insert-style-rule-below.png)
 
 
-<!-- ====================================================================== -->
-## Toggle a declaration
+<!-- ------------------------------ -->
+#### Toggle a declaration
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#toggle-declaration -->
 
 To toggle a single declaration on or off:
 
@@ -353,8 +542,20 @@ To toggle a single declaration on or off:
    ![Toggle a declaration](./reference-images/css-elements-styles-rule-deactivated.png)
 
 
-<!-- ====================================================================== -->
-## Change colors with the Color Picker
+<!-- ------------------------------ -->
+<!-- #### Edit the ::view-transition pseudo-elements during an animation -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#view-transition -->
+
+
+<!-- ------------------------------ -->
+<!-- #### Align grid items and their content with the Grid Editor -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#grid-editor -->
+
+
+<!-- ------------------------------ -->
+#### Change colors with the Color Picker
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#color-picker -->
+<!-- todo: replace content by a link to https://developer.chrome.com/docs/devtools/css/color -->
 
 The **Color Picker** provides a user interface for changing `color` and `background-color` declarations.
 
@@ -391,6 +592,7 @@ The following figure and list describes of each of the UI elements of the **Colo
 
 <!-- ------------------------------ -->
 #### Sample a color off the page with the Eyedropper
+<!-- not upstream, moved to https://developer.chrome.com/docs/devtools/css/color#eyedropper -->
 
 To change the selected color to some other color on the page:
 
@@ -408,8 +610,9 @@ See also:
 * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md)
 
 
-<!-- ====================================================================== -->
-## Change angle value with the Angle Clock
+<!-- ------------------------------ -->
+#### Change angle value with the Angle Clock
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#angle-clock -->
 
 The **Angle Clock** provides a user interface for changing the angle amounts in CSS property values.
 
@@ -430,8 +633,9 @@ To open the **Angle Clock**:
 There are more keyboard shortcuts to change the angle value.  Find out more in the [Styles pane keyboard shortcuts](../shortcuts/index.md#styles-pane-keyboard-shortcuts).
 
 
-<!-- ====================================================================== -->
-## Change box and text shadows with the Shadow Editor
+<!-- ------------------------------ -->
+#### Change box and text shadows with the Shadow Editor
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#shadow-editor -->
 
 Use the **Shadow Editor** to change the value of the `box-shadow` or `text-shadow` CSS property on an HTML element:
 
@@ -464,8 +668,9 @@ Use the **Shadow Editor** to change the value of the `box-shadow` or `text-shado
    ![The effect of changes made in the Shadow Editor](./reference-images/shadow-editor-changes.png)
 
 
-<!-- ====================================================================== -->
-## Edit animation and transition timings with the Easing Editor
+<!-- ------------------------------ -->
+#### Edit animation and transition timings with the Easing Editor
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#edit-easing -->
 
 Use the **Easing Editor** to change the value of the [animation-timing-function](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function) or [transition-timing-function](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) property on an HTML element:
 
@@ -491,6 +696,33 @@ Use the **Easing Editor** to change the value of the [animation-timing-function]
    ![The effect of changes made in the Easing Editor](./reference-images/easing-editor-changes.png)
 
 
+<!-- ------------------------------ -->
+<!-- #### Use presets to adjust timings -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#presets -->
+
+
+<!-- ------------------------------ -->
+<!-- #### Configure custom timings -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#custom-timings -->
+
+
+<!-- ====================================================================== -->
+<!-- ## (Experimental) Copy CSS changes -->
+<!-- https://developer.chrome.com/docs/devtools/css/reference/#copy-css-changes -->
+
+
+<!-- ====================================================================== -->
+## See also
+
+Demos repo:
+* [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/)
+   * [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/) - Readme and source code.
+* [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/) - Window Controls Overlay demo.
+   * [/1DIV/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) - Readme and source code.
+* [Animated CSS Property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/)
+   * [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue/) - Readme and source code.
+
+
 <!-- ====================================================================== -->
 > [!NOTE]
 > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
diff --git a/microsoft-edge/devtools/network/index.md b/microsoft-edge/devtools/network/index.md
index e1991a1511..4460f41af5 100644
--- a/microsoft-edge/devtools/network/index.md
+++ b/microsoft-edge/devtools/network/index.md
@@ -28,7 +28,7 @@ Use the **Network** tool to make sure the resources your webpage needs to run ar
 
 This is a step-by-step tutorial walkthrough of the **Network** tool, for inspecting network activity for a page.
 
-For an overview of the network-related DevTools features, see [Network features reference](reference.md).
+For an overview of the network-related DevTools features, see [Network features reference](./reference.md).
 
 
 <!-- ------------------------------ -->
diff --git a/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png b/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png
new file mode 100644
index 0000000000..38730666bc
Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png differ
diff --git a/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png b/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png
new file mode 100644
index 0000000000..109f268b80
Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png differ
diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-network-timeline.png b/microsoft-edge/devtools/network/reference-images/sw-network-timeline.png
similarity index 100%
rename from microsoft-edge/devtools/service-workers/index-images/sw-network-timeline.png
rename to microsoft-edge/devtools/network/reference-images/sw-network-timeline.png
diff --git a/microsoft-edge/devtools/network/reference-images/timing-tab.png b/microsoft-edge/devtools/network/reference-images/timing-tab.png
new file mode 100644
index 0000000000..c5a7b7bc95
Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/timing-tab.png differ
diff --git a/microsoft-edge/devtools/network/reference.md b/microsoft-edge/devtools/network/reference.md
index 8314cbf032..c7808cf4a3 100644
--- a/microsoft-edge/devtools/network/reference.md
+++ b/microsoft-edge/devtools/network/reference.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 07/17/2025
+ms.date: 03/25/2026
 ---
 <!-- Copyright Kayce Basques
 
@@ -26,12 +26,12 @@ ms.date: 07/17/2025
 
 <!-- for each png, decide whether to create screenshot -->
 
-The **Network** tool has the following features, to inspect network activity for a webpage.  For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](index.md).
+The **Network** tool has the following features, to inspect network activity for a webpage.
 
+For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](./index.md).
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
-
 * [Record network requests](#record-network-requests)
    * [Stop recording network requests](#stop-recording-network-requests)
    * [Clear requests](#clear-requests)
@@ -84,6 +84,7 @@ The **Network** tool has the following features, to inspect network activity for
    * [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request)
       * [Preview a timing breakdown](#preview-a-timing-breakdown)
       * [Timing breakdown phases explained](#timing-breakdown-phases-explained)
+      * [Analyze a service worker request routing](#analyze-a-service-worker-request-routing)
    * [Display initiators and dependencies](#display-initiators-and-dependencies)
    * [Display load events](#display-load-events)
    * [Display the total number of requests](#display-the-total-number-of-requests)
@@ -92,6 +93,7 @@ The **Network** tool has the following features, to inspect network activity for
    * [Display the uncompressed size of a resource](#display-the-uncompressed-size-of-a-resource)
 * [Export requests data](#export-requests-data)
    * [Save all network requests to a HAR file](#save-all-network-requests-to-a-har-file)
+   * [Import a HAR file into DevTools for analysis](#import-a-har-file-into-devtools-for-analysis)
    * [Copy network requests to the clipboard](#copy-network-requests-to-the-clipboard)
    * [Copy formatted response JSON to the clipboard](#copy-formatted-response-json-to-the-clipboard)
    * [Copy property values from network requests to your clipboard](#copy-property-values-from-network-requests-to-your-clipboard)
@@ -1356,7 +1358,7 @@ To display the timing breakdown of a request:
 
 For a faster way to access the data, see [Preview a timing breakdown](#preview-a-timing-breakdown).
 
-For more information about each of the phases that may be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained).
+For information about each of the phases that might be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained), below.
 
 
 <!-- ---------- -->
@@ -1369,7 +1371,7 @@ The **Waterfall** column is off by default.  To turn on the **Waterfall** column
 
 ![Previewing the timing breakdown of a request](./reference-images/resources-waterfall-hover.png)
 
-To view the data without hovering, see the top of the present section, [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request).
+To view the data without hovering, see [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request), above.
 
 
 <!-- ---------- -->
@@ -1378,32 +1380,77 @@ To view the data without hovering, see the top of the present section, [Display
 
 Each of these phases may appear in the **Timing** tab:
 
-- **Queueing**. The browser queues requests when any of the following are true
-  - There are higher priority requests.
-  - There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
-  - The browser is briefly allocating space in the disk cache.
+* **Queueing**. The browser queues requests when any of the following are true
+  * There are higher priority requests.
+  * There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
+  * The browser is briefly allocating space in the disk cache.
+
+* **Stalled**. The request could be stalled for any of the reasons described in **Queueing**.
+
+* **Startup**.  When the request is handled by a service worker, **Startup** is the time it took for the service worker to start.
+
+* **respondWith**.  When the request is handled by a service worker, **respondWith** is the time that it took for the service worker to run the `fetchEvent.respondWith()` callback.
+
+* **DNS Lookup**. The browser is resolving the IP address for the request.
+
+* **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL).
+
+* **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server).
+
+* **Request sent**. The request is being sent.
+
+* **ServiceWorker Preparation**. The browser is starting up the service worker.
+
+* **Request to ServiceWorker**. The request is being sent to the service worker.
+
+* **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response.
+
+* **Content Download**. The browser is receiving the response.
+
+* **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+
+* **Reading Push**. The browser is reading the local data that was previously received.
+
+
+<!-- ---------- -->
+###### Analyze a service worker request routing
+<!--
+#### Display the timing breakdown of a service worker request
+-->
+
+To visualize request routing, timelines display the service worker `Startup` event and the `respondWith` fetch events.  You can debug and visualize a network request that passed through a service worker.
+
+To display the timing breakdown of a service worker request:
+
+1. Go to a page that uses a service worker, such as the [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo page, in a new window or tab.
+
+1. Right-click the page, and then select **Inspect**.
+
+   DevTools opens.
+
+1. Select the **Network** tool.
 
-- **Stalled**. The request could be stalled for any of the reasons described in **Queueing**.
+1. Reload the page.
 
-- **DNS Lookup**. The browser is resolving the IP address for the request.
+1. In the list of requests, select a network request that went through a service worker file.  For example, select **about.css**.
 
-- **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL).
+   The sidebar appears.
 
-- **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server).
+1. In the sidebar, click the **Timing** tab:
 
-- **Request sent**. The request is being sent.
+   ![The Timing tab within the Network tool](./reference-images/timing-tab.png)
 
-- **ServiceWorker Preparation**. The browser is starting up the service worker.
+   The **Service Worker** section displays timing information about the **Startup** and **respondWith** phases.
 
-- **Request to ServiceWorker**. The request is being sent to the service worker.
+1. Click the expander arrow on the **respondWith** section:
 
-- **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response.
+   ![The expanded respondWith section](./reference-images/respondwith-expanded.png)
 
-- **Content Download**. The browser is receiving the response.
+1. Within the **respondWith** section, click the expander arrow on **Original Request**:
 
-- **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+   ![The fully expanded respondWith section](./reference-images/respondwith-expanded-fully.png)
 
-- **Reading Push**. The browser is reading the local data that was previously received.
+1. On **Response Received**, click the expander arrow.
 
 
 <!-- ------------------------------ -->
diff --git a/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png b/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png
new file mode 100644
index 0000000000..e4b4682410
Binary files /dev/null and b/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png differ
diff --git a/microsoft-edge/devtools/progressive-web-apps/index-images/expander-icon.png b/microsoft-edge/devtools/progressive-web-apps/index-images/expander-icon.png
new file mode 100644
index 0000000000..6f1a0f6d90
Binary files /dev/null and b/microsoft-edge/devtools/progressive-web-apps/index-images/expander-icon.png differ
diff --git a/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png b/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png
new file mode 100644
index 0000000000..2e780b6451
Binary files /dev/null and b/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png differ
diff --git a/microsoft-edge/devtools/progressive-web-apps/index.md b/microsoft-edge/devtools/progressive-web-apps/index.md
index 73bc8f3983..b4c249867a 100644
--- a/microsoft-edge/devtools/progressive-web-apps/index.md
+++ b/microsoft-edge/devtools/progressive-web-apps/index.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 09/12/2023
+ms.date: 04/02/2026
 ---
 <!-- Copyright Kayce Basques
 
@@ -22,20 +22,28 @@ ms.date: 09/12/2023
    See the License for the specific language governing permissions and
    limitations under the License.  -->
 # Debug a Progressive Web App (PWA)
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/ -->
 
-Use the **Application** tool to inspect, modify, and debug a PWA's web app manifests, service workers, and service worker caches.  The **Application** tool includes the following panes for PWA features:
+Use the **Application** tool to inspect, modify, and debug a PWA's web app manifests, service workers, and service worker caches.
 
-*  Use the **Manifest** pane to inspect your web app manifest and trigger "Add to Homescreen" events.
 
-*  Use the **Service workers** pane for service-worker-related tasks, such as:
-   * Unregistering or updating a service.
-   * Emulating push events.
-   * Going offline.
-   * Stopping a service worker.
+<!-- ====================================================================== -->
+<!-- ## Summary -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#summary -->
+
+The ![Application icon](./index-images/application-icon.png) **Application** tool includes the following panes for PWA features:
+
+* Use the **Manifest** pane to inspect your web app manifest.
 
-*  Use the **Cache Storage** pane to view your service worker cache.
+* Use the **Service workers** pane for service-worker-related tasks, such as:
+  * Unregistering or updating a service.
+  * Emulating push events.
+  * Going offline.
+  * Stopping a service worker.
 
-*  Use the **Storage** pane to unregister a service worker and clear all storage and caches.
+* Use the **Cache Storage** pane to view your service worker cache.
+
+* Use the **Storage** pane to view how much data your app is storing on the device, and clear the stored data.
 
 The features that are discussed below are features of the **Application** tool are relevant for PWAs.  For help on the other features and panes in the **Application** tool, see:
 * [View the resource files that make up a webpage](../resources/index.md)
@@ -47,6 +55,7 @@ See also:
 
 <!-- ====================================================================== -->
 ## Web app manifest
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#manifest -->
 
 If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest.  The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch.
 
@@ -55,14 +64,26 @@ If you want your users to be able to add your app to their mobile homescreens, y
 * [Improve user experiences with a Web App Manifest](/web/fundamentals/web-app-manifest)
 * [Using App Install Banners](/web/fundamentals/app-install-banners)  -->
 
-<!--TODO:  Link to sections when available. -->
+<!--TODO: link to sections when available -->
+
+To inspect a manifest:
+
+1. Go to the webpage that uses the manifest, such as [Airhorner.com](https://airhorner.com)<!-- todo: PWAmp -->, in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool.
 
-After you have your manifest set up, you can use the **App Manifest** pane of the **Application** tool to inspect your manifest:
+1. In the outline on the left, in the **Application** section, select **Manifest**.
 
-![The Manifest Pane](./index-images/manifest-pane.png)
+   The **App Manifest** pane is displayed, where you can inspect the manifest:
+
+![The App Manifest Pane](./index-images/manifest-pane.png)
 
 The **App Manifest** pane contains the following sections:
-* Manifest link
+* Top section, containing the manifest link
 * **Identity**
 * **Presentation**
 * **Protocol Handlers**
@@ -71,15 +92,17 @@ The **App Manifest** pane contains the following sections:
 * **Screenshot #1**
 * **Screenshot #2**
 
-*  To look at the manifest source, click the link below the **App Manifest** label (`manifest.json` in the previous figure, which opens `https://airhorner.com/manifest.json`).
+* To view the manifest source file, click the link below the **App Manifest** label.  In the previous figure, that link is `manifest.json`, which opens `https://airhorner.com/manifest.json`<!-- todo: PWAmp -->, for [Airhorner.com](https://airhorner.com).
 <!-- *  Click the **Add to homescreen** button to simulate an Add to Homescreen event.  Check out the next section for more information.  -->
 
-*  The **Identity** and **Presentation** sections display fields from the manifest source in a more user-friendly display.
+* The **Identity** and **Presentation** sections display fields from the manifest source in a more user-friendly display.
 
-*  The **Icons** section displays every icon that's been specified in the manifest.
+* The **Icons** section displays every icon that's been specified in the manifest.
 
 
-<!--#### Simulate Add to Homescreen events  -->
+<!-- ------------------------------ --
+#### Simulate Add to Homescreen events
+-->
 
 <!--A web app may only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits.  While developing or debugging your Add to Homescreen workflow, the criteria is potentially inconvenient.
 The **Add to homescreen** button on the **App Manifest** pane lets you simulate Add to Homescreen events whenever you want.  -->
@@ -96,17 +119,53 @@ The **Add to homescreen** button on the **App Manifest** pane lets you simulate
 
 <!--The **Add to Homescreen** feature cannot yet simulate the workflow for mobile devices.  Notice how the "add to shelf" prompt was triggered in the screenshot above, even though DevTools is in Device Mode (Device Emulation).  However, if you can successfully add your app to your desktop shelf, then it works for mobile, too.  -->
 
-<!-- TODO: Rework content after sample app is created. -->
+<!-- TODO: rework content after sample app is created -->
 
 <!--If you want to test out the genuine mobile experience, you can connect a real mobile device to DevTools via [remote debugging](/debug/remote-debugging/remote-debugging), and then click the **Add to Homescreen** button (on DevTools) to trigger the "add to homescreen" prompt on the connected mobile device.  -->
 
-<!--TODO:  Link Debug "remote debugging" sections when available. -->
+<!--TODO: link to "remote debugging" sections when available -->
+
+
+<!-- ------------------------------ --
+#### View and check maskable icons -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#icons -->
+
+<!-- todo -->
+
+
+<!-- ------------------------------ --
+#### Trigger installation -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#trigger-installation -->
+
+<!-- todo -->
+
+
+<!-- ------------------------------ --
+#### Inspect shortcuts -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#shortcut -->
+
+<!-- todo -->
+
+
+<!-- ------------------------------ --
+#### Inspect screenshots for a richer installation UI -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#screenshot -->
+
+<!-- todo -->
+
+
+<!-- ------------------------------ --
+#### Test URL protocol handler registration -->
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#test-protocol-handler -->
+
+<!-- todo -->
 
 
 <!-- ====================================================================== -->
 ## Service workers
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#service-workers -->
 
-Service workers are a fundamental technology in the web platform.  Service workers are scripts that the browser runs in the background, separate from a webpage.  These scripts enable you to access features that don't need a webpage or user interaction, such as push notifications, background sync, and offline experiences.
+Service workers are a fundamental technology in the web platform.  Service workers are scripts that the browser runs in the background, separate from a webpage.  Service worker scripts enable your app to access features that don't need a webpage or user interaction, such as push notifications, background sync, and offline experiences.
 
 <!--Related Guides:
 
@@ -115,46 +174,114 @@ Service workers are a fundamental technology in the web platform.  Service worke
 
 <!-- [How Push Works](/web/fundamentals/push-notifications/how-push-works) -->
 
-<!--TODO:  Link to sections when available. -->
+<!--TODO: link to sections when available -->
+
+The main place in DevTools to inspect and debug service workers is the **Service workers** pane in the ![Application icon](./index-images/application-icon.png) **Application** tool.
 
-The **Service workers** pane in the **Application** tool is the main place in DevTools to inspect and debug service workers:
+To view service workers:
+
+1. Go to a webpage, such as [Airhorner.com](https://airhorner.com)<!-- todo: PWAmp -->, in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool.
+
+1. In the outline on the left, in the **Application** section, select **Service workers**.
+
+   The **Service workers** pane is displayed:
 
 ![The Service workers pane](./index-images/service-workers-pane.png)<!-- todo: latest ui has 'w' -->
 
-*  If a service worker is installed to the currently open page, then it is listed on this pane.  For example, in the previous figure, there is a service worker installed for the scope of `https://weather-pwa-sample.firebaseapp.com`.
+* If a service worker is installed to the currently open page, then the service worker is listed in the **Service workers** pane.  For example, in the previous figure, there is a service worker installed for the scope of `https://weather-pwa-sample.firebaseapp.com`.<!-- todo: update when use PWAmp instead of Airhorner -->
+
+* The **Offline** checkbox puts DevTools into offline mode.  This is equivalent to the offline mode available from the ![Network icon](./index-images/network-icon.png) **Network** tool, or the `Go offline` option in the [Command Menu](../command-menu/index.md).
+
+* The **Update on reload** checkbox forces the service worker to update on every page load.
 
-*  The **Offline** checkbox puts DevTools into offline mode.  This is equivalent to the offline mode available from the **Network** tool, or the `Go offline` option in the [Command Menu](../command-menu/index.md).
+* The **Bypass for network** checkbox bypasses the service worker and forces the browser to go to the network for requested resources.
 
-*  The **Update on reload** checkbox forces the service worker to update on every page load.
+* The **Network requests** link takes you to the **Network** tool with a list of intercepted requests related to the service worker (the `is:service-worker-intercepted` filter).  See [Display network requests handled by a service worker](#display-network-requests-handled-by-a-service-worker), below.
 
-*  The **Bypass for network** checkbox bypasses the service worker and forces the browser to go to the network for requested resources.
+* The **Update** button performs a one-time update of the specified service worker.
 
-*  The **Update** button performs a one-time update of the specified service worker.
+* The **Push** button emulates a push notification without a payload (also known as a _tickle_).
 
-*  The **Push** button emulates a push notification without a payload (also known as a **tickle**).
+* The **Sync** button emulates a background sync event.
 
-*  The **Sync** button emulates a background sync event.
+* The **Unregister** link unregisters the specified service worker.  To unregister a service worker and wipe storage and caches with a single button-click, see [Clear storage](#clear-storage), below.
 
-*  The **Unregister** button unregisters the specified service worker.  Check out [Storage](#storage) for a way to unregister a service worker and wipe storage and caches with a single button click.
+* The **Source** line tells you when the currently running service worker was installed.  The link is the name of the source file of the service worker.  Choosing on the link sends you to the source of the service worker.
 
-*  The **Source** line tells you when the currently running service worker was installed.  The link is the name of the source file of the service worker.  Choosing on the link sends you to the source of the service worker.
+* The **Status** line tells you the status of the service worker.  The ID number next to the green status indicator (`#36` in the previous figure) is for the currently active service worker.
 
-*  The **Status** line tells you the status of the service worker.  The ID number next to the green status indicator (`#36` in previous figure) is for the currently active service worker.  Next to the status, a **start** button (if the service worker is stopped) or a **stop** button (if the service worker is running) is displayed.  Service workers are designed to be stopped and started by the browser at any time.  Explicitly stopping your service worker using the **stop** button may simulate that.  Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again.  It frequently reveals bugs due to faulty assumptions about persistent global state.
+  Next to the status:
+  * If the service worker is stopped, a **start** button is displayed.
+  * If the service worker is running, a **stop** button is displayed.
 
-*  The **Clients** line tells you the origin that the service worker is scoped to.  The **focus** button is mostly useful when you've enabled the **show all** checkbox.  When that checkbox is enabled, all registered service workers are listed.  If you click the **focus** button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.
+  Service workers are designed to be stopped and started by the browser at any time.  Explicitly stopping your service worker using the **stop** button may simulate that.
 
-If the service worker causes any errors, a new label called **Errors** shows up.
+  Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again.  It frequently reveals bugs due to faulty assumptions about persistent global state.
+
+* The **Clients** line tells you the origin that the service worker is scoped to.  The **focus** button is mostly useful when you've enabled the **show all** checkbox.  When that checkbox is enabled, all registered service workers are listed.  If you click the **focus** button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.
+
+* The **Update Cycle** table displays the service worker's activities and their elapsed times, such as **Install**, **Wait**, and **Activate**.  To see the exact timestamp of each activity, click the **Expand** (![Expander triangle](./index-images/expander-icon.png)) buttons.
+
+If the service worker causes any errors, an **Errors** label is displayed.
 
 <!--
 ![Service worker with errors](../media/sw-error.png)
 -->
 
-<!--TODO:  Capture "Service Worker Errors" sample when available. -->
-<!--TODO:  Link Web "How tickle works" sections when available. -->
+<!--TODO: capture "Service Worker Errors" sample when available -->
+
+<!--TODO: link Web "How tickle works" sections when available -->
+
+See also:
+* [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) - at MDN, about service workers.
+
+
+<!-- ====================================================================== -->
+## Display network requests handled by a service worker
+<!-- not in upstream -->
+
+From the **Service workers** pane of the **Application** tool, you can quickly access the list of network requests that are handled by a service worker, through the **Network** tool.
+
+To display the network requests that are handled by a service worker:
+
+1. Go to a webpage, such as [Airhorner.com](https://airhorner.com)<!-- todo: PWAmp -->, in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool.
+
+1. In the outline on the left, in the **Application** section, select **Service workers**.
+
+   The **Service workers** pane is displayed.
+
+1. In the upper right of the **Service workers** pane, click the **Network requests** button.
+
+   The ![Network icon](./index-images/network-icon.png) **Network** tool opens.
+
+   The **Filter** text box contains `is:service-worker-intercepted`.  This filter only displays the requests that were handled by this service worker.
+
+1. Refresh the webpage.
+
+1. Select one of the requests, such as **main.css**.
+
+   The sidebar appears.
+
+1. In the sidebar, click the **Timing** tab.
+
+   The **Service Worker** section displays timing information about the **Startup** and **respondWith** phases.
 
 
 <!-- ====================================================================== -->
 ## Service worker caches
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#caches -->
 
 The **Cache Storage** pane provides a read-only list of resources that have been cached using the (service worker) [Cache API](https://developer.mozilla.org/docs/Web/API/Cache):
 
@@ -167,46 +294,52 @@ All open caches are listed under the **Cache Storage** expander.
 
 <!-- ====================================================================== -->
 ## Quota usage
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#opaque-responses -->
 
 Some responses within the **Cache Storage** pane may be flagged as being "opaque".<!-- [opaque](/web/fundamentals/glossary#opaque-response) -->  This refers to a response retrieved from a different origin, like from a **CDN**<!-- [CDN](/web/fundamentals/glossary#CDN) --> or remote API, when [CORS](https://fetch.spec.whatwg.org/#http-cors-protocol) isn't enabled.
 
-<!--TODO:  Link Web "CDN" section when available. -->
-<!--TODO:  Link Web "opaque" section when available. -->
+<!--TODO: link Web "CDN" section when available -->
+
+<!--TODO: link Web "opaque" section when available -->
 
 In order to avoid leakage of cross-domain information, significant padding is added to the size of an opaque response used for calculating storage quota limits (for example whether a `QuotaExceeded` exception is thrown) and reported by the `navigator.storage` API.
 
-<!--TODO:  Link Estimating "`navigator.storage` API" sections when available. -->
+<!--TODO: link Estimating "`navigator.storage` API" sections when available -->
 <!-- [Estimating available storage space](whats-new/2017/08/estimating-available-storage-space) -->
 
 The details of this padding vary from browser to browser, but for Microsoft Edge, this means that the **minimum size** that any single cached opaque response contributes to the overall storage usage is [approximately 7 megabytes](https://bugs.chromium.org/p/chromium/issues/detail?id=796060#c17).  Remember the padding when determining how many opaque responses you want to cache, since you may easily exceed storage quota limitations much sooner than you otherwise expect based on the actual size of the opaque resources.
 
 Related Guides:
-
 * [Stack Overflow: What limitations apply to opaque responses?](https://stackoverflow.com/q/39109789/385997)
-<!--* [Alphabet work container: Understanding Storage Quota](/web/tools/Alphabet-work-container/guides/storage-quota#beware_of_opaque_responses)  -->
+<!--
+* [Alphabet work container: Understanding Storage Quota](/web/tools/Alphabet-work-container/guides/storage-quota#beware_of_opaque_responses)
+-->
 
-<!--TODO:  Link Work container storage quota for opaque responses section when available. -->
+<!--TODO: link Work container storage quota for opaque responses section when available -->
 
 
 <!-- ====================================================================== -->
-## Storage
+## Clear storage
+<!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#clear-storage -->
 
-The **Storage** pane is a very useful feature when developing progressive web apps.  This pane lets you unregister service workers and clear all caches and storage with a single button click.  <!--Check out the section below to learn more.  -->
-
-<!--Related Guides:
+The **Clear Storage** tab is useful when developing a progressive web app.  Use the **Clear Storage** pane to unregister service workers and clear all caches and storage, with a single button-click.
 
-* [Clear Storage](/iterate/manage-data/local-storage#clear-storage)  -->
 
-<!--TODO:  Link to sections when available. -->
+<!-- ====================================================================== --
+## Other Application tool guides
+<!-- Other Application panel guides  https://developer.chrome.com/docs/devtools/progressive-web-apps/#other --
 
-<!--## Other Application panel guides
+For the other panes of the ![Application icon](./index-images/application-icon.png) **Application** tool, see:
+* [Inspect page resources](/iterate/manage-data/page-resources)
+* [Inspect and manage local storage and caches](/iterate/manage-data/local-storage)
+<!--TODO: link to sections when available -->
 
-Check out the guides below for more help on the other panes of the **Application** tool.
 
-Related Guides:
+<!-- ====================================================================== -->
+## See also
+<!-- not in upstream -->
 
-* [Inspect page resources](/iterate/manage-data/page-resources)
-* [Inspect and manage local storage and caches](/iterate/manage-data/local-storage)  -->
+* [Inspect network activity](./index.md)
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-application-timeline.png b/microsoft-edge/devtools/service-workers/index-images/sw-application-timeline.png
deleted file mode 100644
index e17e54ac6e..0000000000
Binary files a/microsoft-edge/devtools/service-workers/index-images/sw-application-timeline.png and /dev/null differ
diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-sources.png b/microsoft-edge/devtools/service-workers/index-images/sw-sources.png
deleted file mode 100644
index f19eb79573..0000000000
Binary files a/microsoft-edge/devtools/service-workers/index-images/sw-sources.png and /dev/null differ
diff --git a/microsoft-edge/devtools/service-workers/index.md b/microsoft-edge/devtools/service-workers/index.md
deleted file mode 100644
index ca0bb36766..0000000000
--- a/microsoft-edge/devtools/service-workers/index.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Service worker improvements
-description: How to use each service worker improvement in the Network, Application, and Sources tools in Microsoft Edge DevTools.
-author: MSEdgeTeam
-ms.author: msedgedevrel
-ms.topic: article
-ms.service: microsoft-edge
-ms.subservice: devtools
-ms.date: 02/19/2021
----
-# Service worker improvements
-
-The **Network**, **Application**, and **Sources** tools have been improved to help you work with [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and the network requests that pass through each service worker.
-
-The improvements simplify the following tasks:
-
-*  Debug based on service worker timelines.
-    *  The start of a request and duration of the bootstrap.
-    *  Update to service worker registration.
-    *  The runtime of a request using the [fetch event](https://developer.mozilla.org/docs/Web/API/FetchEvent) handler.
-    *  The runtime of all fetch events for loading a client.
-*  Explore the runtime details of fetch event handlers, install event handlers, and activate event handlers.
-*  Step into and out of fetch event handler with [page script information](#sources).
-
-The improvements span the following tools:
-
-*  The [Network](#network) tool.  Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool.
-
-*  The [Application](#application) tool.  To debug service workers, use the **Service workers** page.
-
-*  The [Sources](#sources) tool.  Access page script information when stepping into fetch event handlers.
-
-
-<!-- ====================================================================== -->
-## Network
-
-![Service worker timeline in the Network tool](./index-images/sw-network-timeline.png)
-
-You can access the service worker debugging features in the **Network** tool in either of the following ways:
-
-*  Directly in the **Network** tool.
-*  Started in the **Application** tool.
-
-
-<!-- ------------------------------ -->
-#### Request routing
-
-To make request routing easier to visualize, timelines now display the service worker start-up and the `respondWith` fetch events.  To debug and visualize a network request that passed through a service worker:
-
-1. Select the network request that went through a service worker.
-1. Open the **Timing** tool.
-
-
-<!-- ------------------------------ -->
-#### Fetch events
-
-To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`.  To see more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows.
-
-
-<!-- ====================================================================== -->
-## Application
-
-![Application view](./index-images/sw-application-timeline.png)
-
-
-<!-- ------------------------------ -->
-#### Service worker update timeline
-
-The Microsoft Edge DevTools team added a timeline in the **Application** tool to reflect the update lifecycle of the service worker.  This timeline displays the installation and activation events.  Each of the events have a corresponding dropdown arrow to give you more details.
-
-
-<!-- ------------------------------ -->
-#### Request routing and fetch events
-
-You can now access the service worker timelines through the **Network** tool.  This feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience.
-
-1. Open the service worker that you're debugging.
-
-1. Click the **Network** button to open the [request routing experience](#network).
-
-1. Use the **respondWith** dropdown arrows for fetch event request and response information.
-
-The **Network** tool displays the network requests that went through the service worker you are debugging.  The automatic filter is a way to narrow down your exploration.
-
-See also [Application tool, to manage storage](../storage/application-tool.md).
-
-
-<!-- ====================================================================== -->
-## Sources
-
-![The DOM tree](./index-images/sw-sources.png)
-
-To find more stack information, set a break point in the fetch handler.  The details lead to where the resource is requested in the page script.
-
-When the debugger pauses inside a fetch handler, a combined stack information is displayed in the panel to the right.  After that, you can move around in the stack frames.
-
-
-<!-- ------------------------------ -->
-#### Future work
-
-The Microsoft Edge DevTools team plans to further develop the cache detail, and are investigating more ways to improve the service worker debugging experience for [Progressive Web Application (PWA)](https://developer.mozilla.org/docs/Web/Progressive_web_apps) developers.
diff --git a/microsoft-edge/devtools/sources/index.md b/microsoft-edge/devtools/sources/index.md
index 67f6e2e58d..80cd994b6b 100644
--- a/microsoft-edge/devtools/sources/index.md
+++ b/microsoft-edge/devtools/sources/index.md
@@ -27,7 +27,6 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
-
 * [The Navigator, Editor, and Debugger panes](#the-navigator-editor-and-debugger-panes)
 * [Using the Navigator pane to select files](#using-the-navigator-pane-to-select-files)
    * [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage)
diff --git a/microsoft-edge/devtools/storage/application-tool.md b/microsoft-edge/devtools/storage/application-tool.md
index d446c2009c..eb87bf5725 100644
--- a/microsoft-edge/devtools/storage/application-tool.md
+++ b/microsoft-edge/devtools/storage/application-tool.md
@@ -52,9 +52,3 @@ The **Application** tool has the following pages, listed on the left:
    * top
 
 To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_.
-
-
-<!-- ====================================================================== -->
-<!--
-## See also
--->
diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md
index 604e2a6045..10352c65d7 100644
--- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md
@@ -329,7 +329,7 @@ Previously DevTools displayed a list nested under the **Application** tool > **S
 Chromium issue: [#807440](https://crbug.com/807440)
 
 See also:
-* [Service worker improvements](../../../service-workers/index.md)
+* [Service workers](../../../progressive-web-apps/index.md#service-workers), in _Debug a Progressive Web App (PWA)_.
 * [Application tool, to manage storage](../../../storage/application-tool.md)
 
 
diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md
index ed96428ebf..fa9c300eb4 100644
--- a/microsoft-edge/devtools/whats-new/2020/11/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2020/11/devtools.md
@@ -117,12 +117,13 @@ See also:
 <!-- Title:  Service worker debugging improvements in the Network, Application, and Sources tools  -->
 <!-- Subtitle:  Making service workers easier to debug for progressive web applications and more.  -->
 
-The following new features in the **Network** tool, **Application** tool, and **Sources** tool help you build your [PWA](../../../../progressive-web-apps/index.md).  Use the following features when you have difficulty debugging your service worker.
+The following new features in the **Network** tool, **Application** tool, and **Sources** tool help you build your progressive web application (PWA).  Use the following features when you have difficulty debugging your service worker.
 
 The routing of a request displays the `startup` and `fetch` events based on the network requests that run through service workers.  The timelines are accessed from either the **Application** or **Network** tool.  The timelines help when you are having trouble with service workers and want to see if something is wrong with the `startup` or `fetch` event.
 
 See also:
-* [Service worker improvements](../../../service-workers/index.md)
+* [Overview of Progressive Web Apps (PWAs)](../../../../progressive-web-apps/index.md)
+* [Service workers](../../../progressive-web-apps/index.md#service-workers), in _Debug a Progressive Web App (PWA)_.
 
 
 <!-- ------------------------------ -->
@@ -151,7 +152,7 @@ To display additional context when debugging a service worker:
 
 See also:
 * [Application tool, to manage storage](../../../storage/application-tool.md)
-* [Service worker improvements](../../../service-workers/index.md)
+* [Service workers](../../../progressive-web-apps/index.md#service-workers), in _Debug a Progressive Web App (PWA)_.
 
 
 <!-- ------------------------------ -->
@@ -168,7 +169,6 @@ In the **Network** tool, you can debug network requests that are run by service
 
 See also:
 * [Display the timing breakdown of a request](../../../network/reference.md#display-the-timing-breakdown-of-a-request) in _Network features reference_.
-* [Service worker improvements](../../../service-workers/index.md)
 
 
 <!-- ------------------------------ -->
@@ -186,7 +186,6 @@ In the following figure, the reference is selected, and has opened the initiator
 
 See also:
 * [View the call stack](../../../javascript/reference.md#view-the-call-stack) in _JavaScript debugging features_
-* [Service worker improvements](../../../service-workers/index.md)
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md
index 76881a9edd..9cd28d96d2 100644
--- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md
@@ -99,7 +99,7 @@ For real-time updates on this feature in the Chromium open-source project, see I
 
 See also:
 * [Updating your service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers#updating_your_service_worker) in _Using Service Workers_ at MDN.
-* [Service worker improvements](../../../service-workers/index.md) - DevTools debugging tools for Progressive Web Apps and service workers.
+* [Service workers](../../../progressive-web-apps/index.md#service-workers), in _Debug a Progressive Web App (PWA)_.
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md
index 66240d892e..95073c4dab 100644
--- a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md
+++ b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md
@@ -75,7 +75,6 @@ If you don't have the **Fulfilled by** column, right-click the table headers in
 
 See also:
 * [Filter requests by properties](../../../network/reference.md#display-a-log-of-requests) in _Network features reference_.
-* [Service worker improvements](../../../service-workers/index.md).
 
 For the history of this feature, see [Issue #16](https://github.com/MicrosoftEdge/DevTools/issues/16).
 
diff --git a/microsoft-edge/progressive-web-apps/how-to/debug.md b/microsoft-edge/progressive-web-apps/how-to/debug.md
index ebe9f321a4..831d4df546 100644
--- a/microsoft-edge/progressive-web-apps/how-to/debug.md
+++ b/microsoft-edge/progressive-web-apps/how-to/debug.md
@@ -83,7 +83,7 @@ To provide a rich and fast experience to your users, your PWA can store data loc
 * [View and edit local storage](../../devtools/storage/localstorage.md).
 * [View and edit session storage](../../devtools/storage/sessionstorage.md).
 
-To view the total amount of stored data used by your PWA, the available quota, and delete the data, use the **Storage** pane of the **Application** tool. To learn more, see [Storage](../../devtools/progressive-web-apps/index.md#storage) in _Debug a Progressive Web App (PWA)_.
+To view the total amount of stored data used by your PWA, the available quota, and delete the data, use the **Storage** pane of the **Application** tool.  See [Clear storage](../../devtools/progressive-web-apps/index.md#clear-storage) in _Debug a Progressive Web App (PWA)_.
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml
index ad9762521e..4ffae82a67 100644
--- a/microsoft-edge/toc.yml
+++ b/microsoft-edge/toc.yml
@@ -610,10 +610,6 @@
                 - name: View page resources
                   href: ./devtools/resources/index.md
                   displayName: Command Menu, Network tool, Sources tool, Application tool, Network tool
-
-                - name: Service worker improvements
-                  href: ./devtools/service-workers/index.md
-                  displayName: Network tool, Application tool, Sources tool
 # -----------------------------------------------------------------------------
             - name: Performance tool  # = upstream TOC bucket "Performance"
               items:
diff --git a/redirects/.openpublishing.redirection.devtools.json b/redirects/.openpublishing.redirection.devtools.json
index 2bd713fbab..4e0b5c4ee9 100644
--- a/redirects/.openpublishing.redirection.devtools.json
+++ b/redirects/.openpublishing.redirection.devtools.json
@@ -693,7 +693,12 @@
     },
     {
       "source_path": "../microsoft-edge/devtools-guide-chromium/service-workers/index.md",
-      "redirect_url": "/microsoft-edge/devtools/service-workers/index",
+      "redirect_url": "/microsoft-edge/devtools/progressive-web-apps/#service-workers",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "../microsoft-edge/devtools/service-workers/index.md",
+      "redirect_url": "/microsoft-edge/devtools/progressive-web-apps/#service-workers",
       "redirect_document_id": false
     },
     {