diff --git a/website/src/components/htmlToReact.js b/website/src/components/htmlToReact.js
index ed34a5878..443ac2dc9 100644
--- a/website/src/components/htmlToReact.js
+++ b/website/src/components/htmlToReact.js
@@ -7,6 +7,6 @@ const htmlToReactParser = new HtmlToReactParser()
  * @returns {Node} - The converted React elements.
  */
 
-export default function htmlToReact(html) {
-    return htmlToReactParser.parse(html)
+export default function HtmlToReact(props) {
+    return htmlToReactParser.parse(props.children)
 }
diff --git a/website/src/widgets/quickstart-training.js b/website/src/widgets/quickstart-training.js
index f2ce0abed..62bdf1e0b 100644
--- a/website/src/widgets/quickstart-training.js
+++ b/website/src/widgets/quickstart-training.js
@@ -5,8 +5,8 @@ import 'prismjs/components/prism-ini.min.js'
 
 import { Quickstart } from '../components/quickstart'
 import generator, { DATA as GENERATOR_DATA } from './quickstart-training-generator'
-import htmlToReact from '../components/htmlToReact'
 import models from '../../meta/languages.json'
+import dynamic from 'next/dynamic'
 
 const DEFAULT_LANG = 'en'
 const DEFAULT_HARDWARE = 'cpu'
@@ -70,6 +70,10 @@ const DATA = [
     },
 ]
 
+const HtmlToReactDynamic = dynamic(() => import('../components/htmlToReact'), {
+    loading: () => <></>,
+})
+
 export default function QuickstartTraining({ id, title, download = 'base_config.cfg' }) {
     const [lang, setLang] = useState(DEFAULT_LANG)
     const [_components, _setComponents] = useState([])
@@ -134,7 +138,7 @@ export default function QuickstartTraining({ id, title, download = 'base_config.
             small
             codeLang="ini"
         >
-            {htmlToReact(displayContent)}
+            <HtmlToReactDynamic>{displayContent}</HtmlToReactDynamic>
         </Quickstart>
     )
 }