diff --git a/code/frontend/package-lock.json b/code/frontend/package-lock.json
index 49bfb76..737827b 100644
--- a/code/frontend/package-lock.json
+++ b/code/frontend/package-lock.json
@@ -12,6 +12,7 @@
                 "@testing-library/react": "^11.2.6",
                 "@testing-library/user-event": "^12.8.3",
                 "classnames": "^2.3.1",
+                "is-string": "^1.0.5",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-scripts": "4.0.3",
diff --git a/code/frontend/package.json b/code/frontend/package.json
index 781bddc..0b037b8 100644
--- a/code/frontend/package.json
+++ b/code/frontend/package.json
@@ -7,6 +7,7 @@
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
         "classnames": "^2.3.1",
+        "is-string": "^1.0.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 2beb738..5950f81 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -10,41 +10,29 @@ export default function App() {
     return (
         <div className={classNames(Style.App, theme)}>
             <BoxWithHeader
-                header={{
-                    children: "Ciao mondo!"
-                }}
-                body={{
-                    children: (
+                header={"Ciao mondo!"}
+                body={
+                    <div>
                         <div>
-                            <div>
-                                Il CSS è pura magia.
-                            </div>
-                            <div>
-                                Change my mind.
-                            </div>
+                            Il CSS è pura magia.
                         </div>
-                    ),
-                }}
+                        <div>
+                            Change my mind.
+                        </div>
+                    </div>
+                }
             />
             <BoxWithHeader
-                header={{
-                    children: "Questa è un'altra Box."
-                }}
-                body={{
-                    children: (
-                        <div>
-                            E altro testo.
-                        </div>
-                    )
-                }}
+                header={"Questa è un'altra Box."}
+                body={
+                    <div>
+                        E altro testo.
+                    </div>
+                }
             />
             <BoxWithHeader
-                header={{
-                    children: "Ecco, così va meglio.",
-                }}
-                body={{
-                    children: "No."
-                }}
+                header={"Ecco, così va meglio."}
+                body={"No."}
             />
         </div>
     )
diff --git a/code/frontend/src/components/BoxWithHeader.js b/code/frontend/src/components/BoxWithHeader.js
index 8396286..3bc1783 100644
--- a/code/frontend/src/components/BoxWithHeader.js
+++ b/code/frontend/src/components/BoxWithHeader.js
@@ -1,9 +1,31 @@
-import React from "react"
+import React, {isValidElement} from "react"
 import Style from "./BoxWithHeader.module.css"
 import classNames from "classnames"
+import isString from "is-string"
 
 
-export default function BoxWithHeader({ header, body, className, ...props }) {
+export default function BoxWithHeader({ header, body, children, className, ...props }) {
+
+    if(isValidElement(header) || isString(header)) {
+        header = {
+            children: header
+        }
+    }
+
+    if(isValidElement(body) || isString(body)) {
+        body = {
+            children: body
+        }
+    }
+
+    if(children) {
+        if(body.children) {
+            throw new Error("If directly passing `children` to BoxWithHeader, body.children should not be set.")
+        }
+
+        body["children"] = children
+    }
+
     return (
         <div className={classNames(Style.BoxWithHeader, className)} {...props}>
             <div className={classNames(Style.BoxHeader, header.className)}>