diff --git a/_reference/canvas/glyph-editor/anchors.md b/_reference/canvas/glyph-editor/anchors.md
index 6faa188..4f010bb 100644
--- a/_reference/canvas/glyph-editor/anchors.md
+++ b/_reference/canvas/glyph-editor/anchors.md
@@ -89,7 +89,7 @@ Actions
 </tr>
 <tr>
 <td>double click anchor (multi-source-editing)</td>
-<td>edit anchor in all sources, eg. change anchor name in entire glyph</td>
+<td>edit anchor in all sources, for example change anchor name in entire glyph</td>
 </tr>
 </table>
 
diff --git a/_reference/menu.md b/_reference/menu.md
new file mode 100644
index 0000000..234cca4
--- /dev/null
+++ b/_reference/menu.md
@@ -0,0 +1,53 @@
+---
+title     : Menu bar
+layout    : default
+permalink : /reference/menu/
+draft     : true
+order     : 600
+---
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb small">
+    <li class="breadcrumb-item"><a href="{{ site.url }}">Index</a></li>
+    <li class="breadcrumb-item"><a href="../../reference">Reference</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+<table class='table table-hover'>
+<tr>
+<th width='5%'>#</th>
+<th width='13%'>item</th>
+<th width='82%'>description</th>
+</tr>
+<tr>
+<td>1</td>
+<td><a href=''>File</a></td>
+<td> Will include items like: New..., Open...</td>
+</tr>
+<tr>
+<td>2</td>
+<td><a href=''>Edit</a></td>
+<td>Undo, redo, etc.</td>
+</tr>
+<tr>
+<td>3</td>
+<td><a href=''>View</a></td>
+<td>Zoom in and out, etc.</td>
+</tr>
+<tr>
+<td>4</td>
+<td><a href='../menu/font'>Font</a></td>
+<td>Includes: Font info, Axes, Sources, Status definitions</td>
+</tr>
+<tr>
+<td>5</td>
+<td><a href=''>Extensions</a></td>
+<td>For example, Plugin Manager</td>
+</tr>
+<tr>
+<td>6</td>
+<td><a href=''>Help</a></td>
+<td>For example, link to documentation, github, ...</td>
+</tr>
+</table>
diff --git a/_reference/menu/font.md b/_reference/menu/font.md
new file mode 100644
index 0000000..f6d8250
--- /dev/null
+++ b/_reference/menu/font.md
@@ -0,0 +1,44 @@
+---
+title     : Font
+layout    : default
+permalink : /reference/menu/font
+draft     : true
+order     : 640
+---
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb small">
+    <li class="breadcrumb-item"><a href="{{ site.url }}">Index</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference">Reference</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference/menu">Menu</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+<table class='table table-hover'>
+<tr>
+<th width='5%'>#</th>
+<th width='20%'>item</th>
+<th width='75%'>description</th>
+</tr>
+<tr>
+<td>1</td>
+<td><a href=''>Font Info</a></td>
+<td>Settings about various names, vendor information, UPM, ...</td>
+</tr>
+<tr>
+<td>2</td>
+<td><a href=''>Axes</a></td>
+<td>Axes Setting like min max default values, value mappings, ...</td>
+</tr>
+<tr>
+<td>3</td>
+<td><a href=''>Sources</a></td>
+<td>Font source settings like name, location, vertical metrics, ...</td>
+</tr>
+<tr>
+<td>4</td>
+<td><a href='../font/status-colors'>Status Definitions</a></td>
+<td>Status definition settings like color, name, isDefault.</td>
+</tr>
+</table>
diff --git a/_reference/menu/font/status-colors.md b/_reference/menu/font/status-colors.md
new file mode 100644
index 0000000..910ed21
--- /dev/null
+++ b/_reference/menu/font/status-colors.md
@@ -0,0 +1,26 @@
+---
+title     : Status Colors
+layout    : default
+permalink : /reference/menu/font/status-colors
+draft     : true
+order     : 644
+---
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb small">
+    <li class="breadcrumb-item"><a href="{{ site.url }}">Index</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference">Reference</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference/menu">Menu</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference/menu/font">Font</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+*Status definitions* have a code, color, name and isDefault flag.
+{: .lead }
+
+
+**Status Colors** introduction
+-------
+<video src="{{ site.url }}/videos/status-colors.mp4" controls="controls" style="width: 100%; max-width: 600px">
+</video>
diff --git a/_reference/reference.md b/_reference/reference.md
index 410a151..8e9a47a 100644
--- a/_reference/reference.md
+++ b/_reference/reference.md
@@ -34,6 +34,14 @@ theoretical knowledge · information-oriented · useful when working
   - [Reference font](panels/reference-font)
   - [Glyph info](panels/glyph-info)
   - [Transformation](panels/transformations)
+- [Menu bar](menu)
+  - [Font](menu/font)
+    - [Status definitions](menu/font/status-colors)
+{% comment %}
+    - [Font Info](menu/font/font-info)
+    - [Axes](menu/font/axes)
+    - [Sources](menu/font/sources)
+  {% endcomment %}
 
 {% comment %}
 - [OT Features](#)
diff --git a/_tutorials/tutorials.md b/_tutorials/tutorials.md
index a4e816e..9bfc75f 100644
--- a/_tutorials/tutorials.md
+++ b/_tutorials/tutorials.md
@@ -39,4 +39,9 @@ Position **Anchors** (multi source editing)
 -------
 with the help of *Align and distribute objects* 
 <video src="{{ site.url }}/videos/canvas-glyph-editor-anchor-position.mp4" controls="controls" style="width: 100%; max-width: 600px">
+</video>
+
+**Status colors** introduction
+-------
+<video src="{{ site.url }}/videos/status-colors.mp4" controls="controls" style="width: 100%; max-width: 600px">
 </video>
\ No newline at end of file
diff --git a/videos/status-colors.mp4 b/videos/status-colors.mp4
new file mode 100644
index 0000000..46c156c
Binary files /dev/null and b/videos/status-colors.mp4 differ