diff --git a/samples/weather-forecast/dev/bootstrap.ts b/samples/weather-forecast/dev/bootstrap.ts
index ef047de..df85871 100644
--- a/samples/weather-forecast/dev/bootstrap.ts
+++ b/samples/weather-forecast/dev/bootstrap.ts
@@ -15,6 +15,9 @@ import { BaseBlock } from "@staffbase/widget-sdk";
 import WidgetApiMock from "./widget-api-mock";
 import { fromDataUri, prepareAttributes } from "./utils/DataUtil";
 import { baseAttributes } from "./constants";
+import Config from "./config";
+import ReactDOM from "react-dom";
+import React from "react";
 
 /**
  * Simulated hosting class to run the widget
@@ -69,4 +72,11 @@ window.defineBlock = function (externalBlockDefinition) {
     WidgetApiMock
   );
   window.customElements.define(customElementName, CustomElementClass);
+
+  ReactDOM.render(
+    React.createElement(Config, {
+      blockDefinition: externalBlockDefinition.blockDefinition,
+    }),
+    document.getElementById("config")
+  );
 };
diff --git a/samples/weather-forecast/dev/config.tsx b/samples/weather-forecast/dev/config.tsx
index 1a831b8..650ecb5 100644
--- a/samples/weather-forecast/dev/config.tsx
+++ b/samples/weather-forecast/dev/config.tsx
@@ -11,9 +11,9 @@
  * limitations under the License.
  */
 
-import ReactDOM from "react-dom";
+import { ExternalBlockDefinition } from "widget-sdk";
 import { configurationSchema, uiSchema } from "../src/configuration-schema";
-import React from "react";
+import React, { FC } from "react";
 import Form from "@rjsf/material-ui";
 
 const updateWidget = (data: Record<string, string>) => {
@@ -24,14 +24,69 @@ const updateWidget = (data: Record<string, string>) => {
   }
 };
 
-ReactDOM.render(
-  <Form
-    schema={configurationSchema}
-    uiSchema={uiSchema}
-    onSubmit={(e) => {
-      updateWidget(e.formData);
-    }}
-    autoComplete={"off"}
-  />,
-  document.getElementById("config")
-);
+type BlockDefinition = ExternalBlockDefinition["blockDefinition"];
+
+type Props = {
+  blockDefinition: BlockDefinition;
+};
+
+const Config: FC<Props> = ({ blockDefinition }) => {
+  return (
+    <div className="display: flex; flex-direction: column; justify-content: space-evenly">
+      <div className="box">
+        <h3>Icon preview:</h3>
+        <section id="icon">
+          <div
+            aria-label={blockDefinition.label}
+            style={{
+              background: "rgb(247, 247, 247)",
+              cursor: "pointer",
+              height: "96px",
+              flex: "0 0 20%",
+              borderRadius: "3px",
+              padding: "0px",
+              margin: "0px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+            }}
+          >
+            <img
+              height="28"
+              src={blockDefinition.iconUrl}
+              style={{ maxWidth: "80px" }}
+            />
+            <div
+              aria-hidden="true"
+              style={{
+                textAlign: "center",
+                fontSize: "14px",
+                color: "rgb(120, 120, 120)",
+                marginTop: "8px",
+                width: "100%",
+              }}
+            >
+              {blockDefinition.label}
+            </div>
+          </div>
+        </section>
+      </div>
+      <div className="box">
+        <h3>Configuration preview:</h3>
+        <section id="config">
+          <Form
+            schema={configurationSchema}
+            uiSchema={uiSchema}
+            onSubmit={(e) => {
+              updateWidget(e.formData);
+            }}
+            autoComplete={"off"}
+          />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default Config;
diff --git a/samples/weather-forecast/resources/index.html b/samples/weather-forecast/resources/index.html
index db08fb4..a7e545d 100644
--- a/samples/weather-forecast/resources/index.html
+++ b/samples/weather-forecast/resources/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="favicon.png">
+    <link rel="shortcut icon" href="favicon.png" />
     <title>staffbase/weather-forecast</title>
     <!-- locally stored versions of Staffbase frontend assets -->
-    <link href="/css/app.css" rel="stylesheet">
-    <link href="/css/libs.css" rel="stylesheet">
-    <link href="/css/font.css" rel="stylesheet">
+    <link href="/css/app.css" rel="stylesheet" />
+    <link href="/css/libs.css" rel="stylesheet" />
+    <link href="/css/font.css" rel="stylesheet" />
     <style>
       body {
         padding: 50px;
@@ -17,25 +17,22 @@
         border: 2px dashed gray;
         padding: 40px;
       }
+      .box h3 {
+        margin-bottom: 20px;
+      }
     </style>
   </head>
-  <body>
-    <div style="display: flex; flex-direction: column; justify-content: space-evenly;">
-      <div class="box">
-        <h3>Widget preview:</h3>
-        <br />
-        <br />
-        <section id="preview">
-            <weather-forecast></weather-forecast>
-        </section>
-      </div>
-      <div class="box">
-      <h3>Configuration preview:</h3>
-        <section id="config"></section>
-      </div>
+  <body style="display: flex">
+    <div class="box" style="flex: 2">
+      <h3>Widget preview:</h3>
+      <br />
+      <br />
+      <section id="preview">
+        <weather-forecast></weather-forecast>
+      </section>
     </div>
+    <div id="config" style="flex: 1"></div>
   </body>
   <script src="bootstrap.js"></script>
   <script src="staffbase.weather-forecast.js"></script>
-  <script src="config.js"></script>
 </html>
