diff --git a/docs/modules/ROOT/content-nav.adoc b/docs/modules/ROOT/content-nav.adoc
index 00729a021db..2d3fa12808e 100644
--- a/docs/modules/ROOT/content-nav.adoc
+++ b/docs/modules/ROOT/content-nav.adoc
@@ -27,3 +27,6 @@
 ** xref:operations/product-analytics.adoc[]
 
 * xref:reference-commands.adoc[Command reference]
+
+* xref:internals/index.adoc[Internals]
+** xref:internals/graph-modelling.adoc[]
diff --git a/docs/modules/ROOT/images/neo4j-browser.png b/docs/modules/ROOT/images/neo4j-browser.png
new file mode 100644
index 00000000000..a2c7aa5d2da
Binary files /dev/null and b/docs/modules/ROOT/images/neo4j-browser.png differ
diff --git a/docs/modules/ROOT/pages/internals/graph-modelling.adoc b/docs/modules/ROOT/pages/internals/graph-modelling.adoc
new file mode 100644
index 00000000000..c33e93509a8
--- /dev/null
+++ b/docs/modules/ROOT/pages/internals/graph-modelling.adoc
@@ -0,0 +1,41 @@
+:description: The basic building blocks of how Neo4J Browser models a graph
+
+
+[[graph-modeling]]
+= Graph Modeling
+
+Neo4J Browser first defines 3 of its own language-independent models:
+
+1. Graph
+2. Graph Node
+3. Graph links
+
+The node and relationship are implemented as TypeScript classes.
+
+
+== Node Modeling
+
+https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/models/Node.ts[NodeModel] models
+a node/vertex in a graph. It also encapsulates styling information, such as node radius and caption text. The styling
+fields of this node are all "effectively uninitialized" and will be determined later
+
+To initialize a node, the following information is needed
+
+- An unique identifier of this node. This is also the surrogate key of that node in database
+- labels  The name of the group under which all nodes with the same label are counted together and displayed
+  as a single node type on UI. The name is a bit of misleading. In Neo4J browser, a `label` is NOT the text displayed on
+  a node but rather the "type" of that node. This is used to distinguish the different types of node displayed on UI
+- A mapping containig all node properties where the key is the propery name and value is the
+  property value
+- propertyTypes An object that maps the property name to the data type (in string) of the propery value
+
+== Link Modeling
+
+A link is modeled as a
+https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/models/Relationship.ts[Relationship]
+in Neo4J Broswer. 
+
+== Graph Modeling
+
+Graph.ts basically implements the Graph ADS
+
diff --git a/docs/modules/ROOT/pages/internals/index.adoc b/docs/modules/ROOT/pages/internals/index.adoc
new file mode 100644
index 00000000000..792ce919bc1
--- /dev/null
+++ b/docs/modules/ROOT/pages/internals/index.adoc
@@ -0,0 +1,24 @@
+:description: This section describes the neo4j-browser internals, including its architecture and components
+
+
+[[internals]]
+= Neo4J Browser Internals
+
+The Neo4J Browser is logically composed of 2 parts:
+
+1. A slightly coupled graphing module
+2. A user-interface that combines the graph rendering (supported by the graphing module), database, and user
+   interaction together
+
+The graphing is based on D3 but pretty much developed from scratch by building everything on top of D3 and implementing
+its own layout, coloring, and link drawing. For example, the calculation of arrow (e.g. node links) between nodes
+uses some very complicated math along with very prelimiary MDN standard basic shap specification.
+
+[WARNING]
+====
+We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by it
+====
+
+== Component Diagram (WIP)
+
+image:neo4j-browser.png[width=300]