diff --git a/config.json b/config.json
index 4a54592d7..050674186 100644
--- a/config.json
+++ b/config.json
@@ -1,6 +1,10 @@
 {
   "version": "3.36.1",
   "menu": [
+    {
+      "name": "Screenshots",
+      "url": "/screenshots/"
+    },
     {
       "name": "Examples",
       "url": "/examples/"
diff --git a/pages/screenshots/index.tsx b/pages/screenshots/index.tsx
new file mode 100644
index 000000000..c2179fb6a
--- /dev/null
+++ b/pages/screenshots/index.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import styled from "styled-components";
+import { readFileSync } from "fs";
+import matter from "gray-matter";
+import getAllMdFilesInDir from "@utils/getAllMdFilesInDir";
+import Image from "@components/Image/Image";
+import getOptimizedImageAttributes, {
+  ImageProps,
+} from "@utils/images/getOptimizedImageAttributes";
+import path from "path";
+import MainLayout from "@components/UiKit/MainLayout";
+import device from "@styles/utils/breakpoints";
+import ImageGallery from "@components/ImageGallery/ImageGallery";
+import sortByWeight from "@utils/sortByWeight";
+
+interface IScreenshots {
+  title: string;
+  image: ImageProps;
+  thumbnailImage: ImageProps;
+  weight: number;
+}
+
+export async function getStaticProps() {
+  const examplesMdFiles = getAllMdFilesInDir("public/screenshots");
+
+  const screenshots: IScreenshots[] = [];
+
+  for (const file of examplesMdFiles) {
+    const dirInPublic = path.dirname(path.relative("public", file));
+    const mdFile = readFileSync(file, "utf-8");
+    const { data: frontmatter } = matter(mdFile);
+
+    screenshots.push({
+      ...frontmatter,
+      image: getOptimizedImageAttributes(
+        path.join(path.sep, dirInPublic, frontmatter.image),
+      ) as ImageProps,
+      thumbnailImage: getOptimizedImageAttributes(
+        path.join(path.sep, dirInPublic, frontmatter.thumbnailImage),
+      ) as ImageProps,
+    } as IScreenshots);
+  }
+
+  return {
+    props: {
+      screenshots: sortByWeight(screenshots),
+    },
+  };
+}
+
+export default function Examples({
+  screenshots,
+}: {
+  screenshots: IScreenshots[];
+}) {
+  return (
+    <MainLayout title="Screenshots">
+      <ImageGallery selector="[data-gallery]">
+        <StyledListWrapper>
+          {screenshots.map(({ title, image, thumbnailImage }) => (
+            <Item key={title}>
+              <a href={image.src} data-gallery>
+                <Image
+                  key={thumbnailImage.src}
+                  {...thumbnailImage}
+                  alt={title}
+                />
+              </a>
+
+              <h2>{title}</h2>
+            </Item>
+          ))}
+        </StyledListWrapper>
+      </ImageGallery>
+    </MainLayout>
+  );
+}
+
+const StyledListWrapper = styled.ul`
+  display: grid;
+  gap: 62px;
+  grid-template-columns: auto auto auto;
+  padding-top: 30px;
+  border-top: 1px solid ${({ theme }) => theme.borderColor};
+
+  @media ${device.M} {
+    grid-template-columns: auto auto;
+    gap: 48px;
+  }
+
+  @media ${device.XS} {
+    grid-template-columns: auto;
+    gap: 48px;
+  }
+`;
+
+const Item = styled.li`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  h2 {
+    text-align: center;
+    font-weight: 600;
+    margin-top: auto;
+    font-size: 18px;
+
+    @media ${device.M} {
+      font-size: 16px;
+      grid-template-columns: auto auto;
+      gap: 48px;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+`;
+
+const ItemImage = styled.div`
+  flex: 30;
+
+  img {
+    width: 100%;
+  }
+`;
diff --git a/public/screenshots/box-plot.png b/public/screenshots/box-plot.png
new file mode 100644
index 000000000..30f3b2d58
Binary files /dev/null and b/public/screenshots/box-plot.png differ
diff --git a/public/screenshots/box-plot.thumb.png b/public/screenshots/box-plot.thumb.png
new file mode 100644
index 000000000..e916103be
Binary files /dev/null and b/public/screenshots/box-plot.thumb.png differ
diff --git a/public/screenshots/box_plot_displays_basic_statistics.md b/public/screenshots/box_plot_displays_basic_statistics.md
new file mode 100644
index 000000000..b916ecf63
--- /dev/null
+++ b/public/screenshots/box_plot_displays_basic_statistics.md
@@ -0,0 +1,6 @@
+---
+image: "box-plot.png"
+thumbnailImage: "box-plot.thumb.png"
+title: "Box plot displays basic statistics of attributes."
+weight: "60"
+---
diff --git a/public/screenshots/calibration-plot.png b/public/screenshots/calibration-plot.png
new file mode 100644
index 000000000..fb0a4bfdc
Binary files /dev/null and b/public/screenshots/calibration-plot.png differ
diff --git a/public/screenshots/calibration-plot.thumb.png b/public/screenshots/calibration-plot.thumb.png
new file mode 100644
index 000000000..75846d5a4
Binary files /dev/null and b/public/screenshots/calibration-plot.thumb.png differ
diff --git a/public/screenshots/cn2.png b/public/screenshots/cn2.png
new file mode 100644
index 000000000..6e66d024d
Binary files /dev/null and b/public/screenshots/cn2.png differ
diff --git a/public/screenshots/cn2.thumb.png b/public/screenshots/cn2.thumb.png
new file mode 100644
index 000000000..661f7785a
Binary files /dev/null and b/public/screenshots/cn2.thumb.png differ
diff --git a/public/screenshots/cn2_rule_induction.md b/public/screenshots/cn2_rule_induction.md
new file mode 100644
index 000000000..22f1e960d
--- /dev/null
+++ b/public/screenshots/cn2_rule_induction.md
@@ -0,0 +1,6 @@
+---
+image: "cn2.png"
+thumbnailImage: "cn2.thumb.png"
+title: "CN2 rule induction."
+weight: "250"
+---
diff --git a/public/screenshots/concatenate.png b/public/screenshots/concatenate.png
new file mode 100644
index 000000000..07c0be652
Binary files /dev/null and b/public/screenshots/concatenate.png differ
diff --git a/public/screenshots/concatenate.thumb.png b/public/screenshots/concatenate.thumb.png
new file mode 100644
index 000000000..b358d04c9
Binary files /dev/null and b/public/screenshots/concatenate.thumb.png differ
diff --git a/public/screenshots/cross_validated_calibration_plot.md b/public/screenshots/cross_validated_calibration_plot.md
new file mode 100644
index 000000000..9c16458ae
--- /dev/null
+++ b/public/screenshots/cross_validated_calibration_plot.md
@@ -0,0 +1,6 @@
+---
+image: "calibration-plot.png"
+thumbnailImage: "calibration-plot.thumb.png"
+title: "Cross-validated calibration plot."
+weight: "160"
+---
diff --git a/public/screenshots/cross_validation_and_scoring_of_classifiers.md b/public/screenshots/cross_validation_and_scoring_of_classifiers.md
new file mode 100644
index 000000000..017df5f37
--- /dev/null
+++ b/public/screenshots/cross_validation_and_scoring_of_classifiers.md
@@ -0,0 +1,6 @@
+---
+image: "evaluation.png"
+thumbnailImage: "evaluation.thumb.png"
+title: "Cross-validated calibration plot."
+weight: "200"
+---
diff --git a/public/screenshots/data_can_contain_references_to_images.md b/public/screenshots/data_can_contain_references_to_images.md
new file mode 100644
index 000000000..ae5f6b5fe
--- /dev/null
+++ b/public/screenshots/data_can_contain_references_to_images.md
@@ -0,0 +1,6 @@
+---
+image: "image-viewer.png"
+thumbnailImage: "image-viewer.thumb.png"
+title: "Data can contain references to images."
+weight: "100"
+---
diff --git a/public/screenshots/data_preprocessing_embedded_within.md b/public/screenshots/data_preprocessing_embedded_within.md
new file mode 100644
index 000000000..e7813a8f6
--- /dev/null
+++ b/public/screenshots/data_preprocessing_embedded_within.md
@@ -0,0 +1,6 @@
+---
+image: "pca-evaluation.png"
+thumbnailImage: "pca-evaluation.thumb.png"
+title: "Data preprocessing embedded within a learning algorithm."
+weight: "170"
+---
diff --git a/public/screenshots/data_selection_in_scatter_plot.md b/public/screenshots/data_selection_in_scatter_plot.md
new file mode 100644
index 000000000..605069d19
--- /dev/null
+++ b/public/screenshots/data_selection_in_scatter_plot.md
@@ -0,0 +1,6 @@
+---
+image: "explorative-analysis.png"
+thumbnailImage: "explorative-analysis.thumb.png"
+title: "Data selection in Scatter Plot is visualised in a Box Plot."
+weight: "30"
+---
diff --git a/public/screenshots/evaluation.png b/public/screenshots/evaluation.png
new file mode 100644
index 000000000..d23af6bf2
Binary files /dev/null and b/public/screenshots/evaluation.png differ
diff --git a/public/screenshots/evaluation.thumb.png b/public/screenshots/evaluation.thumb.png
new file mode 100644
index 000000000..b604a2510
Binary files /dev/null and b/public/screenshots/evaluation.thumb.png differ
diff --git a/public/screenshots/explorative-analysis.png b/public/screenshots/explorative-analysis.png
new file mode 100644
index 000000000..6e2132bf9
Binary files /dev/null and b/public/screenshots/explorative-analysis.png differ
diff --git a/public/screenshots/explorative-analysis.thumb.png b/public/screenshots/explorative-analysis.thumb.png
new file mode 100644
index 000000000..e878f2a50
Binary files /dev/null and b/public/screenshots/explorative-analysis.thumb.png differ
diff --git a/public/screenshots/explorative_analysis_with_classification.md b/public/screenshots/explorative_analysis_with_classification.md
new file mode 100644
index 000000000..d54c75318
--- /dev/null
+++ b/public/screenshots/explorative_analysis_with_classification.md
@@ -0,0 +1,6 @@
+---
+image: "tree-explorative.png"
+thumbnailImage: "tree-explorative.thumb.png"
+title: "Explorative analysis with classification trees."
+weight: "90"
+---
diff --git a/public/screenshots/feature_scoring_for_finding_interesting.md b/public/screenshots/feature_scoring_for_finding_interesting.md
new file mode 100644
index 000000000..684ba259e
--- /dev/null
+++ b/public/screenshots/feature_scoring_for_finding_interesting.md
@@ -0,0 +1,6 @@
+---
+image: "rank.png"
+thumbnailImage: "rank.thumb.png"
+title: "Feature scoring for finding interesting data projections."
+weight: "180"
+---
diff --git a/public/screenshots/file.png b/public/screenshots/file.png
new file mode 100644
index 000000000..8a0a64d1e
Binary files /dev/null and b/public/screenshots/file.png differ
diff --git a/public/screenshots/file.thumb.png b/public/screenshots/file.thumb.png
new file mode 100644
index 000000000..2355e4a19
Binary files /dev/null and b/public/screenshots/file.thumb.png differ
diff --git a/public/screenshots/finding_common_misclassifications_of_three.md b/public/screenshots/finding_common_misclassifications_of_three.md
new file mode 100644
index 000000000..7dd1abcd2
--- /dev/null
+++ b/public/screenshots/finding_common_misclassifications_of_three.md
@@ -0,0 +1,6 @@
+---
+image: "venn-misclassified.png"
+thumbnailImage: "venn-misclassified.thumb.png"
+title: "Finding common misclassifications of three predictive models."
+weight: "220"
+---
diff --git a/public/screenshots/gradient-descent.png b/public/screenshots/gradient-descent.png
new file mode 100644
index 000000000..7826991fc
Binary files /dev/null and b/public/screenshots/gradient-descent.png differ
diff --git a/public/screenshots/gradient-descent.thumb.png b/public/screenshots/gradient-descent.thumb.png
new file mode 100644
index 000000000..528ca8d2a
Binary files /dev/null and b/public/screenshots/gradient-descent.thumb.png differ
diff --git a/public/screenshots/heat-map.png b/public/screenshots/heat-map.png
new file mode 100644
index 000000000..8a226101f
Binary files /dev/null and b/public/screenshots/heat-map.png differ
diff --git a/public/screenshots/heat-map.thumb.png b/public/screenshots/heat-map.thumb.png
new file mode 100644
index 000000000..7ea341cf3
Binary files /dev/null and b/public/screenshots/heat-map.thumb.png differ
diff --git a/public/screenshots/heatmap_visualisation.md b/public/screenshots/heatmap_visualisation.md
new file mode 100644
index 000000000..f84267ecc
--- /dev/null
+++ b/public/screenshots/heatmap_visualisation.md
@@ -0,0 +1,6 @@
+---
+image: "heat-map.png"
+thumbnailImage: "heat-map.thumb.png"
+title: "Heatmap visualisation."
+weight: "80"
+---
diff --git a/public/screenshots/hierarchial_clustering_supports_interactive.md b/public/screenshots/hierarchial_clustering_supports_interactive.md
new file mode 100644
index 000000000..d3f6f9658
--- /dev/null
+++ b/public/screenshots/hierarchial_clustering_supports_interactive.md
@@ -0,0 +1,6 @@
+---
+image: "hierarchical-clustering.png"
+thumbnailImage: "hierarchical-clustering.thumb.png"
+title: "Hierarchial clustering supports interactive cluster selection."
+weight: "110"
+---
diff --git a/public/screenshots/hierarchical-clustering.png b/public/screenshots/hierarchical-clustering.png
new file mode 100644
index 000000000..533de6d97
Binary files /dev/null and b/public/screenshots/hierarchical-clustering.png differ
diff --git a/public/screenshots/hierarchical-clustering.thumb.png b/public/screenshots/hierarchical-clustering.thumb.png
new file mode 100644
index 000000000..1dde244b9
Binary files /dev/null and b/public/screenshots/hierarchical-clustering.thumb.png differ
diff --git a/public/screenshots/image-analytics.png b/public/screenshots/image-analytics.png
new file mode 100644
index 000000000..02756173f
Binary files /dev/null and b/public/screenshots/image-analytics.png differ
diff --git a/public/screenshots/image-analytics.thumb.png b/public/screenshots/image-analytics.thumb.png
new file mode 100644
index 000000000..20d5538a2
Binary files /dev/null and b/public/screenshots/image-analytics.thumb.png differ
diff --git a/public/screenshots/image-viewer.png b/public/screenshots/image-viewer.png
new file mode 100644
index 000000000..589600d89
Binary files /dev/null and b/public/screenshots/image-viewer.png differ
diff --git a/public/screenshots/image-viewer.thumb.png b/public/screenshots/image-viewer.thumb.png
new file mode 100644
index 000000000..f18163286
Binary files /dev/null and b/public/screenshots/image-viewer.thumb.png differ
diff --git a/public/screenshots/image_analytics_with_deep_network_embedding.md b/public/screenshots/image_analytics_with_deep_network_embedding.md
new file mode 100644
index 000000000..5201ad10b
--- /dev/null
+++ b/public/screenshots/image_analytics_with_deep_network_embedding.md
@@ -0,0 +1,6 @@
+---
+image: "image-analytics.png"
+thumbnailImage: "image-analytics.thumb.png"
+title: "Image analytics with deep-network embedding."
+weight: "300"
+---
diff --git a/public/screenshots/interactive_gradient_descent.md b/public/screenshots/interactive_gradient_descent.md
new file mode 100644
index 000000000..987590cc2
--- /dev/null
+++ b/public/screenshots/interactive_gradient_descent.md
@@ -0,0 +1,6 @@
+---
+image: "gradient-descent.png"
+thumbnailImage: "gradient-descent.thumb.png"
+title: "Interactive gradient descent."
+weight: "270"
+---
diff --git a/public/screenshots/intersection_of_misclassified_data_and_data.md b/public/screenshots/intersection_of_misclassified_data_and_data.md
new file mode 100644
index 000000000..5c4699759
--- /dev/null
+++ b/public/screenshots/intersection_of_misclassified_data_and_data.md
@@ -0,0 +1,6 @@
+---
+image: "silhouette.png"
+thumbnailImage: "silhouette.thumb.png"
+title: "Intersection of misclassified data and data with low silhouette score."
+weight: "240"
+---
diff --git a/public/screenshots/join_two_data_sets.md b/public/screenshots/join_two_data_sets.md
new file mode 100644
index 000000000..9eac614a0
--- /dev/null
+++ b/public/screenshots/join_two_data_sets.md
@@ -0,0 +1,6 @@
+---
+image: "concatenate.png"
+thumbnailImage: "concatenate.thumb.png"
+title: "Join two data sets."
+weight: "50"
+---
diff --git a/public/screenshots/k-means.png b/public/screenshots/k-means.png
new file mode 100644
index 000000000..1986d1678
Binary files /dev/null and b/public/screenshots/k-means.png differ
diff --git a/public/screenshots/k-means.thumb.png b/public/screenshots/k-means.thumb.png
new file mode 100644
index 000000000..6810744ca
Binary files /dev/null and b/public/screenshots/k-means.thumb.png differ
diff --git a/public/screenshots/load_and_edit_your_data.md b/public/screenshots/load_and_edit_your_data.md
new file mode 100644
index 000000000..260b5c974
--- /dev/null
+++ b/public/screenshots/load_and_edit_your_data.md
@@ -0,0 +1,6 @@
+---
+image: "file.png"
+thumbnailImage: "file.thumb.png"
+title: "Load and edit your data in the File widget."
+weight: "10"
+---
diff --git a/public/screenshots/mds.png b/public/screenshots/mds.png
new file mode 100644
index 000000000..332970ca3
Binary files /dev/null and b/public/screenshots/mds.png differ
diff --git a/public/screenshots/mds.thumb.png b/public/screenshots/mds.thumb.png
new file mode 100644
index 000000000..0adfaf8d9
Binary files /dev/null and b/public/screenshots/mds.thumb.png differ
diff --git a/public/screenshots/misclassifications.png b/public/screenshots/misclassifications.png
new file mode 100644
index 000000000..fc4fbe173
Binary files /dev/null and b/public/screenshots/misclassifications.png differ
diff --git a/public/screenshots/misclassifications.thumb.png b/public/screenshots/misclassifications.thumb.png
new file mode 100644
index 000000000..19186ac1a
Binary files /dev/null and b/public/screenshots/misclassifications.thumb.png differ
diff --git a/public/screenshots/model-based-scoring.png b/public/screenshots/model-based-scoring.png
new file mode 100644
index 000000000..0da4395a3
Binary files /dev/null and b/public/screenshots/model-based-scoring.png differ
diff --git a/public/screenshots/model-based-scoring.thumb.png b/public/screenshots/model-based-scoring.thumb.png
new file mode 100644
index 000000000..74ebcdaf0
Binary files /dev/null and b/public/screenshots/model-based-scoring.thumb.png differ
diff --git a/public/screenshots/model_based_feature_scoring.md b/public/screenshots/model_based_feature_scoring.md
new file mode 100644
index 000000000..0af1b729b
--- /dev/null
+++ b/public/screenshots/model_based_feature_scoring.md
@@ -0,0 +1,6 @@
+---
+image: "model-based-scoring.png"
+thumbnailImage: "model-based-scoring.thumb.png"
+title: "Model-based feature scoring."
+weight: "190"
+---
diff --git a/public/screenshots/model_testing_and_scoring_on_a_separate_test_data_set.md b/public/screenshots/model_testing_and_scoring_on_a_separate_test_data_set.md
new file mode 100644
index 000000000..25bc3c79a
--- /dev/null
+++ b/public/screenshots/model_testing_and_scoring_on_a_separate_test_data_set.md
@@ -0,0 +1,6 @@
+---
+image: "test-train.png"
+thumbnailImage: "test-train.thumb.png"
+title: "Model testing and scoring on a separate test data set."
+weight: "230"
+---
diff --git a/public/screenshots/multidimensional_scaling_of_zoo_data_set_reveals.md b/public/screenshots/multidimensional_scaling_of_zoo_data_set_reveals.md
new file mode 100644
index 000000000..7b3f6b70b
--- /dev/null
+++ b/public/screenshots/multidimensional_scaling_of_zoo_data_set_reveals.md
@@ -0,0 +1,6 @@
+---
+image: "mds.png"
+thumbnailImage: "mds.thumb.png"
+title: "Multidimensional scaling of Zoo data set reveals phylogeny groups."
+weight: "130"
+---
diff --git a/public/screenshots/orange_can_suggest_which.md b/public/screenshots/orange_can_suggest_which.md
new file mode 100644
index 000000000..7e89bca12
--- /dev/null
+++ b/public/screenshots/orange_can_suggest_which.md
@@ -0,0 +1,6 @@
+---
+image: "suggestion.png"
+thumbnailImage: "suggestion.thumb.png"
+title: "Orange can suggest which widget to add to the workflow."
+weight: "40"
+---
diff --git a/public/screenshots/paint-data.png b/public/screenshots/paint-data.png
new file mode 100644
index 000000000..4f0c0ab1a
Binary files /dev/null and b/public/screenshots/paint-data.png differ
diff --git a/public/screenshots/paint-data.thumb.png b/public/screenshots/paint-data.thumb.png
new file mode 100644
index 000000000..31b921768
Binary files /dev/null and b/public/screenshots/paint-data.thumb.png differ
diff --git a/public/screenshots/paint_a_two_dimensional.md b/public/screenshots/paint_a_two_dimensional.md
new file mode 100644
index 000000000..5e2d31fac
--- /dev/null
+++ b/public/screenshots/paint_a_two_dimensional.md
@@ -0,0 +1,6 @@
+---
+image: "paint-data.png"
+thumbnailImage: "paint-data.thumb.png"
+title: "Paint a two-dimensional data set."
+weight: "20"
+---
diff --git a/public/screenshots/pca-evaluation.png b/public/screenshots/pca-evaluation.png
new file mode 100644
index 000000000..7f784aec5
Binary files /dev/null and b/public/screenshots/pca-evaluation.png differ
diff --git a/public/screenshots/pca-evaluation.thumb.png b/public/screenshots/pca-evaluation.thumb.png
new file mode 100644
index 000000000..c692481d3
Binary files /dev/null and b/public/screenshots/pca-evaluation.thumb.png differ
diff --git a/public/screenshots/pca.png b/public/screenshots/pca.png
new file mode 100644
index 000000000..4366b11aa
Binary files /dev/null and b/public/screenshots/pca.png differ
diff --git a/public/screenshots/pca.thumb.png b/public/screenshots/pca.thumb.png
new file mode 100644
index 000000000..79e8b0b67
Binary files /dev/null and b/public/screenshots/pca.thumb.png differ
diff --git a/public/screenshots/playing_with_paint_data_and.md b/public/screenshots/playing_with_paint_data_and.md
new file mode 100644
index 000000000..f4f2b7355
--- /dev/null
+++ b/public/screenshots/playing_with_paint_data_and.md
@@ -0,0 +1,6 @@
+---
+image: "k-means.png"
+thumbnailImage: "k-means.thumb.png"
+title: "Playing with Paint Data and an automatic selection of clusters in k-Means."
+weight: "120"
+---
diff --git a/public/screenshots/polynomial-regression.png b/public/screenshots/polynomial-regression.png
new file mode 100644
index 000000000..3a765bc4f
Binary files /dev/null and b/public/screenshots/polynomial-regression.png differ
diff --git a/public/screenshots/polynomial-regression.thumb.png b/public/screenshots/polynomial-regression.thumb.png
new file mode 100644
index 000000000..1f8ec3209
Binary files /dev/null and b/public/screenshots/polynomial-regression.thumb.png differ
diff --git a/public/screenshots/predicting_text_categories.md b/public/screenshots/predicting_text_categories.md
new file mode 100644
index 000000000..31bdb8b3b
--- /dev/null
+++ b/public/screenshots/predicting_text_categories.md
@@ -0,0 +1,6 @@
+---
+image: "text-predictions.png"
+thumbnailImage: "text-predictions.thumb.png"
+title: "Predicting text categories."
+weight: "280"
+---
diff --git a/public/screenshots/principal_component_analysis_with_scree_diagram.md b/public/screenshots/principal_component_analysis_with_scree_diagram.md
new file mode 100644
index 000000000..0c8e57a49
--- /dev/null
+++ b/public/screenshots/principal_component_analysis_with_scree_diagram.md
@@ -0,0 +1,6 @@
+---
+image: "pca.png"
+thumbnailImage: "pca.thumb.png"
+title: "Principal component analysis with scree diagram."
+weight: "140"
+---
diff --git a/public/screenshots/rank.png b/public/screenshots/rank.png
new file mode 100644
index 000000000..8a8f2f48b
Binary files /dev/null and b/public/screenshots/rank.png differ
diff --git a/public/screenshots/rank.thumb.png b/public/screenshots/rank.thumb.png
new file mode 100644
index 000000000..95915e640
Binary files /dev/null and b/public/screenshots/rank.thumb.png differ
diff --git a/public/screenshots/roc.md b/public/screenshots/roc.md
new file mode 100644
index 000000000..068c6aac7
--- /dev/null
+++ b/public/screenshots/roc.md
@@ -0,0 +1,6 @@
+---
+image: "roc.png"
+thumbnailImage: "roc.thumb.png"
+title: "Receiver operating characteristics (ROC) analysis."
+weight: "150"
+---
diff --git a/public/screenshots/roc.png b/public/screenshots/roc.png
new file mode 100644
index 000000000..d514e3515
Binary files /dev/null and b/public/screenshots/roc.png differ
diff --git a/public/screenshots/roc.thumb.png b/public/screenshots/roc.thumb.png
new file mode 100644
index 000000000..50e65aea4
Binary files /dev/null and b/public/screenshots/roc.thumb.png differ
diff --git a/public/screenshots/showcase_for_approximation_by_regression_tree.md b/public/screenshots/showcase_for_approximation_by_regression_tree.md
new file mode 100644
index 000000000..a73c64832
--- /dev/null
+++ b/public/screenshots/showcase_for_approximation_by_regression_tree.md
@@ -0,0 +1,6 @@
+---
+image: "polynomial-regression.png"
+thumbnailImage: "polynomial-regression.thumb.png"
+title: "Showcase for approximation by regression tree."
+weight: "260"
+---
diff --git a/public/screenshots/sieve-diagram.png b/public/screenshots/sieve-diagram.png
new file mode 100644
index 000000000..c4767e7db
Binary files /dev/null and b/public/screenshots/sieve-diagram.png differ
diff --git a/public/screenshots/sieve-diagram.thumb.png b/public/screenshots/sieve-diagram.thumb.png
new file mode 100644
index 000000000..e0c150115
Binary files /dev/null and b/public/screenshots/sieve-diagram.thumb.png differ
diff --git a/public/screenshots/sieve_diagram_on_titanic_data_set.md b/public/screenshots/sieve_diagram_on_titanic_data_set.md
new file mode 100644
index 000000000..0d93af12d
--- /dev/null
+++ b/public/screenshots/sieve_diagram_on_titanic_data_set.md
@@ -0,0 +1,6 @@
+---
+image: "sieve-diagram.png"
+thumbnailImage: "sieve-diagram.thumb.png"
+title: "Sieve diagram on Titanic data set."
+weight: "70"
+---
diff --git a/public/screenshots/silhouette.png b/public/screenshots/silhouette.png
new file mode 100644
index 000000000..159ea2a9b
Binary files /dev/null and b/public/screenshots/silhouette.png differ
diff --git a/public/screenshots/silhouette.thumb.png b/public/screenshots/silhouette.thumb.png
new file mode 100644
index 000000000..b9ae2ee75
Binary files /dev/null and b/public/screenshots/silhouette.thumb.png differ
diff --git a/public/screenshots/suggestion.png b/public/screenshots/suggestion.png
new file mode 100644
index 000000000..ac55b0f56
Binary files /dev/null and b/public/screenshots/suggestion.png differ
diff --git a/public/screenshots/suggestion.thumb.png b/public/screenshots/suggestion.thumb.png
new file mode 100644
index 000000000..2519ac467
Binary files /dev/null and b/public/screenshots/suggestion.thumb.png differ
diff --git a/public/screenshots/test-train.png b/public/screenshots/test-train.png
new file mode 100644
index 000000000..fc30b0540
Binary files /dev/null and b/public/screenshots/test-train.png differ
diff --git a/public/screenshots/test-train.thumb.png b/public/screenshots/test-train.thumb.png
new file mode 100644
index 000000000..738377215
Binary files /dev/null and b/public/screenshots/test-train.thumb.png differ
diff --git a/public/screenshots/text-predictions.png b/public/screenshots/text-predictions.png
new file mode 100644
index 000000000..a81ffe78e
Binary files /dev/null and b/public/screenshots/text-predictions.png differ
diff --git a/public/screenshots/text-predictions.thumb.png b/public/screenshots/text-predictions.thumb.png
new file mode 100644
index 000000000..2e016ea4c
Binary files /dev/null and b/public/screenshots/text-predictions.thumb.png differ
diff --git a/public/screenshots/text-topics.png b/public/screenshots/text-topics.png
new file mode 100644
index 000000000..48ba98a6e
Binary files /dev/null and b/public/screenshots/text-topics.png differ
diff --git a/public/screenshots/text-topics.thumb.png b/public/screenshots/text-topics.thumb.png
new file mode 100644
index 000000000..074d8621a
Binary files /dev/null and b/public/screenshots/text-topics.thumb.png differ
diff --git a/public/screenshots/topic_modelling_of_recent_tweets.md b/public/screenshots/topic_modelling_of_recent_tweets.md
new file mode 100644
index 000000000..3d5206ca7
--- /dev/null
+++ b/public/screenshots/topic_modelling_of_recent_tweets.md
@@ -0,0 +1,6 @@
+---
+image: "text-topics.png"
+thumbnailImage: "text-topics.thumb.png"
+title: "Topic modelling of recent tweets."
+weight: "290"
+---
diff --git a/public/screenshots/tree-explorative.png b/public/screenshots/tree-explorative.png
new file mode 100644
index 000000000..1ecf5d8e7
Binary files /dev/null and b/public/screenshots/tree-explorative.png differ
diff --git a/public/screenshots/tree-explorative.thumb.png b/public/screenshots/tree-explorative.thumb.png
new file mode 100644
index 000000000..38bf93e9a
Binary files /dev/null and b/public/screenshots/tree-explorative.thumb.png differ
diff --git a/public/screenshots/venn-misclassified.png b/public/screenshots/venn-misclassified.png
new file mode 100644
index 000000000..df8a2f326
Binary files /dev/null and b/public/screenshots/venn-misclassified.png differ
diff --git a/public/screenshots/venn-misclassified.thumb.png b/public/screenshots/venn-misclassified.thumb.png
new file mode 100644
index 000000000..3dbe11623
Binary files /dev/null and b/public/screenshots/venn-misclassified.thumb.png differ
diff --git a/public/screenshots/visualizing_misclassifications.md b/public/screenshots/visualizing_misclassifications.md
new file mode 100644
index 000000000..97591070e
--- /dev/null
+++ b/public/screenshots/visualizing_misclassifications.md
@@ -0,0 +1,6 @@
+---
+image: "misclassifications.png"
+thumbnailImage: "misclassifications.thumb.png"
+title: "Visualizing misclassifications."
+weight: "210"
+---
diff --git a/utils/sortByWeight.tsx b/utils/sortByWeight.tsx
new file mode 100644
index 000000000..5a37f788e
--- /dev/null
+++ b/utils/sortByWeight.tsx
@@ -0,0 +1,7 @@
+export default function sortByWeight(items: any[]) {
+  if (!Array.isArray(items)) {
+    throw new Error("Item is not an array");
+  }
+
+  return items.sort((a, b) => (a.weight || 99999) - (b.weight || 99999));
+}