diff --git a/docs/components.graffle b/docs/components.graffle
index 1e312495e4cfa6617481c9ceec19e7f712dee019..bc0fb2365aeead42b4e76ed277c49aa9ebbc46d2 100644
Binary files a/docs/components.graffle and b/docs/components.graffle differ
diff --git a/docs/components.png b/docs/components.png
new file mode 100644
index 0000000000000000000000000000000000000000..a26a92f462a040bd84fa8ca1062291017ab3e525
Binary files /dev/null and b/docs/components.png differ
diff --git a/docs/index.rst b/docs/index.rst
index 04d4ecf6931e2a62d54adc26fb66478d6f65c817..d2f0e8205ebcc227a7f00241fc8ca3783355ea16 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -1,19 +1,13 @@
-Welcome to NOMAD's documentation!
-=================================
+nomad xt
+========
 
-This project tries and test approaches that might lead to an improved architecture for NOMAD (XT).
+This project is a prototype for the continuation of the original NOMAD-coe software
+and infrastructure with a simplyfied and improved architecture.
 
 .. toctree::
    :maxdepth: 2
 
    setup
-   contributing
+   introduction
    modules
-
-
-Indices and tables
-==================
-
-* :ref:`genindex`
-* :ref:`modindex`
-* :ref:`search`
+   contributing
diff --git a/docs/introduction.rst b/docs/introduction.rst
new file mode 100644
index 0000000000000000000000000000000000000000..19c36fc78674d0d0ecaf9de589fad6199d39ad42
--- /dev/null
+++ b/docs/introduction.rst
@@ -0,0 +1,25 @@
+Introduction
+============
+
+Nomad xt (and NOMAD coe) is about software for storing and processing (computational)
+material science data based on *big-data* and *disributed computing*.
+
+Architecture
+------------
+
+The following depicts the *nomad-xt* architecture with respect to software compenent
+in terms of python modules, gui components, and 3rd party services (e.g. databases,
+search enginines, etc.)
+
+.. figure:: components.png
+   :alt: nomad xt components
+
+   The main components of nomad xt and their dependencies.
+
+Principles
+----------
+
+* simple first, complicated only when necessary
+* adopting generic established 3rd party solutions before implementing specific solutions
+* only uni directional dependencies between components/modules, no circles
+* only one language: Python (except, GUI of course)
\ No newline at end of file
diff --git a/docs/process.png b/docs/process.png
new file mode 100644
index 0000000000000000000000000000000000000000..effd7ea8d9af9f7151ba42d9d79aa21bce4b7de2
Binary files /dev/null and b/docs/process.png differ
diff --git a/gui/public/index.html b/gui/public/index.html
index d026a5fe1694cb37e8638ed3e1a77a4ede5f05a0..3a7ce76473612bb22c0c6f0473ff33bfac4ca28b 100644
--- a/gui/public/index.html
+++ b/gui/public/index.html
@@ -22,6 +22,7 @@
 
     <!-- fonts needed by material-ui -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500">
     <title>nomad xt</title>
   </head>
   <body>
diff --git a/gui/src/components/Documentation.css b/gui/src/components/Documentation.css
index b276a31398c1d31a3e35e47f68721eead2fa344b..1bfbc0733a0d76639be3d1b8c313a0c639675edd 100644
--- a/gui/src/components/Documentation.css
+++ b/gui/src/components/Documentation.css
@@ -6,6 +6,10 @@
     width: 1000px;
 }
 
+.root code {
+    font-family: "Roboto Mono", monospace;
+}
+
 .root .documentwrapper {
     float: left;
     width: 700px;
@@ -38,7 +42,7 @@
 
 .root h1 {
     color: rgba(0, 0, 0, 0.54);
-    margin: 32px 0 16px;
+    margin: 32px 0 24px;
     font-size: 2.8125rem;
     font-weight: 400;
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -56,7 +60,7 @@
 
 .root h3 {
     color: rgba(0, 0, 0, 0.87);
-    margin: 0 0 40px;
+    margin: 24px 0 18px;
     font-size: 1.5rem;
     font-weight: 400;
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -65,6 +69,7 @@
 
 .root h4 {
     color: rgba(0, 0, 0, 0.87);
+    margin: 18px 0 12px;
     font-size: 1rem;
     font-weight: 400;
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -99,3 +104,53 @@
     text-decoration: none;
 }
 
+.root img {
+    width: 700px;
+}
+
+.root .caption {
+    text-align: center;
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 14px;
+    font-weight: 400;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    line-height: 1.375;
+}
+
+.root div.admonition {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 7px;
+}
+
+.root div.admonition dt {
+    font-weight: bold;
+}
+
+.root div.admonition dl {
+    margin-bottom: 0;
+}
+
+.root p.admonition-title {
+    margin: 0px 10px 5px 0px;
+    font-weight: bold;
+}
+
+.root div.body p.centered {
+    text-align: center;
+    margin-top: 25px;
+}
+
+.root dd p {
+    margin-top: 0;
+}
+
+.root .field-body strong {
+    font-family: "Roboto Mono", monospace;
+}
+
+.root .descname {
+    font-weight: 500;
+}
+
+
diff --git a/gui/src/components/Documentation.js b/gui/src/components/Documentation.js
index 674d3cc5e5db96fd0177c43715f3a3ad68154cda..50d60fd97bdeb6652c6d6360bd11319ad049fd09 100644
--- a/gui/src/components/Documentation.js
+++ b/gui/src/components/Documentation.js
@@ -31,6 +31,14 @@ const processingInstructions = location => {
         return (<Link smooth to={pathname + (linkUrl.hash || '#')}>{children}</Link>)
       }
     },
+    {
+      // We have to redirect img src attributes to the static sphynx build dir.
+      shouldProcessNode: node => node.type === 'tag' && node.name === 'img' && node.attribs['src'] && !node.attribs['src'].startsWith('http'),
+      processNode: (node, children) => {
+        node.attribs['src'] = `/docs/${node.attribs['src']}`
+        return processNodeDefinitions.processDefaultNode(node)
+      }
+    },
     {
       shouldProcessNode: node => true,
       processNode: processNodeDefinitions.processDefaultNode
diff --git a/nomad/processing/__init__.py b/nomad/processing/__init__.py
index b6d1eb64c18d44beef556a5c3a359b6c78e40df9..c4104181ae4e4ae7bd48fe64437012927c087808 100644
--- a/nomad/processing/__init__.py
+++ b/nomad/processing/__init__.py
@@ -29,6 +29,12 @@ in :py:mod:`nomad.files`, :py:mod:`nomad.search`, :py:mod:`nomad.users`,
 Represent processing state
 --------------------------
 
+.. figure:: process.png
+   :alt: nomad xt processing workflow
+
+   This is the basic workflow of a nomad xt upload processing.
+
+
 .. autoclass:: ProcPipeline
 .. autoclass:: UploadProc
 .. autoclass:: CalcProc