diff --git a/_how-tos/create-new-glyph.md b/_how-tos/create-new-glyph.md
index 290e596..cb08dd8 100644
--- a/_how-tos/create-new-glyph.md
+++ b/_how-tos/create-new-glyph.md
@@ -9,7 +9,7 @@ order : 202
diff --git a/_how-tos/draw/designing-with-variable-components.md b/_how-tos/draw/designing-with-variable-components.md
index 852991c..f6426f0 100644
--- a/_how-tos/draw/designing-with-variable-components.md
+++ b/_how-tos/draw/designing-with-variable-components.md
@@ -9,7 +9,7 @@ order : 302
diff --git a/_how-tos/draw/draw-with-3-axes.md b/_how-tos/draw/draw-with-3-axes.md
index 7be307d..e593ec9 100644
--- a/_how-tos/draw/draw-with-3-axes.md
+++ b/_how-tos/draw/draw-with-3-axes.md
@@ -9,7 +9,7 @@ order : 301
diff --git a/_how-tos/installation/building-fontra-from-source.md b/_how-tos/installation/building-fontra-from-source.md
index 39e8259..0e0f6ea 100644
--- a/_how-tos/installation/building-fontra-from-source.md
+++ b/_how-tos/installation/building-fontra-from-source.md
@@ -9,7 +9,7 @@ order : 110
diff --git a/_how-tos/installation/installing-fontra-pak-mac.md b/_how-tos/installation/installing-fontra-pak-mac.md
index 59aa56f..0ad0e7a 100644
--- a/_how-tos/installation/installing-fontra-pak-mac.md
+++ b/_how-tos/installation/installing-fontra-pak-mac.md
@@ -9,7 +9,7 @@ order : 102
diff --git a/_how-tos/installation/installing-fontra-pak-windows.md b/_how-tos/installation/installing-fontra-pak-windows.md
index 4164ce2..3a11e38 100644
--- a/_how-tos/installation/installing-fontra-pak-windows.md
+++ b/_how-tos/installation/installing-fontra-pak-windows.md
@@ -9,7 +9,7 @@ order : 103
diff --git a/_how-tos/installation/installing-fontra-pak.md b/_how-tos/installation/installing-fontra-pak.md
index 6443d25..c634d1c 100644
--- a/_how-tos/installation/installing-fontra-pak.md
+++ b/_how-tos/installation/installing-fontra-pak.md
@@ -9,7 +9,7 @@ order : 101
diff --git a/_how-tos/opening-ufo-designspace.md b/_how-tos/opening-ufo-designspace.md
index 777ee1d..30a0ea2 100644
--- a/_how-tos/opening-ufo-designspace.md
+++ b/_how-tos/opening-ufo-designspace.md
@@ -9,7 +9,7 @@ order : 201
diff --git a/_how-tos/reporting.md b/_how-tos/reporting.md
index 696cadc..73ecd5b 100644
--- a/_how-tos/reporting.md
+++ b/_how-tos/reporting.md
@@ -9,7 +9,7 @@ order : 901
diff --git a/_introduction/introduction.md b/_introduction/introduction.md
index 225be64..48ef05c 100644
--- a/_introduction/introduction.md
+++ b/_introduction/introduction.md
@@ -20,6 +20,6 @@ Fontra is different from most other editors because it works in the browser. Usi
Quickstart
----------
-- [Installing Fontra Pak on your computer]({{ site.url }}/how-tos/installing-fontra-pak/)
+- [Installing Fontra Pak on your computer]({{ site.url }}/how-tos/installation/installing-fontra-pak/)
- [Opening a UFO or designspace file]({{ site.url }}/how-tos/opening-ufo-designspace)
- [Workspace overview]({{ site.url }}/reference/workspace/)
diff --git a/_reference/canvas.md b/_reference/canvas.md
index f5f90bb..fccdb11 100644
--- a/_reference/canvas.md
+++ b/_reference/canvas.md
@@ -47,48 +47,6 @@ Use the *sources* section of the [designspace panel] to switch to another source
Use the shortcut keys ⌘ ↑ to go to the previous source, and ⌘ ↓ to go to the next source.
-Display options
----------------
-
-##### Light / dark color schemes
-
-Use the [options panel] to switch between *light*, *dark* or *auto* (follow OS) color modes.
-
-##### Full screen mode
-
-Use the [navigation tools] to activate and deactivate full screen mode.
-
-##### Show other sources
-
-Use the *sources* section of the [designspace panel] to display other sources in the background.
-
-##### Show reference font
-
-Use the [reference font panel] to display any glyph from a binary font in the background.
-
-##### Show coordinates
-
-Use the [options panel] to display coordinates of selected points.
-
-
-Glyph selection
----------------
-
-...
-
-
-Glyph editing
--------------
-
-...
-
-
-Designspace visualization
--------------------------
-
-...
-
-
{% comment %}
Glyph selection
@@ -115,7 +73,7 @@ Use the [pointer tool] to select and move contours, segments points, handles, co
Use the [pen tool] to draw new contours and add points to existing contours.
-Fontra supports cubic and quadratic outlines. Quadratic outlines can be activated in the [options panel].
+Fontra supports cubic and quadratic outlines.
You can use the standard keyboard shortcuts ⌘ Z to undo the last actions, and ⇧ ⌘ Z to redo them.
@@ -169,7 +127,6 @@ When working with designspace, you can jump quickly from one source to another u
[preview text panel]: #
[glyph info panel]: #
[designspace panel]: #
-[options panel]: #
[navigation tools]: #
[pointer tool]: #
[pen tool]: #
@@ -185,5 +142,4 @@ When working with designspace, you can jump quickly from one source to another u
[preview text panel]: ../panels/preview-text
[find glyph panel]: ../panels/find-glyph
[designspace panel]: ../panels/designspace
-[options panel]: ../panels/options
[reference font panel]: ../panels/reference-font
diff --git a/_reference/canvas/glyph-editor/anchors.md b/_reference/canvas/glyph-editor/anchors.md
index 4f010bb..47805fe 100644
--- a/_reference/canvas/glyph-editor/anchors.md
+++ b/_reference/canvas/glyph-editor/anchors.md
@@ -24,8 +24,8 @@ order : 211
{: .alert-heading}
- Add/edit anchors works with **multi-source-editing**
- **Select all anchors** by entering multiple times the short cut `⌘` + `a` for Mac (or `Ctrl` + `a` for Windows)
-- **Show/hide anchor names** via panel [Options](/reference/panels/options)
-- **Show coordinates** via panel [Options](/reference/panels/options)
+- **Show/hide anchor names** via [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
+- **Show coordinates** via [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
{: .mb-0 }
@@ -54,19 +54,14 @@ order : 211
#### Show/hide anchor names
-1. go to panel [Options](/reference/panels/options)
+1. go to [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
2. click checkbox **Anchor names**
-![]({{ site.url }}/images/canvas-glyph-editor-anchor-names.png){: .img-fluid }
-
-
#### Show/hide anchor coordinates
-1. go to panel [Options](/reference/panels/options)
+1. go to [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
2. click checkbox **Coordinates**
3. select anchor(s)
-![]({{ site.url }}/images/canvas-glyph-editor-anchor-coordinates.png){: .img-fluid }
-
Actions
-------
diff --git a/_reference/menu.md b/_reference/menu.md
index 234cca4..58cbca1 100644
--- a/_reference/menu.md
+++ b/_reference/menu.md
@@ -16,38 +16,31 @@ order : 600
+#### Pro tips:
+{: .alert-heading}
+- Your language is missing? Feel free to contribute [github fontra](http://github.com/googlefonts/fontra)
+{: .mb-0 }
+
+
+![]({{ site.url }}/images/application-settings-display-language.png){: .img-fluid }
\ No newline at end of file
diff --git a/_reference/menu/fontra/editor-behavior.md b/_reference/menu/fontra/editor-behavior.md
new file mode 100644
index 0000000..6f6da66
--- /dev/null
+++ b/_reference/menu/fontra/editor-behavior.md
@@ -0,0 +1,33 @@
+---
+title : Editor Behavior
+layout : default
+permalink : /reference/menu/fontra/editor-behavior
+draft : true
+order : 606
+---
+
+
+
+Actions
+-------
+
+
+
+
action
+
description
+
+
+
Rect-select live modifier keys
+
Pointer tool + Alt-key: let you select the off-curve points (handles)
+
+
+
+![]({{ site.url }}/images/application-settings-editor-behavior.png){: .img-fluid }
diff --git a/_reference/menu/fontra/plugin-manager.md b/_reference/menu/fontra/plugin-manager.md
new file mode 100644
index 0000000..b0dba04
--- /dev/null
+++ b/_reference/menu/fontra/plugin-manager.md
@@ -0,0 +1,19 @@
+---
+title : Plugin Manager
+layout : default
+permalink : /reference/menu/fontra/plugin-manager
+draft : true
+order : 607
+---
+
+
+
+![]({{ site.url }}/images/application-settings-plugin-manager.png){: .img-fluid }
\ No newline at end of file
diff --git a/_reference/menu/fontra/server-info.md b/_reference/menu/fontra/server-info.md
new file mode 100644
index 0000000..50f4da2
--- /dev/null
+++ b/_reference/menu/fontra/server-info.md
@@ -0,0 +1,22 @@
+---
+title : Server info
+layout : default
+permalink : /reference/menu/fontra/server-info
+draft : true
+order : 608
+---
+
+
+
+Basic information about Fontra version, Python version, startup time, plugins or project manager.
+{: .lead }
+
+![]({{ site.url }}/images/application-settings-server-info.png){: .img-fluid }
\ No newline at end of file
diff --git a/_reference/menu/fontra/shortcuts.md b/_reference/menu/fontra/shortcuts.md
new file mode 100644
index 0000000..029bdbc
--- /dev/null
+++ b/_reference/menu/fontra/shortcuts.md
@@ -0,0 +1,31 @@
+---
+title : Shortcuts
+layout : default
+permalink : /reference/menu/fontra/shortcuts
+draft : true
+order : 602
+---
+
+
+
+
+#### Pro tips:
+{: .alert-heading}
+- Shortcuts are customizable
+- Save your custom shortcuts as a json file via **Export shortcuts**
+- Share your custom shortcuts with others via a json file by using the **Import shortcuts** button
+{: .mb-0 }
+
+
+**Custom Shortcuts** introduction
+-------
+
diff --git a/_reference/menu/fontra/theme-settings.md b/_reference/menu/fontra/theme-settings.md
new file mode 100644
index 0000000..91d1794
--- /dev/null
+++ b/_reference/menu/fontra/theme-settings.md
@@ -0,0 +1,22 @@
+---
+title : Theme settings
+layout : default
+permalink : /reference/menu/fontra/theme-settings
+draft : true
+order : 603
+---
+
+
+
+The entire app is designed to work in both light and dark mode - simply choose your preferred style or link it to the operating system.
+{: .lead }
+
+![]({{ site.url }}/images/application-settings-theme-settings.png){: .img-fluid }
\ No newline at end of file
diff --git a/_reference/menu/view.md b/_reference/menu/view.md
new file mode 100644
index 0000000..ca8152c
--- /dev/null
+++ b/_reference/menu/view.md
@@ -0,0 +1,35 @@
+---
+title : View
+layout : default
+permalink : /reference/menu/view
+draft : true
+order : 630
+---
+
+
+
+
+
+
item
+
description
+
+
+
Zoom
+
Zoom In, Out, Fit Selection
+
+
+
Selection
+
Selection previous/next source + Find glyph that use "selected glyph"
glyph bounding box, vertical metrics and overshoots
+
+
+
Development status color
+
status color (if set for a font)
+
+
+
Reference font
+
reference glyph in the background (if set via 'Reference Font' panel)
+
+
+
Sidebearings for non-editing glyphs
+
sidebearings via crosshair of non-editing glyphs
+
+
+
CJK Design Frame
+
CJK Design Frame
+
+
+
Transform selection
+
interactive transformation tool bounding box with handles for scaling and rotation
+
+
+
Component nodes and handles
+
nodes and handles of components (view only, not editable)
+
+
+
Baseline
+
baseline (helpful if you don't want to see the whole line metrics)
+
+
+
Guidelines
+
glyph level guidelines
+
+
+
Drag crosshair
+
the dotted lines from the pointer center while you drag a point
+
+
+
Drag "ghost" path
+
the original unchanged outline in gray while dragging points/contours
+
+
+
Anchor names
+
the name of an anchor
+
+
+
Contour indices
+
the index of a contour
+
+
+
Component names and indices
+
names of components and component indices
+
+
+
Coordinates
+
the x and y coordinates of selected point(s)
+
+
+
Point indices
+
index of selected point(s)
+
+
+
Power Ruler
+
power ruler measurement line and distance values
+
+
+
Glyph lock icon for non-editing glyphs
+
a lock at the bottom of a glyph as an indicator, that this glyph cannot be changed
+
+
+
+
+
+
+
+
diff --git a/_reference/panels.md b/_reference/panels.md
index 71d1546..96f955d 100644
--- a/_reference/panels.md
+++ b/_reference/panels.md
@@ -45,12 +45,6 @@ Panels provide various tools to control Fontra's workspace and the font's design
- If you don't need the measurement line anymore, you can disable it in the [options panel]({{ site.url }}/reference/panels/options).
+ If you don't need the measurement line anymore, you can disable it via [glyph-editor-appearance]({{ site.url }}/reference/menu/view/glyph-editor-appearance).
{: .mb-0 }
-[options panel]: #
-
diff --git a/images/application-settings-clipboard.png b/images/application-settings-clipboard.png
new file mode 100644
index 0000000..8fa2ad7
Binary files /dev/null and b/images/application-settings-clipboard.png differ
diff --git a/images/application-settings-display-language.png b/images/application-settings-display-language.png
new file mode 100644
index 0000000..4fb7262
Binary files /dev/null and b/images/application-settings-display-language.png differ
diff --git a/images/application-settings-editor-behavior.png b/images/application-settings-editor-behavior.png
new file mode 100644
index 0000000..8f307af
Binary files /dev/null and b/images/application-settings-editor-behavior.png differ
diff --git a/images/application-settings-plugin-manager.png b/images/application-settings-plugin-manager.png
new file mode 100644
index 0000000..f589250
Binary files /dev/null and b/images/application-settings-plugin-manager.png differ
diff --git a/images/application-settings-server-info.png b/images/application-settings-server-info.png
new file mode 100644
index 0000000..469c3a0
Binary files /dev/null and b/images/application-settings-server-info.png differ
diff --git a/images/application-settings-shortcuts.png b/images/application-settings-shortcuts.png
new file mode 100644
index 0000000..c01d118
Binary files /dev/null and b/images/application-settings-shortcuts.png differ
diff --git a/images/application-settings-theme-settings.png b/images/application-settings-theme-settings.png
new file mode 100644
index 0000000..bbb7d23
Binary files /dev/null and b/images/application-settings-theme-settings.png differ
diff --git a/images/fontra-index.png b/images/fontra-index.png
new file mode 100644
index 0000000..ff9da23
Binary files /dev/null and b/images/fontra-index.png differ
diff --git a/images/glyph-editor-appearance-dark.png b/images/glyph-editor-appearance-dark.png
new file mode 100644
index 0000000..01ecd94
Binary files /dev/null and b/images/glyph-editor-appearance-dark.png differ
diff --git a/images/glyph-editor-appearance.png b/images/glyph-editor-appearance.png
new file mode 100644
index 0000000..d10dc2c
Binary files /dev/null and b/images/glyph-editor-appearance.png differ
diff --git a/index.md b/index.md
index 439ca30..762f5e0 100644
--- a/index.md
+++ b/index.md
@@ -4,7 +4,7 @@ layout : default
draft : true
---
-![]({{ site.url }}/images/fontra-workspace_edit-1.png){: .img-fluid }
+![]({{ site.url }}/images/fontra-index.png){: .img-fluid }
Fontra is an open-source, browser-based, cross-platform, variable-first font editor.
diff --git a/videos/shortcuts.mp4 b/videos/shortcuts.mp4
new file mode 100644
index 0000000..dff41b9
Binary files /dev/null and b/videos/shortcuts.mp4 differ