diff --git a/demo/src/feedback_grid_test.js b/demo/src/feedback_grid_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e6316d660aeaba7d2803ee9890583a40c4eda18
--- /dev/null
+++ b/demo/src/feedback_grid_test.js
@@ -0,0 +1,26 @@
+import { GridWidget } from "@polaris/dashboard-sdk";
+
+const data = [
+    {
+        type: "heatmap",
+        name: "",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    }
+]
+
+
+export const feedbackGridDef = { "feedback-grid-widget" :
+    new GridWidget(
+        "Feedback",
+        "Feedback Element",
+        data,
+        {
+            direction: "row"
+        })
+}
diff --git a/demo/src/js/app.js b/demo/src/js/app.js
index 8352f0d9f54b1912b691ae9c1bf1c6eee4d9f717..d0b124bc80a26c933ca39ea11dce6d1bdc713960 100644
--- a/demo/src/js/app.js
+++ b/demo/src/js/app.js
@@ -15,7 +15,10 @@ import {groupedBarChartDef, simpleGroupedBarChartDef} from "../grouped_bar_chart
 import { barChartDef, chartJSBarChartDef } from "../bar_chart_test";
 import { heatMapDef } from "../heatmap_test";
 import { gridDef } from "../grid_test";
+import { scatterGridDef } from "../scatter_grid_test";
 import "./style.css";
+import {mcTestGridDef} from "../mc_test_grid_test";
+import {feedbackGridDef} from "../feedback_grid_test";
 /**
  * JWT Token - hardcoded for demontrastion
  * This jwt token is generated in the backend.
@@ -129,10 +132,31 @@ const widgets_config = [
   },
   {
     x: 0,
+    y: 20,
+    w: 4,
+    h: 5,
+    widgetId: "grid-widget",
+  },
+  {
+    x: 4,
+    y: 15,
+    w: 4,
+    h: 5,
+    widgetId: "scatter-grid-widget",
+  },
+  {
+    x: 4,
+    y: 15,
+    w: 4,
+    h: 5,
+    widgetId: "mc-test-grid-widget",
+  },
+  {
+    x: 2,
     y: 15,
     w: 2,
-    h: 4,
-    widgetId: "grid-widget",
+    h: 5,
+    widgetId: "feedback-grid-widget",
   },
 ];
 
@@ -274,7 +298,10 @@ const buildWidgets = (data) => {
     ...barChartDef,
     ...chartJSBarChartDef,
     ...groupedBarChartDef,
-    ...simpleGroupedBarChartDef
+    ...simpleGroupedBarChartDef,
+    ...scatterGridDef,
+    ...mcTestGridDef,
+    ...feedbackGridDef
   };
 
   return widgets;
diff --git a/demo/src/mc_test_grid_test.js b/demo/src/mc_test_grid_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7ad6edab9354d44e202109eff02402f262d48d0
--- /dev/null
+++ b/demo/src/mc_test_grid_test.js
@@ -0,0 +1,48 @@
+import { GridWidget } from "@polaris/dashboard-sdk";
+
+const data = [
+    {
+        type: "heatmap",
+        name: "Block 1",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "Block 2",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "Block 3",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    }
+]
+
+
+export const mcTestGridDef = { "mc-test-grid-widget" :
+    new GridWidget(
+        "MC-Tests",
+        "Vergleich von Multiple-Choice Elementen",
+        data,
+        {
+            direction: "row"
+        })
+}
diff --git a/demo/src/scatter_grid_test.js b/demo/src/scatter_grid_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..579065b6a364f12b4160ea7d90cfbfa70488aeb3
--- /dev/null
+++ b/demo/src/scatter_grid_test.js
@@ -0,0 +1,59 @@
+import { GridWidget } from "@polaris/dashboard-sdk";
+
+const data = [
+    {
+        type: "heatmap",
+        name: "0-25%",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "26-50%",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "51-75%",
+        options: {
+            showLegend: false,
+        },
+        data:
+        [
+
+        ]
+    },
+    {
+        type: "heatmap",
+        name: "76-100%",
+        options: {
+            showLegend: false,
+        },
+        data:
+            [
+
+            ]
+    }
+]
+
+
+export const scatterGridDef = { "scatter-grid-widget" :
+    new GridWidget(
+        "Kursvergleich",
+        "Vergleich mit anderen Studierenden",
+        data,
+        {
+            direction: "row"
+        })
+}