diff --git a/docs/javascript.js b/docs/javascript.js
index 50705dcff0fd8a14ece5e3917ef394de928cf504..8932a62d68f9b00efadf4f9d996c92a46e14a83a 100644
--- a/docs/javascript.js
+++ b/docs/javascript.js
@@ -1 +1,30 @@
-document.getElementsByClassName("md-header__button")[0].title = "NOMAD"
\ No newline at end of file
+document.getElementsByClassName("md-header__button")[0].title = "NOMAD"
+
+//Script for writing creating image sliders in the docs
+
+// Get all sliders on the page
+const sliders = document.querySelectorAll(".image-slider");
+
+sliders.forEach((slider, index) => {
+ const images = slider.querySelectorAll("img");
+ const prevButton = slider.querySelector(".nav-arrow.left");
+ const nextButton = slider.querySelector(".nav-arrow.right");
+ let currentImageIndex = 0;
+
+ // Show the first image by default
+ images[currentImageIndex].classList.add("active");
+
+ // Add event listener for the 'Next' button
+ nextButton.addEventListener("click", () => {
+ images[currentImageIndex].classList.remove("active");
+ currentImageIndex = (currentImageIndex + 1) % images.length; // Wrap around to the first image
+ images[currentImageIndex].classList.add("active");
+ });
+
+ // Add event listener for the 'Prev' button
+ prevButton.addEventListener("click", () => {
+ images[currentImageIndex].classList.remove("active");
+ currentImageIndex = (currentImageIndex - 1 + images.length) % images.length; // Wrap around to the last image
+ images[currentImageIndex].classList.add("active");
+ });
+});
\ No newline at end of file
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 49857282a90cbd9ae335297e212ababbd3198729..181d21aa0d5e8ede07db9e2463353a0225f3922e 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -117,4 +117,57 @@
.nomad-button--card-action {
margin: 1em 0 0 0 !important;
+}
+
+/* CSS compenents for creating an image slider on the docs */
+/* Slider holding the images */
+.image-slider {
+ display: flex;
+ overflow: hidden;
+ position: relative; /* This ensures that arrows are positioned relative to this container */
+ width: 100%;
+ max-width: 800px; /* Adjust this as necessary */
+ margin: 0 auto;
+ justify-content: center; /* Center the images horizontally */
+ align-items: center;
+}
+.image-slider img {
+ position: absolute;
+ width: 100%;
+ height: auto;
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+}
+/* Active class for displaying one image at a time */
+.image-slider img.active {
+ opacity: 1;
+ position: relative;
+}
+
+/* Styling for the navigation arrows */
+.nav-arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ padding: 10px;
+ cursor: pointer;
+ z-index: 1;
+
+}
+
+/* Left arrow positioning */
+.nav-arrow.left {
+ left: 10px; /* Position on the left edge of the container */
+}
+
+/* Right arrow positioning */
+.nav-arrow.right {
+ right: 10px; /* Position on the right edge of the container */
+}
+
+
+.nav-arrow:hover {
+ background-color: rgba(0, 0, 0, 0.8);
}
\ No newline at end of file
diff --git a/docs/tutorial/NOMAD_ELN.md b/docs/tutorial/NOMAD_ELN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6f01e5993e9a96c9da368bac7d8c84cbec6b3e65
--- /dev/null
+++ b/docs/tutorial/NOMAD_ELN.md
@@ -0,0 +1,476 @@
+# Using NOMAD as an Electronic Lab Notebook
+In this tutorial, we will explore how to use NOMAD's Electronic Lab Notebook (ELN) functionality to record experiments effectively. You will learn how to create entries for substances and instruments, record samples along with their processing conditions, and the various measurements that make up your experiments. We will also cover NOMAD's built-in ELN templates, which help structure and interlink different aspects of an experiment, providing a clear, visual overview of the entire workflow.
+
+In doing this, we will apply an example of an experiment on preparing solution-processed polymer thin-films and measuring their optical absorption spectrum.
+
+??? example "About the example experiment used for this exercise"
+ In this exercise, we will work with an example experiment involving the preparation and characterization of Poly(3-hexylthiophene-2,5-diyl) ("P3HT") thin films. The experiment consists of three main activities: preparing solutions, depositing thin films, and measuring optical absorption.
+
+ 1. **Preparing solutions:** The polymer powder is mixed with a solvent in predefined quantities to achieve the desired concentration. A scale is used to accurately weigh the polymer powder, ensuring precise solution concentration.
+
+ 2. **Depositing thin-films:** The prepared solution is used to create a thin film on a glass substrate through spin-coating. By carefully controlling the spin speed and duration, the desired film thickness is achieved.
+
+ 3. **Measuring optical absorption:** The optical absorption spectrum of the thin film is acquired using a UV-Vis-NIR spectrometer. The measurement results are saved as a .csv file for further analysis.
+
+ To effectively document this experiment, we will create and interlink electronic lab notebook (ELN) entries in NOMAD. These entries will include key entities such as substances, instruments, and samples, as well as activities like material processing and measurements. By structuring the data in this way, we ensure a comprehensive and FAIR-compliant record of the experiment.
+
+ 
+
+## Create a New ELN Upload
+
+In NOMAD, an Electronic Lab Notebook (ELN) is created by initiating a NOMAD upload. This process allows you to structure and document your research data efficiently. For a step-by-step guide on how to create an upload, please refer to [this page](upload_publish.md#create-new-upload){:target="_blank"}.
+
+## Create ELN Entries
+
+The next step is to create entries for your substances, instruments, processes, and measurements. In NOMAD, each ELN entry is structured using templates called *built-in schema*. These templates are specifically designed to capture relevant information for different types of entries, ensuring consistency and completeness in documentation.
+
+They include general fields tailored to the type of entry you are creating. The currently available ELN built-in schemas in NOMAD are illustrated in the figure below.
+
+
+
+To create ELN entries using the templates provided by NOMAD, we will generate instances from the built-in schemas. This will automatically create entries with predefined fields, allowing us to efficiently fill in the relevant information of our experiment.
+
+Follow these steps to create ELN entries using the built-in schema: *(click on the arrows to navigate between steps)*
+
+<div class="image-slider" id="slider1">
+ <div class="nav-arrow left" id="prev1">â†</div>
+ <img src="images/ELN_built-in_1.png" alt="Step 1" class="active">
+ <img src="images/ELN_built-in_2.png" alt="Step 2">
+ <img src="images/ELN_built-in_3.png" alt="Step 3">
+ <img src="images/ELN_built-in_4.png" alt="Step 4">
+ <div class="nav-arrow right" id="next1">→</div>
+</div>
+
+### Create a Substance Entry
+
+Now, let's create an entry using the built-in *Substance ELN* schema for **P3HT powder**. Follow the steps of creating an entry described above and select *Substance ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_5.png" alt="P3HT powder ELN substance entry" width="400">
+</div>
+
+??? info "Input fields offered by the built-in schema *Substance ELN*"
+ The built-in schema *Substance ELN* provides the following fields for input:
+
+ - **substance name:** Automatically used as the entry name.
+ - **tags:** User selected tags to improve searchability.
+ - **datetime:** Allows entry of a date/time stamp.
+ - **substance ID:** A unique, human-readable ID for the substance.
+ - **detailed substance description:** A free text field for additional information.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **elemental composition:** Define the chemical composition with atomic and mass fractions.
+ - **pure substance:** Specify if the material is a pure substance purchased from an external vendor, with fields like:
+ - Substance name
+ - IUPAC name
+ - Molecular formula
+ - CAS number
+ - Inchi Key, SMILES, and more.
+ - **substance identifier:** Add identifiers for specific substances.
+
+Once the entry is created, we can fill in the relevant fields with detailed and accurate information. Fields can also be updated as needed to keep the entry accurate and useful.
+
+See the example below. *(click the arrows to navigate through the steps)*
+
+<div class="image-slider" id="slider2">
+ <div class="nav-arrow left" id="prev2">â†</div>
+ <img src="images/ELN_built-in_6.png" alt="Step 1" class="active">
+ <img src="images/ELN_built-in_7.png" alt="Step 2">
+ <img src="images/ELN_built-in_8.png" alt="Step 3">
+ <img src="images/ELN_built-in_9.png" alt="Step 4">
+ <img src="images/ELN_built-in_10.png" alt="Step 5">
+ <img src="images/ELN_built-in_11.png" alt="Step 6">
+ <div class="nav-arrow right" id="next2">→</div>
+</div>
+
+??? task "Task: Create an ELN entry for substances"
+ Create an ELN entry in NOMAD for the following substances:
+
+ - Chloroform
+ - Glass substrate
+
+ Use the *Substance ELN* schema and include as many details as you like (e.g., Substance Name, Datetime, Substance ID, Description).
+
+-----------------
+### Create a Sample Entry
+
+Now, let's create an entry using the built-in *Generic Sample ELN* schema for **P3HT Thin Film**. Follow the steps of creating an entry described above and select *Generic Sample ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_12.png" alt="P3HT thin-film sample ELN substance entry" width="400">
+</div>
+
+
+??? info "Input fields offered by the built-in schema *Generic Sample ELN*"
+ The built-in schema *Generic Sample ELN* provides the following fields for input:
+
+ - **name:** Automatically used as the entry name.
+ - **tags:** User selected tags to improve searchability.
+ - **datetime:** Allows entry of a date/time stamp.
+ - **ID:** A unique, human-readable ID for the sample.
+ - **description:** A free text field for additional information.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **elemental composition:** Define the chemical composition with atomic and mass fractions.
+ - **components:** Specify the components used to create the sample, including raw materials or system components.
+ - **sample identifier:** Add unique identifiers for the sample.
+
+Once the entry is created, we can fill in the relevant fields with detailed and accurate information. Fields can also be updated as needed to keep the entry accurate and useful.
+
+See the example below. *(click the arrows to navigate through the steps)*
+
+<div class="image-slider" id="slider3">
+ <div class="nav-arrow left" id="prev3">â†</div>
+ <img src="images/ELN_built-in_13.png" alt="Step 1" class="active">
+ <img src="images/ELN_built-in_14.png" alt="Step 2">
+ <img src="images/ELN_built-in_15.png" alt="Step 3">
+ <img src="images/ELN_built-in_16.png" alt="Step 4">
+ <img src="images/ELN_built-in_17.png" alt="Step 5">
+ <img src="images/ELN_built-in_18.png" alt="Step 6">
+ <div class="nav-arrow right" id="next3">→</div>
+</div>
+
+??? task "Task: Create an ELN entry for a sample"
+
+ Create an ELN entry in NOMAD for P3HT solution in chloroform.
+ Reference the sample to its components (P3HT powder and chloroform).
+
+ Use the *Generic Sample ELN* schema and include as many details as you like (e.g., Short Name, Datetime, ID, Description).
+
+-----------------
+### Create an Instrument Entry
+
+Now, let's create an entry using the built-in *Instrument ELN* schema for **scale**. Follow the steps of creating an entry described above and select *Instrument ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_19.png" alt="Scale ELN instrument entry" width="400">
+</div>
+
+??? info "Input fields offered by the built-in schema *Instrument ELN*"
+ The built-in schema *Instrument ELN* provides the following fields for input:
+
+ - **name:** Automatically used as the entry name.
+ - **tags:** User selected tags to improve searchability.
+ - **datetime:** Allows entry of a date/time stamp.
+ - **ID:** A unique, human-readable ID for the.
+ - **description:** A free text field for additional information.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **instrument identifiers:** Specify the type of instrument and additional metadata, if applicable.
+
+Once the entry is created, we can fill in the relevant fields with detailed and accurate information. Fields can also be updated as needed to keep the entry accurate and useful.
+
+See the example below. *(click the arrows to navigate through the steps)*
+
+<div class="image-slider" id="slider4">
+ <div class="nav-arrow left" id="prev4">â†</div>
+ <img src="images/ELN_built-in_20.png" alt="Step 1" class="active">
+ <img src="images/ELN_built-in_21.png" alt="Step 2">
+ <div class="nav-arrow right" id="next4">→</div>
+</div>
+
+??? task "Task: Create an ELN entry for an instrument"
+ Create an ELN entry in NOMAD for one of the following instruments:
+
+ - Optical Spectrometer
+ - Spin Coater
+
+ Use the *Instrument ELN* schema and include as many details as you like (e.g., name, datetime, ID, description).
+
+-----------------
+
+### Create a Process Entry
+
+Now, let's create an entry using the built-in *Material Processing ELN* schema for **Preparation of P3HT solution**. Follow the steps of creating an entry described above and select *Materials Processing ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_22.png" alt="Material Processing ELN entry" width="400">
+</div>
+
+??? info "Input fields offered by the built-in schema *Material Processing ELN*"
+ The *Material Processing ELN* schema provides the following fields for input:
+
+ - **name:** Automatically used as the entry name.
+ - **starting time and ending time:** Allows entry of a date/time stamp for the process duration.
+ - **tags:** User selected tags to improve searchability.
+ - **ID:** A unique, human-readable ID for the process.
+ - **location:** A text field specifying the location where the process took place.
+ - **description:** A free text field for additional information about the process.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **steps:** Define the step-by-step procedure for the material processing.
+ - **process identifier:** Add unique identifiers for the process.
+ - **instruments:** List the instruments used in the process.
+ - **samples:** Specify the samples that are created or used in the process.
+
+Once the entry is created, we can fill in the relevant fields with detailed and accurate information. Fields can also be updated as needed to keep the entry accurate and useful.
+
+See the example below (click the arrows to navigate through the steps).
+
+<div class="image-slider" id="slider5">
+ <div class="nav-arrow left" id="prev5">â†</div>
+ <img src="images/ELN_built-in_23.png" alt="step 1" class="active">
+ <img src="images/ELN_built-in_24.png" alt="step 2">
+ <img src="images/ELN_built-in_25.png" alt="step 3">
+ <img src="images/ELN_built-in_26.png" alt="step 4">
+ <img src="images/ELN_built-in_27.png" alt="step 5">
+ <img src="images/ELN_built-in_28.png" alt="step 6">
+ <div class="nav-arrow right" id="next5">→</div>
+</div>
+
+??? task "Task: Reference a sample to your process ELN"
+ For the Process ELN entry created above, make a reference to a sample entry called *P3HT_solution_in_CF*.
+
+ - If the P3HT_solution_in_CF sample entry already exists, simply link to it within the samples subsection of your Process ELN entry.
+ - If the sample entry does not exist, first create a Sample ELN entry named P3HT_solution_in_CF, then add the reference in the Process ELN entry.
+
+**Defining the steps of a process**
+
+The *steps* subsection in the *Materials Processing ELN* allows us to document each stage of the process and visualize them in an interactive workflow graph.
+
+For the example process entry **Preparation of P3HT solution**, we will define the following three steps:
+
+1. weighing the powder
+2. filling the solvent
+3. mixing the solution
+
+Follow these steps to define the process stages in your material processing entry: *(click on the arrows to navigate between steps)*
+
+<div class="image-slider" id="slider6">
+ <div class="nav-arrow left" id="prev6">â†</div>
+ <img src="images/ELN_built-in_29.png" alt="step 1" class="active">
+ <img src="images/ELN_built-in_30.png" alt="step 2">
+ <img src="images/ELN_built-in_31.png" alt="step 3">
+ <img src="images/ELN_built-in_32.png" alt="step 4">
+ <div class="nav-arrow right" id="next6">→</div>
+</div>
+
+Note that the added information in the **subsections** will be used to automatically fill in the Workflow graph as **tasks**, as well as **the References section**. You can find the Workflow Graph the in **OVERVIEW** tab of the entry.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_33.png" alt="Process workflow graph" width="400">
+</div>
+
+The workflow graph can be modified and enriched by adding additional information such as **inputs**, **additional tasks**, and **outputs** for each step. You can do this in the **workflow2** section.
+
+The **workflow2** section of the **Preparation of P3HT solution** example can be found under the **DATA** tab, in the left panel under **workflow2**. We can now add inputs, by referencing existing substance entries.
+
+See the example below. *click the arrows to navigate through the steps*.
+
+<div class="image-slider" id="slider7">
+ <div class="nav-arrow left" id="prev7">â†</div>
+ <img src="images/ELN_built-in_34.png" alt="step 1" class="active">
+ <img src="images/ELN_built-in_35.png" alt="step 2">
+ <img src="images/ELN_built-in_36.png" alt="step 3">
+ <img src="images/ELN_built-in_37.png" alt="step 4">
+ <div class="nav-arrow right" id="next7">→</div>
+</div>
+
+??? task "Task: Reference P3HT powder as input for the process"
+ For the Process ELN entry created above, make reference to the substance ELN entry *P3HT Powder* as an input of the process.
+
+ *Tip:* Use the workflow2 section of the entry.
+
+We can now see the changes in the workflow graph based on our modifications in the workflow section.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_38.png" alt="Process workflow graph" width="400">
+</div>
+
+-----------------
+
+### Create a Measurement Entry
+
+Now, let's create an entry using the built-in *Measurement ELN* schema for **Optical absorption measurement**. Follow the steps of creating an entry described above and select *Measurement ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_39.png" alt="Material Processing ELN entry" width="400">
+</div>
+
+??? info "Input fields offered by the built-in schema *Measurement ELN*"
+ - **name:** Automatically used as the entry name.
+ - **starting time** Allows entry of a date/time stamp for the measurement.
+ - **tags:** User selected tags to improve searchability.
+ - **ID:** A unique, human-readable ID for the process.
+ - **location:** A text field specifying the location where the process took place.
+ - **description:** A free text field for additional information about the process.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **steps:** Define the step-by-step procedure for the material processing.
+ - **samples:** Specify the samples that are being measured.
+ - **measurement identifier:** Add unique identifiers for the measurement.
+ - **instruments:** List the instruments used in the measurement.
+ - **results:** Provide information about the results of the measurements (text and images).
+
+Once the entry is created, we can fill in the relevant fields with detailed and accurate information. Fields can also be updated as needed to keep the entry accurate and useful.
+
+See the example below. *(click the arrows to navigate through the steps)*
+
+<div class="image-slider" id="slider8">
+ <div class="nav-arrow left" id="prev8">â†</div>
+ <img src="images/ELN_built-in_40.png" alt="Step 1" class="active">
+ <img src="images/ELN_built-in_41.png" alt="Step 2">
+ <img src="images/ELN_built-in_42.png" alt="Step 3">
+ <img src="images/ELN_built-in_43.png" alt="Step 4">
+ <img src="images/ELN_built-in_44.png" alt="Step 5">
+ <img src="images/ELN_built-in_45.png" alt="Step 6">
+ <img src="images/ELN_built-in_46.png" alt="Step 7">
+ <img src="images/ELN_built-in_47.png" alt="Step 8">
+ <div class="nav-arrow right" id="next8">→</div>
+</div>
+
+--------------
+
+### Integrate Your Experiment
+
+Once all substances, samples, processes, and measurements are defined, you can integrate them into a structured workflow using the *Experiment ELN* schema. The *Experiment ELN* schema allows linking *processes* and *measurements* into a single entry for a comprehensive overview of your experimental workflow.
+
+To create an entry using the built-in *Experiment ELN* schema for **Characterization of P3HT**. Follow the steps of creating an entry described above and select *Experiment ELN* from the drop-down menu in step 4.
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_48.png" alt="Experiment ELN entry" width="400">
+</div>
+
+??? info "Input fields offered by the built-in schema *Experiment ELN*"
+ - **name:** Automatically used as the entry name.
+ - **starting time** Allows entry of a date/time stamp for the measurement.
+ - **tags:** User selected tags to improve searchability.
+ - **ID:** A unique, human-readable ID for the process.
+ - **location:** A text field specifying the location where the process took place.
+ - **description:** A free text field for additional information about the process.
+
+ Additional subsections available in the *data* subsection include:
+
+ - **steps:** Define the step-by-step procedure for the material processing.
+ - **experiment identifiers:** Specify the additional metadata for the experiment.
+
+The *steps* subsection allows us to reference the various processes and measurements that were part of the experiments. By organizing these elements into a structured and interactive workflow, we can provide a clearer overview of the experimental sequence, enabling better visualization and understanding of how different steps are interconnected.
+
+
+<div style="text-align: center;">
+ <img src="images/ELN_built-in_39.gif" alt="interactive workflow gif" width="400">
+</div>
+
+--------------------
+## Exploring and Searching Your ELN
+
+??? example "Download the example file for this exercise"
+ We have prepared a compressed file for this task, which can be downloaded from this [link](https://github.com/FAIRmat-NFDI/FAIRmat-tutorial-16/raw/refs/heads/main/tutorial_16_materials/part_4_files/example_NOMAD_ELN.zip).
+
+ The file contains multiple NOMAD ELN entries in `.json` format.
+
+ These entries have been created using the NOMAD ELN built-in schema, organized into folders, and categorized with custom tags.
+
+ You can drag and drop this file into a new upload in NOMAD to view its contents.
+
+Imagine you have created multiple entries of substances, samples, instruments, processes, and measurements, and you need to quickly find a specific experiment or material. Instead of manually searching through files, NOMAD’s ELN allows you to search, filter, and organize your entries—saving you time and effort.
+
+??? info "Organizing your ELN upload"
+ NOMAD is a file-based system. You can access, organize, and download your files within each upload. You can also create folders to categorize entries into materials, samples, instruments, processes, and results, as well as upload additional documents, such as relevant PDFs.
+
+ !!! warning "If you plan to organize your entries into separate folders, do so before you reference them to each other. Moving them afterward may break the reference links."
+
+ You can follow these steps to organize your ELN entries:
+
+ 1. Navigate to the **FILES** tab in your upload. This view functions like a file explorer, allowing you to view and manage files.
+ <div style="text-align: center;">
+ <img src="images/files_explorer_in_NOMAD.png" alt="interactive workflow gif" width="400">
+ </div>
+
+ 2. Add new folders and organize them according to your needs.
+ <div style="text-align: center;">
+ <img src="images/creating_new_folders.gif" alt="interactive workflow gif" width="400">
+ </div>
+
+ 3. Drag and drop files into the desired folder. A prompt will appear, asking if you want to copy or move the files—choose according to your needs.
+ <div style="text-align: center;">
+ <img src="images/moving_files_to_a_folder.gif" alt="interactive workflow gif" width="400">
+ </div>
+
+ 4. Once all files are sorted, take a moment to review the structure. Here’s an example of an organized ELN
+ <div style="text-align: center;">
+ <img src="images/after_organization.png" alt="interactive workflow gif" width="400">
+ </div>
+
+**Searching your ELN entries**
+
+To search for entries in your ELN, follow these steps:
+
+1. on the top of the ELN upload page, click on the <img src="images/icon_search_upload.png" alt="Search ELN icon" width="20"> icon.
+
+ 
+
+2. From the drop-down menu, select *Entries*.
+
+ 
+
+ This will open NOMAD's **EXPLORE** page with a filter applied to display only the entries from your upload.
+
+ 
+
+On the **EXPLORE** page, you can use the filter options in the sidebar to refine your search, enter specific keywords in the search bar to find relevant entries, or create custom widgets to visualise your ELN data.
+
+??? info "Filtering entries in NOMAD"
+ NOMAD provides various filters that can be used to efficiently find your ELN entries, but the following two filters are particularlly effective:
+
+ - Filter by built-in schema used to create the entry.
+
+ *For example, ELNInstrument, ELNSubstances, ELNSample, etc.*
+
+ - Filter by custom tags, where you assign common tags to related entries for easy grouping.
+
+ *For example, tag all solvents as "my_solvent" or all samples as "my_samples".*
+
+ Using these filters helps you quickly locate specific entries in your ELN.
+
+**Customize your search interface with widgets**
+
+Widgets allow you to customize your search interface to better suit your data exploration needs. By adding and rearranging widgets, you can create a personalized view that highlights the most relevant filters, metadata, or visualizations most relevant to your research.
+
+??? task "Create a custom widget for ELN sections and custom tags"
+ To create a custom widget for filtering your ELN, follow these steps:
+
+ 1. Click on the `+ TERMS` button to open the *Edit terms widget* menu.
+
+ <div style="text-align: center;">
+ <img src="images/widget_step_1.png" alt="Screenshot of the Edit terms widget menu" width="800">
+ </div>
+
+ 2. In the *Search quantity* field, type *eln*. A list of available filters will appear.
+
+ 3. Select `results.eln.sections` from the list. This will enable filtering based on the built-in ELN sections available in your ELN upload.
+
+ <div style="text-align: center;">
+ <img src="images/widget_step_2_3.png" alt="Screenshot of selecting results.eln.sections filter" width="400">
+ </div>
+
+ 4. Write a descriptive title for the custom widget in *Title field*.
+
+ 5. Click DONE!
+
+ <div style="text-align: center;">
+ <img src="images/widget_step_4_5.png" alt="Screenshot of finalizing the custom widget" width="400">
+ </div>
+
+ The new ELN sections widget now appears at the top of your **EXPLORE** page and displays ELN entry types along with their corresponding counts.
+
+ <div style="text-align: center;">
+ <img src="images/widget_step_5r.png" alt="Screenshot of the newly created ELN sections widget" width="400">
+ </div>
+
+ You can now follow the same steps to create a custom widget for filtering by custom tags.
+
+ In Step 3, instead of selecting `results.eln.sections`, choose `results.eln.tags`. This will create a widget that filters your ELN entries based on the custom tags you have assigned.
+
+ This widget will then appear on your **EXPLORE** page, allowing you to quickly view and filter entries by their associated tags.
+
+ <div style="text-align: center;">
+ <img src="images/explore_you_ELN_entries.gif" alt="Animation of filtering using widgets" width="800">
+ </div>
+
+----------------
\ No newline at end of file
diff --git a/docs/tutorial/explore.md b/docs/tutorial/explore.md
index 5affa36d4290bcaa898e79791fda71c6db5c6f4a..b6f32dd136faca73e204b5b752b4d0038b27ae31 100644
--- a/docs/tutorial/explore.md
+++ b/docs/tutorial/explore.md
@@ -1,14 +1,226 @@
-!!! warning "Attention"
- We are currently working to update this content.
+# Exploring Data in NOMAD
-This tutorial shows how to use NOMAD's search interface and structured data browsing to explore available data.
+In this tutorial, we will learn how to efficiently search and filter entries in NOMAD to find data that matches your criteria.
-!!! note
- The NOMAD seen in the tutorials is an older version with a different color theme,
- but all the demonstrated functionality is still available on the current version.
- You'll find the NOMAD test installation mentioned in the first video
- [here](https://nomad-lab.eu/prod/v1/test/gui/search/entries){:target="_blank"}.
+We will work with the **EXPLORE** page in the NOMAD GUI, starting with an overview of the search and filter options available. We will then use these tools to refine our results step by step.
+Finally, we will explore how to create interactive widgets based on selected properties, allowing for a more dynamic and customized filtering experience.
-<div class="youtube">
-<iframe src="https://www.youtube-nocookie.com/embed/38S2U-TIvxE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
\ No newline at end of file
+By the end of this tutorial, you will be able to navigate NOMAD with confidence, quickly locate relevant data, and tailor your searches using interactive filters and widgets.
+
+## Navigate to NOMAD's Explore Entries Page
+
+The **EXPLORE** menu allows you to navigate and search through a vast amount of materials-science data. It provides several options, each focuses on a specific application or method. They include different sets of filters and/or search widgets that allow users to efficiently filter and narrow down results, making it easier to find relevant entries in specific domains.
+
+In this tutorial, we will focus on searching data in NOMAD using the **Entries** option within the **EXPLORE** menu. You will see an overview of **SOLAR CELLS** search dashboard.
+
+To start with exploring data across all domains in NOMAD, go to **EXPLORE** → **Entries**.
+
+<div style="text-align: center;">
+<img src="images/explore_1.png" alt="screenshot of the navigation steps to the explore entries page" width="500">
+</div>
+
+The **Entries** page shows all the uploaded data that are published on NOMAD. Published entries are accessible without login, while logging in grants access to your private data and those that are shared with you.
+
+??? info "Contents of NOMAD's Explore Menu"
+
+
+ The following explore pages are currently available:
+
+ - **Entries**: Search entries across all domains.
+ - **Theory**: Focus on calculations and materials data derived from theoretical models.
+ - **Experiment**: Explore data from experimental sources, such as ELNs (Electronic Lab Notebooks) or characterization techniques e.g., EELS (Electron Energy Loss Spectroscopy).
+ - **Tools**: Explore among several AI toolkit notebooks.
+ - **Use Cases**: Search data tailored to specific use cases, such Metal-Organic Frameworks (MOFs).
+
+ <div style="text-align: center;">
+ <img src="images/explore_menu2.png" alt="Explore Menu" width="200">
+ </div>
+
+
+---
+
+### Search Interface & Filters
+
+In the Entries page, you will find a list of possible filters on the left panel. NOMAD supports advanced searches based on:
+
+- **Material** – Elements, formula, or structure.
+- **Method** – Scientific techniques (e.g., DFT).
+- **Properties** – Band structure, conductivity, etc.
+- **Use Cases** – Application-specific searches (e.g., Solar Cells).
+- **Origin** – Filter by uploader, date, dataset, or tags.
+
+<div style="text-align: center;">
+ <img src="images/filters_sidebar.png" alt="Entries Search Interface" width="200">
+</div>
+
+
+Filters refine searches dynamically. You can apply the following example to experience this.
+
+- **Material Filter**: Select **B** and **N** to find hexagonal boron nitride.
+- **Method Filter**: Find **BN** simulations using **VASP**.
+- **Properties Filter**: Search for entries with **band structure** data.
+
+You can pin frequently used filters using **(+)** for a customized search interface.
+
+<!-- update the gif with screenshots with sliding images stack once this is figured out in the docs -->
+<div style="text-align: center;">
+ <img src="images/add_filters_to_search_interface.gif" alt="Add Filters to the Search Interface" width="800">
+</div>
+
+---
+
+### Search Bar: A Quick Way to Explore Data
+<!-- Add a page in Reference, that explains all possible syntax for the searches in the search bar -->
+
+You can use the NOMAD search bar to find indexed quantities. As you begin typing, all available
+and searchable sets (with their paths in the NOMAD metainfo) appear in the advanced menu below the
+search bar. Continue typing to refine the results and select the desired set.
+
+For the example presented above (searching for Boron Nitride):
+
+- Type "Boron" and select *results.material.material_name = Boron*.
+- Type "Nitrogen" and select *results.material.material_name = Nitrogen*.
+
+Alternatively, you can directly enter the element paths in the search field:
+
+- *results.material.elements = B*
+- *results.material.elements = N*
+
+
+!!! task "Does NOMAD have a bandgap filter?"
+ Can you find a filter for bandgap? Does it provide the bandgap value or indicate direct/indirect nature?
+
+ - Try typing variations like **"bandgap"**, **"band gap"**, or **"band_gap"** into the search bar.
+ - Search for **"direct"** or **"indirect"** to explore bandgap characteristics.
+
+In addition, you can also perform range-based searches for values using the search bar. This allows you to find materials with specific properties that fall within a defined numerical range.
+
+For example, if you want to find materials with a band gap of 2 eV or larger, enter the following in the search bar:
+
+- *results.properties.electronic.band_gap.value >= 2 eV*
+
+Similarly, you can define a bounded range for the values. For example, to search for materials with a band gap between 2 eV and 4 eV, enter the following line in the search bar:
+
+- *2 <= results.properties.electronic.band_gap.value <= 4 eV*
+
+---
+
+### Custom Widgets for Advanced Searches
+
+NOMAD enables searching entries using rich metadata. Some metadata is extracted automatically, while others are user-provided via schemas. Only metadata stored according to schemas is searchable.
+
+NOMAD also offers **custom widgets** to create advanced dashboards. These widgets are accessible below the search bar on any **EXPLORE** page.
+
+<div style="text-align: center;">
+ <img src="images/customizable_widgets.png" alt="Customizable Widgets" width="800">
+</div>
+
+Here are the main four widgets:
+
+- **TERMS:** Visualize and explore categorical data based on user-defined terms and keywords.
+- **HISTOGRAM:** Display the distribution of a specific numerical quantity within data.
+- **SCATTER PLOT:** Generate scatter plots to visualize relationships between different quantities.
+- **PERIODIC TABLE:** Filter data by selecting elements directly from an interactive periodic table.
+
+---
+
+## Example 1: Finding Alternative ETL Materials for Perovskite Solar Cells
+
+In the following, we'll walk through an example to help you better understand how to use these widgets. Imagine we are working on solar cell research and have fabricated solar cell devices using the absorber material *CsPbBr2I* (Cesium Lead Bromine Iodide), a mixed halide perovskite.
+
+**Device Structure**:
+<div style="text-align: center;">
+ <img src="images/solar_cell_device.png" alt="Solar Cell Device" width="500">
+</div>
+
+|Component | Material |
+|----------------------------------|----------------------------------|
+|**Top Contact** | Au |
+|**HTL (Hole Transport Layer)** | Spiro-OMeTAD (C81​H68​N4​O8​) |
+|**Perovskite Absorber** | CsPbBr2I |
+|**ETL (Electron Transport Layer)**| TiO2-c (compact Titanium Dioxide)|
+|**Bottom Contact** | FTO (Fluorine-doped Tin Oxide) |
+|**Substrate** | SLG (Soda Lime Glass) |
+
+Now, let us answer the following question:
+
+!!! task "**What ETL materials can replace TiO2-c to improve Voc (open circuit voltage) in perovskite solar cells?**"
+
+ To gain insights into this question, we can utilize NOMAD's widgets to explore relevant data:
+
+ 1. **Start with the Periodic Table**:
+ - Click on the **PERIODIC TABLE** widget button and use the **(+)** button to pin it to the dashboard.
+ - Select the elements of the absorber from the periodic table: Cs, Pb, Br, and I.
+ - After selecting these elements, you should see approximately 7,500 entries matching your search filters.
+
+ 2. **Use the TERMS Widget**:
+ - To find out what ETL and HTL materials are used in the available data, click on the **TERMS** widget button.
+ - For the X-axis, type 'electron transport layer'. As you type, suggestions will appear. Choose `results.properties.optoelectronic.solar_cell.electron_transport_layer`.
+ - Set the statistics scaling to linear, give the widget a descriptive title like "ETL", and pin it to the dashboard.
+ - Repeat the process for the HTL materials.
+
+ 3. **Create a Scatter Plot**:
+ - Click on the **SCATTER PLOT** widget button to visualize the relationship between open circuit voltage (Voc), short circuit current density (Jsc), and efficiency.
+ - Set the X-axis to "Open Circuit Voltage (Voc)", the Y-axis to "Efficiency", and use the marker color to represent "Short Circuit Current Density".
+ - The scatter plot will allow you to explore the data interactively.
+
+ <div style="text-align: center;">
+ <img src="images/custom_widgets_example.gif" alt="Custom Widgets Example" width="800">
+ </div>
+
+ 4- **Interpreting Results**
+
+ - Interactive scatter plots reveal relationships between **ETLs, HTLs, and performance**.
+ - Hover over data points for details.
+ - Click entries for **full metadata, dataset links, and publication info**.
+
+ Custom widgets provide a **powerful way** to explore NOMAD data and answer research questions efficiently.
+
+---
+
+## Example 2: Exploring Sn-Based Solar Cells
+
+Let’s explore how **hole transport layer (HTL) materials** affect efficiency in **Sn-based solar cells** with **C60** as the electron transport layer (ETL).
+
+In this example, we will utilize the Solar Cell Explore page, which offers filters and preset widgets that makes it easier to search for solar cell entries.
+
+**Step 1: Navigate to the Solar Cell Explore Page**
+
+- Navigate to **EXPLORE** → **Solar Cells**.
+- This dashboard provides predefined filters and plots optimized for solar cell research.
+
+
+<div style="text-align: center;">
+ <img src="images/solar_cells_dashboard.png" alt="Solar Cells Dashboard" width="800">
+</div>
+
+The dashboard includes the following preset widgets:
+
+- **Periodic Table:** Filter materials by elements.
+- **Scatter Plots:** Explore efficiency vs. Voc, Jsc, and device architecture.
+- **Histograms:** Analyze bandgap and illumination intensity.
+- **TERMS Plots:** Categorize fabrication method, device stack, ETL, and HTL materials.
+
+**Step 2: Apply Filters**
+
+- Select Sn in the **Periodic Table** to filter Sn-based absorbers.
+- Set ETL = C60 in the **TERMS** plot. (~400 entries remain)
+- Narrow results further using:
+ - Bandgap slider (e.g., >1.3 eV).
+ - Device architecture scatter plot (e.g., pin).
+
+**Step 3: Customize Widgets**
+
+Click the *pen icon* on any widget to modify its plotted quantities, color mapping, or units. Each widget offers a customizable set of filters or visualizations, depending on the data type.
+
+**Step 4: Inspect the Results Matching the Criteria**
+
+- Hover over scatter plots to inspect data points.
+- Click entries for full metadata, dataset links, and further analysis.
+
+
+<div style="text-align: center;">
+ <img src="images/sn_based_solar_cells_example.gif" alt="Sn-based Solar Cell example" width="800">
+</div>
+
+----------------------
\ No newline at end of file
diff --git a/docs/tutorial/images/ELN_1.png b/docs/tutorial/images/ELN_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc68af9b9de9ed6a3f4f90f6cdbce6226ae85b5f
Binary files /dev/null and b/docs/tutorial/images/ELN_1.png differ
diff --git a/docs/tutorial/images/ELN_2.png b/docs/tutorial/images/ELN_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..158684b3a47ca7260ce7daa4e497a298b3066f04
Binary files /dev/null and b/docs/tutorial/images/ELN_2.png differ
diff --git a/docs/tutorial/images/ELN_built-in_1.png b/docs/tutorial/images/ELN_built-in_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..33b95cc02c0ceaf5f342075c488e05e1c50e479f
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_1.png differ
diff --git a/docs/tutorial/images/ELN_built-in_10.png b/docs/tutorial/images/ELN_built-in_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..80c324d3d070cad9c0836b3e2bda1dbd583e49af
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_10.png differ
diff --git a/docs/tutorial/images/ELN_built-in_11.png b/docs/tutorial/images/ELN_built-in_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5f1e97c47344871058dd1d0ed3a360b7443aef4
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_11.png differ
diff --git a/docs/tutorial/images/ELN_built-in_12.png b/docs/tutorial/images/ELN_built-in_12.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe323d25588f7bec06f057f3e8dd4028b7c7ae68
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_12.png differ
diff --git a/docs/tutorial/images/ELN_built-in_13.png b/docs/tutorial/images/ELN_built-in_13.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cb854c7c95869934dd1b16c753035c147df0144
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_13.png differ
diff --git a/docs/tutorial/images/ELN_built-in_14.png b/docs/tutorial/images/ELN_built-in_14.png
new file mode 100644
index 0000000000000000000000000000000000000000..80f7be47885d6636156119ba7e74a2e759b12f9e
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_14.png differ
diff --git a/docs/tutorial/images/ELN_built-in_15.png b/docs/tutorial/images/ELN_built-in_15.png
new file mode 100644
index 0000000000000000000000000000000000000000..21b03bd97ec45f6f5fdd29da3cef0de6044df514
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_15.png differ
diff --git a/docs/tutorial/images/ELN_built-in_16.png b/docs/tutorial/images/ELN_built-in_16.png
new file mode 100644
index 0000000000000000000000000000000000000000..3182cf705bd50dc0ae1315ff73915dceb962892f
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_16.png differ
diff --git a/docs/tutorial/images/ELN_built-in_17.png b/docs/tutorial/images/ELN_built-in_17.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f87e9522beb0b07365f597c8dd0ca348de69e06
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_17.png differ
diff --git a/docs/tutorial/images/ELN_built-in_18.png b/docs/tutorial/images/ELN_built-in_18.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2339610076eb6807a457f6f2bd405dbd2bf9e74
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_18.png differ
diff --git a/docs/tutorial/images/ELN_built-in_19.png b/docs/tutorial/images/ELN_built-in_19.png
new file mode 100644
index 0000000000000000000000000000000000000000..1202101d61fb9da8b83bc170cfecdd8f53acb1a1
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_19.png differ
diff --git a/docs/tutorial/images/ELN_built-in_2.png b/docs/tutorial/images/ELN_built-in_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..555b048c52503322c00d756b88ddadba106e3ee1
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_2.png differ
diff --git a/docs/tutorial/images/ELN_built-in_20.png b/docs/tutorial/images/ELN_built-in_20.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef28a0df2e4e8dca1cbf5bc34558367b3ace6844
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_20.png differ
diff --git a/docs/tutorial/images/ELN_built-in_21.png b/docs/tutorial/images/ELN_built-in_21.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9355a1949261ac5a24c237ec1f7091089772d0d
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_21.png differ
diff --git a/docs/tutorial/images/ELN_built-in_22.png b/docs/tutorial/images/ELN_built-in_22.png
new file mode 100644
index 0000000000000000000000000000000000000000..3705ac8cf49223fd3848a7a318bcd393263e3b93
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_22.png differ
diff --git a/docs/tutorial/images/ELN_built-in_23.png b/docs/tutorial/images/ELN_built-in_23.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bff4b7de18677da7da4eb9e1991a9305b506737
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_23.png differ
diff --git a/docs/tutorial/images/ELN_built-in_24.png b/docs/tutorial/images/ELN_built-in_24.png
new file mode 100644
index 0000000000000000000000000000000000000000..988f403f4110088bdad9de10f21cc31dc65dbe07
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_24.png differ
diff --git a/docs/tutorial/images/ELN_built-in_25.png b/docs/tutorial/images/ELN_built-in_25.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c6fae33297e4cef477f2b34b78fb6daa724b620
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_25.png differ
diff --git a/docs/tutorial/images/ELN_built-in_26.png b/docs/tutorial/images/ELN_built-in_26.png
new file mode 100644
index 0000000000000000000000000000000000000000..a813c4184a0939a34718ca1a7c9766d647fd1a24
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_26.png differ
diff --git a/docs/tutorial/images/ELN_built-in_27.png b/docs/tutorial/images/ELN_built-in_27.png
new file mode 100644
index 0000000000000000000000000000000000000000..19d7a6930f4efb1b66164c728a0df2d26348efed
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_27.png differ
diff --git a/docs/tutorial/images/ELN_built-in_28.png b/docs/tutorial/images/ELN_built-in_28.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f56e31bcd169972017226d1c880a83952842207
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_28.png differ
diff --git a/docs/tutorial/images/ELN_built-in_29.png b/docs/tutorial/images/ELN_built-in_29.png
new file mode 100644
index 0000000000000000000000000000000000000000..52452245e61f9d85f831632d1d478e88fae13599
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_29.png differ
diff --git a/docs/tutorial/images/ELN_built-in_3.png b/docs/tutorial/images/ELN_built-in_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4f6a0b1ebeee15c6ccfd77a71bb6fa6008cbc31
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_3.png differ
diff --git a/docs/tutorial/images/ELN_built-in_30.png b/docs/tutorial/images/ELN_built-in_30.png
new file mode 100644
index 0000000000000000000000000000000000000000..081611f10d0781b50e3fc98a7b1855b74cc6970e
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_30.png differ
diff --git a/docs/tutorial/images/ELN_built-in_31.png b/docs/tutorial/images/ELN_built-in_31.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5b3542cb3803b194ea5dfa1e11ed1d66bfadc6a
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_31.png differ
diff --git a/docs/tutorial/images/ELN_built-in_32.png b/docs/tutorial/images/ELN_built-in_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..8218aa9effaace1e18f78202f36232278eaa4db4
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_32.png differ
diff --git a/docs/tutorial/images/ELN_built-in_33.png b/docs/tutorial/images/ELN_built-in_33.png
new file mode 100644
index 0000000000000000000000000000000000000000..a29b5417200135d7b53906925655ac26561846a6
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_33.png differ
diff --git a/docs/tutorial/images/ELN_built-in_34.png b/docs/tutorial/images/ELN_built-in_34.png
new file mode 100644
index 0000000000000000000000000000000000000000..798fe05914ed77bad1ce6bd05b6ca4b94f6a83b4
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_34.png differ
diff --git a/docs/tutorial/images/ELN_built-in_35.png b/docs/tutorial/images/ELN_built-in_35.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed33fd432dc2b360ff6f810f7996ae40495df9da
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_35.png differ
diff --git a/docs/tutorial/images/ELN_built-in_36.png b/docs/tutorial/images/ELN_built-in_36.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b9a785fb9862ec3eb9195d2c011b89a06bb67f
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_36.png differ
diff --git a/docs/tutorial/images/ELN_built-in_37.png b/docs/tutorial/images/ELN_built-in_37.png
new file mode 100644
index 0000000000000000000000000000000000000000..a26afc09acdede77629a4095ddb7398854e1c07b
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_37.png differ
diff --git a/docs/tutorial/images/ELN_built-in_38.png b/docs/tutorial/images/ELN_built-in_38.png
new file mode 100644
index 0000000000000000000000000000000000000000..80f20d01045934ad60a1fa8de14052197991c895
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_38.png differ
diff --git a/docs/tutorial/images/ELN_built-in_39.gif b/docs/tutorial/images/ELN_built-in_39.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b5ca919c2e9167fbd41e495d3a5c3991a9c87acf
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_39.gif differ
diff --git a/docs/tutorial/images/ELN_built-in_39.png b/docs/tutorial/images/ELN_built-in_39.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cc1fff44083135931b7fa6908674aa4c5510d78
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_39.png differ
diff --git a/docs/tutorial/images/ELN_built-in_4.png b/docs/tutorial/images/ELN_built-in_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a29dd05738d33433398eef3ce252c78d52f0404
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_4.png differ
diff --git a/docs/tutorial/images/ELN_built-in_40.png b/docs/tutorial/images/ELN_built-in_40.png
new file mode 100644
index 0000000000000000000000000000000000000000..85e19351cdc76d7902e9df5b2fc21636f7ec2a77
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_40.png differ
diff --git a/docs/tutorial/images/ELN_built-in_41.png b/docs/tutorial/images/ELN_built-in_41.png
new file mode 100644
index 0000000000000000000000000000000000000000..10c1416233333ceac394bbfb3c1e1456c06e1610
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_41.png differ
diff --git a/docs/tutorial/images/ELN_built-in_42.png b/docs/tutorial/images/ELN_built-in_42.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ed8a6993a5e50ff5d8431394beaf52583e847d4
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_42.png differ
diff --git a/docs/tutorial/images/ELN_built-in_43.png b/docs/tutorial/images/ELN_built-in_43.png
new file mode 100644
index 0000000000000000000000000000000000000000..b630422dcdf578227f3c69c68dd9fbbc9c7f3adf
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_43.png differ
diff --git a/docs/tutorial/images/ELN_built-in_44.png b/docs/tutorial/images/ELN_built-in_44.png
new file mode 100644
index 0000000000000000000000000000000000000000..96be381fcaae0107a9aa7dc315c248362627f2a5
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_44.png differ
diff --git a/docs/tutorial/images/ELN_built-in_45.png b/docs/tutorial/images/ELN_built-in_45.png
new file mode 100644
index 0000000000000000000000000000000000000000..202dd19c9c0ab730ed6c496b1f61b9f3bb5a1367
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_45.png differ
diff --git a/docs/tutorial/images/ELN_built-in_46.png b/docs/tutorial/images/ELN_built-in_46.png
new file mode 100644
index 0000000000000000000000000000000000000000..c418b6d9b9b9e1ee2294b6b1d20860b2ba1d1220
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_46.png differ
diff --git a/docs/tutorial/images/ELN_built-in_47.png b/docs/tutorial/images/ELN_built-in_47.png
new file mode 100644
index 0000000000000000000000000000000000000000..aea633aeef49fc96d3e28d8236fe26bd48426ff2
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_47.png differ
diff --git a/docs/tutorial/images/ELN_built-in_48.png b/docs/tutorial/images/ELN_built-in_48.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9c2674eb29cdc439c4cd5d3b4438362dc73617d
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_48.png differ
diff --git a/docs/tutorial/images/ELN_built-in_5.png b/docs/tutorial/images/ELN_built-in_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ee4f1dc5810c9d77ade2c329e27da8ad4feb998
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_5.png differ
diff --git a/docs/tutorial/images/ELN_built-in_6.png b/docs/tutorial/images/ELN_built-in_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..12b590aefcb2a4cbad2c49cea6e0233f0dc9fe68
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_6.png differ
diff --git a/docs/tutorial/images/ELN_built-in_7.png b/docs/tutorial/images/ELN_built-in_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0078dce06e48faf68b8c063e68b0cd159726822
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_7.png differ
diff --git a/docs/tutorial/images/ELN_built-in_8.png b/docs/tutorial/images/ELN_built-in_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef2e49b67f918fd5d7cebbec1de8e42d331b357d
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_8.png differ
diff --git a/docs/tutorial/images/ELN_built-in_9.png b/docs/tutorial/images/ELN_built-in_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..78cca686e0f4a959a2a7476df561ad6a572c5259
Binary files /dev/null and b/docs/tutorial/images/ELN_built-in_9.png differ
diff --git a/docs/tutorial/images/access_NOMAD.png b/docs/tutorial/images/access_NOMAD.png
new file mode 100644
index 0000000000000000000000000000000000000000..34b5d3532a93e1d23454444e1ec381c8bf45abce
Binary files /dev/null and b/docs/tutorial/images/access_NOMAD.png differ
diff --git a/docs/tutorial/images/account_1.png b/docs/tutorial/images/account_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..1023f88f80a9fabbf8e2a2a7511dea741acc2712
Binary files /dev/null and b/docs/tutorial/images/account_1.png differ
diff --git a/docs/tutorial/images/account_2.png b/docs/tutorial/images/account_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3934e929ce0ec95059ecf2990f00315001281484
Binary files /dev/null and b/docs/tutorial/images/account_2.png differ
diff --git a/docs/tutorial/images/account_3.png b/docs/tutorial/images/account_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d163b3c062fb68a6ba9cb6a69c6c549bde8775fc
Binary files /dev/null and b/docs/tutorial/images/account_3.png differ
diff --git a/docs/tutorial/images/account_4.png b/docs/tutorial/images/account_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..44295a8f0be96a8d1aa5a40ceb59c2b93984ed3e
Binary files /dev/null and b/docs/tutorial/images/account_4.png differ
diff --git a/docs/tutorial/images/add_filters_to_search_interface.gif b/docs/tutorial/images/add_filters_to_search_interface.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ccbe8a88533755b882df756c737f66b8bb6715b1
Binary files /dev/null and b/docs/tutorial/images/add_filters_to_search_interface.gif differ
diff --git a/docs/tutorial/images/after_organization.png b/docs/tutorial/images/after_organization.png
new file mode 100644
index 0000000000000000000000000000000000000000..60dbe53c1d4b2a4404e08c8e32d4272d00383009
Binary files /dev/null and b/docs/tutorial/images/after_organization.png differ
diff --git a/docs/tutorial/images/change_name_icon.png b/docs/tutorial/images/change_name_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47f932099c661dc87c51bc20aa9005bbb60caaec
Binary files /dev/null and b/docs/tutorial/images/change_name_icon.png differ
diff --git a/docs/tutorial/images/creating_new_folders.gif b/docs/tutorial/images/creating_new_folders.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1f1932eafae21ce14e0e4b8dc92e368d2d26e4b6
Binary files /dev/null and b/docs/tutorial/images/creating_new_folders.gif differ
diff --git a/docs/tutorial/images/custom_widgets_example.gif b/docs/tutorial/images/custom_widgets_example.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ee272c83d0b71d09f55000bbaeb3aeb6ddf65848
Binary files /dev/null and b/docs/tutorial/images/custom_widgets_example.gif differ
diff --git a/docs/tutorial/images/customizable_widgets.png b/docs/tutorial/images/customizable_widgets.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cec967a6476321748c1b39a15a9077a1ae29c70
Binary files /dev/null and b/docs/tutorial/images/customizable_widgets.png differ
diff --git a/docs/tutorial/images/dataset_1.png b/docs/tutorial/images/dataset_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e360c2e195337245d4912546ff95b567c4920c7
Binary files /dev/null and b/docs/tutorial/images/dataset_1.png differ
diff --git a/docs/tutorial/images/dataset_2.png b/docs/tutorial/images/dataset_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b2c20aa5867805033d1b75aa31170caf77f58d4
Binary files /dev/null and b/docs/tutorial/images/dataset_2.png differ
diff --git a/docs/tutorial/images/dataset_3.png b/docs/tutorial/images/dataset_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..0563074d41ae0648bb1e7dfc4f59e03ec0659575
Binary files /dev/null and b/docs/tutorial/images/dataset_3.png differ
diff --git a/docs/tutorial/images/dataset_4.png b/docs/tutorial/images/dataset_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..356430ca0a19e961ee76d0ca7d9e127342920cd3
Binary files /dev/null and b/docs/tutorial/images/dataset_4.png differ
diff --git a/docs/tutorial/images/dataset_5.png b/docs/tutorial/images/dataset_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..0112af9470a56b47b10ffdb80d936805a14713b4
Binary files /dev/null and b/docs/tutorial/images/dataset_5.png differ
diff --git a/docs/tutorial/images/dataset_6.png b/docs/tutorial/images/dataset_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..899ca67d24db7d572b3042a76b12d6497c6f9cb2
Binary files /dev/null and b/docs/tutorial/images/dataset_6.png differ
diff --git a/docs/tutorial/images/datasets_step1.png b/docs/tutorial/images/datasets_step1.png
new file mode 100644
index 0000000000000000000000000000000000000000..52ce91a1286ed5da09fe567fdf68556b64b22a3d
Binary files /dev/null and b/docs/tutorial/images/datasets_step1.png differ
diff --git a/docs/tutorial/images/datasets_step1_alt.png b/docs/tutorial/images/datasets_step1_alt.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c59907ed34a9932ba7f863723ff85086555cc98
Binary files /dev/null and b/docs/tutorial/images/datasets_step1_alt.png differ
diff --git a/docs/tutorial/images/datasets_steps_2-4.png b/docs/tutorial/images/datasets_steps_2-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3ee68285d30f302d5c7aec100a3d32b2168febf
Binary files /dev/null and b/docs/tutorial/images/datasets_steps_2-4.png differ
diff --git a/docs/tutorial/images/edit_upload_members_icon.png b/docs/tutorial/images/edit_upload_members_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c825fa539205cd75672fb2cc7c252e57bb17291a
Binary files /dev/null and b/docs/tutorial/images/edit_upload_members_icon.png differ
diff --git a/docs/tutorial/images/embargoed_upload.png b/docs/tutorial/images/embargoed_upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fc09cbcf0382e1b5b216403432db1664d4e91c9
Binary files /dev/null and b/docs/tutorial/images/embargoed_upload.png differ
diff --git a/docs/tutorial/images/example_3-1_drag_drop_files.gif b/docs/tutorial/images/example_3-1_drag_drop_files.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a3330db24663b2a51c1da2d20f5a5a10cdd77099
Binary files /dev/null and b/docs/tutorial/images/example_3-1_drag_drop_files.gif differ
diff --git a/docs/tutorial/images/example_3-1_file_browser_dialog.gif b/docs/tutorial/images/example_3-1_file_browser_dialog.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4e1c1cf4fae68214d15b431be5de068d2f125995
Binary files /dev/null and b/docs/tutorial/images/example_3-1_file_browser_dialog.gif differ
diff --git a/docs/tutorial/images/example_3-2_data_tab.gif b/docs/tutorial/images/example_3-2_data_tab.gif
new file mode 100644
index 0000000000000000000000000000000000000000..dd0d0633ae3d74445048fb2fd89f9716cd8af94d
Binary files /dev/null and b/docs/tutorial/images/example_3-2_data_tab.gif differ
diff --git a/docs/tutorial/images/example_3-2_drag_drop_files.gif b/docs/tutorial/images/example_3-2_drag_drop_files.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1e318c466ffb4ff162dfdc52c77bf842b748c75b
Binary files /dev/null and b/docs/tutorial/images/example_3-2_drag_drop_files.gif differ
diff --git a/docs/tutorial/images/example_3-2_electronic_properties_card.png b/docs/tutorial/images/example_3-2_electronic_properties_card.png
new file mode 100644
index 0000000000000000000000000000000000000000..a76be23b3ed0203c74d810fdac4e3aeb67f1c3dd
Binary files /dev/null and b/docs/tutorial/images/example_3-2_electronic_properties_card.png differ
diff --git a/docs/tutorial/images/example_3-2_files_tab.png b/docs/tutorial/images/example_3-2_files_tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..8515b5a26bc78a98b90375c6a72eccd1bdf53b71
Binary files /dev/null and b/docs/tutorial/images/example_3-2_files_tab.png differ
diff --git a/docs/tutorial/images/example_3-2_input_output_files.png b/docs/tutorial/images/example_3-2_input_output_files.png
new file mode 100644
index 0000000000000000000000000000000000000000..06c9f8b0cd9a754103754e5c50e124914d5f219c
Binary files /dev/null and b/docs/tutorial/images/example_3-2_input_output_files.png differ
diff --git a/docs/tutorial/images/example_3-2_materials_card.png b/docs/tutorial/images/example_3-2_materials_card.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4a05c0a0b2ed7feae40022e0510f3e918d22513
Binary files /dev/null and b/docs/tutorial/images/example_3-2_materials_card.png differ
diff --git a/docs/tutorial/images/example_3-2_overview.png b/docs/tutorial/images/example_3-2_overview.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b45c3a5443869ee0fd281a1e002482a4295ef03
Binary files /dev/null and b/docs/tutorial/images/example_3-2_overview.png differ
diff --git a/docs/tutorial/images/example_3-2_workflow_card.png b/docs/tutorial/images/example_3-2_workflow_card.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a17835716a067852cda74f32d0624b50b6ed167
Binary files /dev/null and b/docs/tutorial/images/example_3-2_workflow_card.png differ
diff --git a/docs/tutorial/images/example_3-3_NexusDataConverter.png b/docs/tutorial/images/example_3-3_NexusDataConverter.png
new file mode 100644
index 0000000000000000000000000000000000000000..54249975a2a01eca9dc4b487d99c5c0b9eb80983
Binary files /dev/null and b/docs/tutorial/images/example_3-3_NexusDataConverter.png differ
diff --git a/docs/tutorial/images/example_3-3_NexusDataConverter_2(with_ELN).png b/docs/tutorial/images/example_3-3_NexusDataConverter_2(with_ELN).png
new file mode 100644
index 0000000000000000000000000000000000000000..bb4039b94767136aea2f297efa950f416554a043
Binary files /dev/null and b/docs/tutorial/images/example_3-3_NexusDataConverter_2(with_ELN).png differ
diff --git a/docs/tutorial/images/example_3-3_NexusDataConverter_2.png b/docs/tutorial/images/example_3-3_NexusDataConverter_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b0e73d4c6ba8203d6032f7e5cc7c40ab2f3b075
Binary files /dev/null and b/docs/tutorial/images/example_3-3_NexusDataConverter_2.png differ
diff --git a/docs/tutorial/images/example_3-3_NexusDataConverter_3.png b/docs/tutorial/images/example_3-3_NexusDataConverter_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7cf31096ee63a56697d01e6e95dad22061c3c6a
Binary files /dev/null and b/docs/tutorial/images/example_3-3_NexusDataConverter_3.png differ
diff --git a/docs/tutorial/images/example_3-3_create_from_schema.png b/docs/tutorial/images/example_3-3_create_from_schema.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b83aa0ed58cb3a164a12ec4a753dba9bc0ed455
Binary files /dev/null and b/docs/tutorial/images/example_3-3_create_from_schema.png differ
diff --git a/docs/tutorial/images/example_3-3_data_tab_entry_page_nexus.gif b/docs/tutorial/images/example_3-3_data_tab_entry_page_nexus.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3a364cc78e4c852100c5152a0627575eed152eb5
Binary files /dev/null and b/docs/tutorial/images/example_3-3_data_tab_entry_page_nexus.gif differ
diff --git a/docs/tutorial/images/example_3-3_drag_drop_files_nexus.gif b/docs/tutorial/images/example_3-3_drag_drop_files_nexus.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6ab6001fda038dba4d7b2cd40753a065139fea83
Binary files /dev/null and b/docs/tutorial/images/example_3-3_drag_drop_files_nexus.gif differ
diff --git a/docs/tutorial/images/example_3-3_modifying_ELN.gif b/docs/tutorial/images/example_3-3_modifying_ELN.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b2b98b4bae3bec5eb2f8c93baefd6b6bf18b8888
Binary files /dev/null and b/docs/tutorial/images/example_3-3_modifying_ELN.gif differ
diff --git a/docs/tutorial/images/example_3-3_navigating_to_entry.png b/docs/tutorial/images/example_3-3_navigating_to_entry.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e24b1295105dd7a58a693e2f249e957dabb0d9b
Binary files /dev/null and b/docs/tutorial/images/example_3-3_navigating_to_entry.png differ
diff --git a/docs/tutorial/images/example_3-3_overview_entry_nexus.png b/docs/tutorial/images/example_3-3_overview_entry_nexus.png
new file mode 100644
index 0000000000000000000000000000000000000000..767702ca48f5489e7abea69eef5df7d62be81dd7
Binary files /dev/null and b/docs/tutorial/images/example_3-3_overview_entry_nexus.png differ
diff --git a/docs/tutorial/images/example_3-3_overview_entry_nexus2.png b/docs/tutorial/images/example_3-3_overview_entry_nexus2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d18f1d1581ce54f372e747f8d02f078d2b926231
Binary files /dev/null and b/docs/tutorial/images/example_3-3_overview_entry_nexus2.png differ
diff --git a/docs/tutorial/images/explore_1.png b/docs/tutorial/images/explore_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c055cd225f45f6de846cbb0dd48490cfaa998ec7
Binary files /dev/null and b/docs/tutorial/images/explore_1.png differ
diff --git a/docs/tutorial/images/explore_ELN_step_1.png b/docs/tutorial/images/explore_ELN_step_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0d4a61ccc86606fdad003db2fa39ca7bacb6b04
Binary files /dev/null and b/docs/tutorial/images/explore_ELN_step_1.png differ
diff --git a/docs/tutorial/images/explore_ELN_step_2.png b/docs/tutorial/images/explore_ELN_step_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa4b27b5f271f2cab74e7c316012e7ddf6877b84
Binary files /dev/null and b/docs/tutorial/images/explore_ELN_step_2.png differ
diff --git a/docs/tutorial/images/explore_ELN_step_2r.png b/docs/tutorial/images/explore_ELN_step_2r.png
new file mode 100644
index 0000000000000000000000000000000000000000..f85bb43b46ad2006063d06c30714d049777ccda7
Binary files /dev/null and b/docs/tutorial/images/explore_ELN_step_2r.png differ
diff --git a/docs/tutorial/images/explore_menu2.png b/docs/tutorial/images/explore_menu2.png
new file mode 100644
index 0000000000000000000000000000000000000000..62396c014c6e6d53d2d129e5c76ae28518719138
Binary files /dev/null and b/docs/tutorial/images/explore_menu2.png differ
diff --git a/docs/tutorial/images/explore_you_ELN_entries.gif b/docs/tutorial/images/explore_you_ELN_entries.gif
new file mode 100644
index 0000000000000000000000000000000000000000..60a5aea0bb38c9e867c164635c685e405e0b7c2c
Binary files /dev/null and b/docs/tutorial/images/explore_you_ELN_entries.gif differ
diff --git a/docs/tutorial/images/files_explorer_in_NOMAD.png b/docs/tutorial/images/files_explorer_in_NOMAD.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d90f0e14c42603d8e2cd6262fb5a27ccb7d3302
Binary files /dev/null and b/docs/tutorial/images/files_explorer_in_NOMAD.png differ
diff --git a/docs/tutorial/images/filters_sidebar.png b/docs/tutorial/images/filters_sidebar.png
new file mode 100644
index 0000000000000000000000000000000000000000..981b4987a6b0681ef363ffeba5552a134ec65fe1
Binary files /dev/null and b/docs/tutorial/images/filters_sidebar.png differ
diff --git a/docs/tutorial/images/go_to_icon.png b/docs/tutorial/images/go_to_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205107351a0c25709f19bfeb7fdbf6aa3a8d1399
Binary files /dev/null and b/docs/tutorial/images/go_to_icon.png differ
diff --git a/docs/tutorial/images/icon_delete.png b/docs/tutorial/images/icon_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..7509aed5b728d78c126bac471cb82f3ced07f87b
Binary files /dev/null and b/docs/tutorial/images/icon_delete.png differ
diff --git a/docs/tutorial/images/icon_published.png b/docs/tutorial/images/icon_published.png
new file mode 100644
index 0000000000000000000000000000000000000000..51146fe8c8d1714d261b6b6f9e753a58044b18b9
Binary files /dev/null and b/docs/tutorial/images/icon_published.png differ
diff --git a/docs/tutorial/images/icon_search_upload.png b/docs/tutorial/images/icon_search_upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..6245ba6586644274e655a9f3b0fe295bda568d4e
Binary files /dev/null and b/docs/tutorial/images/icon_search_upload.png differ
diff --git a/docs/tutorial/images/icon_shared.png b/docs/tutorial/images/icon_shared.png
new file mode 100644
index 0000000000000000000000000000000000000000..9733057d9830385c1e8379fdc1e5761eec3f70b0
Binary files /dev/null and b/docs/tutorial/images/icon_shared.png differ
diff --git a/docs/tutorial/images/icon_unpublished.png b/docs/tutorial/images/icon_unpublished.png
new file mode 100644
index 0000000000000000000000000000000000000000..e64f2a1d67e1318af753ce8da1b588a3a922817c
Binary files /dev/null and b/docs/tutorial/images/icon_unpublished.png differ
diff --git a/docs/tutorial/images/icon_visible.png b/docs/tutorial/images/icon_visible.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd7b771747f3d6c3ce2e8abbfafea6d19d9c0eaa
Binary files /dev/null and b/docs/tutorial/images/icon_visible.png differ
diff --git a/docs/tutorial/images/locate_API_buttons.gif b/docs/tutorial/images/locate_API_buttons.gif
new file mode 100644
index 0000000000000000000000000000000000000000..689c1801ea9ab1bd480f22b6e526470ab7e56172
Binary files /dev/null and b/docs/tutorial/images/locate_API_buttons.gif differ
diff --git a/docs/tutorial/images/making_an_upload_visible.png b/docs/tutorial/images/making_an_upload_visible.png
new file mode 100644
index 0000000000000000000000000000000000000000..fef017352b904105da303ba445aa8aed63eedbf0
Binary files /dev/null and b/docs/tutorial/images/making_an_upload_visible.png differ
diff --git a/docs/tutorial/images/moving_files_to_a_folder.gif b/docs/tutorial/images/moving_files_to_a_folder.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d296046b9c0712763d4d489ffbfcb86acdcadcb3
Binary files /dev/null and b/docs/tutorial/images/moving_files_to_a_folder.gif differ
diff --git a/docs/tutorial/images/overview.png b/docs/tutorial/images/overview.png
new file mode 100644
index 0000000000000000000000000000000000000000..41d65ce5ce7c001ced2052e55e1705c6409f805a
Binary files /dev/null and b/docs/tutorial/images/overview.png differ
diff --git a/docs/tutorial/images/publishing_an_upload.png b/docs/tutorial/images/publishing_an_upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc98d56b02c14f4a02014bdd33f1b2a284bac7cc
Binary files /dev/null and b/docs/tutorial/images/publishing_an_upload.png differ
diff --git a/docs/tutorial/images/sharing_an_upload.png b/docs/tutorial/images/sharing_an_upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5ba29ea3b29b2c6f96947c78e7b83908cb7ced2
Binary files /dev/null and b/docs/tutorial/images/sharing_an_upload.png differ
diff --git a/docs/tutorial/images/sn_based_solar_cells_example.gif b/docs/tutorial/images/sn_based_solar_cells_example.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3c2f090f8a80e61a74b265e883d537a40dfecea2
Binary files /dev/null and b/docs/tutorial/images/sn_based_solar_cells_example.gif differ
diff --git a/docs/tutorial/images/solar_cell_device.png b/docs/tutorial/images/solar_cell_device.png
new file mode 100644
index 0000000000000000000000000000000000000000..4231332334289c836acff3d09aa55263b017d496
Binary files /dev/null and b/docs/tutorial/images/solar_cell_device.png differ
diff --git a/docs/tutorial/images/solar_cells_dashboard.png b/docs/tutorial/images/solar_cells_dashboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..d29be5105528660bc4d08a962ba5d102da831a64
Binary files /dev/null and b/docs/tutorial/images/solar_cells_dashboard.png differ
diff --git a/docs/tutorial/images/upload_publish_1.png b/docs/tutorial/images/upload_publish_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b65bbaa5aed293adb19d7ca8015a92765361c12f
Binary files /dev/null and b/docs/tutorial/images/upload_publish_1.png differ
diff --git a/docs/tutorial/images/upload_publish_2.png b/docs/tutorial/images/upload_publish_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e5221bb797ee1d121c36d00f79ee6d35de108ab
Binary files /dev/null and b/docs/tutorial/images/upload_publish_2.png differ
diff --git a/docs/tutorial/images/upload_publish_3.png b/docs/tutorial/images/upload_publish_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d051f2df8335bb955f01ab87e8fa5528fd4dd87
Binary files /dev/null and b/docs/tutorial/images/upload_publish_3.png differ
diff --git a/docs/tutorial/images/upload_publish_4.png b/docs/tutorial/images/upload_publish_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..43eb86d0a818d4b0e9016e8dd5df34be2418f31c
Binary files /dev/null and b/docs/tutorial/images/upload_publish_4.png differ
diff --git a/docs/tutorial/images/upload_publish_5.png b/docs/tutorial/images/upload_publish_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..00662204437533426d2cde27c112da77b3f8e904
Binary files /dev/null and b/docs/tutorial/images/upload_publish_5.png differ
diff --git a/docs/tutorial/images/upload_publish_6.png b/docs/tutorial/images/upload_publish_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfcfd76d57997549faf028a5056fc8e8372019f4
Binary files /dev/null and b/docs/tutorial/images/upload_publish_6.png differ
diff --git a/docs/tutorial/images/upload_publish_7.png b/docs/tutorial/images/upload_publish_7.png
new file mode 100644
index 0000000000000000000000000000000000000000..053a06b2540271455cd205ca96b7048a71dafcc4
Binary files /dev/null and b/docs/tutorial/images/upload_publish_7.png differ
diff --git a/docs/tutorial/images/upload_publish_8.png b/docs/tutorial/images/upload_publish_8.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4e9ede86d09d39510f05f11298839d2d3a79b33
Binary files /dev/null and b/docs/tutorial/images/upload_publish_8.png differ
diff --git a/docs/tutorial/images/widget_step_1.png b/docs/tutorial/images/widget_step_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ec15dad72ade024541eb83da1a26371164e2601
Binary files /dev/null and b/docs/tutorial/images/widget_step_1.png differ
diff --git a/docs/tutorial/images/widget_step_2_3.png b/docs/tutorial/images/widget_step_2_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e78479fb608077495d84fe05cd1a25c06cd1b26
Binary files /dev/null and b/docs/tutorial/images/widget_step_2_3.png differ
diff --git a/docs/tutorial/images/widget_step_4_5.png b/docs/tutorial/images/widget_step_4_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..7aa5c2519f24974f5e22b02d2d9abfb20b18ce36
Binary files /dev/null and b/docs/tutorial/images/widget_step_4_5.png differ
diff --git a/docs/tutorial/images/widget_step_5r.png b/docs/tutorial/images/widget_step_5r.png
new file mode 100644
index 0000000000000000000000000000000000000000..07dd290b6e063dfc3f5581fbe1459b66bb9c0b48
Binary files /dev/null and b/docs/tutorial/images/widget_step_5r.png differ
diff --git a/docs/tutorial/overview.md b/docs/tutorial/overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..dbce0ab3a4a297e4569bb76f8a0a2fd7d9c34c92
--- /dev/null
+++ b/docs/tutorial/overview.md
@@ -0,0 +1,80 @@
+# NOMAD Tutorials
+
+This section of the documentation provides practical, hands-on instructions for working with NOMAD. Each tutorial is designed to guide you through specific tasks while focusing on key learning outcomes.
+
+By following these tutorials, you will be able to:
+
+- Interact directly with NOMAD to perform essential tasks.
+- Develop a deeper understanding of its features and capabilities.
+- Gain confidence in using NOMAD efficiently for your research.
+
+These tutorials provide a structured learning experience that helps you apply concepts to real-world scenarios while reinforcing your knowledge.
+
+As you go through the tutorial pages, you will encounter embedded boxes with different colors and icons, each providing distinct types of information or instructions. Below is a list of the various box types and guidance on how to use them:
+
+!!! info "Offers additional information to enhance your understanding of NOMAD."
+!!! task "Presents hands-on tasks or questions with instructions to complete them."
+!!! example "Shares example files for you to try out, along with explanations of their contents and scientific use cases."
+!!! warning "Displays important warnings to consider before proceeding further in the tutorial."
+
+## Scope of the Tutorials
+
+NOMAD is available in two flavours to address the diverse needs of scientists: **Central NOMAD** and **NOMAD Oasis**. To learn more about these solutions, refer to our [web page](https://nomad-lab.eu/){:target="_blank"}.
+
+Our tutorial documentation covers basic usage that can be performed in both Central NOMAD and NOMAD Oasis. These tasks range from basic operations using the graphical user interface (GUI) to a certain level of customization (level 1) using YAML files, which do not require local installations.
+
+Additionally, the tutorials include in-depth customization (level 2) of NOMAD Oasis using NOMAD Plugins. However, more advanced topics such as installing an Oasis, setting up an internal Keycloak instance, managing a local file system, or adding tools to NORTH are not currently covered in the tutorials. Users interested in these topics should refer to other sections of the documentation, such as:
+
+- [How-to guides](../howto/overview.md) for step-by-step instructions,
+- [Explanations](../explanation/data.md) for deeper conceptual understanding, and
+- [Reference](../reference/config.md) documentation for detailed technical information.
+
+An overview of the skills required to use NOMAD and NOMAD Oasis, categorized into basic use, customization, and configuration, is summarized in the figure below.
+
+<img src="images/overview.png" alt="Competences of NOMAD" width="800">
+
+------
+
+## Ways to Access NOMAD
+
+There are multiple access points to NOMAD. The general [_landing page_](https://nomad-lab.eu/nomad-lab/){:target="_blank"} provides an overview of NOMAD’s features, along with links to documentation, tutorials, and project history.
+
+From this page, we can navigate to the NOMAD to upload, manage, and explore data.
+
+Three public versions are available:
+
+1. [**Official**](https://nomad-lab.eu/prod/v1/gui/search/entries){:target="_blank"} – The latest stable version of NOMAD.
+
+ Access it by clicking the "Open NOMAD" button at the top of the landing page.
+
+2. [**Beta/staging**](https://nomad-lab.eu/prod/v1/staging/gui/search/entries){:target="_blank"} – Features the most recent updates but may include untested or unstable features. It uses the official NOMAD data.
+
+ Access it from the *Installations* menu at the bottom of the landing page by selecting "Beta/staging."
+
+3. [**Test**](https://nomad-lab.eu/prod/v1/test/gui/search/entries){:target="_blank"} – Runs the latest released version of NOMAD but on temporary test data that is routinely wiped.
+
+ Access it from the *Installations* menu at the bottom of the landing page by selecting "Test."
+
+!!! note "These tutorials are based on the official version of NOMAD. All instructions are based on it unless stated otherwise."
+
+<div style="text-align: center;">
+ <img src="images/access_NOMAD.png" alt="Access NOMAD" width="600">
+</div>
+
+------------
+## Create a NOMAD User Account
+
+A NOMAD user account is required if you want to upload, share, publish, or analyze your data. However, exploring data in NOMAD does not require an account.
+
+Creating a NOMAD user account is quick and free. Follow these steps to set up your account (click on the arrows to navigate between steps):
+
+<div class="image-slider">
+ <div class="nav-arrow left" id="prev">â†</div>
+ <img src="images/account_1.png" alt="Image 1" class="active">
+ <img src="images/account_2.png" alt="Image 2">
+ <img src="images/account_3.png" alt="Image 3">
+ <img src="images/account_4.png" alt="Image 4">
+ <div class="nav-arrow right" id="next">→</div>
+</div>
+
+----------
\ No newline at end of file
diff --git a/docs/tutorial/upload_publish.md b/docs/tutorial/upload_publish.md
index 69bc0e35c47f17dfc1e7d9bc08c0215e2b1d2a4d..85d9a406c468fd4ef95995087017a621d83b9a7c 100644
--- a/docs/tutorial/upload_publish.md
+++ b/docs/tutorial/upload_publish.md
@@ -1,20 +1,518 @@
-!!! warning "Attention"
- We are currently working to update this content.
-
-This tutorial guides you through the basics of going from files on your computer
-to a published dataset with DOI.
-
-It covers the whole data-life cycle: starting with data on your hard drive,
-you will learn how to prepare, upload, publish data, and reference them with a DOI.
-Furthermore, you will learn how to explore, download, and use data that were published on NOMAD before.
-We will perform these steps with NOMAD's graphical user interface and its APIs.
-
-!!! note
- The NOMAD seen in the tutorials is an older version with a different color theme,
- but all the demonstrated functionality is still available on the current version.
- You'll find the NOMAD test installation mentioned in the first video
- [here](https://nomad-lab.eu/prod/v1/test/gui/search/entries){:target="_blank"}.
-
-<div class="youtube">
-<iframe src="https://www.youtube-nocookie.com/embed/3rVvfYoUbO0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
\ No newline at end of file
+# Uploading and Publishing Data in NOMAD
+
+In this tutorial, we will explore how to upload, share, and research data in NOMAD, using examples from both computational and experimental research. We will start by introducing the key components of NOMAD that facilitate the process, from uploading raw data files to publishing datasets with a Digital Object Identifier (DOI). Step by step, we will guide you through creating and managing uploads, adding files to generate entries that NOMAD processes, and organizing these entries into datasets for publication. By the end of this tutorial, you will have a clear understanding of how to handle different types of research data efficiently within NOMAD.
+
+
+
+## The Key Elements in NOMAD
+
+To begin the journey from uploading raw files to publishing datasets with DOIs in NOMAD, you need to understand the key elements of this process in NOMAD, which are illustrated in the figure below.
+
+
+
+1. In order to upload data into NOMAD, a **user account** is required.
+You can create a user account by following these [steps](overview.md#create-a-nomad-user-account){:target="_blank"} on the overview page.
+
+2. All files and data created by users are organized in NOMAD as **Uploads**, which function as directories within the user’s account. You can create an upload for each project and structure it into nested folder directories for better organization.
+
+ ??? info "Features of NOMAD **Uploads**"
+ - **Creation:** Uploads are created and managed by users.
+ - **Structure:** Uploads are associated to a user account and are listed in the *my uploads* page in the GUI. They serve as containers for multiple files and entries, preserving their directory structure and metadata.
+ - **Organization:** Each upload can contain multiple files organized into directories.
+ - **Sharing & Publishing:** Entries and files can only be shared, transferred, or published as complete uploads.
+
+3. Research data in the form of raw files are added to uploads. If NOMAD has a built-in parser for the file formats, it automatically processes the files and creates **Entries**. These entries represent structured data extracted from the raw files.
+
+ ??? info "Features of NOMAD **Entries**"
+ - **Creation:** Entries are automatically generated by NOMAD from uploaded raw files or instantiated schemas.
+ - **Structure:** Entries are distinct data entities that can be searched and viewed through dedicated pages in the NOMAD GUI.
+ - **Organization:** Entries belong to specific uploads and are linked to a raw file that NOMAD has recognized and parsed.
+ - **Sharing & Publishing:** Entries can be shared as part of an upload, and individual entries can be added to datasets, which can be published with a DOI.
+
+4. Entries can be grouped into **Datasets**, which allow for better organization of related data. Once the dataset is complete, it can be published with a DOI, making the research data findable, accessible, interoperable, and reusable (FAIR).
+
+ ??? info "Features of NOMAD **Datasets**"
+ - **Creation:** Datasets are created and managed by users.
+ - **Structure:** Datasets are associated to a user account and are listed in the *Your datasets* page in the GUI. They serve as containers for curated and related data entires.
+ - **Organization:** Datasets contains several entries from various uploads. One entry can be contained in many dataset.
+ - **Sharing & Publishing:** Datasets are published independent of uploads and you can get a DOI for your datasets.
+
+For more detailed explanation, you can refer to this [page](/explanation/basics.html).
+
+-----------------------------
+
+## Create New Upload
+
+The uploads exist in the *Your uploads* page. Here you can view a list of all your uploads with their relevant information. You can also create new uploads or add an example upload prepared by others.
+
+Follow these steps to create your first upload (click on the arrows to navigate between steps):
+
+<div class="image-slider" id="slider1">
+ <div class="nav-arrow left" id="prev1">â†</div>
+ <img src="images/upload_publish_3.png" alt="Navigate to `Your uploads` page by hovering over the Publish menu, then clicking on uploads" class="active">
+ <img src="images/upload_publish_4.png" alt="Create a new upload by clicking on the blue button">
+ <img src="images/upload_publish_5.png" alt="Edit the name of your upload 1">
+ <img src="images/upload_publish_6.png" alt="Edit the name of your upload 2">
+ <div class="nav-arrow right" id="next1">→</div>
+</div>
+
+
+??? info "Two different views of the **upload** page"
+ At the very top of the upload page, you can toggle between two different views for this page:
+
+ - **Overview:** This view includes all the tools needed to manage your upload, along with guided steps to start uploading your files to NOMAD. It will also show all the processed files (entries) that you will upload.
+ 
+ - **Files:** This view shows all the files included in upload, whether they are raw files or processed files. You can also organize these files into folders as needed.
+ 
+
+
+--------------------
+
+## Share Your Upload
+
+Uploads in NOMAD can be shared or published. When an upload is shared or published, all entries and files contained within it are also shared or published.
+
+??? info "What is the difference between sharing and publishing an Upload?"
+ **Sharing an upload** allows you to grant access to colleagues or collaborators while working on it.
+
+ - This facilitates collaboration on projects or enables progress reviews during the project.
+ - You can invite individuals with either read/write access (coauthors) or read-only access (reviewers).
+
+ **Publishing an upload** makes it searchable, findable, and accessible on NOMAD for everyone.
+
+ - Once published, the upload becomes immutable, meaning its contents can no longer be modified.
+ - You also have the option to publish with an embargo period, temporarily restricting public access until the embargo expires.
+
+A NOMAD upload can have four states based on sharing and publishing:
+
+|Status | Icon | Description |
+|----------|--------|-------------------------------------|
+|Private |<img src="images/icon_unpublished.png" alt="Icon of private upload" width="20"> |The upload is private and is visible to the uploader only.|
+|Shared |<img src="images/icon_shared.png" alt="Icon of shared upload" width="20"> |The upload is accessible to selected users but not publicly available.|
+|Published |<img src="images/icon_published.png" alt="Icon of published upload" width="20"> |The upload is publicly available to everyone.|
+|Visible |<img src="images/icon_visible.png" alt="Icon of visible upload" width="20"> |The upload is unpublished but accessible to everyone.|
+
+You can manage upload sharing in the *Edit upload members* menu. To access it, click on <img src="images/edit_upload_members_icon.png" alt="Edit upload members Icon" width="20"> available on the top of the upload page. at the top of the upload page.
+
+Alternatively, you can click the `EDIT UPLOAD MEMBERS` button below the list of entries on your upload page.
+
+??? task "Share your upload"
+ <img src="images/icon_shared.png" alt="Icon of shared upload" width="30">
+
+ **Step 1:** Open the *Edit upload members* window, but clicking on the **EDIT UPLOAD MEMBERS** button.
+
+ **Step 2:** Start typing the name of the NOMAD user you want to share the upload with. A list of matching users will appear—select the correct name from the list.
+
+ **Step 3:** Assign a role to the user by selecting either Coauthor or Reviewer from the dropdown menu.
+ - Coauthors can edit and add files to the upload.
+ - Reviewers can only view the contents of the upload (no editing rights).
+
+ **Step 4:** Click on *submit*.
+
+ 
+
+??? task "Make your upload visible to everyone"
+ <img src="images/icon_visible.png" alt="Icon of shared upload" width="30">
+
+ To make your upload visible to everyone on NOMAD, simply check the box in the *Edit visibility and access* section, located under the list of your entries.
+
+ This setting allows all users, including guests without an account, to view the upload even before it is published.
+
+ You can still modify the upload’s access settings and edit its contents while it remains visible.
+
+ 
+??? task "Publish your upload"
+ <img src="images/icon_published.png" alt="Icon of shared upload" width="30">
+
+ !!! warning "Once an upload is published, it cannot be deleted, and the files and entries cannot be changed"
+
+ **Step 1:** Select an embargo period (if needed) from the dropdown menu, located in the *publish* section located at the bottom of the upload page.
+
+ If you would like to publish immediately, select *No embargo*.
+
+ **Step 2:** Click on the **PUBLISH** button.
+
+ **Step 3:** A prompt for confirmation appears on the screen. Click on PUBLISH.
+
+ 
+
+ Having an embargo on your data means:
+
+ - Raw files and entries remain hidden, except to you and users you share the data with.
+ - Some metadata (e.g., chemical formula, system type, spacegroup) will be public.
+ - Embargoed entries can be added to datasets and be assigned DOIs.
+ - The embargo can be lifted earlier than the assigned duration by the user.
+
+ The following image shows an example of an embargoed upload and the option to lift the embargo by clicking the **LIFT EMBARGO** button.
+
+ 
+
+-----------------------
+
+## Add Files to an Upload
+
+Let's start adding files to your NOMAD upload. We will explore three different examples:
+
+1. Miscellaneous Files.
+2. Files of DFT calculation on Iron(III) Oxide.
+3. Files of x-ray photoelectron spectroscopy (XPS) measurement on polymers.
+
+Files can be added to an upload individually, or you can group them into a compressed file in `.zip` or `.tar` formats.
+
+??? info "Different ways and scenarios to upload files to NOMAD"
+ In NOMAD, files can be uploaded in different ways, but whether they are processed into Entries or not depends on their format and NOMAD’s built-in parsers. Here’s how it works:
+
+ **Files that are processed by NOMAD**
+
+ - These are files that are recognized by NOMAD, meaning that **a built-in parser exists** for the file you uploaded, the file will be processed according to a data schemas.
+
+ - It means that NOMAD reads the file, extracts data and organizes them based on the data schema which allows for generating visualizations, and analysis automations.
+
+ - Raw files that are processed in NOMAD become **Entries**
+
+ - This is common for simulation files since they follow standardized structures. Also a variety of experimental data organized in NeXus format `.nxs` are recognized by NOMAD.
+
+ **Files that are not processed by NOMAD**
+
+ - These are files that **do not have a built-in parser**, meaning NOMAD cannot automatically extract and structure their data.
+
+ - They are still stored in NOMAD as part of your upload, and can be downloaded or shared, but they do not become entries in the database.
+
+ - NOMAD allows you to preview common file formats that are not automatically parsed. This means you can view the contents of the file directly within the platform without having to download it. Examples include: `.txt`, `.csv`, `.pdf`, `.png`, `.jpg`.
+
+### Uploading Miscellaneous Files
+
+??? example "Download the example files for this exercise"
+ We have prepared a set of files for this task that can be downloaded from this [link](https://github.com/FAIRmat-NFDI/FAIRmat-tutorial-16/raw/refs/heads/main/tutorial_16_materials/part_3_files/example_files_upload/miscellaneous_data/miscellaneous_data.zip).
+
+ Download the folder, then uncompress it on your local machine at you preferred directory.
+
+ The folder contains files of the following formats: `.zip`, `.pdf`, `.jpg`, `.txt`, and `.csv`.
+
+ | file name | format | description |
+ |--------------------------------|--------|-----------------------------------------------------------------------------|
+ | FAIRmat_graphics | .zip | Compressed file that contains several FAIRmat logos in `.png` format |
+ | JOSS_2023 | .pdf | A publication of NOMAD in the Journal of Open Source Software |
+ | Nature_2022 | .pdf | A publication of FAIRmat in Nature journal |
+ | P3HT_optical_absorption | .csv | Results of absorption measurement on P3HT from PerkinElmer spectrometer |
+ | note_properties_of_good_dopants| .txt | Notes recorded during a conference talk |
+ | experiment_polymer_doping | .jpg | A photograph of an experiment of preparing doped polymer solutions |
+
+
+
+Note that these files will not create entries in NOMAD, because a built-in parser for them doesn't exist.
+
+They will be stored in your upload and can be accessed and shared with your colleagues, however, they will not be searchable within NOMAD. In this case, NOMAD functions as a storage system, similar to a cloud drive.
+
+You can add these files to your NOMAD upload. Do so by simply drag and drop the file or by opening the dialog to browse the files in your device.
+
+??? task "Uploading images, pdf files, text files, and tabular data"
+ **Drag and drop**
+
+ Start with uploading the file `FAIRmat_graphics.zip`. Let's use the drag and drop method as shown in the animation below.
+
+ 
+
+ When a compressed file is uploaded to NOMAD, it will be extracted automatically and the included files will be added to your upload.
+
+ **Open the file browser dialog**
+
+ Upload the remaining files using the file browser dialog as shown in the animation below.
+
+ 
+
+
+### Uploading Computations Data
+
+??? example "Download the example files for this exercise"
+ We have prepared a set of files for this task that can be downloaded from this [link](https://github.com/FAIRmat-NFDI/FAIRmat-tutorial-16/raw/refs/heads/main/tutorial_16_materials/part_3_files/example_files_upload/computations_data/FHI-aims.zip).
+
+ Download the folder to your local machine at you preferred directory.
+
+ This folder contains the input and output files of a DFT calculation for Iron(III) Oxide using the *FHI-aims* code.
+
+ FHI-aims* an all-electron density-functional-theory package that employs numeric atom-centered basis functions. It is designed for accurate and efficient simulations of molecules, clusters, surfaces, and bulk materials across the periodic table. Its advanced treatment of electronic structure allows for precise calculations of material properties, including band structures, total energies, and magnetic properties. [More information in this link](https://fhi-aims.org/)
+
+
+The calculations in this example were preformed using a code that is supported by NOMAD, i.e. the *FHI-aims* code.
+
+NOMAD has a parser for the *FHI-aims* code. This means it will create an **entry** for these data.
+
+In other words, NOMAD will read the input and output files and provide all information in NOMAD's unified *metainfo* data schema.
+
+??? task "Uploading input and output files `.zip` of a DFT calculation"
+
+ **Uploading the files**
+
+ Start with uploading the file `FHI-aims.zip`. Let's use the drag and drop method as shown in the animation below.
+
+ 
+
+ After uploading files, processing is automatically triggered. This involves identifying supported file formats in NOMAD and extracting relevant (meta)data. The exact processing steps depend on the use case.
+ For example, you can learn more about the [processing of computational data on this link](https://nomad-lab.eu/prod/v1/docs/examples/computational_data/uploading.html#processing-of-computational-data).
+
+ Once processing is complete, NOMAD generates an entry page that presents the data in a structured, hierarchical format based on the NOMAD *metainfo* schema.
+
+ **Opening and exploring your entry**
+
+ To go to the entry page, click on the <img src="images/go_to_icon.png" alt="Go to arrow Icon" width="15"> icon next to the entry. Here you can view the metadata and useful visualization of your data, check the uploaded files, and explore your entry in details.
+
+ - **OVERVIEW** tab:
+
+ 1- On the left, core metadata are displayed.
+
+ 2- On the right, various cards present the available information.
+
+ <img src="images/example_3-2_overview.png" alt="screenshot of the overview page" width="800">
+
+ The cards you see depend on the properties or data available for that entry.
+
+ For *FHI-aims* files, three main cards appear in the overview page:
+
+ - *Materials* card: shows key information and visulization of the composition and conventional cell.
+ <img src="images/example_3-2_materials_card.png" alt="screenshot of electronic properties card" width="250">
+
+ - *Electronic properties* card: shows the calculated band structure, density of states, and Brillouin zone.
+ <img src="images/example_3-2_electronic_properties_card.png" alt="screenshot of materials card" width="250">
+
+ - *Workflow Graph* card: illustrates the various steps in the calculation, including their inputs and outputs.
+ <img src="images/example_3-2_workflow_card.png" alt="screenshot of workflow card" width="250">
+
+ - **FILES** tab:
+
+ This tab shows the uploaded files. NOMAD lists all files in the same directory, as they usually belong together.
+
+ 
+
+ - **DATA** tab:
+
+ Also known as the "processed data" tab, this shows the results of the parsing and normalization process done by NOMAD.
+
+ NOMAD puts all the data in a unified, hierarchical, and machine-processable format, following the NOMAD metainfo.
+
+ 
+
+### Uploading Experimental Data
+
+??? example "Download the example files for this exercise"
+ We have prepared a set of files for this task that can be downloaded from this [link](https://github.com/FAIRmat-NFDI/FAIRmat-tutorial-16/raw/refs/heads/main/tutorial_16_materials/part_3_files/example_files_upload/experiments_data/xps_nexus_data.zip).
+
+ Download the folder, then uncompress it to your local machine at you preferred directory.
+
+ This folder contains files related to an x-ray photoelectron spectroscopy (XPS) on the polymer PBTTT using SPECS spectrometer.
+
+ It includes the data in two formats (`.nxs` and `.xml`), in addtion to an electronic lab notebook (ELN) file (`.yaml`) documenting additional details of the experiment.
+
+ | file name | format | description |
+ |-----------------------|--------|------------------------------------------------------------------|
+ | PBTTT_XPS_SPECS | .nxs | XPS data file in the standard NeXuS file format |
+ | PBTTT_XPS_SPECS_raw | .xml | XPS data in a raw file format as produced by the spectrometer |
+ | ELN_data_xml | .yaml | An ELN file used to record additional metadata of the experiment |
+
+
+NOMAD supports experimental data files in the `.nxs` format.
+
+These files can be uploaded directly to NOMAD, where they are processed, and structured **Entries** are created.
+
+??? task "Uploading experimental data in the `.nxs` format"
+
+ **Uploading the file**
+
+ Start with uploading the file `PBTTT_XPS_SPECS.nxs`. Let's use the drag and drop method as shown in the animation below.
+
+ 
+
+ After uploading files, processing is automatically triggered. This involves identifying supported file formats in NOMAD and extracting relevant (meta)data. The exact processing steps depend on the use case.
+
+ Once processing is complete, NOMAD generates an entry page that presents the data in a structured, hierarchical format based on the NOMAD *metainfo* schema.
+
+ **Opening and exploring the entry**
+
+ Click on the <img src="images/go_to_icon.png" alt="Go to arrow Icon" width="15"> icon next to an entry navigates you to the respective entry page.
+
+ Here you can view the metadata and useful visualization of your data, check the uploaded files, and explore your entry in details.
+
+ - **OVERVIEW Tab:**
+
+ 1- On the left, core metadata are displayed.
+
+ 2- On the right, various cards present the available information.
+
+ The cards you see depend on the properties or data available for that entry.
+
+ For `.nxs` files, two main cards appear in the overview page: the data viewer and the materials card.
+
+ 
+
+ - **FILES Tab:**
+
+ This tab shows the uploaded files. NOMAD lists all files in the same directory, as they usually belong together.
+
+ - **DATA Tab:**
+
+ Also known as the "processed data" tab, this shows the results of the parsing and normalization process done by NOMAD.
+
+ NOMAD puts all the data in a unified, hierarchical, and machine-processable format, following the NOMAD metainfo.
+
+ 
+
+
+Most scientific instruments generate experimental results in formats other than `.nxs`. NOMAD still supports these files by providing a conversion process using the *NexusDataConverter* built-in schema, which transforms raw data into the `.nxs` format.
+
+??? info "NexusDataConverter readers and the NeXuS application definitions"
+ **A Reader** is a program designed to interpret and extract data from a specific experimental technique or file format.
+
+ The reader understands the structure and encoding of the particular data format and provides methods for accessing its contents in a programmatically friendly way.
+ It acts as a bridge between raw experimental data and NOMAD by converting the data into the structured file format according to domain-specific application definitions.
+
+ A list of available readers can be found [here](https://fairmat-nfdi.github.io/pynxtools/reference/plugins.html)
+
+ **A NeXus application definition** provides a structured specification of the terms and metadata required in an `.nxs` data file for a particular scientific application. These definitions outline the minimum set of terms that must be included in the data file for it to be considered valid according to the NeXus format.
+
+ A list of NeXuS application definitions developed by FAIRmat can be found [here](https://fairmat-nfdi.github.io/nexus_definitions/)
+
+ NexusDataConverter uses **readers** to interpret the raw data files, and then structures them according to the outlines of the **application definitions**
+
+In the following examples, you will learn how to upload a raw file from a SPECS instrument in `.xml` format by using the *NexusDataConverter*. You will do this in two ways:
+
+1. Uploading only the raw file.
+2. Uploading both the raw file and an ELN file, enriching your data with metadata and ensuring compliance with community standards.
+
+??? task "Uploading experimental data in the `.xml` format"
+
+ **Step 1:** Click on the **CREATE FROM SCHEMA** button in your upload page.
+ 
+
+ **Step 2:** In the *create new entry from schema* window, click on the drop-down menu of the built-in schema, and select *NexusDataConverter*
+
+ **Step 3:** Give a descriptive name for the entry.
+
+ **Step 4:** Click on CREATE. This will take you the NexusDataConverter entry page.
+
+ 
+
+ **Step 5:** From the reader drop-down menu, choose the appropriate reader for your files. For this exercise select *xps*.
+
+ **Step 6:** From the nxdl drop-down menu, choose the appropriate application definition for your experiment. For this exercise select *NXxps*
+
+ **Step 7:** Upload the raw data file `PBTTT_XPS_SPECS_raw.xml`.
+
+ **Step 8:** Give a descriptive name for the generated `.nxs` file.
+
+ **Step 9:** Click on the save icon to start the conversion process.
+
+ 
+
+ Check the overview page of your upload. There you will find two newly created entries; one for the NexusDataConverter and one for the generated `.nxs` file from your raw file.
+
+ NOMAD still stores your `.xml` raw file in the upload directory.
+
+ 
+
+
+??? task "Uploading experimental data in the `.xml` format with additional ELN data"
+
+ Often, raw files generated by instruments from various vendors lack complete metadata and essential details about the experiment.
+
+ To address this, scientists document all experimental details in an Electronic Lab Notebook (ELN). Combining data from raw files with information from ELNs ensures that experiments are comprehensively described with rich metadata and conform to community standards.
+
+ NOMAD’s *NexusDataConverter* allows you to merge experimental raw data files with ELN entries in `.yaml` format, producing `.nxs` files that meet community standards and ensure your data are richly-described.
+
+ The ELN `.yaml` file can be generated by various ELN software tools or created manually using a text editor.
+
+ For each supported experimental raw file format, FAIRmat provides a template ELN `.yaml` file containing all necessary attributes and parameters to complement the raw file’s data. These templates can be found [here](https://github.com/FAIRmat-NFDI/pynxtools-xps/tree/a2e9524ae8479ffa9cde79daf2010161d8ae75c3/examples)
+
+ While these files can be edited with any text editor, we recommend using **VS Code** for an optimized editing experience.
+
+ **Open the `eln_data_xml.yaml` file and edit its contents**
+
+ - Modify the start_time and end_time of your experiment.
+ - Write your information in the `users` section.
+ - Explore the other fields available in the ELN file.
+ - Save the file.
+
+ 
+
+ **Upload your data file `.xml` and your ELN data `.yaml` using NexusDataConverter**
+
+ - **Step 1:** Click on the **CREATE FROM SCHEMA** button in your upload page.
+
+ 
+
+ - **Step 2:** In the *create new entry from schema* window, click on the drop-down menu of the built-in schema, and select *NexusDataConverter*
+
+ - **Step 3:** Give a descriptive name for the entry.
+
+ - **Step 4:** Click on CREATE. This will take you the NexusDataConverter entry page.
+
+ 
+
+ - **Step 5:** From the reader drop-down menu, choose the approperiate reader for your files. For this exercise select *xps*.
+
+ - **Step 6:** From the nxdl drop-down menu, choose the approperiate application definition for your experiment. For this exercise select *NXxps*
+
+ - **Step 7:** Upload the raw data file `PBTTT_XPS_SPECS_raw.xml` as well as the ELN data file `eln_data_xml.yaml`.
+
+ - **Step 8:** Give a descriptive name for the generated `.nxs` file.
+
+ - **Step 9:** Click on the save icon to start the conversion process.
+
+ .png)
+
+----------------
+
+## Create Datasets and Get a DOI
+
+You can organize several entries by grouping them into common datasets, making it easier to manage related data.
+Datasets are for organizing and referencing curated data. They do not affect how data is processed.
+Users can get a DOI for their datasets.
+
+### Group Entries into a Dataset
+
+**Step 1:** In the uploads page, click on **EDIT AUTHOR METADATA OF ALL ENTRIES** button. This will add all the Entries in the upload to the dataset.
+
+
+
+Alternatively, if you would like to add selected entries from your Upload, click on the check box next to the entries you would like to add, then click on <img src="images/change_name_icon.png" alt="Change Name Icon" width="20"> to open the EDIT AUTHOR METADATA window for the selected entries only.
+
+
+
+**Step 2:** In the Datasets section, you have two options:
+
+- Create a new dataset: If the dataset you want to group your entries under doesn't exist yet, you can create one here.
+- Search for an existing dataset: If the dataset already exists, you can search for it by name or other attributes.
+
+**Step 3:** Once you've selected or created the appropriate dataset, click **ADD ENTRY TO NEW DATASET**
+
+**Step 4:** Click on SUBMIT to to group your entries under that dataset.
+
+
+
+### Manage a Dataset and Assign it a DOI
+
+User created datasets exist in the “Your datasets†page page. You can reach there by clicking on **Datasets** in the **PUBLISH** menu. Here you can view a list of all your created datasets with their relevant information and assign them a DOI.
+
+!!! warning "Assigning a DOI makes the dataset permanent—it cannot be modified or deleted."
+ If you want to test the process without actually publishing the data, you can do so in the [NOMAD test installation](https://nomad-lab.eu/prod/v1/test/gui/about/information).
+
+Follow these steps to explore and manage your datasets (click on the arrows to navigate between steps):
+
+<div class="image-slider" id="slider2">
+ <div class="nav-arrow left" id="prev2">â†</div>
+ <img src="images/dataset_1.png" alt="screenshot of navigating to datasets" class="active">
+ <img src="images/dataset_2.png" alt="screenshot of the dataset page">
+ <img src="images/dataset_3.png" alt="Go to dataset page and review entries ">
+ <div class="nav-arrow right" id="next2">→</div>
+</div>
+
+To publish your datasets and assign them a DOI, follow these steps (click on the arrows to navigate between steps):
+
+<div class="image-slider" id="slider3">
+ <div class="nav-arrow left" id="prev3">â†</div>
+ <img src="images/dataset_4.png" alt="screenshot of navigating to datasets" class="active">
+ <img src="images/dataset_5.png" alt="screenshot of the dataset page">
+ <img src="images/dataset_6.png" alt="Go to dataset page and review entries ">
+ <div class="nav-arrow right" id="next3">→</div>
+</div>
+
+--------------
\ No newline at end of file
diff --git a/docs/writing_guide.md b/docs/writing_guide.md
index 976b30ae071d2104d226b7a5a8f070d219288490..4ba412b146ed64425ac14715deca85e0bba3d26e 100644
--- a/docs/writing_guide.md
+++ b/docs/writing_guide.md
@@ -24,4 +24,25 @@ Here is a list of currently used admonitions within the docs:
- !!! tip
-- !!! tip "Important"
\ No newline at end of file
+- !!! tip "Important"
+
+<!-- the following three were added in the preparation in the tutorials pages -->
+- !!! info
+- !!! task
+- !!! example
+
+## Adding image sliders
+Image sliders can be added using the following syntax:
+
+```html
+<div class="image-slider" id="slider#*">
+ <div class="nav-arrow left" id="prev#">â†</div>
+ <img src="" alt="" class="active">
+ <img src="" alt="">
+ <img src="" alt="">
+ <div class="nav-arrow right" id="next#">→</div>
+</div>
+```
+To minimize flickering effect during transitions, make all the sliding images of the same size. <!-- we may need to fix this issue from Java or CSS at some point -->
+
+If you use more than one slider on the same page, make sure to give them different id. The same applies for the navigation arrows.
diff --git a/mkdocs.yml b/mkdocs.yml
index f48d5876f037d359e0985a85d1053f94c7c63cee..2e5a877977d13ec2425b9ecc19ca93f09ba9eb69 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -7,9 +7,10 @@ edit_uri: ""
nav:
- Home: index.md
- Tutorial:
- - Navigating to NOMAD: tutorial/nomad_repo.md
- - Uploading and publishing data: tutorial/upload_publish.md
+ - Overview: tutorial/overview.md
- Exploring data: tutorial/explore.md
+ - Uploading and publishing data: tutorial/upload_publish.md
+ - Using NOMAD as an ELN: tutorial/NOMAD_ELN.md
- Access data via API: tutorial/access_api.md
- Schemas and plugins: tutorial/custom.md
- Developing a NOMAD plugin: tutorial/develop_plugin.md