diff --git a/developer/19.0/context/keyboard-editor.md b/developer/19.0/context/keyboard-editor.md
index 433cce5c4..033ec86c4 100644
--- a/developer/19.0/context/keyboard-editor.md
+++ b/developer/19.0/context/keyboard-editor.md
@@ -99,23 +99,25 @@ Features
## Layout tab
+### Design view
+
+> Path: KMN → Layout tab → Design view (default)
+
The Layout tab gives you a simple interface to quickly create a keyboard
-using a visual representation of a desktop/laptop computer keyboard. You
+using a visual representation of a **desktop/laptop keyboard**. You
can drag and drop characters from the character map to create keyboard
-layouts. You cannot access most of Keyman's more powerful features from
-the Layout Design view, but it will be useful to get you started on your
-design.
+layouts.
Each key can have zero or more characters assigned to it. Each key can
be assigned a different set of characters for each shift state. You can
-change the shift state by clicking on the Shift, Ctrl, and Alt keys.
+change the shift state by clicking on the Shift, Ctrl, and Alt keys.
There are two ways to assign characters to the keys:
- Click on a key, and then type the character's code into the Unicode
- Character Value(s) field, or the type/paste the character itself
+ Character Value(s) field, or type/paste the character itself
into the Output character(s) field.
- Select the character from the Character Map and drag and drop it
onto the appropriate key. This will set the key to output that
@@ -130,7 +132,7 @@ There are two ways to assign characters to the keys:
Distinguish between left and right Ctrl/Alt
: A Keyman keyboard can treat left and right Ctrl and Alt identically,
or it can distinguish between them. The Design view allows one or
- the other mode (in Code view, you can use both interchangeably).
+ the other mode (in [Code view](#toc-code-view), you can use both interchangeably).
Display 102nd Key (as on European keyboards)
: European keyboards have one extra key that is not on US keyboards.
@@ -143,8 +145,16 @@ Display 102nd Key (as on European keyboards)
the backslash key will move down one row, but not otherwise change
in behaviour.
-You can press and release Ctrl to select
-another key on the keyboard using your keyboard.
+> [!TIP]
+> You can press and release Ctrl to select another key on the keyboard using your keyboard.
+
+You cannot access most of Keyman's more powerful features from
+the Layout Design view, but it will be useful to get you started on your
+design.
+
+### Code view
+
+> Path: KMN → Layout tab → Code view
@@ -156,6 +166,9 @@ the Code view.
See the [Editor topic](editor) for more information on how to use the
editor shown within this view.
+> [!NOTE]
+> Remember that any newly assigned keys from the layout tab won't be automatically added to the On-Screen keyboard except when you press the 'Fill from layout' button (See [On-screen](#toc-on-screen-tab) below).
+
## On-Screen tab
@@ -183,6 +196,9 @@ Fill from layout
pre-populate the On-Screen Keyboard and reduces the complexity of
designing it from scratch.
+> [!CAUTION]
+> The changes from the [Layout tab](#toc-layout-tab) will only apply to the On-Screen Keyboard once you use the 'Fill from layout'.
+
Import
: Imports an On-Screen Keyboard from an XML file.
diff --git a/developer/19.0/images/ui/frmKeymanWizard_Layout_Code.png b/developer/19.0/images/ui/frmKeymanWizard_Layout_Code.png
index 2fbe3991e..6d9055239 100644
Binary files a/developer/19.0/images/ui/frmKeymanWizard_Layout_Code.png and b/developer/19.0/images/ui/frmKeymanWizard_Layout_Code.png differ
diff --git a/developer/19.0/images/ui/frmKeymanWizard_Layout_Design.png b/developer/19.0/images/ui/frmKeymanWizard_Layout_Design.png
index 5d3b57055..909a7d368 100644
Binary files a/developer/19.0/images/ui/frmKeymanWizard_Layout_Design.png and b/developer/19.0/images/ui/frmKeymanWizard_Layout_Design.png differ