diff --git a/docs/source/_static/images/jupyter-file-editor.png b/docs/source/_static/images/jupyter-file-editor.png
new file mode 100644
index 000000000..1447ed8ab
Binary files /dev/null and b/docs/source/_static/images/jupyter-file-editor.png differ
diff --git a/docs/source/_static/images/jupyter-notebook-dashboard.png b/docs/source/_static/images/jupyter-notebook-dashboard.png
new file mode 100644
index 000000000..812545ceb
Binary files /dev/null and b/docs/source/_static/images/jupyter-notebook-dashboard.png differ
diff --git a/docs/source/_static/images/jupyter-notebook-default.png b/docs/source/_static/images/jupyter-notebook-default.png
new file mode 100644
index 000000000..aa904475f
Binary files /dev/null and b/docs/source/_static/images/jupyter-notebook-default.png differ
diff --git a/docs/source/_static/images/jupyter-notebook-edit.png b/docs/source/_static/images/jupyter-notebook-edit.png
new file mode 100644
index 000000000..81e0fcaf1
Binary files /dev/null and b/docs/source/_static/images/jupyter-notebook-edit.png differ
diff --git a/docs/source/index.rst b/docs/source/index.rst
index fe0f076fe..1182fd28d 100644
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -22,6 +22,7 @@ The Jupyter notebook
    Installation <https://jupyter.readthedocs.org/en/latest/install.html>
    Running the Notebook <https://jupyter.readthedocs.org/en/latest/running.html>
    Migrating from IPython <https://jupyter.readthedocs.org/en/latest/migrating.html>
+   ui_components
 
 .. toctree::
    :maxdepth: 2
diff --git a/docs/source/ui_components.rst b/docs/source/ui_components.rst
new file mode 100644
index 000000000..12759773b
--- /dev/null
+++ b/docs/source/ui_components.rst
@@ -0,0 +1,49 @@
+UI Components
+=============
+When opening bug reports or sending emails to the Jupyter mailing list, it is
+useful to know the names of different UI components so that other developers
+and users have an easier time helping you diagnose your problems. This section
+will familiarize you with the names of UI elements within the Notebook and the
+different Notebook modes.
+
+Notebook Dashboard
+-------------------
+
+When you launch ``jupyter notebook`` the first page that you encounter is the
+Notebook Dashboard.
+
+.. image:: /_static/images/jupyter-notebook-dashboard.png
+
+Notebook Editor
+---------------
+
+Once you've selected a Notebook to edit, the Notebook will open in the Notebook
+Editor.
+
+.. image:: /_static/images/jupyter-notebook-default.png
+
+Interactive User Interface Tour of the Notebook
+-----------------------------------------------
+
+If you would like to learn more about the specific elements within the Notebook
+Editor, you can go through the User Interface Tour by selecting Help in the
+menubar then selecting User Interface Tour.
+
+Edit Mode and Notebook Editor
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+When a cell is in edit mode, the Cell Mode Indicator will change to reflect
+the cell's state. This state is indicated by a small pencil icon on the
+top right of the interface. When the cell is in command mode, there is no
+icon in that location.
+
+.. image:: /_static/images/jupyter-notebook-edit.png
+
+File Editor
+-----------
+
+Now let's say that you've chosen to open a Markdown file instead of a Notebook
+file whilst in the Notebook Dashboard. If so, the file will be opened in the
+File Editor.
+
+.. image:: /_static/images/jupyter-file-editor.png