diff --git a/docs/_quarto.yml b/docs/_quarto.yml
index 5ecb9eac..eb41ac0f 100644
--- a/docs/_quarto.yml
+++ b/docs/_quarto.yml
@@ -15,10 +15,9 @@ website:
- installation.md
- getting-started.md
- section: Tutorials
- contents:
- - tutorials/interface.md
- - tutorials/importing.md
+ contents: tutorials/*
- examples.md
+ - molecular_nodes.qmd
- documentation.md
- section: Python API
contents: reference/*
diff --git a/docs/molecular_nodes.qmd b/docs/molecular_nodes.qmd
new file mode 100644
index 00000000..32f503e1
--- /dev/null
+++ b/docs/molecular_nodes.qmd
@@ -0,0 +1,109 @@
+---
+title: "3. Molecular Nodes"
+number-sections: true
+number-depth: 1
+---
+
+This is a very basic introduction to Molecular Nodes. How to import a protein from the PDB & change the colour and style via editing the node graph. Molecular Nodes and Geometry Nodes in general has a lot more advanced functionality, and I encourage you to watch other YouTube tutorials and spend time playing around with it to see what is possible. Everything that I have achieved so far is through playing around to see what could be done.
+
+::: callout-ip
+## YouTube Tutorials
+
+I have also made a series of YouTube tutorials walking through some of the functionality of Molecular Nodes. Currently this tutorial series is for the older version of Molecular Nodes and not the 2.0 version. The basic functionality and idea remain the same, but I will be updating this series once I get enough time.
+
+
+:::
+
+## The MolecularNodes Panel
+
+1. Click on the `Scene Properties` panel, which will show the `MolecularNodes` panel, which has the buttons and options for downloading and importing protein structures.
+2. Enter your PDB ID of choice and click on download. This will import the molecular data into Blender, and you will see a new object appear in the Outliner (top right) under the MolecularNodes collection.
+
+![](images/mn-panel-download-pdb.png)
+
+The structure is now imported into the scene. While initially the structure will appear as grey points, this is because Blender has a 3D view for working, then a Rendered view for actually rendering with calculated lighting.
+
+## Rendered View
+
+1. Click the 'Render Properties' tab, which has the icon for the back of a camera.
+2. Change the render engine from Eevee to Cycles.
+3. Change the render device from CPU to GPU if applicable. Some computers may not have GPU compute available.
+4. Change the view to rendered view, which will calculate the lighting for the scene and show all of the atoms.
+
+![](images/mn-render-cycles.png)
+
+## Geometry Nodes Editor
+
+This is where we edit the node graph for Molecular Nodes. The node graph is a geometry processing program you create, that is read and executed by Blender from left to right. Each node performs an action on the geometry that is passed into it, and the result of that action is passed out to the right. Think of it as creating a set of rules for the computer to follow. You define the rules, and the computer can follow those same rules, even if you start with a different data set.
+
+The data flows like a river, along the green noodles of the node graph. There must be only 1 final output. If you are using the molecular data, then there must also be a single input.
+
+![Example node tree, demonstrating the flow of information through the nodes.](images/CleanShot%202023-06-11%20at%2015.54.55@2x.png)
+
+
+```{mermaid}
+flowchart LR
+ A{Atomic\nData} --> B[Manipulation]
+ B --> D(Style)
+ D --> G{Geometry\nOutput}
+
+```
+
+![Screenshot of the Geometry Nodes workspace.](images/mn-gn-workspace.png)
+
+The starting style `MOL_style_atoms_cycles` is only visible via inside of the Cycles render engine. You can add other styles manipulate the data through other nodes, by adding them with Shift + A and navigating to the MolecularNodes panel at the bottom. There are several categories of nodes for different animations and styles. You can add the `Ribbon Protein` node, which will create a ribbon representation based on the alpha carbons in the structure. If there is not colour in the structure, ensure that the node has a material `MOL_atomic_material` at the bottom of the node.
+
+![](images/mn-gn-style-ribbon.png)
+
+The data flows through the node graph from left to right. There should always be one input, which is the atomic data that is stored in the 3D mesh of the atoms and bonds. There should also be only one output, which is the final geometry that has been created throughout the node graph.
+
+```{mermaid}
+flowchart LR
+ A{Atomic\nData} --> B[Manipulation]
+
+ B --> D(Style 1)
+ B --> E(Style 2)
+ B --> S(Style 3)
+
+ sS[Selection] --> S
+
+ E --> F[Join\nGeometry]
+ D --> F
+ S --> F
+
+ F --> G{Geometry\nOutput}
+```
+
+As demonstrated in the diagram, the flow of the data can split across multiple different branches of the tree, with the result of each parallel computation being combined before being exported.
+
+Each of these different branches can be a different style, in this example shown two different styles are applied, and the third style has a custom selection. All of the styles are the result of the same data manipulation.
+
+The node graph in between can be as complex as you want to make it, as long as there is a continuous connection to the output of the geometry, it should produce a result.
+
+![An example of a more complex node graph, with multiple branches that diverge and come back together.](images/CleanShot%202023-06-11%20at%2015.57.33@2x.png)
+
+Combining multiple different nodes you can create protein models and complex 3D scenes. In the example below, there is a node tree which should be present on every new structure imported via MolecularNodes. The atoms and bonds are passed in from the left, the atoms are given a colour based on their element and their `chain_id`, and then the atoms are styled as atoms, scaling the atom radii to `1.00`.
+
+The data flows through the node tree from left to right, along the bright green lines. The atomic data comes in, goes through layers of manipulation, a style is applied, and the created geometry is then outputted from the node tree.
+
+
+
+## Quick Animations
+
+There are many ways to quickly create animations inside of Blender and MolecularNodes. One such way is to use the `Wiggle` node inside of MolecularNodes. This wiggles the amino acid side chains, based on their experimentally-determined B-factor, to give life to the structure. Crystral structures are ultimately static snapshots of a dynamic system, and this is a quick way to bring some of those dynamics back to the structure.
+
+In the example below, the following steps are followed:
+
+1. Import a structure from the PDB with it's corresponding ID
+2. Add the `Wiggle` node `Molecular Nodes -> Animation -> Res Wiggle` in before the final _style_ node is applied. As you change the `Animate 0..1` value the AA side chains will animate.
+3. Add the `Animate Value` node `Molecular Nodes -> Animation -> Animate Value` and connect the output to the `Animate 0..1` input of the `Wiggle` node.
+
+You can start and stop playback of animations in Blender with the Space key.
+
+The resulting node tree will wiggle the AA based on the parameters as the value goes from 0 to 1. The animation will perfectly loop from values 0 to 1. Try changing the amplitude of the wiggle, or the frame range for the animate value node to see how it changes the final animation.
+
+![Quickly adding life to a crystal structure.](images/mn-wiggle-example.gif){fig-alt="A gif showing amino acids wiggling and moving about as part of a protein cystral structure. Their movement is scaled based on their experimentally determined B-factor."}
+
+![The nodes used in the wiggle animation above.](images/mn-wiggle-nodes.png){fig-alt="A screenshot of some geometry nodes inside of Blender. The major nodes pictured are 'MOL_style_colour', 'MOL_animate_res_wiggle' and 'MOL_style_ball_and_stick' which result in an animation of amino acids wiggling about inside of a protein structure."}
\ No newline at end of file
diff --git a/docs/tutorials/00_interface.md b/docs/tutorials/00_interface.md
new file mode 100644
index 00000000..7005cb65
--- /dev/null
+++ b/docs/tutorials/00_interface.md
@@ -0,0 +1,128 @@
+---
+title: Blender's Interface
+---
+
+Blender has a _very_ overwhelming interface. There is no getting around this. Blender can do _practically anything_, and it is sometimes hard to do simple things.
+
+### A New File
+
+Starting a new file, you are greeted by the splash screen. You can click `General` to start a new session with a general-purpose setup.
+
+This 3D viewport will seem familiar if you have used other programs such as PyMol, ChimeraX & VMD. You can move the camera around just like in those other programs.
+
+In the 3D viewport, much like in real life, there are three (3) axes of possible movement and direction. Inside Blender are `X`, `Y`, and `Z`. The floor is made of `X` and `Y`, which form the flat grid you see in the viewport coloured red and green/yellow, while `Z` is the blue vertical axis. These are labelled and highlighted on the axis widget, which is present in the top right corner of the viewport. This will rotate as you rotate the view, so it can always be used as a reference point.
+
+![The different widgets in the 3D viewport. Note the colouring of the different axes.](images/widgets.png)
+
+You can rotate the camera view either using the middle mouse button MMB or using your touchpad if you are on a laptop. You can also click and drag the axis widget to rotate the camera.
+
+You can pan the camera using Shift + MMB
+
+![](videos/new_file.mp4)
+
+## Transforming Objects
+
+The main difference is that you can also manipulate the 3D scene in front of you. You can select objects with a left click of the mouse LMB, and move them around by *Grabbing* them with the G key.
+
+The main actions that you use the 3D Viewport for are:\
+
+- G - **Grabbing:** Moving an object around in 3D space.
+
+- S - **Scaling:** Changing the relative size of an object.
+
+- R - **Rotating:** Rotating the object in 3D space.
+
+![](videos/rotate_grab_scale.mp4)
+
+### Locking to an Axis
+
+When transforming by grabbing, rotating or scaling, you can lock the transformation to a particular axis. Click X / Y / Z after starting the transformation to lock it to those axes, or Shift + X / Y / Z to lock the transformation to be *perpendicular* to that axis.
+
+![](videos/transforms_locked.mp4)
+
+## Rendered View
+
+By default you start in `3D View`, which is characterised by everything being gray and not rendered properly.
+
+You can change to the different views via the render view buttons, or by holding Z and selecting one of the options.
+
+Each of the views are useful in their own way. If you have a powerful enough computer, you can spend the majority of your time in either `Rendered` or `Material Preview` view which will ensure everything is shaded and lighting is calculated. If a scene is becoming complex and your computer is slow, you can switch back to `3D View` which should improve performance.
+
+![](videos/render_views.mp4)
+
+## Rendering Engines
+
+Already there are different ways to view the scene, through the 'rendered view' and the other methods. Even with the option of rendered view, there are multiple different rendering engines. Two rendering engines come pre-installed with Blender, with the possibility to use more. The two rendering engines that come pre-installed are Eevee and Cycles. By default Eevee is enabled, but you can change to Cycles in the `Render Properties` tab.
+
+Eevee is much faster and more responsive than Cycles, but a lot of the time doesn't 'look as nice'. Eevee is a real-time rendering engine built for performance and interactivity, while Cycles is a path-traced rendering engine built for physically accurate light calculations. This is much slower to calculate but often results in 'nicer' lighting. Both rendering engines are excellent and are helpful in different scenarios depending on the desired outcomes.
+
+The default style `Atoms Cycles` inside of Molecular Nodes is only visible inside of Cycles for performance reasons. All other styles are visible inside of both rendering engines. If your atoms seem to be invisible, check the rendering engine and style that you are using.
+
+> If you have the option available, ensure to switch to `GPU Compute` instead of `CPU` when using the Cycles render engine. This will usually always be the better option, and the perforamnce will be much better.
+
+![](videos/00_interface_render_engines.mp4)
+
+## Adding Objects
+
+You can add new objects by Shift + A or by using the `Add` menu in the top left.
+
+There are a number of different object types that can be added. The most common that you will use will be `Mesh` and `Light`. Try adding some new objects, _**G**rabbing_ them to move them around, _**R**otating_ them and _**S**caling_ them to different sizes. If you have just added a new object and it isn't immediately visible, it might be inside another object, or it could be *too big* or *too small* to be immediately visible. Try moving the camera or the object around to get a better view.
+
+![The add menu. Also accesible through `Shift + A`](images/menu_add.png)
+
+![](videos/adding_objects.mp4)
+
+## Rendering an Image
+
+To render an image, you can click F12 or use the `Render -> Render Image` menu. Blender will not render what you are immediately seeing. Instead, it will render whatever the **Camera**** is seeing. This can be frustrating at first, but it makes sense when you can have multiple cameras in a single scene.
+
+To see what the camera sees, you can click the Camera widget in the top right, or click backtick (`) + 1.
+
+> The backtick is directly under the Esc key on most American / Enlgish keyboards. It can vary in other language layouts.
+
+![](videos/camera_view.mp4)
+
+Once you are happy with the camera framing, click render.
+
+![The render menu.](images/menu_render.png)
+
+A window should appear, showing the rendered image. Isn't it magnificent?
+
+The rendered image is not saved. You have to manually save the image by clicking `Image` -> `Save As` and choose where to save the image.
+
+![The rendered image window.](images/render_example_1.png)
+
+## Add More Lights
+
+We can make our 3D scene more interesting by adding more lights. When the light object is selected, the green `Light Settings` tab becomes available, appearing as a small green lightbulb. Under these settings, we can change the colour of our light, along with the `Power`. Try tweaking these settings to your liking. You can duplicate an object without adding a new one by clicking Shift + D.
+
+![Adding more lights to the scene.](videos/add_mode_lights.mp4)
+
+## Materials
+
+One of the hardest things to get used to while working in 3D is the idea of materials. What if we want to make the monkey head **Red**? In 3D we can't just _make things red_. Instead we have to assign it a _material_. This material can have the property that it is primarily red, but it is also metallic, has a sheen, reflects light, can be partially transparent as well as a whole range of other properties.
+
+Complex shading is an entire career itself, so we won't get too much in to it. In this example we will just add a material to the monkey to make it red, and a different material to the cube to make it blue.
+
+> If you can't see the colors changing, ensure you are in Rendered view.
+
+In the example below, we create a _new material_ called `Material.001` for the monkey which we change to red. The cube already has a material called `Material`. We change the material being used to the monkey's material, before changing it back and editing the starting material so that it is blue.
+
+Try playing around with some of the other material settings, to see what effects you can create.
+
+![Assigning materials to objects.](videos/materials.mp4)
+
+## Edit Mode
+
+The last thing to be aware of when working inside of a 3D program like Blender, is that you can manually edit the 3D objects that are inside of the scene. In the top left hand corner of the 3D viewport. With an object selected, you can change between the different modes. You can edit the physical shape of a mesh, by moving individual or groups of vertices, by going into `Edit Mode`. You can also use the keyboard shortcut Tab
+
+![The different modes are available when an object is selected.](images/edit_mode_selection.png)
+
+With a mesh object selected, you can change in to edit mode. While in edit mode, different options are available to you, and you can phsyically edit the mesh. Try selecting some vertices of the mesh and moving them around individually.
+
+![Example of entering edit mode.](videos/edit_mode.mp4)
+
+You now know the _very basics_ of adding new objects, changing the materials, adding some lights and rendering an image. The same principles apply to everything that you you do in Blender, and often all of the different workspaces will contain similar keyboard shortcuts and ways of working. Try playing around some more inside of the 3D scene, rendering some different 3D images, before moving on to the section which includes actual proteins.
+
+Most things are best learnt by doing, so load some proteins in and try to follow along with the other tutorials.
+
diff --git a/docs/tutorials/01_importing.qmd b/docs/tutorials/01_importing.qmd
new file mode 100644
index 00000000..dcb026ad
--- /dev/null
+++ b/docs/tutorials/01_importing.qmd
@@ -0,0 +1,138 @@
+---
+title: Fetch from the PDB
+fig-align: center
+---
+
+Molecules, simulations and other file formats can all be imported via the `Molecular Nodes` subpanel. This panel can be found under the `Scene Properties` panel. This is the small cone and spheres icon on the right. This contains all of the different options for importing molecular data currently available inside of Molecular Nodes.
+
+![The panel location.](images/panel-location.png)
+
+You can download a structure directly from the PDB, just from the accession code. Molecular Nodes will download the file as a `.mmtf` file and cache it locally on your computer, then open the file in to Blender. This is the quickest way to import structures that are already available via the wwPDB. Currently this downloads via the RCSB.
+
+To download directly from the PDB, you can use the PDB tab.
+
+## PDB Tab
+
+In this tab you can input the PDB ID to be used for downloading the structure. You can also change where Molecular Nodes caches the downloaded structures. By default it will be in a hidden `.MolecularNodes` folder in your home directory.
+
+![The PDB import tab.](images/tab-pdb.png)
+
+Type in the code, choose your import options such as starting style, and click download. The new object will appear in the outliner. It will appear inside of the `MolecularNodes` collection and should have the name of the PDB ID used to fetch the structure. If an object already exists with that name, it will be appended with a `.001` or similar suffix.
+
+The molecule may appear inside of the default cube, so you may have to delete it before the protein becomes visible.
+
+![Downloading `4OZS` from the PDB](videos/01_importing_download.mp4)
+
+## Edit Mode
+
+The protein is imported as a 3D mesh, with a vertex for each atom and an edge for each bond. What you are seeing is the result of passing that data through a geometry-processing pipeline. The underlying data is still available, and you can even look at it (and edit it if you wish) by going using edit mode with Tab
+
+![](videos/01_importing_edit_mode.mp4)
+
+## Rendered Views
+
+While the molecule is imported, we are in 3D view by default. We can change to a rendered view to view the molecule with more accurately calculated lighting effects.
+
+![Changing to rendered views in different rendering engines.](videos/01_importing_rendered_views.mp4)
+
+## Changing Styles
+
+The protein is now imported in the scene. To change the way the protein is displayed, we have to use the `Geometry Nodes` editor. This is where we change the nodes that are use to process the underlying atomic data, resulting in the final 3D object we can see in front of us.
+
+To access `Geometry Nodes` panel, we can either select the `Geoemtry Nodes` workspace, or split the current viewport and change one of the workspaces into the node editor.
+
+![Arranging workspaces.](videos/arrange_windows.mp4)
+
+You can change the workspace through the tabs in the top of Blender. You can split workspaces by hovering over the corner of a workspace, and then clicking and dragging. You can merge to workspaces by clicking and dragging from one into another, while dragging into the same workspace will split it and create two workspaces.
+
+![Opening the Geometry Nodes workspaces.](videos/01_importing_geometry_nodes.mp4)
+
+Geometry node trees are explained more in the next section.
+
+In short, the atomic data comes through the `Group Input` on the left, and the final 3D model goes out the `Group Output` to the right. Each node in between performs some actions on the data. The first node changes the colours of the atoms. The last node applies the given style. When importing we chose the `Cartoon` style default, so we have a cartoon node.
+
+We can add a new node through the `Add` menu, or we can use Shift + A to add new nodes. We can click and drag on the noodle outputs and inputs to remove and create new connections. Notice how when the complete 'circuit' or 'flow diagram' goes through the ball and stick node, the style changes to ball and stick. When it flows through the cartoon node, the style changes to cartoon.
+
+![Adding a new node to change the output style.](videos/01_importing_changing_styles.mp4)
+
+## Geometry Nodes Editor
+
+This is where we edit the node graph for Molecular Nodes. The node graph is a geometry processing program you create, that is read and executed by Blender from left to right. Each node performs an action on the geometry that is passed into it, and the result of that action is passed out to the right. Think of it as creating a set of rules for the computer to follow. You define the rules, and the computer can follow those same rules, even if you start with a different data set.
+
+The data flows like a river, along the green noodles of the node graph. There must be only 1 final output. If you are using the molecular data, then there must also be a single input.
+
+![Example node tree, demonstrating the flow of information through the nodes.](images/gn_flow_information.png)
+
+The data flows from left to right, like water through a river.
+```{mermaid}
+flowchart LR
+ A{Atomic\nData} --> B[Manipulation]
+ B --> D(Style)
+ D --> G{Geometry\nOutput}
+```
+
+![Screenshot of the Geometry Nodes workspace.](images/mn-gn-workspace.png)
+
+The starting style `MOL_style_atoms_cycles` is only visible via inside of the Cycles render engine. You can add other styles manipulate the data through other nodes, by adding them with Shift + A and navigating to the MolecularNodes panel at the bottom. There are several categories of nodes for different animations and styles. You can add the `Ribbon Protein` node, which will create a ribbon representation based on the alpha carbons in the structure. If there is not colour in the structure, ensure that the node has a material `MOL_atomic_material` at the bottom of the node.
+
+![](images/mn-gn-style-ribbon.png)
+
+The data flows through the node graph from left to right. There should always be one input, which is the atomic data that is stored in the 3D mesh of the atoms and bonds. There should also be only one output, which is the final geometry that has been created throughout the node graph.
+
+```{mermaid}
+
+flowchart LR
+ A{Atomic\nData} --> B[Manipulation]
+
+ B --> D(Style 1)
+ B --> E(Style 2)
+ B --> S(Style 3)
+
+ sS[Selection] --> S
+
+ E --> F[Join\nGeometry]
+ D --> F
+ S --> F
+
+ F --> G{Geometry\nOutput}
+```
+
+As demonstrated in the diagram, the flow of the data can split across multiple different branches of the tree, with the result of each parallel computation being combined before being exported.
+
+Each of these different branches can be a different style, in this example shown two different styles are applied, and the third style has a custom selection. All of the styles are the result of the same data manipulation.
+
+The node graph in between can be as complex as you want to make it, as long as there is a continuous connection to the output of the geometry, it should produce a result.
+
+![An example of a more complex node graph, with multiple branches that diverge and come back together.](images/gn_complex_graph.png){width="500px" width="300"}
+
+Combining multiple different nodes you can create protein models and complex 3D scenes. In the example below, there is a node tree which should be present on every new structure imported via MolecularNodes. The atoms and bonds are passed in from the left, the atoms are given a colour based on their element and their `chain_id`, and then the atoms are styled as atoms, scaling the atom radii to `1.00`.
+
+The data flows through the node tree from left to right, along the bright green lines. The atomic data comes in, goes through layers of manipulation, a style is applied, and the created geometry is then outputted from the node tree.
+
+
+
+### Editing the Styles
+
+To change how each style looks, you can edit the default values of the nodes. By changing the values, you change the numbers that are used in the creation of the 3D models. The style will only change if it is being output through the node tree. You can click and drag to change the values smoothly. You can hold Shift while dragging the values to change them more accurately.
+
+![Tweaking the default values of the styles.](videos/01_importing_changing_style_parameters.mp4)
+
+## Combining Styles
+
+To complete this tutorial, we will combine the use of `Selection` and `Join Geometry` to create a style which shows the side chains as *ball and stick* while also showing the cartoon style.
+
+The style should usually be the last node that you apply to a model. You can't apply a style after another style, as the output of a style is 3D geometry and not 'atom-like' geometry. Instead, we can combine two styles with a `Join Geometry` node. That way, we create both styles in parallel and then join them together before outputting them all through the `Group Output` node.
+
+The node can be found under `Geometry` or by going through the search for `Join Geometry`
+
+![Adding a Join Geometry node.](videos/01_importing_join_geometry.mp4)
+
+## Selections
+
+Many nodes will have a `Selection` input, which you can't manually edit. This input is a `Boolean` attribute and says whether or not to apply an operation to atoms based on if the value is `True` or `False`.
+
+You can use selections via the `Molecular Nodes` -\> `Selection` menu. In this example we use the `Backbone` node to select atoms based on if they are part of the backbone, the side chain, or just alpha carbons.
+
+You can see as we connect different outputs from the `Backbone` node, we get different results in the final style.
+
+![Changing selections for the Ball and Stick style.](videos/01_importing_selections.mp4)
\ No newline at end of file
diff --git a/docs/tutorials/02_selections.md b/docs/tutorials/02_selections.md
new file mode 100644
index 00000000..b28f6301
--- /dev/null
+++ b/docs/tutorials/02_selections.md
@@ -0,0 +1,25 @@
+---
+title: Selections
+---
+
+
+
+
+In the example below, `6n2y` was downloaded, with the `Cartoon` starting style selected. No other default settings were changed.
+
+
+![](images/down-example-pdb.png)
+
+
+
+## Open a Local File
+
+To open a `.pdb`, `.mmCIF`, `.pdbx` or other similar files, use the Local File tab.
+
+You can set the name for the molecule, which will become the object's name once imported. Use the folder icon to select the file you would like to import.
+
+![The 'Local File' tab.](images/panel-local.png)
+
+The 'Default Style' was changed to 'Cartoon', but no other default import options were changed. The Default Cube was deleted with X as the protein was imported *inside* of the cube.
+
+![](images/down-example-local.png)
\ No newline at end of file
diff --git a/docs/tutorials/images/edit_mode_selection.png b/docs/tutorials/images/edit_mode_selection.png
new file mode 100644
index 00000000..66838f14
Binary files /dev/null and b/docs/tutorials/images/edit_mode_selection.png differ
diff --git a/docs/tutorials/images/gn_complex_graph.png b/docs/tutorials/images/gn_complex_graph.png
new file mode 100644
index 00000000..63c4803f
Binary files /dev/null and b/docs/tutorials/images/gn_complex_graph.png differ
diff --git a/docs/tutorials/images/gn_flow_information.png b/docs/tutorials/images/gn_flow_information.png
new file mode 100644
index 00000000..7711083d
Binary files /dev/null and b/docs/tutorials/images/gn_flow_information.png differ
diff --git a/docs/tutorials/images/mn-gn-style-ribbon.png b/docs/tutorials/images/mn-gn-style-ribbon.png
new file mode 100644
index 00000000..a23f37e0
Binary files /dev/null and b/docs/tutorials/images/mn-gn-style-ribbon.png differ
diff --git a/docs/tutorials/images/mn-gn-workspace.png b/docs/tutorials/images/mn-gn-workspace.png
new file mode 100644
index 00000000..effcea77
Binary files /dev/null and b/docs/tutorials/images/mn-gn-workspace.png differ
diff --git a/docs/tutorials/importing.md b/docs/tutorials/importing.md
deleted file mode 100644
index 5b5ce1ec..00000000
--- a/docs/tutorials/importing.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: 01 Importing Structures
-fig-align: center
----
-
-Molecules, simulations and other file formats can all be imported via the `Molecular Nodes` subpanel. This panel can be found under the `Scene Properties` panel. This is the small cone and spheres icon on the right. This contains all of the different options for importing molecular data currently available inside of Molecular Nodes.
-
-![The panel location.](images/panel-location.png)
-
-## Downloading from the PDB
-
-You can download a structure directly from the PDB, just from the accession code. Molecular Nodes will download the file as a `.mmtf` file and cache it locally on your computer, then open the file in to Blender. This is the quickest way to import structures that are already available via the wwPDB. Currently this downloads via the RCSB.
-
-To download directly from the PDB, you can use the PDB tab.
-
-### PDB Tab
-
-In this tab you can input the PDB ID to be used for downloading the structure. You can also change where Molecular Nodes caches the downloaded structures. By default it will be in a hidden `.MolecularNodes` folder in your home directory.
-
-![The PDB import tab.](images/tab-pdb.png)
-
-Type in the code, choose your import options such as starting style, and click download. The new object will appear in the outliner. It will appear inside of the `MolecularNodes` collection and should have the name of the PDB ID used to fetch the structure. If an object already exists with that name, it will be appended with a `.001` or similar suffix.
-
-In the example below, `6n2y` was downloaded, with the `Cartoon` starting style selected. No other default settings were changed.
-
-![](images/down-example-pdb.png)
-
-## Open a Local File
-
-To open a `.pdb`, `.mmCIF`, `.pdbx` or other similar files, use the Local File tab.
-
-You can set the name for the molecule, which will become the object's name once imported. Use the folder icon to select the file you would like to import.
-
-![The 'Local File' tab.](images/panel-local.png)
-
-The 'Default Style' was changed to 'Cartoon', but no other default import options were changed. The Default Cube was deleted with X as the protein was imported *inside* of the cube.
-
-![](images/down-example-local.png)
\ No newline at end of file
diff --git a/docs/tutorials/interface.md b/docs/tutorials/interface.md
deleted file mode 100644
index 5a212872..00000000
--- a/docs/tutorials/interface.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: 00 Blender's Interface
----
-
-Blender has a _very_ overwhelming interface. There is no getting around this. Blender can do _practivally anything_, and because of this it is hard sometimes to just do some simple things.
-
-### A New File
-
-Starting a new file, you are greated by the splash screen. You can click `General` to start a new session with a general purpose setup.
-
-This 3D viewport will seem familiar if you have used other programs such as PyMol, ChimeraX & VMD. You can move the camera around just like in those other programs.
-
-In the 3D viewport, much like in real life, there are 3 axes of possible movement and direction. Inside of Blender they are `X` `Y` and `Z`. `X` and `Y` form the flat grid that you see in the viewport, being coloured red and green respectively, while `Z` is the blue vertical axis. These are labelled and highlighted on the axis widget, which is present in the top right corner of the viewport. This will rotate as you rotate the view, so it can always be used as a reference point.
-
-![The different widgets in the 3D viewport.](images/widgets.png)
-
-You can rotate the camera view either using the middle mouse button MMB, or using your touch pad if you are on a laptop. You can also click and drag the axis widget to rotate the camera.
-
-You can pan the camera using Shift + MMB
-
-![](videos/new_file.mp4)
-
-## Transforming Objects
-
-The main difference is that you can also manipulate the 3D scene in front of you. You can select objects with a left click of the mouse, and move them around by *Grabbing* them with the G key.
-
-The main actions that you use the 3D Viewport for are:\
-
-- G - **Grabbing:** Moving an object around in 3D space.
-
-- S - **Scaling:** Changing the relative size of an object.
-
-- R - **Rotating:** Rotating the object in 3D space.
-
-![](videos/rotate_grab_scale.mp4)
-
-### Locking to an Axis
-
-When transforming by grabbing, rotating or scaling, you can lock the transformation to a particular axis. Click X / Y / Z after starting the transformation to lock it to those axes, or Shift + X / Y / Z to lock the transformation to be *perpendicular* to that axis.
-
-![](videos/transforms_locked.mp4)
-
-## Rendered View
-
-By default you start in `3D View`, which is characterised by everything being gray and not rendered properly.
-
-You can change to the different views via the render view buttons, or by holding Z and selecting one of the options.
-
-Each of the views are useful in their own way. If you have a powerful enough computer, you can spend the majority of your time in either `Rendered` or `Material Preview` view which will ensure everything is shaded and lighting is calculated. If a scene is becoming complex and your computer is slow, you can switch back to `3D View` which should improve performance.
-
-![](videos/render_views.mp4)
-
-## Adding Objects
-
-You can add new objects by Shift + A or by using the `Add` menu in the top left.
-
-There are a number of different object types that can be added. The most common that you will use will be `Mesh` and `Light`. Try adding some new objects, _**G**rabbing_ them to move them around, _**R**otating_ them and _**S**caling_ them to different sizes. If you have just added a new object and it isn't immediately visible, it might be inside another object, or it could be *too big* or *too small* to be immediately visible. Try moving the camera or the object around to get a better view.
-
-![The add menu. Also accesible through `Shift + A`](images/menu_add.png)
-
-![](videos/adding_objects.mp4)
-
-## Rendering an Image
-
-To render an image, you can click F12 or use the `Render -> Render Image` menu. When rendering an image, Blender _won't_ render what you are immediately seeing, instead it it will render whatver the **Camera** is seeing. This can be frustrating at first, but makes sense when you can have multiple cameras in a single scene.
-
-To see what the camera sees, you can click the Camera widget in the top right, or click backtick (`) + 1.
-
-> The backtick is directly under the Esc key on most American / Enlgish keyboards. It can vary in other language layouts.
-
-![](videos/camera_view.mp4)
-
-Once you are happy with the camera framing, click render.
-
-![The render menu.](images/menu_render.png)
-
-A window should appear showing you your rendered image. Isn't it magnificent?
-
-The rendered image is not save. You have to manually save the image by clicking `Image` -> `Save As` and choose where to save the image.
-
-![The rendered image window.](images/render_example_1.png)
-
-## Add More Lights
-
-We can make our 3D scene a bit more interesting, by adding some more lights. When the light object is selected, the green `Light Settings` tab becomes available which appears as a small green lightbulb. Under these settings we can change the color of our light, along with the `Power`. Try tweaking these settings to your liking. You can dulpicate an object without having to add a new one, by clicking Shift + D.
-
-![Adding more lights to the scene.](videos/add_mode_lights.mp4)
-
-## Materials
-
-One of the hardest things to get used to while working in 3D is the idea of materials. What if we want to make the monkey head **Red**? In 3D we can't just _make things red_. Instead we have to assign it a _material_. This material can have the property that it is primarily red, but it is also metallic, has a sheen, reflects light, can be partially transparent as well as a whole range of other properties.
-
-Complex shading is an entire career itself, so we won't get too much in to it. In this example we will just add a material to the monkey to make it red, and a different material to the cube to make it blue.
-
-> If you can't see the colors changing, ensure you are in Rendered view.
-
-In the example below, we create a _new material_ called `Material.001` for the monkey which we change to red. The cube already has a material called `Material`. We change the material being used to the monkey's material, before changing it back and editing the starting material so that it is blue.
-
-Try playing around with some of the other material settings, to see what effects you can create.
-
-![Assigning materials to objects.](videos/materials.mp4)
-
-
-
-![](videos/arrange_windows.mp4)
\ No newline at end of file
diff --git a/docs/tutorials/videos/00_interface_render_engines.mp4 b/docs/tutorials/videos/00_interface_render_engines.mp4
new file mode 100644
index 00000000..7cad973b
Binary files /dev/null and b/docs/tutorials/videos/00_interface_render_engines.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_changing_style_parameters.mp4 b/docs/tutorials/videos/01_importing_changing_style_parameters.mp4
new file mode 100644
index 00000000..d2e4176b
Binary files /dev/null and b/docs/tutorials/videos/01_importing_changing_style_parameters.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_changing_styles.mp4 b/docs/tutorials/videos/01_importing_changing_styles.mp4
new file mode 100644
index 00000000..3eac6246
Binary files /dev/null and b/docs/tutorials/videos/01_importing_changing_styles.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_download.mp4 b/docs/tutorials/videos/01_importing_download.mp4
new file mode 100644
index 00000000..358c2602
Binary files /dev/null and b/docs/tutorials/videos/01_importing_download.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_edit_mode.mp4 b/docs/tutorials/videos/01_importing_edit_mode.mp4
new file mode 100644
index 00000000..10d25141
Binary files /dev/null and b/docs/tutorials/videos/01_importing_edit_mode.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_geometry_nodes.mp4 b/docs/tutorials/videos/01_importing_geometry_nodes.mp4
new file mode 100644
index 00000000..8a635643
Binary files /dev/null and b/docs/tutorials/videos/01_importing_geometry_nodes.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_join_geometry.mp4 b/docs/tutorials/videos/01_importing_join_geometry.mp4
new file mode 100644
index 00000000..9f12bc84
Binary files /dev/null and b/docs/tutorials/videos/01_importing_join_geometry.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_rendered_views.mp4 b/docs/tutorials/videos/01_importing_rendered_views.mp4
new file mode 100644
index 00000000..853aeb9b
Binary files /dev/null and b/docs/tutorials/videos/01_importing_rendered_views.mp4 differ
diff --git a/docs/tutorials/videos/01_importing_selections.mp4 b/docs/tutorials/videos/01_importing_selections.mp4
new file mode 100644
index 00000000..68c9e2ca
Binary files /dev/null and b/docs/tutorials/videos/01_importing_selections.mp4 differ
diff --git a/docs/tutorials/videos/edit_mode.mp4 b/docs/tutorials/videos/edit_mode.mp4
new file mode 100644
index 00000000..3ad0a263
Binary files /dev/null and b/docs/tutorials/videos/edit_mode.mp4 differ