diff --git a/docs/GETTING STARTED/CitationPermission.md b/docs/GETTING STARTED/CitationPermission.md
new file mode 100644
index 0000000000000000000000000000000000000000..6a3ec4db0ae07b88c2217fc94ffd2007876b3c7e
--- /dev/null
+++ b/docs/GETTING STARTED/CitationPermission.md	
@@ -0,0 +1,8 @@
+# Citations
+To cite NIRS Workflow in any manuscript, report, presentation, etc., the general format can be used:
+
+
+# Permissions
+Nirs Workflow is an open-source app, therefore, users should feel free to take screenshots and use results whenever they want without the need for developers’ consent.
+
+
diff --git a/docs/GETTING STARTED/DataImport.md b/docs/GETTING STARTED/DataImport.md
new file mode 100644
index 0000000000000000000000000000000000000000..c7546947e9184f25e115dca8165a8a0cb09f9c85
--- /dev/null
+++ b/docs/GETTING STARTED/DataImport.md	
@@ -0,0 +1,25 @@
+### Data Types
+Currently, NIRS Workflow supports two file formats: CSV and JCAMP-DX.  The CSV format is commonly used for storing tabular data, whereas JCAMP-DX is a standard format for transmitting spectral data.
+
+### Data description
+Data files must contain quantitative data that will be analyzed. However, extra Categorical Data are also permitted.
+
+### Data structure
+
+For CSV files, the data should be organized in a 2D table, with rows representing individual records or observations and columns represent specific variables or features, with unique headers describing the data (e.g., "Concentration," "Temperature").
+
+For JCAMP-DX, the data is organized in predefined structure that is accurately parsed by our app.
+
+### Importing Data
+To import your data, click the "Import Data" button or drag and drop your data onto the upper right side of the screen.
+- If your file is in CSV format, you must adjust the dialect parameters (decimal, separator...).
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/csv.webm" type="video/webm">
+</video>
+
+
+- If your file is in JCAMP-DX format, there are no settings to tune.
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/dx.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/DataVisualization.md b/docs/GETTING STARTED/DataVisualization.md
new file mode 100644
index 0000000000000000000000000000000000000000..439b25ba329b6b697b463d9ba7c9922651e5e8c7
--- /dev/null
+++ b/docs/GETTING STARTED/DataVisualization.md	
@@ -0,0 +1,5 @@
+If you data is approperly loaded to the app, it will be automatically visualized.
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/DataVisualization.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/EDA.md b/docs/GETTING STARTED/EDA.md
new file mode 100644
index 0000000000000000000000000000000000000000..4908d71df32fb3bb5d065ec58c58b51c7705bc1a
--- /dev/null
+++ b/docs/GETTING STARTED/EDA.md	
@@ -0,0 +1,5 @@
+To explore differences and similarities between your spectra (high dimensional data), a set of dimensionality reduction and clustering methods are provided by the application.
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/EDA.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/Initial webpage load.md b/docs/GETTING STARTED/Initial webpage load.md
new file mode 100644
index 0000000000000000000000000000000000000000..d34e4b94d4fefdf80fa7fe5b5f11124884936891
--- /dev/null
+++ b/docs/GETTING STARTED/Initial webpage load.md	
@@ -0,0 +1,7 @@
+<p style='text-align: justify;'>
+During the initial webpage load, you will see a vertical navigation menu and a radio button for Interface selection (simple or advanced) on the left of your screen. The navigation menu consists of different tabs labeled with a descriptive title (Home, Inputs, Sample Selection, Model Creation & Predictions), guiding users to relevant content. The elements in the navigation menu are also placed near the bottom of the page as buttons.
+</p>
+
+<img src="/GETTING STARTED/figs/Home.PNG"
+     alt="Markdown Monster icon"
+     style="float: left; margin-right: 10px;" />
diff --git a/docs/GETTING STARTED/Input.md b/docs/GETTING STARTED/Input.md
new file mode 100644
index 0000000000000000000000000000000000000000..2f6a0b75b3b21c6ef1870fdf6cef4e7cecde0c1f
--- /dev/null
+++ b/docs/GETTING STARTED/Input.md	
@@ -0,0 +1,6 @@
+
+To complete the form prior to data analysis, you can easily follow this straightforward video.
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/input.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/ModelCreation.md b/docs/GETTING STARTED/ModelCreation.md
new file mode 100644
index 0000000000000000000000000000000000000000..dd91b01ba844ca72077cf9420c57e09226549f2e
--- /dev/null
+++ b/docs/GETTING STARTED/ModelCreation.md	
@@ -0,0 +1,5 @@
+
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/ModelCreation.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/PredictionMaking.md b/docs/GETTING STARTED/PredictionMaking.md
new file mode 100644
index 0000000000000000000000000000000000000000..74d20654abc5070104060d1b187cc15534bea45c
--- /dev/null
+++ b/docs/GETTING STARTED/PredictionMaking.md	
@@ -0,0 +1,9 @@
+To make predicitons on the app, two conditions must be met:
+- condition 1: You had developed your calibration using this app and downloaded the zip file containing the results.
+- condition 2: The data based on which you want to generate predictions must has the same structure as of that used for calibration development or model creation.
+
+After ensuring that both conditions are met, you can easily generate your predictions by feeding the zip file and the data based on which you want to generate predictions to the app, and follow the instructions on the app (see the video bellow).
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/Prediction.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/Reporting.md b/docs/GETTING STARTED/Reporting.md
new file mode 100644
index 0000000000000000000000000000000000000000..48a4f4b97eb1d407de345a348aa57bb441bcd9ea
--- /dev/null
+++ b/docs/GETTING STARTED/Reporting.md	
@@ -0,0 +1,5 @@
+When you finish the data analysis, you can download a zipfile containing your data, results, figures, and a report outlining what methods you used to analyze your data.
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/Reporting.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/SamplesSelection.md b/docs/GETTING STARTED/SamplesSelection.md
new file mode 100644
index 0000000000000000000000000000000000000000..5bd6a4233178feee2e8333ad371a2ded96127dd2
--- /dev/null
+++ b/docs/GETTING STARTED/SamplesSelection.md	
@@ -0,0 +1,8 @@
+
+To select a subset of spectra(sample) that best represents the entire set of spectra (population), two distinct methods are proposed by the app:
+- method 1: Perform dimensionality reduction followed by subset selection (see the video).
+- method 2: Perform dimensionality reduction, followed by clustering, then subset selection.
+
+<video width="100%" controls>
+    <source src="/GETTING STARTED/screencasts/SamplesSelection.webm" type="video/webm">
+</video>
\ No newline at end of file
diff --git a/docs/GETTING STARTED/Simple or advanced interface.md b/docs/GETTING STARTED/Simple or advanced interface.md
new file mode 100644
index 0000000000000000000000000000000000000000..4dbd5391ada7c7c56402ce7bc1958029d8f0c090
--- /dev/null
+++ b/docs/GETTING STARTED/Simple or advanced interface.md	
@@ -0,0 +1,8 @@
+<p style='text-align: justify;'>
+for Interface selection, the 'simple' option allows you to work on more automatized interface, with a limited number of algorithms and features. With this option, the user is not to set or select the algorithms or parameters to use for processing his data, as they are already preset by developers and cannot be modified. Conversly, with the "advanced" option, more algorithms, features, and flexibility is offered to the user. Opting between "simple" and "advanced" depends mainly on the user expertise level.
+
+NB: Notice that when switching from "simple" to "advanced", the "Model Creation & Predictions" tab in the navigation menu collapses into two separate tabs, "Model Creation" and "Predictions". Practically, the features of "Model Creation & Predictions" tab are dispatched between the two new tabs.
+</p>
+
+<img src="/GETTING STARTED/figs/SimpleAdvanced.PNG"
+     style="float: center" />
diff --git a/docs/GETTING STARTED/Tabs.md b/docs/GETTING STARTED/Tabs.md
new file mode 100644
index 0000000000000000000000000000000000000000..fd9de22031431975d02fccfc6e6c279ff9ea8489
--- /dev/null
+++ b/docs/GETTING STARTED/Tabs.md	
@@ -0,0 +1,28 @@
+#### - Inputs
+<p style='text-align: justify;'>
+When you open the "Inputs" tab, you will see a form that must be carefully filled out and saved prior to data analysis. It consists of questions about the data you want to analyse.
+</p>
+<img src="/GETTING STARTED/figs/Inputs.PNG"
+     style="float: center" />
+
+
+#### - Sample Selection
+<p style='text-align: justify;'>
+When you open the "Sample Selection" tab, you will see a graphical abstract on the left that resumes the tasks that this tab is designed for and data loader to the right where you are supposed to load your the spectral data that you would like to analyze. Additionally, you will see the name of the those tasks under the graphical abstract. Once the data is imported/loaded correctly, the content of these tasks will get unfolded sequentially.
+</p>
+<img src="/GETTING STARTED/figs/SamplesSelection.PNG"
+     style="float: center" />
+
+#### - Model Creation
+<p style='text-align: justify;'>
+When you open the "Model Creation" tab, you will see a graphical abstract on the left that resumes the tasks that this tab is designed for and data loader to the right where you are supposed to load your the spectral data and your target data that you would like to use to develop a NIR calibration.
+</p>
+<img src="/GETTING STARTED/figs/ModelCreation.PNG"
+     style="float: center" />
+
+#### - Predictions
+<p style='text-align: justify;'>
+When you open the "Predictions" tab, you will see a graphical abstract on the left that resumes the tasks that this tab is designed for and data loader to the right where you are supposed to load a zipfile downloaded from the "Model Creation" tab and your the spectral data that you want to feed to the developed calibration to estimate the correspondig target values.
+</p>
+<img src="/GETTING STARTED/figs/Predictions.PNG"
+     style="float: center" />
diff --git a/docs/GETTING STARTED/figs/Home.PNG b/docs/GETTING STARTED/figs/Home.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..61c239b72c83108bb501b406479e36a04d74e312
Binary files /dev/null and b/docs/GETTING STARTED/figs/Home.PNG differ
diff --git a/docs/GETTING STARTED/figs/Inputs.PNG b/docs/GETTING STARTED/figs/Inputs.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..a10b6279b5fa04590d4caa1a755bd76aa6fcc17d
Binary files /dev/null and b/docs/GETTING STARTED/figs/Inputs.PNG differ
diff --git a/docs/GETTING STARTED/figs/ModelCreation.PNG b/docs/GETTING STARTED/figs/ModelCreation.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..4b2788dba37f2a6a7a5af7b0131ff8e9086c1f04
Binary files /dev/null and b/docs/GETTING STARTED/figs/ModelCreation.PNG differ
diff --git a/docs/GETTING STARTED/figs/Predictions.PNG b/docs/GETTING STARTED/figs/Predictions.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..d9e86ee92370dd0b2c556b99d3d8eead4bdd5013
Binary files /dev/null and b/docs/GETTING STARTED/figs/Predictions.PNG differ
diff --git a/docs/GETTING STARTED/figs/SamplesSelection.PNG b/docs/GETTING STARTED/figs/SamplesSelection.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..3129f22e4c41edcc95939c699f2b5e6ec10a690d
Binary files /dev/null and b/docs/GETTING STARTED/figs/SamplesSelection.PNG differ
diff --git a/docs/GETTING STARTED/figs/SimpleAdvanced.png b/docs/GETTING STARTED/figs/SimpleAdvanced.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d62ff89e196e7063ae28567664884104ce2cf6d
Binary files /dev/null and b/docs/GETTING STARTED/figs/SimpleAdvanced.png differ
diff --git a/docs/GETTING STARTED/figs/input.gif b/docs/GETTING STARTED/figs/input.gif
new file mode 100644
index 0000000000000000000000000000000000000000..837d8ae4d1f60aff3f7d6cc96050805f8e307817
Binary files /dev/null and b/docs/GETTING STARTED/figs/input.gif differ
diff --git a/docs/PredictionMaking.md b/docs/PredictionMaking.md
deleted file mode 100644
index f301f29853d322dbda8b1a48d7f1bd8a5003d2d4..0000000000000000000000000000000000000000
--- a/docs/PredictionMaking.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Prediction making
-
-## This section uses the result files obtained from model creation step, and makes prediction on new set of data 
\ No newline at end of file
diff --git a/docs/ClusteringAnalysis.md b/docs/RESOURCES/ClusteringAnalysis.md
similarity index 100%
rename from docs/ClusteringAnalysis.md
rename to docs/RESOURCES/ClusteringAnalysis.md
diff --git a/docs/DimensionalityReduction.md b/docs/RESOURCES/DimensionalityReduction.md
similarity index 100%
rename from docs/DimensionalityReduction.md
rename to docs/RESOURCES/DimensionalityReduction.md
diff --git a/src/report/results/.gitkeep b/docs/RESOURCES/Frameworks and algorithms.md
similarity index 100%
rename from src/report/results/.gitkeep
rename to docs/RESOURCES/Frameworks and algorithms.md
diff --git a/docs/ModelCreation.md b/docs/RESOURCES/ModelCreation.md
similarity index 100%
rename from docs/ModelCreation.md
rename to docs/RESOURCES/ModelCreation.md
diff --git a/docs/RESOURCES/References.md b/docs/RESOURCES/References.md
new file mode 100644
index 0000000000000000000000000000000000000000..bb45dc0e957bdfd900151d7583c702ce5fc4f973
--- /dev/null
+++ b/docs/RESOURCES/References.md
@@ -0,0 +1 @@
+Resources
\ No newline at end of file
diff --git a/docs/RESOURCES/Script.md b/docs/RESOURCES/Script.md
new file mode 100644
index 0000000000000000000000000000000000000000..bb45dc0e957bdfd900151d7583c702ce5fc4f973
--- /dev/null
+++ b/docs/RESOURCES/Script.md
@@ -0,0 +1 @@
+Resources
\ No newline at end of file
diff --git a/docs/Support.md b/docs/Support.md
new file mode 100644
index 0000000000000000000000000000000000000000..bce216c4fe5170eb84f461a803dd3329a08c1800
--- /dev/null
+++ b/docs/Support.md
@@ -0,0 +1,2 @@
+If you encounter any issue whilst using the application or if you have any collaborative idea, don't hesitate to contact us via the following e-mail adress:
+Nicolas.barthes
\ No newline at end of file
diff --git a/docs/USE CASES/DataVisualization.md b/docs/USE CASES/DataVisualization.md
new file mode 100644
index 0000000000000000000000000000000000000000..1f0d0d9e34748aff3290fb9c0110163bfaca8dc0
--- /dev/null
+++ b/docs/USE CASES/DataVisualization.md	
@@ -0,0 +1,3 @@
+With NIRS workflow, you can efficiently visualize your spectra to see their trend.
+
+![Image Alt Text](../figs/DataVisualization.png)
\ No newline at end of file
diff --git a/docs/USE CASES/EDA.md b/docs/USE CASES/EDA.md
new file mode 100644
index 0000000000000000000000000000000000000000..3453925d5ad60761143f2cba67d51c2d4797f8e0
--- /dev/null
+++ b/docs/USE CASES/EDA.md	
@@ -0,0 +1,12 @@
+<p style='text-align: justify;'>
+With NIRS Workflow, you can perform an exploratory data analysis on your spectral data, specifically you can perform dimensionality reduction to concentrate the information provided by spectra on the samples, allowing you to see similarities and differences between samples based on compressed spectra that are visualized in 1D, 2D, or 3D space. 
+</p>
+
+![Image Alt Text](../figs/DimensionalityReduction.png)
+
+
+<p style='text-align: justify;'>
+If you find it difficult to discern similarities and differences between spectra, the app proposes specific Machine Learning methods, specifically clustering methods, to automatically accomplish the task.
+</p>
+
+![Image Alt Text](../figs/Clustering.png)
\ No newline at end of file
diff --git a/docs/USE CASES/ModelCreation.md b/docs/USE CASES/ModelCreation.md
new file mode 100644
index 0000000000000000000000000000000000000000..be8465e3d4ce484184a5bb607f60796f1a75b9a8
--- /dev/null
+++ b/docs/USE CASES/ModelCreation.md	
@@ -0,0 +1,3 @@
+NIRS Workflow features a section that serve for supervised predictive modelling. It enables you to create a predictive model that is supposed to predict your target variable from spectral data.
+
+![Image Alt Text](../figs/PredictiveModeling.png)
\ No newline at end of file
diff --git a/docs/USE CASES/PredictionMaking.md b/docs/USE CASES/PredictionMaking.md
new file mode 100644
index 0000000000000000000000000000000000000000..0064f725c6e9816b02454cd0264a58ee901e2547
--- /dev/null
+++ b/docs/USE CASES/PredictionMaking.md	
@@ -0,0 +1,2 @@
+If you have developed a predictive model on NIRS workflow, it is also possible to make predictions via the Prediction Making feature !!!
+
diff --git a/docs/USE CASES/SamplesSelection.md b/docs/USE CASES/SamplesSelection.md
new file mode 100644
index 0000000000000000000000000000000000000000..636f8a4c5d7cbcadd122fe4139207068da2ff86d
--- /dev/null
+++ b/docs/USE CASES/SamplesSelection.md	
@@ -0,0 +1,3 @@
+If you have a large set of spectra, and want to sample a representative subset to use for any objective. NIRS Workflow features a functionality that can accomplish the task for you.
+
+![Image Alt Text](../figs/Sampling.png)
\ No newline at end of file
diff --git a/docs/USE CASES/figs/Clustering.png b/docs/USE CASES/figs/Clustering.png
new file mode 100644
index 0000000000000000000000000000000000000000..94a751680440addf954ced8d415b54fae28067ec
Binary files /dev/null and b/docs/USE CASES/figs/Clustering.png differ
diff --git a/docs/USE CASES/figs/DataVisualization.PNG b/docs/USE CASES/figs/DataVisualization.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..00b8a6ef1a81269af2f7f12c3f99e178d8f43a75
Binary files /dev/null and b/docs/USE CASES/figs/DataVisualization.PNG differ
diff --git a/docs/USE CASES/figs/DimensionalityReduction.png b/docs/USE CASES/figs/DimensionalityReduction.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7561b591b4f3a845bc393bada38ab9bee9aa101
Binary files /dev/null and b/docs/USE CASES/figs/DimensionalityReduction.png differ
diff --git a/docs/USE CASES/figs/PredictiveModeling.png b/docs/USE CASES/figs/PredictiveModeling.png
new file mode 100644
index 0000000000000000000000000000000000000000..142b7972f4d66224300fbfbca81ecc64dc4f36bb
Binary files /dev/null and b/docs/USE CASES/figs/PredictiveModeling.png differ
diff --git a/docs/USE CASES/figs/Sampling.png b/docs/USE CASES/figs/Sampling.png
new file mode 100644
index 0000000000000000000000000000000000000000..80ba35f6e894b743e3475680388c12854515ae3d
Binary files /dev/null and b/docs/USE CASES/figs/Sampling.png differ
diff --git a/site/Clustering.png b/site/Clustering.png
new file mode 100644
index 0000000000000000000000000000000000000000..94a751680440addf954ced8d415b54fae28067ec
Binary files /dev/null and b/site/Clustering.png differ
diff --git a/site/DimensionalityReduction.png b/site/DimensionalityReduction.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7561b591b4f3a845bc393bada38ab9bee9aa101
Binary files /dev/null and b/site/DimensionalityReduction.png differ
diff --git a/site/GETTING STARTED/Home.PNG b/site/GETTING STARTED/Home.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..61c239b72c83108bb501b406479e36a04d74e312
Binary files /dev/null and b/site/GETTING STARTED/Home.PNG differ
diff --git a/site/GETTING STARTED/Inputs.PNG b/site/GETTING STARTED/Inputs.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..a10b6279b5fa04590d4caa1a755bd76aa6fcc17d
Binary files /dev/null and b/site/GETTING STARTED/Inputs.PNG differ
diff --git a/site/GETTING STARTED/ModelCreation.PNG b/site/GETTING STARTED/ModelCreation.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..4b2788dba37f2a6a7a5af7b0131ff8e9086c1f04
Binary files /dev/null and b/site/GETTING STARTED/ModelCreation.PNG differ
diff --git a/site/GETTING STARTED/Predictions.PNG b/site/GETTING STARTED/Predictions.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..d9e86ee92370dd0b2c556b99d3d8eead4bdd5013
Binary files /dev/null and b/site/GETTING STARTED/Predictions.PNG differ
diff --git a/site/GETTING STARTED/SamplesSelection.PNG b/site/GETTING STARTED/SamplesSelection.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..3129f22e4c41edcc95939c699f2b5e6ec10a690d
Binary files /dev/null and b/site/GETTING STARTED/SamplesSelection.PNG differ
diff --git a/site/GETTING STARTED/SimpleAdvanced.png b/site/GETTING STARTED/SimpleAdvanced.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d62ff89e196e7063ae28567664884104ce2cf6d
Binary files /dev/null and b/site/GETTING STARTED/SimpleAdvanced.png differ