diff --git a/modelina-website/src/components/Select.tsx b/modelina-website/src/components/Select.tsx
index 834d7e2533..d1b2d5a29c 100644
--- a/modelina-website/src/components/Select.tsx
+++ b/modelina-website/src/components/Select.tsx
@@ -10,7 +10,7 @@ export default function Select({
     <select
       onChange={(ev: any) => onChange(ev.target.value)}
       className={twMerge(
-        `form-select h-full px-4 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
+        `form-select h-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
       )}
       value={value}
       style={{ paddingRight: '40px' }}
diff --git a/modelina-website/src/components/docs/Docs.tsx b/modelina-website/src/components/docs/Docs.tsx
index af8e521120..a8545fb8a5 100644
--- a/modelina-website/src/components/docs/Docs.tsx
+++ b/modelina-website/src/components/docs/Docs.tsx
@@ -1,151 +1,167 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { withRouter, NextRouter } from 'next/router';
-import DocsList from "../../../config/docs.json";
+import Script from 'next/script';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
-import CodeBlock from '../CodeBlock';
 import rehypeRaw from 'rehype-raw';
+import CodeBlock from '../CodeBlock';
 import GithubButton from '../buttons/GithubButton';
-import Script from 'next/script';
+import DocsList from "../../../config/docs.json";
 
 interface WithRouterProps {
   router: NextRouter;
 }
 
 interface ModelinaDocsProps extends WithRouterProps {
-  source: any, 
+  source: any,
   slug: string
 }
 
-type ModelinaDocsState = {
-  showMenu: boolean;
-};
-
-class Docs extends React.Component<
-  ModelinaDocsProps,
-  ModelinaDocsState
-> {
-  constructor(props: ModelinaDocsProps) {
-    super(props);
-    this.state = {
-      showMenu: true
-    };
-    this.renderMenuTree = this.renderMenuTree.bind(this);
-  }
+const Docs: React.FC<ModelinaDocsProps> = ({ source, slug, router }) => {
+  const [showMenu, setShowMenu] = useState(true);
 
   /**
    * Render the menu items dynamically in a depth first approach
    */
-  renderMenuTree(value: any, isRoot: boolean) {
-    const isSelected = value.slug === `/docs/${this.props.slug}`;
-    if(value.type === 'dir') {
+  const renderMenuTree = (value: any, isRoot: boolean) => {
+    const isSelected = value.slug === `/docs/${slug}`;
+    if (value.type === 'dir') {
       const hasRootReadme = value.content !== null;
       let headerReadme;
-      if(hasRootReadme) {
-        headerReadme = <li key={value.slug} className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setState({ showMenu: false }); } }><a href={`/docs/${value.slug.toLowerCase()}`}>{value.title}</a></li>;
+      if (hasRootReadme) {
+        headerReadme = (
+          <li
+            key={value.slug}
+            className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`}
+            onClick={() => {
+              setShowMenu(false);
+            }}
+          >
+            <a href={`/docs/${value.slug.toLowerCase()}`}>{value.title}</a>
+          </li>
+        );
       } else {
         headerReadme = <li key={value.slug} className={`p-2`}>{value.title}</li>;
       }
-      return <>{headerReadme}<li key={`${value.slug}-li`}>
-        <ul key={`${value.slug}-ul`} className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-          {isRoot && <li key={'apidocs'} className={`cursor-pointer p-2`}><a href={'/apidocs'}>API Docs</a></li>}
-          {value.subPaths.map((subPath: any) => this.renderMenuTree(subPath, false))}
-        </ul>
-      </li></>;
+      return (
+        <>
+          {headerReadme}
+          <li key={`${value.slug}-li`}>
+            <ul key={`${value.slug}-ul`} className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+              {isRoot && <li key={'apidocs'} className={`cursor-pointer p-2`}><a href={'/apidocs'}>API Docs</a></li>}
+              {value.subPaths.map((subPath: any) => renderMenuTree(subPath, false))}
+            </ul>
+          </li>
+        </>
+      );
     } else {
-      return <li key={value.slug} className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setState({ showMenu: false }) }}><a href={`/docs/${value.slug}`}>{value.title}</a></li>;
+      return (
+        <li
+          key={value.slug}
+          className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`}
+          onClick={() => {
+            setShowMenu(false);
+          }}
+        >
+          <a href={`/docs/${value.slug}`}>{value.title}</a>
+        </li>
+      );
     }
-  }
+  };
 
-  render() {
-    let { showMenu } = this.state;
-    const menuItems = this.renderMenuTree(DocsList.tree, true);
-    const item = (DocsList.unwrapped as any)[this.props.slug];
-    return (
-      <div className="py-4 lg:py-8">
-        <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
-          {!showMenu && (
-            <div className="lg:hidden">
-              <button onClick={() => { this.setState({ showMenu: true }) }} className="flex text-gray-500 ml-6  hover:text-gray-900 focus:outline-none" aria-label="Open sidebar">
-                <span>Open Navigation ➔</span>
-              </button>
-            </div>
-          )}
-          {
-            showMenu && (
-              <div className="z-60 lg:hidden">
-                <div className="fixed inset-0 flex z-40">
-                  <div className="fixed inset-0">
-                    <div
-                      className="absolute inset-0 bg-gray-600 opacity-75"
-                      onClick={() => { this.setState({ showMenu: false }) }}
-                    ></div>
-                  </div>
+  const menuItems = renderMenuTree(DocsList.tree, true);
+  const item = (DocsList.unwrapped as any)[slug];
 
-                  <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
-                    <div className="absolute top-0 right-0 -mr-14 p-1">
-                      <button
-                        onClick={() => { this.setState({ showMenu: false }) }}
-                        className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
-                        aria-label="Close sidebar"
-                      >
-                        <svg
-                          className="h-6 w-6 text-white"
-                          stroke="currentColor"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div className="flex-1 h-0 pt-5 overflow-y-auto">
-                      <nav className="mt-5 px-2 mb-4">
-                        <ul key="rootMenuList" className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-                          { menuItems }
-                        </ul>
-                      </nav>
-                    </div>
-                  </div>
-                  <div className="flex-shrink-0 w-14">
-                    {/* Force sidebar to shrink to fit close icon */}
-                  </div>
-                </div>
+  return (
+    <div className="py-4 lg:py-8">
+      <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
+        {!showMenu && (
+          <div className="lg:hidden">
+            <button
+              onClick={() => {
+                setShowMenu(true);
+              }}
+              className="flex text-gray-500 ml-6  hover:text-gray-900 focus:outline-none"
+              aria-label="Open sidebar"
+            >
+              <span>Open Navigation ➔</span>
+            </button>
+          </div>
+        )}
+        {showMenu && (
+          <div className="z-60 lg:hidden">
+            <div className="fixed inset-0 flex z-40">
+              <div className="fixed inset-0">
+                <div
+                  className="absolute inset-0 bg-gray-600 opacity-75"
+                  onClick={() => {
+                    setShowMenu(false);
+                  }}
+                ></div>
               </div>
-            )
-          }
-          <div className="flex flex-row" id="main-content">
-            <div className="hidden lg:flex lg:flex-shrink-0">
-              <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
-                <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
-                  <nav className="flex-1 bg-white">
-                    { menuItems }
+
+              <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
+                <div className="absolute top-0 right-0 -mr-14 p-1">
+                  <button
+                    onClick={() => {
+                      setShowMenu(false);
+                    }}
+                    className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
+                    aria-label="Close sidebar"
+                  >
+                    <svg
+                      className="h-6 w-6 text-white"
+                      stroke="currentColor"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div className="flex-1 h-0 pt-5 overflow-y-auto">
+                  <nav className="mt-5 px-2 mb-4">
+                    <ul key="rootMenuList" className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+                      {menuItems}
+                    </ul>
                   </nav>
                 </div>
               </div>
+              <div className="flex-shrink-0 w-14">
+                {/* Force sidebar to shrink to fit close icon */}
+              </div>
             </div>
-            <div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16) prose">
-
-              <div className={"flex md:justify-end my-4 md:my-0"}>
-                <GithubButton
-                  text="Edit on GitHub"
-                  href={`https://github.com/asyncapi/modelina/edit/master${item.relativeRootPath}`}
-                  inNav="true"
-                />
+          </div>
+        )}
+        <div className="flex flex-row" id="main-content">
+          <div className="hidden lg:flex lg:flex-shrink-0">
+            <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
+              <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
+                <nav className="flex-1 bg-white">{menuItems}</nav>
               </div>
-              <ReactMarkdown 
-                rehypePlugins={[rehypeSlug, rehypeRaw]} 
-                remarkPlugins={[remarkGfm]} 
-                components={{
-                code({node, inline, className, children, ...props}) {
+            </div>
+          </div>
+          <div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16) prose">
+            <div className={"flex md:justify-end my-4 md:my-0"}>
+              <GithubButton
+                text="Edit on GitHub"
+                href={`https://github.com/asyncapi/modelina/edit/master${item.relativeRootPath}`}
+                inNav="true"
+              />
+            </div>
+            <ReactMarkdown
+              rehypePlugins={[rehypeSlug, rehypeRaw]}
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({ node, inline, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || '')
-                  if(className === 'language-mermaid') {
+                  if (className === 'language-mermaid') {
                     return <pre className="mermaid bg-white flex justify-center">{children}</pre>
                   }
                   return !inline && match ? (
@@ -159,24 +175,27 @@ class Docs extends React.Component<
                     <code {...props} className={className}>
                       {children}
                     </code>
-                  )}}}>
-                {this.props.source}
-              </ReactMarkdown>
-              <Script
-                type="module"
-                strategy="afterInteractive"
-                dangerouslySetInnerHTML={{
-                  __html: `
+                  )
+                }
+              }}
+            >
+              {source}
+            </ReactMarkdown>
+            <Script
+              type="module"
+              strategy="afterInteractive"
+              dangerouslySetInnerHTML={{
+                __html: `
                   import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
                   mermaid.initialize({startOnLoad: true});
                   mermaid.contentLoaded();`,
-                }}
-              />
-            </div>
+              }}
+            />
           </div>
         </div>
       </div>
-    );
-  }
-}
-export default withRouter(Docs);
+    </div>
+  );
+};
+
+export default withRouter(Docs);
\ No newline at end of file
diff --git a/modelina-website/src/components/examples/Examples.tsx b/modelina-website/src/components/examples/Examples.tsx
index b5e4759188..b3a8c1b9a1 100644
--- a/modelina-website/src/components/examples/Examples.tsx
+++ b/modelina-website/src/components/examples/Examples.tsx
@@ -1,17 +1,20 @@
-import React from 'react';
-import MonacoEditorWrapper from '../MonacoEditorWrapper';
+import React, { useEffect, useState } from 'react';
 import Router, { withRouter, NextRouter } from 'next/router';
 import { ParsedUrlQuery } from 'querystring';
-import ExamplesList from "../../../config/examples.json";
-import ExamplesReadme from "../../../config/examples_readme.json";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
 import ReactMarkdown from 'react-markdown';
+import MonacoEditorWrapper from '../MonacoEditorWrapper';
+import ExamplesList from "../../../config/examples.json";
+import ExamplesReadme from "../../../config/examples_readme.json";
 import GithubButton from '../buttons/GithubButton';
+
 const examplesIterator = Object.entries(ExamplesList);
+
 interface WithRouterProps {
   router: NextRouter;
 }
+
 interface Example {
   description: string,
   displayName: string,
@@ -19,6 +22,7 @@ interface Example {
   output: string,
   language: string
 }
+
 export interface ExampleQueryOptions extends ParsedUrlQuery {
   selectedExample: string;
 }
@@ -31,195 +35,221 @@ type ModelinaExamplesState = {
   showMenu: boolean;
 };
 
-class Examples extends React.Component<
-  ModelinaExamplesProps,
-  ModelinaExamplesState
-> {
-  constructor(props: ModelinaExamplesProps) {
-    super(props);
-    this.state = {
-      selectedExample: undefined,
-      showMenu: false
-    };
-    this.setNewQuery = this.setNewQuery.bind(this);
-  }
+const Examples: React.FC<ModelinaExamplesProps> = ({ router }) => {
+  const [selectedExample, setSelectedExample] = useState<string | undefined>(undefined);
+  const [showMenu, setShowMenu] = useState<boolean>(false);
 
-  /**
-   * Set a query key and value or unset depending on value
-   */
-  setNewQuery(queryKey: string, queryValue: any) {
+  const setNewQuery = (queryKey: string, queryValue: any) => {
     const newQuery = {
-      query: { ...this.props.router.query }
+      query: { ...router.query },
     };
     if (queryValue) {
-      /* eslint-disable-next-line security/detect-object-injection */
       newQuery.query[queryKey] = String(queryValue);
     } else {
       delete newQuery.query[queryKey];
     }
     Router.push(newQuery, undefined, { scroll: true });
-  }
-  render() {
-    let { selectedExample, showMenu } = this.state;
+  };
 
-    const query = this.props.router.query as ExampleQueryOptions;
+  useEffect(() => {
+    const query = router.query as ExampleQueryOptions;
     if (query.selectedExample !== undefined) {
-      selectedExample = query.selectedExample;
-    }
-
-    let example: Example | undefined;
-    if (selectedExample) {
-      example = (ExamplesList as any)[selectedExample];
+      setSelectedExample(query.selectedExample);
     }
+  }, [router.query]);
 
-    return (
-      <div className="py-4 lg:py-8">
-        <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
-          {!showMenu && (
-            <div className="lg:hidden">
-              <button onClick={() => { this.setState({ showMenu: true }) }} className="flex text-gray-500 ml-6  hover:text-gray-900 focus:outline-none" aria-label="Open sidebar">
-                <span>Open Navigation ➔</span>
-              </button>
-            </div>
-          )}
-          {
-            showMenu && (
-              <div className="z-60 lg:hidden">
-                <div className="fixed inset-0 flex z-40">
-                  <div className="fixed inset-0">
-                    <div
-                      className="absolute inset-0 bg-gray-600 opacity-75"
-                      onClick={() => { this.setState({ showMenu: false }) }}
-                    ></div>
-                  </div>
+  let example: Example | undefined;
+  if (selectedExample) {
+    example = (ExamplesList as any)[selectedExample];
+  }
 
-                  <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
-                    <div className="absolute top-0 right-0 -mr-14 p-1">
-                      <button
-                        onClick={() => { this.setState({ showMenu: false }) }}
-                        className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
-                        aria-label="Close sidebar"
-                      >
-                        <svg
-                          className="h-6 w-6 text-white"
-                          stroke="currentColor"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div className="flex-1 h-0 pt-5 overflow-y-auto">
-                      <nav className="mt-5 px-2 mb-4">
-                        <p className="cursor-pointer p-2 font-semibold text-lg" onClick={() => {this.setState({selectedExample: undefined})}}>Examples</p>
-                        <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-                          {
-                            examplesIterator.map((value) => {
-                              return <li key={value[0]} className={`cursor-pointer hover:bg-sky-500/[.3] ${value[0] === selectedExample && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setNewQuery('selectedExample', value[0]); this.setState({ showMenu: false }) }}>{value[1].displayName}</li>
-                            })
-                          }
-                        </ul>
-                      </nav>
-                    </div>
-                  </div>
-                  <div className="flex-shrink-0 w-14">
-                    {/* Force sidebar to shrink to fit close icon */}
-                  </div>
-                </div>
+  return (
+    <div className="py-4 lg:py-8">
+      <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
+        {!showMenu && (
+          <div className="lg:hidden">
+            <button
+              onClick={() => {
+                setShowMenu(true);
+              }}
+              className="flex text-gray-500 ml-6  hover:text-gray-900 focus:outline-none"
+              aria-label="Open sidebar"
+            >
+              <span>Open Navigation ➔</span>
+            </button>
+          </div>
+        )}
+        {showMenu && (
+          <div className="z-60 lg:hidden">
+            <div className="fixed inset-0 flex z-40">
+              <div className="fixed inset-0">
+                <div
+                  className="absolute inset-0 bg-gray-600 opacity-75"
+                  onClick={() => {
+                    setShowMenu(false);
+                  }}
+                ></div>
               </div>
-            )
-          }
-          
-          <div className="flex flex-row" id="main-content">
-            <div className="hidden lg:flex lg:flex-shrink-0">
-              <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
-                <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
 
-                  <nav className="flex-1 bg-white">
-                  <p className="cursor-pointer p-2 font-semibold text-lg" onClick={() => { this.setNewQuery('selectedExample', undefined) }}>Examples</p>
-                    <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-                      {
-                        examplesIterator.map((value) => {
-                          return <li key={value[0]} className={`cursor-pointer hover:bg-sky-500/[.3] ${value[0] === selectedExample && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setNewQuery('selectedExample', value[0]) }}>{value[1].displayName}</li>
-                        })
-                      }
+              <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
+                <div className="absolute top-0 right-0 -mr-14 p-1">
+                  <button
+                    onClick={() => {
+                      setShowMenu(false);
+                    }}
+                    className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
+                    aria-label="Close sidebar"
+                  >
+                    <svg
+                      className="h-6 w-6 text-white"
+                      stroke="currentColor"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div className="flex-1 h-0 pt-5 overflow-y-auto">
+                  <nav className="mt-5 px-2 mb-4">
+                    <p
+                      className="cursor-pointer p-2 font-semibold text-lg"
+                      onClick={() => {
+                        setSelectedExample(undefined);
+                      }}
+                    >
+                      Examples
+                    </p>
+                    <ul className="border-l border-gray-200 pl-4 ml-3 mt-1">
+                      {examplesIterator.map((value) => (
+                        <li
+                          key={value[0]}
+                          className={`cursor-pointer hover:bg-sky-500/[.3] ${value[0] === selectedExample && 'bg-sky-500/[.3]'
+                            } p-2`}
+                          onClick={() => {
+                            setNewQuery('selectedExample', value[0]);
+                            setShowMenu(false);
+                          }}
+                        >
+                          {value[1].displayName}
+                        </li>
+                      ))}
                     </ul>
                   </nav>
-
                 </div>
               </div>
+              <div className="flex-shrink-0 w-14">
+                {/* Force sidebar to shrink to fit close icon */}
+              </div>
             </div>
-            <div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16)">
-              {
-                example ?
-                  <div
-                    className={`grid grid-cols-2 gap-4 mt-4`}
+          </div>
+        )}
+
+        <div className="flex flex-row" id="main-content">
+          <div className="hidden lg:flex lg:flex-shrink-0">
+            <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
+              <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
+                <nav className="flex-1 bg-white">
+                  <p
+                    className="cursor-pointer p-2 font-semibold text-lg"
+                    onClick={() => {
+                      setNewQuery('selectedExample', undefined);
+                    }}
                   >
-                    <div className={`col-span-2`}>
-                      <GithubButton
-                        text="See Example on GitHub"
-                        href={`https://github.com/asyncapi/modelina/tree/master/examples/${selectedExample}`}
-                        inNav="true"
-                      />
-                      <div className="prose py-6">
-                        <ReactMarkdown>{example.description}</ReactMarkdown>
-                        <a href={`https://github.com/asyncapi/modelina/edit/master/examples/${selectedExample}/README.md`} className="bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-semibold p-2 rounded border border-blue-400">Edit Description</a>
-                      </div>
-                    </div>
-                    <div className={`col-span-1`}>
-                      <div
-                        className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold"
-                        style={{ height: '750px' }}
-                      >
-                        <MonacoEditorWrapper
-                          options={{
-                            readOnly: true
-                          }}
-                          key={selectedExample}
-                          value={example.code}
-                          language={"typescript"}
-                        />
-                      </div>
-                    </div>
-                    <div className={`col-span-1`}>
-                      <div
-                        className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold"
-                        style={{ height: '750px' }}
+                    Examples
+                  </p>
+                  <ul className="border-l border-gray-200 pl-4 ml-3 mt-1">
+                    {examplesIterator.map((value) => (
+                      <li
+                        key={value[0]}
+                        className={`cursor-pointer hover:bg-sky-500/[.3] ${value[0] === selectedExample && 'bg-sky-500/[.3]'
+                          } p-2`}
+                        onClick={() => {
+                          setNewQuery('selectedExample', value[0]);
+                        }}
                       >
-                        <MonacoEditorWrapper
-                          options={{
-                            readOnly: true
-                          }}
-                          key={selectedExample}
-                          value={example.output}
-                          language={example.language}
-                        />
-                      </div>
-                    </div>
+                        {value[1].displayName}
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col ml-6 w-0 flex-1 max-w-full lg:max-w-(screen-16)">
+            {example ? (
+              <div className={`grid grid-cols-2 gap-4 mt-4`}>
+                <div className={`col-span-2`}>
+                  <GithubButton
+                    text="See Example on GitHub"
+                    href={`https://github.com/asyncapi/modelina/tree/master/examples/${selectedExample}`}
+                    inNav="true"
+                  />
+                  <div className="prose py-6">
+                    <ReactMarkdown>{example.description}</ReactMarkdown>
+                    <a
+                      href={`https://github.com/asyncapi/modelina/edit/master/examples/${selectedExample}/README.md`}
+                      className="bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-semibold p-2 rounded border border-blue-400"
+                    >
+                      Edit Description
+                    </a>
                   </div>
-                  :
-                  <div className="prose" style={{ maxWidth: '100%' }}>
-                    <div className={"flex md:justify-end my-4 md:my-0"}>
-                      <GithubButton
-                        text="Edit readme on GitHub"
-                        href={`https://github.com/asyncapi/modelina/edit/master/examples/README.md`}
-                        inNav="true"
-                      />
-                    </div>
-                    <ReactMarkdown rehypePlugins={[rehypeSlug]} remarkPlugins={[remarkGfm]}>{ExamplesReadme}</ReactMarkdown>
+                </div>
+                <div className={`col-span-1`}>
+                  <div
+                    className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold"
+                    style={{ height: '750px' }}
+                  >
+                    <MonacoEditorWrapper
+                      options={{
+                        readOnly: true,
+                      }}
+                      key={selectedExample}
+                      value={example.code}
+                      language={'typescript'}
+                    />
                   </div>
-              }
-            </div>
+                </div>
+                <div className={`col-span-1`}>
+                  <div
+                    className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold"
+                    style={{ height: '750px' }}
+                  >
+                    <MonacoEditorWrapper
+                      options={{
+                        readOnly: true,
+                      }}
+                      key={selectedExample}
+                      value={example.output}
+                      language={example.language}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="prose" style={{ maxWidth: '100%' }}>
+                <div className={'flex md:justify-end my-4 md:my-0'}>
+                  <GithubButton
+                    text="Edit readme on GitHub"
+                    href={`https://github.com/asyncapi/modelina/edit/master/examples/README.md`}
+                    inNav="true"
+                  />
+                </div>
+                <ReactMarkdown rehypePlugins={[rehypeSlug]} remarkPlugins={[remarkGfm]}>
+                  {ExamplesReadme}
+                </ReactMarkdown>
+              </div>
+            )}
           </div>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
 export default withRouter(Examples);
diff --git a/modelina-website/src/components/playground/GeneratedModels.tsx b/modelina-website/src/components/playground/GeneratedModels.tsx
index d69deb07c1..d20e95e990 100644
--- a/modelina-website/src/components/playground/GeneratedModels.tsx
+++ b/modelina-website/src/components/playground/GeneratedModels.tsx
@@ -5,7 +5,7 @@ import { usePlaygroundContext } from '../contexts/PlaygroundContext';
 
 interface GeneratedModelsComponentProps {
   showAllInOneFile?: boolean;
-  setNewQuery?: (queryKey: string, queryValue: string) => void;
+  setNewQuery?: (queryKey: string, queryValue: any) => void;
 }
 
 const GeneratedModelsComponent: React.FC<GeneratedModelsComponentProps> = ({
diff --git a/modelina-website/src/components/playground/PlaygroundOptions.tsx b/modelina-website/src/components/playground/PlaygroundOptions.tsx
index 7948f27aca..804d218bb8 100644
--- a/modelina-website/src/components/playground/PlaygroundOptions.tsx
+++ b/modelina-website/src/components/playground/PlaygroundOptions.tsx
@@ -14,7 +14,7 @@ import CplusplusGeneratorOptions from './options/CplusplusGeneratorOptions';
 import PhpGeneratorOptions from './options/PhpGeneratorOptions';
 
 interface PlaygroundOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 const PlaygroundOptions: React.FC<PlaygroundOptionsProps> = ({ setNewConfig }) => {
diff --git a/modelina-website/src/components/playground/options/CSharpGeneratorOptions.tsx b/modelina-website/src/components/playground/options/CSharpGeneratorOptions.tsx
index e9fd42e1a2..14b29acc88 100644
--- a/modelina-website/src/components/playground/options/CSharpGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/CSharpGeneratorOptions.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { debounce } from 'lodash';
 import { PlaygroundCSharpConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import Select from '@/components/Select';
-import { debounce } from 'lodash';
 import InfoModal from '@/components/InfoModal';
 
 interface CSharpGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface CSharpGeneratorState {
@@ -14,295 +14,262 @@ interface CSharpGeneratorState {
 
 export const defaultState: CSharpGeneratorState = {};
 
-class CSharpGeneratorOptions extends React.Component<
-  CSharpGeneratorOptionsProps,
-  CSharpGeneratorState
-> {
-  static contextType = PlaygroundCSharpConfigContext;
-  declare context: React.ContextType<typeof PlaygroundCSharpConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.onChangeArrayType = this.onChangeArrayType.bind(this);
-    this.onChangeAutoImplementProperties =
-      this.onChangeAutoImplementProperties.bind(this);
-    this.onChangeOverwriteHashCodeSupport =
-      this.onChangeOverwriteHashCodeSupport.bind(this);
-    this.onChangeIncludeJson = this.onChangeIncludeJson.bind(this);
-    this.onChangeOverwriteEqualSupport =
-      this.onChangeOverwriteEqualSupport.bind(this);
-    this.onChangeIncludeNewtonsoft = this.onChangeIncludeNewtonsoft.bind(this);
-    this.onChangeNullable = this.onChangeNullable.bind(this);
-    this.onChangeNamespace = this.onChangeNamespace.bind(this);
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-  }
+const CSharpGeneratorOptions: React.FC<CSharpGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundCSharpConfigContext);
+  const [state, setState] = useState<CSharpGeneratorState>(defaultState);
 
-  onChangeArrayType(arrayType: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpArrayType', String(arrayType));
-    }
-  }
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      namespace: context?.csharpNamespace,
+    }));
+  }, [context?.csharpNamespace])
 
-  onChangeAutoImplementProperties(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpAutoImplemented', event.target.checked);
-    }
-  }
+  const onChangeArrayType = (arrayType: any) => {
+    setNewConfig?.('csharpArrayType', String(arrayType));
+  };
 
-  onChangeOverwriteHashCodeSupport(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpOverwriteHashcode', event.target.checked);
-    }
-  }
+  const onChangeAutoImplementProperties = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpAutoImplemented', event.target.checked);
+  };
 
-  onChangeIncludeJson(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpIncludeJson', event.target.checked);
-    }
-  }
+  const onChangeOverwriteHashCodeSupport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpOverwriteHashcode', event.target.checked);
+  };
 
-  onChangeOverwriteEqualSupport(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpOverwriteEqual', event.target.checked);
-    }
-  }
+  const onChangeIncludeJson = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpIncludeJson', event.target.checked);
+  };
 
-  onChangeIncludeNewtonsoft(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpIncludeNewtonsoft', event.target.checked);
-    }
-  }
+  const onChangeOverwriteEqualSupport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpOverwriteEqual', event.target.checked);
+  };
 
-  onChangeNullable(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('csharpNullable', event.target.checked);
-    }
-  }
+  const onChangeIncludeNewtonsoft = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpIncludeNewtonsoft', event.target.checked);
+  };
 
-  componentDidMount() {
-    this.setState({ ...this.state, namespace: this.context?.csharpNamespace });
-  }
+  const onChangeNullable = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig?.('csharpNullable', event.target.checked);
+  };
 
-  onChangeNamespace(event: any) {
-    this.setState({ ...this.state, namespace: event.target.value });
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('csharpNamespace', event.target.value);
-    }
-  }
+  const onChangeNamespace = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, namespace: event.target.value });
+    setNewConfig && debouncedSetNewConfig('csharpNamespace', event.target.value);
+  };
 
-  debouncedSetNewConfig = debounce(this.props.setNewConfig || (() => { }), 500);
+  const debouncedSetNewConfig = debounce(setNewConfig || (() => { }), 500);
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          CSharp Specific options
-        </h3>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Namespace:">
-            <p className="font-regular">
-              In C#, a namespace is used to organize code into logical groups
-              and avoid naming conflicts. It provides a way to uniquely identify
-              classes, structs, interfaces, and other types within a project. By
-              specifying a namespace for the generated C# data models, you can
-              control their visibility and easily reference them in other parts
-              of your code.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Namespace
-            </span>
-            <input
-              type="text"
-              className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="csharpNamespace"
-              value={this.state.namespace}
-              onChange={this.onChangeNamespace}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="C# array type:">
-            <p className="font-regular">
-              In C#, arrays are used to store collections of elements of the
-              same type. The <strong>C# array type</strong> option
-              determines how arrays are represented in the generated C# data
-              models. If you choose the <strong>array</strong> type, the models will use the C# array syntax,
-              such as int[] or string[].
-              <br />
-              <br />
-              Alternatively, if you choose the <strong>List</strong> type, the
-              models will use the List&lt;T&gt; class from the
-              System.Collections.Generic namespace, providing additional
-              functionality and flexibility for working with collections.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              C# array type
-            </span>
-            <Select
-              options={[
-                { value: 'List', text: 'List' },
-                { value: 'Array', text: 'Array' }
-              ]}
-              value={this.context?.csharpArrayType}
-              onChange={this.onChangeArrayType}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include auto-implemented properties:">
-            <p className="font-regular">
-              Auto-implemented properties in C# allow you to define properties
-              without explicitly writing the backing field. The compiler
-              automatically generates the backing field and the get/set methods
-              for you. When the <strong>Include auto-implemented properties</strong> option is
-              enabled, the generated C# data models will use this simplified
-              syntax for property declarations, reducing the amount of
-              boilerplate code you need to write.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include auto-implemented properties
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpAutoImplemented"
-              checked={this.context?.csharpAutoImplemented}
-              onChange={this.onChangeAutoImplementProperties}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include Overwrite HashCode Support:">
-            <p className="font-regular">
-              In C#, the GetHashCode() method is used to generate a hash code
-              for an object. This method is often overridden when you need to
-              define custom equality comparisons or store objects in hash-based
-              data structures. By enabling the <strong>Include Overwrite HashCode Support</strong> option, the
-              generated C# data models will include support for overwriting the
-              GetHashCode() method, allowing you to customize the hash code
-              calculation based on the model's properties.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Overwrite HashCode Support
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpOverwriteHashcode"
-              checked={this.context?.csharpOverwriteHashcode}
-              onChange={this.onChangeOverwriteHashCodeSupport}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include Overwrite Equal Support:">
-            <p className="font-regular">
-              The Equals() method in C# is used to compare two objects for
-              equality. By default, it performs reference equality comparison.
-              However, in certain cases, you may want to override this method to
-              provide custom equality logic based on specific properties or
-              criteria. Enabling the <strong>Include Overwrite Equal Support</strong> option in the
-              generated C# data models includes support for overwriting the
-              Equals() method, allowing you to define your own equality
-              comparisons.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Overwrite Equal Support
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpOverwriteEqual"
-              checked={this.context?.csharpOverwriteEqual}
-              onChange={this.onChangeOverwriteEqualSupport}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include JSON serialization:">
-            <p className="font-regular">
-              In C#, JSON serialization is the process of converting an object
-              to its JSON representation and vice versa. Enabling the <strong>Include JSON serialization</strong> option in the
-              generated C# data models includes the necessary attributes and
-              code to facilitate JSON serialization, making it easy to serialize
-              the models to JSON format or deserialize JSON data into instances
-              of the models.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include JSON serialization
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpIncludeJson"
-              checked={this.context?.csharpIncludeJson}
-              onChange={this.onChangeIncludeJson}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include Newtonsoft serialization:">
-            <p className="font-regular">
-              Newtonsoft.Json (Json.NET) is a popular third-party JSON
-              serialization library for C#. It provides advanced features and
-              customization options for working with JSON data. When the <strong>Include Newtonsoft serialization</strong> option is
-              enabled in the generated C# data models, the necessary attributes
-              and code are included to support serialization and deserialization
-              using the Json.NET library.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Newtonsoft serialization
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpIncludeNewtonsoft"
-              checked={this.context?.csharpIncludeNewtonsoft}
-              onChange={this.onChangeIncludeNewtonsoft}
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Nullable:">
-            <p className="font-regular">
-              In C#, the nullable feature allows you to explicitly indicate
-              whether a value type (such as int, bool, etc.) or a reference type
-              (such as a class) can accept null values. By enabling the <strong>Nullable</strong> option in the generated C# data models,
-              you allow properties to be nullable, meaning they can have a null
-              value in addition to their normal value range. This provides
-              flexibility when dealing with optional or unknown data values.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Nullable
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpNullable"
-              checked={this.context?.csharpNullable}
-              onChange={this.onChangeNullable}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        CSharp Specific options
+      </h3>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Namespace:">
+          <p className="font-regular">
+            In C#, a namespace is used to organize code into logical groups
+            and avoid naming conflicts. It provides a way to uniquely identify
+            classes, structs, interfaces, and other types within a project. By
+            specifying a namespace for the generated C# data models, you can
+            control their visibility and easily reference them in other parts
+            of your code.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Namespace
+          </span>
+          <input
+            type="text"
+            className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="csharpNamespace"
+            value={state.namespace}
+            onChange={onChangeNamespace}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="C# array type:">
+          <p className="font-regular">
+            In C#, arrays are used to store collections of elements of the
+            same type. The <strong>C# array type</strong> option
+            determines how arrays are represented in the generated C# data
+            models. If you choose the <strong>array</strong> type, the models will use the C# array syntax,
+            such as int[] or string[].
+            <br />
+            <br />
+            Alternatively, if you choose the <strong>List</strong> type, the
+            models will use the List&lt;T&gt; class from the
+            System.Collections.Generic namespace, providing additional
+            functionality and flexibility for working with collections.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            C# array type
+          </span>
+          <Select
+            options={[
+              { value: 'List', text: 'List' },
+              { value: 'Array', text: 'Array' }
+            ]}
+            value={context?.csharpArrayType}
+            onChange={onChangeArrayType}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include auto-implemented properties:">
+          <p className="font-regular">
+            Auto-implemented properties in C# allow you to define properties
+            without explicitly writing the backing field. The compiler
+            automatically generates the backing field and the get/set methods
+            for you. When the <strong>Include auto-implemented properties</strong> option is
+            enabled, the generated C# data models will use this simplified
+            syntax for property declarations, reducing the amount of
+            boilerplate code you need to write.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include auto-implemented properties
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpAutoImplemented"
+            checked={context?.csharpAutoImplemented}
+            onChange={onChangeAutoImplementProperties}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include Overwrite HashCode Support:">
+          <p className="font-regular">
+            In C#, the GetHashCode() method is used to generate a hash code
+            for an object. This method is often overridden when you need to
+            define custom equality comparisons or store objects in hash-based
+            data structures. By enabling the <strong>Include Overwrite HashCode Support</strong> option, the
+            generated C# data models will include support for overwriting the
+            GetHashCode() method, allowing you to customize the hash code
+            calculation based on the model's properties.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Overwrite HashCode Support
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpOverwriteHashcode"
+            checked={context?.csharpOverwriteHashcode}
+            onChange={onChangeOverwriteHashCodeSupport}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include Overwrite Equal Support:">
+          <p className="font-regular">
+            The Equals() method in C# is used to compare two objects for
+            equality. By default, it performs reference equality comparison.
+            However, in certain cases, you may want to override this method to
+            provide custom equality logic based on specific properties or
+            criteria. Enabling the <strong>Include Overwrite Equal Support</strong> option in the
+            generated C# data models includes support for overwriting the
+            Equals() method, allowing you to define your own equality
+            comparisons.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Overwrite Equal Support
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpOverwriteEqual"
+            checked={context?.csharpOverwriteEqual}
+            onChange={onChangeOverwriteEqualSupport}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include JSON serialization:">
+          <p className="font-regular">
+            In C#, JSON serialization is the process of converting an object
+            to its JSON representation and vice versa. Enabling the <strong>Include JSON serialization</strong> option in the
+            generated C# data models includes the necessary attributes and
+            code to facilitate JSON serialization, making it easy to serialize
+            the models to JSON format or deserialize JSON data into instances
+            of the models.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include JSON serialization
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpIncludeJson"
+            checked={context?.csharpIncludeJson}
+            onChange={onChangeIncludeJson}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include Newtonsoft serialization:">
+          <p className="font-regular">
+            Newtonsoft.Json (Json.NET) is a popular third-party JSON
+            serialization library for C#. It provides advanced features and
+            customization options for working with JSON data. When the <strong>Include Newtonsoft serialization</strong> option is
+            enabled in the generated C# data models, the necessary attributes
+            and code are included to support serialization and deserialization
+            using the Json.NET library.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Newtonsoft serialization
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpIncludeNewtonsoft"
+            checked={context?.csharpIncludeNewtonsoft}
+            onChange={onChangeIncludeNewtonsoft}
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Nullable:">
+          <p className="font-regular">
+            In C#, the nullable feature allows you to explicitly indicate
+            whether a value type (such as int, bool, etc.) or a reference type
+            (such as a class) can accept null values. By enabling the <strong>Nullable</strong> option in the generated C# data models,
+            you allow properties to be nullable, meaning they can have a null
+            value in addition to their normal value range. This provides
+            flexibility when dealing with optional or unknown data values.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Nullable
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpNullable"
+            checked={context?.csharpNullable}
+            onChange={onChangeNullable}
+          />
+        </label>
+      </li>
+    </ul>
+  );
 }
+
 export default CSharpGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/CplusplusGeneratorOptions.tsx b/modelina-website/src/components/playground/options/CplusplusGeneratorOptions.tsx
index e6757e1b2c..743ed728e5 100644
--- a/modelina-website/src/components/playground/options/CplusplusGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/CplusplusGeneratorOptions.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { PlaygroundCplusplusConfigContext } from '@/components/contexts/PlaygroundConfigContext';
+import React, { useContext, useEffect, useState } from 'react';
 import { debounce } from 'lodash';
+import { PlaygroundCplusplusConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
 
 interface CplusplusGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface CplusplusGeneratorState {
@@ -13,60 +13,54 @@ interface CplusplusGeneratorState {
 
 export const defaultState: CplusplusGeneratorState = {};
 
-class CplusplusGeneratorOptions extends React.Component<
-  CplusplusGeneratorOptionsProps,
-  CplusplusGeneratorState
-> {
-  static contextType = PlaygroundCplusplusConfigContext;
-  declare context: React.ContextType<typeof PlaygroundCplusplusConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.setState({ ...this.state, namespace: this.context?.cplusplusNamespace });
-    this.onChangeNamespace = this.onChangeNamespace.bind(this);
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-  }
+const CplusplusGeneratorOptions: React.FC<CplusplusGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundCplusplusConfigContext);
+  const [state, setState] = useState<CplusplusGeneratorState>(defaultState);
 
-  componentDidMount() {
-    this.setState({ ...this.state, namespace: this.context?.cplusplusNamespace });
-  }
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      namespace: context?.cplusplusNamespace,
+    }));
+  }, [context?.cplusplusNamespace]);
 
-  onChangeNamespace(event: any) {
-    this.setState({ ...this.state, namespace: event.target.value })
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('cplusplusNamespace', event.target.value);
-    }
-  }
+  const debouncedSetNewConfig = debounce(setNewConfig || (() => { }), 500);
 
-  debouncedSetNewConfig = debounce(this.props.setNewConfig || (() => {}), 500);
+  const onChangeNamespace = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState((prevState) => ({
+      ...prevState,
+      namespace: event.target.value,
+    }));
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          C++ Specific options
-        </h3>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Namespace :">
-            <p>
+    setNewConfig && debouncedSetNewConfig('cplusplusNamespace', event.target.value);
+  };
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        C++ Specific options
+      </h3>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Namespace :">
+          <p>
             In C++, a namespace is a feature that allows you to organize your code into logical groups or containers. It helps in avoiding naming conflicts between different parts of your code and provides a way to encapsulate related code.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Namespace
-            </span>
-            <input
-              type="text"
-              className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="cplusplusNamespace"
-              value={this.state.namespace}
-              onChange={this.onChangeNamespace}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Namespace
+          </span>
+          <input
+            type="text"
+            className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="cplusplusNamespace"
+            value={state.namespace}
+            onChange={onChangeNamespace}
+          />
+        </label>
+      </li>
+    </ul>
+  );
 }
-export default CplusplusGeneratorOptions;
+
+export default CplusplusGeneratorOptions;
\ No newline at end of file
diff --git a/modelina-website/src/components/playground/options/DartGeneratorOptions.tsx b/modelina-website/src/components/playground/options/DartGeneratorOptions.tsx
index 5cd0d59857..6d0fc9746a 100644
--- a/modelina-website/src/components/playground/options/DartGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/DartGeneratorOptions.tsx
@@ -1,35 +1,28 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { PlaygroundDartConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 
 interface DartGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
-interface DartGeneratorState {}
+interface DartGeneratorState { }
 
 export const defaultState: DartGeneratorState = {};
 
-class DartGeneratorOptions extends React.Component<
-  DartGeneratorOptionsProps,
-  DartGeneratorState
-> {
-  static contextType = PlaygroundDartConfigContext;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-  }
+const DartGeneratorOptions: React.FC<DartGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundDartConfigContext);
+  const [ state, setState ] = useState<DartGeneratorState>(defaultState);
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Dart Specific options
-        </h3>
-        <span className="mt-1 max-w-2xl text-sm text-gray-500">
-          Currently no options are available
-        </span>
-      </ul>
-    );
-  }
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Dart Specific options
+      </h3>
+      <span className="mt-1 max-w-2xl text-sm text-gray-500">
+        Currently no options are available
+      </span>
+    </ul>
+  );
 }
-export default DartGeneratorOptions;
+
+export default DartGeneratorOptions;
\ No newline at end of file
diff --git a/modelina-website/src/components/playground/options/GeneralOptions.tsx b/modelina-website/src/components/playground/options/GeneralOptions.tsx
index 2ced39b724..d74bcb061e 100644
--- a/modelina-website/src/components/playground/options/GeneralOptions.tsx
+++ b/modelina-website/src/components/playground/options/GeneralOptions.tsx
@@ -1,265 +1,236 @@
 "use client"
-import React from 'react';
-import Select from '../../Select';
+import React, { useContext, useState } from 'react';
 import { modelinaLanguageOptions } from '@/types';
 import { PlaygroundGeneralConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
+import Select from '../../Select';
 
-interface WithRouterProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+interface GeneralOptionsProps {
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
+
 interface GeneralOptionsState { }
 
 export const defaultState: GeneralOptionsState = {};
 
-class GeneralOptions extends React.Component<
-  WithRouterProps,
-  GeneralOptionsState
-> {
-  static contextType = PlaygroundGeneralConfigContext;
-  declare context: React.ContextType<typeof PlaygroundGeneralConfigContext>;
-
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.onChangeLanguage = this.onChangeLanguage.bind(this);
-    this.onChangeShowTypeMappingExample = this.onChangeShowTypeMappingExample.bind(this);
-    this.onChangeIndentationType = this.onChangeIndentationType.bind(this);
-    this.onChangePropertyNamingFormat = this.onChangePropertyNamingFormat.bind(this);
-    this.onChangeModelNamingFormat = this.onChangeModelNamingFormat.bind(this);
-    this.onChangeEnumKeyNamingFormat = this.onChangeEnumKeyNamingFormat.bind(this);
-  }
-
-  onChangeLanguage(language: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('language', String(language));
-    }
-  }
-
-  onChangeShowTypeMappingExample(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('showTypeMappingExample', event.target.checked);
-    }
-  }
-
-  onChangeIndentationType(value: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('indentationType', String(value));
-    }
-  }
-
-  onChangePropertyNamingFormat(value: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('propertyNamingFormat', String(value));
-    }
-  }
-
-  onChangeModelNamingFormat(value: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('modelNamingFormat', String(value));
-    }
-  }
-
-  onChangeEnumKeyNamingFormat(value: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('enumKeyNamingFormat', String(value));
-    }
-  }
-
-
-
-
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          General options
-        </h3>
-        <li className="flex gap-1 items-center mt-3">
-          <InfoModal text="Output type :">
-            <p>
-              The provided option allows you to change the type of output you want to generate.
-              However, please be aware that certain outputs may not be supported within the playground
-              environment. To obtain an updated list of supported outputs, kindly refer to {' '}
-              <a href="https://github.com/asyncapi/modelina#features" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline">the main readme file</a>.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 justify-between items-center cursor-pointer">
-            <span className=" text-sm text-gray-500">
-              Output type
-            </span>
-            <Select
-              options={modelinaLanguageOptions}
-              value={this.context?.language}
-              onChange={this.onChangeLanguage}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Include change type mapping example :">
-            <p>
-              In code generation, a common task is to map the data types from the input model to the output. In Modelina you can do this through type mapping.
-              <br /><br />
-              This option includes a simple example type mapping, that maps integers to a custom type.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include change type mapping example
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="includeDescriptions"
-              checked={this.context?.showTypeMappingExample}
-              onChange={this.onChangeShowTypeMappingExample}
-            />
-          </label>
-        </li>
-
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Change indentation type :">
-            <p>
-              The indentation type option allows you to choose between using tabs or spaces for indentation in the generated code.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Change indentation type
-            </span>
-            <Select
-              options={[
-                { value: 'tabs', text: 'Tabs' },
-                { value: 'spaces', text: 'Spaces' }
-              ]}
-
-              value={this.context?.indentationType}
-              onChange={this.onChangeIndentationType}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Change property naming format :">
-            <p>
-              This option allows you to customize the naming style for properties in your code. There are no limitations to how you can format it, but for this simple example it provides the following options:
-              <br /> <br />
-              Default: This option refers to the default naming format for properties, which may vary depending on the programming language or coding convention being used.
-              <br /> <br />
-              Snake case: Property names are written in lowercase letters, and words are separated by underscores. (e.g: property_name)
-              <br /> <br />
-              Pascal case: Property names start with an uppercase letter, and subsequent words are also capitalized. (e.g: PropertyName)
-              <br /> <br />
-              Camel case: Property names start with a lowercase letter, and subsequent words are capitalized. (e.g: propertyName)
-              <br /> <br />
-              Param case: Property names use hyphens to separate words, and all letters are in lowercase. (e.g: property-name)
-              <br /> <br />
-              Constant case: Property names are written in uppercase letters, and words are separated by underscores. (e.g: PROPERTY_NAME)
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Change property naming format
-            </span>
-            <Select
-              options={[
-                { value: 'default', text: 'Default' },
-                { value: 'snake_case', text: 'Snake Case' },
-                { value: 'pascal_case', text: 'Pascal Case' },
-                { value: 'camel_case', text: 'Camel Case' },
-                { value: 'param_case', text: 'Param Case' },
-                { value: 'constant_case', text: 'Constant Case' }
-              ]}
-
-              value={this.context?.propertyNamingFormat}
-              onChange={this.onChangePropertyNamingFormat}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Change model naming format :">
-            <p>
-              This option allows you to customize the naming style for model names. There are no limitations to how you can format it, but for this simple example it provides the following options:
-              <br /> <br />
-              Default: This option refers to the default naming format for models, which may vary depending on the programming language or coding convention being used.
-              <br /> <br />
-              Snake case: Model names are written in lowercase letters, and words are separated by underscores. (e.g: model_name)
-              <br /> <br />
-              Pascal case: Model names start with an uppercase letter, and subsequent words are also capitalized. (e.g: ModelName)
-              <br /> <br />
-              Camel case: Model names start with a lowercase letter, and subsequent words are capitalized. (e.g: modelName)
-              <br /> <br />
-              Param case: Model names use hyphens to separate words, and all letters are in lowercase. (e.g: model-name)
-              <br /> <br />
-              Constant case: Model names are written in uppercase letters, and words are separated by underscores. (e.g: MODEL_NAME)
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Change model naming format
-            </span>
-            <Select
-              options={[
-                { value: 'default', text: 'Default' },
-                { value: 'snake_case', text: 'Snake Case' },
-                { value: 'pascal_case', text: 'Pascal Case' },
-                { value: 'camel_case', text: 'Camel Case' },
-                { value: 'param_case', text: 'Param Case' },
-                { value: 'constant_case', text: 'Constant Case' }
-              ]}
-
-              value={this.context?.modelNamingFormat}
-              onChange={this.onChangeModelNamingFormat}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-
-        <li className="flex gap-1 items-center">
-          <InfoModal text="Change enum key naming format :">
-            <p>
-              This option allows you to customize the naming style for enum keys. There are no limitations to how you can format it, but for this simple example it provides the following options:
-              <br /> <br />
-              Default: This option refers to the default naming format for enum keys, which may vary depending on the programming language or coding convention being used.
-              <br /> <br />
-              Snake case: Enum key names are written in lowercase letters, and words are separated by underscores. (e.g: enum_key)
-              <br /> <br />
-              Pascal case: Enum key names start with an uppercase letter, and subsequent words are also capitalized. (e.g: EnumKey)
-              <br /> <br />
-              Camel case: Enum key names start with a lowercase letter, and subsequent words are capitalized. (e.g: enumKey)
-              <br /> <br />
-              Param case: Enum key names use hyphens to separate words, and all letters are in lowercase. (e.g: enum-key)
-              <br /> <br />
-              Constant case: Enum key names are written in uppercase letters, and words are separated by underscores. (e.g: ENUM_KEY)
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Change enum key naming format
-            </span>
-            <Select
-              options={[
-                { value: 'default', text: 'Default' },
-                { value: 'snake_case', text: 'Snake Case' },
-                { value: 'pascal_case', text: 'Pascal Case' },
-                { value: 'camel_case', text: 'Camel Case' },
-                { value: 'param_case', text: 'Param Case' },
-                { value: 'constant_case', text: 'Constant Case' }
-              ]}
-
-              value={this.context?.enumKeyNamingFormat}
-              onChange={this.onChangeEnumKeyNamingFormat}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
-}
-export default GeneralOptions;
+const GeneralOptions: React.FC<GeneralOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundGeneralConfigContext);
+  const [state, setState] = useState<GeneralOptionsState>(defaultState);
+
+  const onChangeLanguage = (language: any) => {
+      setNewConfig?.('language', String(language));
+  };
+
+  const onChangeShowTypeMappingExample = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('showTypeMappingExample', event.target.checked);
+  };
+
+  const onChangeIndentationType = (value: any) => {
+      setNewConfig?.('indentationType', String(value));
+  };
+
+  const onChangePropertyNamingFormat = (value: any) => {
+      setNewConfig?.('propertyNamingFormat', String(value));
+  };
+
+  const onChangeModelNamingFormat = (value: any) => {
+      setNewConfig?.('modelNamingFormat', String(value));
+  };
+
+  const onChangeEnumKeyNamingFormat = (value: any) => {
+      setNewConfig?.('enumKeyNamingFormat', String(value));
+  };
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        General options
+      </h3>
+      <li className="flex gap-1 items-center mt-3">
+        <InfoModal text="Output type :">
+          <p>
+            The provided option allows you to change the type of output you want to generate.
+            However, please be aware that certain outputs may not be supported within the playground
+            environment. To obtain an updated list of supported outputs, kindly refer to {' '}
+            <a href="https://github.com/asyncapi/modelina#features" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline">the main readme file</a>.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 justify-between items-center cursor-pointer">
+          <span className=" text-sm text-gray-500">
+            Output type
+          </span>
+          <Select
+            options={modelinaLanguageOptions}
+            value={context?.language}
+            onChange={onChangeLanguage}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Include change type mapping example :">
+          <p>
+            In code generation, a common task is to map the data types from the input model to the output. In Modelina you can do this through type mapping.
+            <br /><br />
+            This option includes a simple example type mapping, that maps integers to a custom type.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include change type mapping example
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="includeDescriptions"
+            checked={context?.showTypeMappingExample}
+            onChange={onChangeShowTypeMappingExample}
+          />
+        </label>
+      </li>
+
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Change indentation type :">
+          <p>
+            The indentation type option allows you to choose between using tabs or spaces for indentation in the generated code.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Change indentation type
+          </span>
+          <Select
+            options={[
+              { value: 'tabs', text: 'Tabs' },
+              { value: 'spaces', text: 'Spaces' }
+            ]}
+
+            value={context?.indentationType}
+            onChange={onChangeIndentationType}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Change property naming format :">
+          <p>
+            This option allows you to customize the naming style for properties in your code. There are no limitations to how you can format it, but for this simple example it provides the following options:
+            <br /> <br />
+            Default: This option refers to the default naming format for properties, which may vary depending on the programming language or coding convention being used.
+            <br /> <br />
+            Snake case: Property names are written in lowercase letters, and words are separated by underscores. (e.g: property_name)
+            <br /> <br />
+            Pascal case: Property names start with an uppercase letter, and subsequent words are also capitalized. (e.g: PropertyName)
+            <br /> <br />
+            Camel case: Property names start with a lowercase letter, and subsequent words are capitalized. (e.g: propertyName)
+            <br /> <br />
+            Param case: Property names use hyphens to separate words, and all letters are in lowercase. (e.g: property-name)
+            <br /> <br />
+            Constant case: Property names are written in uppercase letters, and words are separated by underscores. (e.g: PROPERTY_NAME)
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Change property naming format
+          </span>
+          <Select
+            options={[
+              { value: 'default', text: 'Default' },
+              { value: 'snake_case', text: 'Snake Case' },
+              { value: 'pascal_case', text: 'Pascal Case' },
+              { value: 'camel_case', text: 'Camel Case' },
+              { value: 'param_case', text: 'Param Case' },
+              { value: 'constant_case', text: 'Constant Case' }
+            ]}
+
+            value={context?.propertyNamingFormat}
+            onChange={onChangePropertyNamingFormat}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Change model naming format :">
+          <p>
+            This option allows you to customize the naming style for model names. There are no limitations to how you can format it, but for this simple example it provides the following options:
+            <br /> <br />
+            Default: This option refers to the default naming format for models, which may vary depending on the programming language or coding convention being used.
+            <br /> <br />
+            Snake case: Model names are written in lowercase letters, and words are separated by underscores. (e.g: model_name)
+            <br /> <br />
+            Pascal case: Model names start with an uppercase letter, and subsequent words are also capitalized. (e.g: ModelName)
+            <br /> <br />
+            Camel case: Model names start with a lowercase letter, and subsequent words are capitalized. (e.g: modelName)
+            <br /> <br />
+            Param case: Model names use hyphens to separate words, and all letters are in lowercase. (e.g: model-name)
+            <br /> <br />
+            Constant case: Model names are written in uppercase letters, and words are separated by underscores. (e.g: MODEL_NAME)
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Change model naming format
+          </span>
+          <Select
+            options={[
+              { value: 'default', text: 'Default' },
+              { value: 'snake_case', text: 'Snake Case' },
+              { value: 'pascal_case', text: 'Pascal Case' },
+              { value: 'camel_case', text: 'Camel Case' },
+              { value: 'param_case', text: 'Param Case' },
+              { value: 'constant_case', text: 'Constant Case' }
+            ]}
+
+            value={context?.modelNamingFormat}
+            onChange={onChangeModelNamingFormat}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+
+      <li className="flex gap-1 items-center">
+        <InfoModal text="Change enum key naming format :">
+          <p>
+            This option allows you to customize the naming style for enum keys. There are no limitations to how you can format it, but for this simple example it provides the following options:
+            <br /> <br />
+            Default: This option refers to the default naming format for enum keys, which may vary depending on the programming language or coding convention being used.
+            <br /> <br />
+            Snake case: Enum key names are written in lowercase letters, and words are separated by underscores. (e.g: enum_key)
+            <br /> <br />
+            Pascal case: Enum key names start with an uppercase letter, and subsequent words are also capitalized. (e.g: EnumKey)
+            <br /> <br />
+            Camel case: Enum key names start with a lowercase letter, and subsequent words are capitalized. (e.g: enumKey)
+            <br /> <br />
+            Param case: Enum key names use hyphens to separate words, and all letters are in lowercase. (e.g: enum-key)
+            <br /> <br />
+            Constant case: Enum key names are written in uppercase letters, and words are separated by underscores. (e.g: ENUM_KEY)
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Change enum key naming format
+          </span>
+          <Select
+            options={[
+              { value: 'default', text: 'Default' },
+              { value: 'snake_case', text: 'Snake Case' },
+              { value: 'pascal_case', text: 'Pascal Case' },
+              { value: 'camel_case', text: 'Camel Case' },
+              { value: 'param_case', text: 'Param Case' },
+              { value: 'constant_case', text: 'Constant Case' }
+            ]}
+
+            value={context?.enumKeyNamingFormat}
+            onChange={onChangeEnumKeyNamingFormat}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+    </ul>
+  );
+};
+
+export default GeneralOptions;
\ No newline at end of file
diff --git a/modelina-website/src/components/playground/options/GoGeneratorOptions.tsx b/modelina-website/src/components/playground/options/GoGeneratorOptions.tsx
index ff09a7a1ae..e1cd3be600 100644
--- a/modelina-website/src/components/playground/options/GoGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/GoGeneratorOptions.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState, useContext, useCallback } from 'react';
 import { debounce } from 'lodash';
 import { PlaygroundGoConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
 
 interface GoGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface GoGeneratorState {
@@ -13,60 +13,54 @@ interface GoGeneratorState {
 
 export const defaultState: GoGeneratorState = {};
 
-class GoGeneratorOptions extends React.Component<
-  GoGeneratorOptionsProps,
-  GoGeneratorState
-> {
-  static contextType = PlaygroundGoConfigContext;
-  declare context: React.ContextType<typeof PlaygroundGoConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-    this.onChangePackageName = this.onChangePackageName.bind(this);
-  }
+const GoGeneratorOptions: React.FC<GoGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundGoConfigContext);
+  const [state, setState] = useState<GoGeneratorState>(defaultState);
 
-  debouncedSetNewConfig = debounce(this.props.setNewConfig as (queryKey: string, queryValue: string) => void, 500);
+  const debouncedSetNewConfig = debounce(
+    (queryKey: string, queryValue: any) => setNewConfig?.(queryKey, queryValue),
+    500
+  );
 
-  componentDidMount(): void {
-    this.setState({ ...this.state, packageName: this.context?.goPackageName });
-  }
+  useEffect(() => {
+    setState({ ...state, packageName: context?.goPackageName });
+  }, [context?.goPackageName]);
 
-  onChangePackageName(event: any) {
-    this.setState({ ...this.state, packageName: event.target.value });
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('goPackageName', event.target.value);
-    }
-  }
+  const onChangePackageName = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const packageName = event.target.value;
+      setState({ ...state, packageName });
+      setNewConfig && debouncedSetNewConfig('goPackageName', packageName);
+    },
+    [setNewConfig, debouncedSetNewConfig, state]
+  );
 
-
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Go Specific options
-        </h3>
-        <li className='flex gap-1 items-center'>
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Go Specific options
+      </h3>
+      <li className='flex gap-1 items-center'>
         <InfoModal text="Package Name :">
-            <p>
+          <p>
             In Go, a package name is used to organize code into logical groups or containers. It serves as a namespace for the code elements within it and helps in avoiding naming conflicts.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Package Name
-            </span>
-            <input
-              type="text"
-              className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="goPackageName"
-              value={this.state?.packageName}
-              onChange={this.onChangePackageName}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
-}
-export default GoGeneratorOptions;
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Package Name
+          </span>
+          <input
+            type="text"
+            className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="goPackageName"
+            value={state?.packageName}
+            onChange={onChangePackageName}
+          />
+        </label>
+      </li>
+    </ul>
+  );
+};
+
+export default GoGeneratorOptions;
\ No newline at end of file
diff --git a/modelina-website/src/components/playground/options/JavaGeneratorOptions.tsx b/modelina-website/src/components/playground/options/JavaGeneratorOptions.tsx
index 32b3b7faea..680f1289c2 100644
--- a/modelina-website/src/components/playground/options/JavaGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/JavaGeneratorOptions.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState, useContext, useCallback } from 'react';
 import { debounce } from 'lodash';
 import { PlaygroundJavaConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import Select from '@/components/Select';
 import InfoModal from '@/components/InfoModal';
 
 interface JavaGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface JavaGeneratorState {
@@ -14,289 +14,284 @@ interface JavaGeneratorState {
 
 export const defaultState: JavaGeneratorState = {};
 
-class JavaGeneratorOptions extends React.Component<
-  JavaGeneratorOptionsProps,
-  JavaGeneratorState
-> {
-  static contextType = PlaygroundJavaConfigContext;
-  declare context: React.ContextType<typeof PlaygroundJavaConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-    this.onChangePackageName = this.onChangePackageName.bind(this);
-    this.onChangeIncludeJackson = this.onChangeIncludeJackson.bind(this);
-    this.onChangeIncludeMarshaling = this.onChangeIncludeMarshaling.bind(this);
-    this.onChangeArrayType = this.onChangeArrayType.bind(this);
-    this.onChangeOverwriteHashCodeSupport = this.onChangeOverwriteHashCodeSupport.bind(this);
-    this.onChangeOverwriteEqualSupport = this.onChangeOverwriteEqualSupport.bind(this);
-    this.onChangeOverwriteToStringSupport = this.onChangeOverwriteToStringSupport.bind(this);
-    this.onChangeJavaDocs = this.onChangeJavaDocs.bind(this);
-    this.onChangeJavaxAnnotation = this.onChangeJavaxAnnotation.bind(this);
-  }
+const JavaGeneratorOptions: React.FC<JavaGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundJavaConfigContext);
+  const [state, setState] = useState<JavaGeneratorState>(defaultState);
 
-  debouncedSetNewConfig = debounce(this.props.setNewConfig as (queryKey: string, queryValue: string) => void, 500);
+  useEffect(() => {
+    setState({ ...state, packageName: context?.javaPackageName });
+  }, [context?.javaPackageName]);
 
-  componentDidMount(): void {
-    this.setState({ ...this.state, packageName: this.context?.javaPackageName });
-  }
+  const debouncedSetNewConfig = debounce(
+    (queryKey: string, queryValue: any) => setNewConfig?.(queryKey, queryValue),
+    500
+  );
 
-  onChangePackageName(event: any) {
-    this.setState({ ...this.state, packageName: event.target.value });
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('javaPackageName', event.target.value);
-    }
-  }
+  const onChangePackageName = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const packageName = event.target.value;
+      setState({ ...state, packageName });
+      setNewConfig && debouncedSetNewConfig('javaPackageName', packageName);
+    },
+    [setNewConfig, debouncedSetNewConfig, state]
+  );
 
-  onChangeIncludeJackson(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaIncludeJackson', event.target.checked);
-    }
-  }
+  const onChangeIncludeJackson = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaIncludeJackson', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeIncludeMarshaling(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaIncludeMarshaling', event.target.checked);
-    }
-  }
+  const onChangeIncludeMarshaling = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaIncludeMarshaling', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeArrayType(arrayType: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaArrayType', String(arrayType));
-    }
-  }
+  const onChangeArrayType = useCallback(
+    (arrayType: string) => {
+      setNewConfig?.('javaArrayType', arrayType);
+    },
+    [setNewConfig]
+  );
 
-  onChangeOverwriteHashCodeSupport(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaOverwriteHashcode', event.target.checked);
-    }
-  }
+  const onChangeOverwriteHashCodeSupport = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaOverwriteHashcode', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeOverwriteEqualSupport(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaOverwriteEqual', event.target.checked);
-    }
-  }
+  const onChangeOverwriteEqualSupport = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaOverwriteEqual', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeOverwriteToStringSupport(event: any){
-    if(this.props.setNewConfig){
-      this.props.setNewConfig('javaOverwriteToString',event.target.checked);
-    }
-  }
+  const onChangeOverwriteToStringSupport = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaOverwriteToString', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeJavaDocs(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaJavaDocs', event.target.checked);
-    }
-  }
+  const onChangeJavaDocs = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaJavaDocs', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeJavaxAnnotation(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('javaJavaxAnnotation', event.target.checked);
-    }
-  }
+  const onChangeJavaxAnnotation = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('javaJavaxAnnotation', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Java Specific options
-        </h3>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Package Name :">
-            <p>
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Java Specific options
+      </h3>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Package Name :">
+          <p>
             In Java, a package name is a way to organize and group related classes and interfaces. It is a naming convention that helps prevent naming conflicts and provides a hierarchical structure to the Java codebase.
-            <br/><br/>
+            <br /><br />
             A package name is written as  series of identifiers separated by dots ('.'). Each identifier represents a level in the package hierarchy. For example, a package name could be 'com.example.myapp'.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Package Name
-            </span>
-            <input
-              type="text"
-              className="form-input w-[88%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="javaPackageName"
-              value={this.state?.packageName}
-              onChange={this.onChangePackageName}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Jackson serialization :">
-            <p>
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Package Name
+          </span>
+          <input
+            type="text"
+            className="form-input w-[88%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="javaPackageName"
+            value={state?.packageName}
+            onChange={onChangePackageName}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Jackson serialization :">
+          <p>
             When you enable the "Include Jackson serialization" option, it means that the code generator will include the necessary annotations from the Jackson library in the generated code. These annotations are used to configure and control how Java objects are serialized to JSON and deserialized from JSON.
-            <br/><br/>
-            Annotations in Java are represented by the @ symbol followed by the annotation name. 
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Jackson serialization
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="javaIncludeJackson"
-              checked={this.context?.javaIncludeJackson}
-              onChange={this.onChangeIncludeJackson}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Marshaling serialization :">
-            <p>
-            This option indicates whether the marshal and unmarshal functions would be included in the generated code or not 
-            <br/><br/>
-            the defalult value is false
-            <br/><br/>
+            <br /><br />
+            Annotations in Java are represented by the @ symbol followed by the annotation name.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Jackson serialization
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="javaIncludeJackson"
+            checked={context?.javaIncludeJackson}
+            onChange={onChangeIncludeJackson}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Marshaling serialization :">
+          <p>
+            This option indicates whether the marshal and unmarshal functions would be included in the generated code or not
+            <br /><br />
+            the default value is false
+            <br /><br />
             marshal - this function takes an instance of the class and return a JSON object.
-            <br/><br/>
-            unmarshal - this function takes a JSON object and returns an instanve of the class.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Marshaling serialization
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="javaIncludeMarshaling"
-              checked={this.context?.javaIncludeMarshaling}
-              onChange={this.onChangeIncludeMarshaling}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Java array type :">
-            <p>
+            <br /><br />
+            unmarshal - this function takes a JSON object and returns an instance of the class.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Marshaling serialization
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="javaIncludeMarshaling"
+            checked={context?.javaIncludeMarshaling}
+            onChange={onChangeIncludeMarshaling}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Java array type :">
+          <p>
             This option allows you to switch between rendering collections as List type or Array.
-            <br/><br/>
+            <br /><br />
             The default value is Array.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Java array type
-            </span>
-            <Select
-              options={[
-                { value: 'List', text: 'List' },
-                { value: 'Array', text: 'Array' }
-              ]}
-              value={this.context?.javaArrayType}
-              onChange={this.onChangeArrayType}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Overwrite HashCode Support :">
-            <p>
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Java array type
+          </span>
+          <Select
+            options={[
+              { value: 'List', text: 'List' },
+              { value: 'Array', text: 'Array' }
+            ]}
+            value={context?.javaArrayType}
+            onChange={onChangeArrayType}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Overwrite HashCode Support :">
+          <p>
             In Java, the "hashCode()" method is used to generate a unique numeric value (hash code) for an object. The default implementation of hashCode() in the Object class generates hash codes based on the memory address of the object, which may not be suitable for all classes.
-            <br/><br/>
+            <br /><br />
             When you enable the "Include Overwrite HashCode Support" option, it means that the code generator will automatically generate a customized implementation of the hashCode() method for the class you are working with. Instead of using the default implementation.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Overwrite HashCode Support
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpOverwriteHashcode"
-              checked={this.context?.javaOverwriteHashcode}
-              onChange={this.onChangeOverwriteHashCodeSupport}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Overwrite Equal Support :">
-            <p>
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Overwrite HashCode Support
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpOverwriteHashcode"
+            checked={context?.javaOverwriteHashcode}
+            onChange={onChangeOverwriteHashCodeSupport}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Overwrite Equal Support :">
+          <p>
             In Java, the "equals()" method is used to determine if two objects are equal based on their content rather than their memory addresses. The default implementation of equals() in the Object class performs a reference equality check, meaning it only returns true if the compared objects are the same instance in memory.
-            <br/><br/>
+            <br /><br />
             When you enable the "Include Overwrite Equal Support" option, it means that the code generator will automatically generate a customized implementation of the equals() method for the class you are working with. Instead of using the default implementation.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Overwrite Equal Support
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="csharpOverwriteEqual"
-              checked={this.context?.javaOverwriteEqual}
-              onChange={this.onChangeOverwriteEqualSupport}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Overwrite toString Support :">
-            <p>
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Overwrite Equal Support
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="csharpOverwriteEqual"
+            checked={context?.javaOverwriteEqual}
+            onChange={onChangeOverwriteEqualSupport}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Overwrite toString Support :">
+          <p>
             In Java, the "toString()" method is a built-in method defined in the Object class and inherited by all other classes. Its purpose is to provide a string representation of an object. By default, the toString() method in the Object class returns a string that includes the class name, an "@" symbol, and the hexadecimal representation of the object's hash code.
-            <br/><br/>
+            <br /><br />
             When you enable the "Include Overwrite toString Support" option, it means that the code generator will automatically generate a customized implementation of the toString() method for the class you are working with. Instead of using the default implementation.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Overwrite toString Support
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="javaOverwriteToString"
-              checked={this.context?.javaOverwriteToString}
-              onChange={this.onChangeOverwriteToStringSupport}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include javaDocs :">
-            <p>
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Overwrite toString Support
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="javaOverwriteToString"
+            checked={context?.javaOverwriteToString}
+            onChange={onChangeOverwriteToStringSupport}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include javaDocs :">
+          <p>
             Enabling this option will include the description of the properties as comments in the generated code.
-            <br/><br/>
+            <br /><br />
             The default value if false.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include javaDocs
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="javaJavaDocs"
-              checked={this.context?.javaJavaDocs}
-              onChange={this.onChangeJavaDocs}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include Javax validation constraints  :">
-            <p>
-              By using the 'javax.validation.constraints' annotations, you can ensure that the data in your Java object adheres to specific rules and constraints. This helps in validating user input, ensuring data integrity, and facilitating error handling and validation reporting.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Javax validation constraints 
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="javaJavaxAnnotation"
-              checked={this.context?.javaJavaxAnnotation}
-              onChange={this.onChangeJavaxAnnotation}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
-}
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include javaDocs
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="javaJavaDocs"
+            checked={context?.javaJavaDocs}
+            onChange={onChangeJavaDocs}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include Javax validation constraints  :">
+          <p>
+            By using the 'javax.validation.constraints' annotations, you can ensure that the data in your Java object adheres to specific rules and constraints. This helps in validating user input, ensuring data integrity, and facilitating error handling and validation reporting.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Javax validation constraints
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="javaJavaxAnnotation"
+            checked={context?.javaJavaxAnnotation}
+            onChange={onChangeJavaxAnnotation}
+          />
+        </label>
+      </li>
+    </ul>
+  );
+};
+
 export default JavaGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/JavaScriptGeneratorOptions.tsx b/modelina-website/src/components/playground/options/JavaScriptGeneratorOptions.tsx
index e101addd5d..4c8880662d 100644
--- a/modelina-website/src/components/playground/options/JavaScriptGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/JavaScriptGeneratorOptions.tsx
@@ -1,36 +1,30 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { PlaygroundJavaScriptConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 
 interface JavaScriptGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface JavaScriptGeneratorState {}
 
 export const defaultState: JavaScriptGeneratorState = {};
 
-class JavaScriptGeneratorOptions extends React.Component<
-  JavaScriptGeneratorOptionsProps,
-  JavaScriptGeneratorState
-> {
-  static contextType = PlaygroundJavaScriptConfigContext;
-  declare context: React.ContextType<typeof PlaygroundJavaScriptConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-  }
+const JavaScriptGeneratorOptions: React.FC<JavaScriptGeneratorOptionsProps> = ({
+  setNewConfig,
+}) => {
+  const context = useContext(PlaygroundJavaScriptConfigContext);
+  const [state, setState] = useState<JavaScriptGeneratorState>(defaultState);
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        JavaScript Specific options
+      </h3>
+      <span className="mt-1 max-w-2xl text-sm text-gray-500">
+        Currently no options are available
+      </span>
+    </ul>
+  );
+};
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          JavaScript Specific options
-        </h3>
-        <span className="mt-1 max-w-2xl text-sm text-gray-500">
-          Currently no options are available
-        </span>
-      </ul>
-    );
-  }
-}
 export default JavaScriptGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/KotlinGeneratorOptions.tsx b/modelina-website/src/components/playground/options/KotlinGeneratorOptions.tsx
index 309de50909..6d6fd99901 100644
--- a/modelina-website/src/components/playground/options/KotlinGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/KotlinGeneratorOptions.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { debounce } from 'lodash';
 import { PlaygroundKotlinConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
 
 interface KotlinGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface KotlinGeneratorState {
@@ -13,59 +13,51 @@ interface KotlinGeneratorState {
 
 export const defaultState: KotlinGeneratorState = {};
 
-class KotlinGeneratorOptions extends React.Component<
-  KotlinGeneratorOptionsProps,
-  KotlinGeneratorState
-> {
-  static contextType = PlaygroundKotlinConfigContext;
-  declare context: React.ContextType<typeof PlaygroundKotlinConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-    this.onChangePackageName = this.onChangePackageName.bind(this);
-  }
-
-  debouncedSetNewConfig = debounce(this.props.setNewConfig as (queryKey: string, queryValue: string) => void, 500);
-
-  componentDidMount(): void {
-    this.setState({ ...this.state, packageName: this.context?.kotlinPackageName });
-  }
-
-  onChangePackageName(event: any) {
-    this.setState({ ...this.state, packageName: event.target.value });
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('kotlinPackageName', event.target.value);
-    }
-  }
-
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Kotlin Specific options
-        </h3>
-        <li className='flex gap-1 items-center'>
+const KotlinGeneratorOptions: React.FC<KotlinGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundKotlinConfigContext);
+  const [state, setState] = useState<KotlinGeneratorState>(defaultState);
+
+  const debouncedSetNewConfig = debounce(
+    (queryKey: string, queryValue: any) => setNewConfig?.(queryKey, queryValue),
+    500
+  );
+  
+  const onChangePackageName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const packageName = event.target.value;
+    setState({ ...state, packageName });
+    setNewConfig && debouncedSetNewConfig('kotlinPackageName', packageName);
+  };
+  
+    useEffect(() => {
+      setState({ ...state, packageName: context?.kotlinPackageName });
+    }, [context]);
+  
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Kotlin Specific options
+      </h3>
+      <li className='flex gap-1 items-center'>
         <InfoModal text="Package Name :">
-            <p>
+          <p>
             In Kotlin, a package name is used to organize classes, functions, and other code elements into logical groups or containers. It helps in avoiding naming conflicts and provides a way to structure your code.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Package Name
-            </span>
-            <input
-              type="text"
-              className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="kotlinPackageName"
-              value={this.state?.packageName}
-              onChange={this.onChangePackageName}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
-}
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Package Name
+          </span>
+          <input
+            type="text"
+            className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="kotlinPackageName"
+            value={state?.packageName}
+            onChange={onChangePackageName}
+          />
+        </label>
+      </li>
+    </ul>
+  );
+};
+
 export default KotlinGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/PhpGeneratorOptions.tsx b/modelina-website/src/components/playground/options/PhpGeneratorOptions.tsx
index 8cbf595eaa..02a8b59c77 100644
--- a/modelina-website/src/components/playground/options/PhpGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/PhpGeneratorOptions.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { PlaygroundPhpConfigContext } from '@/components/contexts/PlaygroundConfigContext';
+import React, { useState, useContext, useEffect, useCallback } from 'react';
 import { debounce } from 'lodash';
+import { PlaygroundPhpConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
 
 interface PhpGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface PhpGeneratorState {
@@ -13,88 +13,82 @@ interface PhpGeneratorState {
 
 export const defaultState: PhpGeneratorState = {};
 
-class PhpGeneratorOptions extends React.Component<
-  PhpGeneratorOptionsProps,
-  PhpGeneratorState
-> {
-  static contextType = PlaygroundPhpConfigContext;
-  declare context: React.ContextType<typeof PlaygroundPhpConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.onChangeIncludeDescriptions =
-    this.onChangeIncludeDescriptions.bind(this);
-    this.onChangeNamespace = this.onChangeNamespace.bind(this);
-    this.debouncedSetNewConfig = this.debouncedSetNewConfig.bind(this);
-  }
+const PhpGeneratorOptions: React.FC<PhpGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundPhpConfigContext);
+  const [state, setState] = useState<PhpGeneratorState>(defaultState);
 
-  componentDidMount() {
-    this.setState({ ...this.state, namespace: this.context?.phpNamespace });
-  }
+  const debouncedSetNewConfig = debounce(
+    (queryKey: string, queryValue: any) => setNewConfig?.(queryKey, queryValue),
+    500
+  );
 
-  onChangeIncludeDescriptions(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('phpIncludeDescriptions', event.target.checked);
-    }
-  }
+  const onChangeIncludeDescriptions = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setNewConfig?.('phpIncludeDescriptions', event.target.checked);
+    },
+    [setNewConfig]
+  );
 
-  onChangeNamespace(event: any) {
-    this.setState({ ...this.state, namespace: event.target.value })
-    if (this.props.setNewConfig) {
-      this.debouncedSetNewConfig('phpNamespace', event.target.value);
-    }
-  }
+  const onChangeNamespace = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const namespace = event.target.value;
+      setState({ ...state, namespace });
+      setNewConfig && debouncedSetNewConfig('phpNamespace', namespace);
+    },
+    [setNewConfig, debouncedSetNewConfig, state]
+  );
 
-  debouncedSetNewConfig = debounce(this.props.setNewConfig || (() => {}), 500);
+  useEffect(() => {
+    setState({ ...state, namespace: context?.phpNamespace });
+  }, [context?.phpNamespace]);
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        PHP Specific options
+      </h3>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="PHP namespace to use for generated models" >
+          <p>
+            In PHP namespaces are used to organize code into logical groups. It helps to avoid naming conflicts and allows using the same class names in different namespaces.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Namespace
+          </span>
+          <input
+            type="text"
+            className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
+            name="phpNamespace"
+            value={state?.namespace}
+            onChange={onChangeNamespace}
+          />
+        </label>
+      </li>
+      <li className='flex gap-1 items-center'>
+        <InfoModal text="Include descriptions in generated models" >
+          <p>
+            It indicates whether the descriptions should be included in the generated code.
+            <br /> <br />
+            The default value is false.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Descriptions
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="includeDescriptions"
+            checked={context?.phpIncludeDescriptions}
+            onChange={onChangeIncludeDescriptions}
+          />
+        </label>
+      </li>
+    </ul>
+  );
+};
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          PHP Specific options
-        </h3>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="PHP namespace to use for generated models" >
-            <p>
-              In PHP namespaces are used to organize code into logical groups. It helps to avoid naming conflicts and allows to use the same class names in different namespaces.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Namespace
-            </span>
-            <input
-              type="text"
-              className="form-input w-[90%] rounded-md border-gray-300 cursor-pointer font-regular text-md text-gray-700 hover:bg-gray-50 focus-within:text-gray-900"
-              name="phpNamespace"
-              value={this.state?.namespace}
-              onChange={this.onChangeNamespace}
-            />
-          </label>
-        </li>
-        <li className='flex gap-1 items-center'>
-          <InfoModal text="Include descriptions in generated models" >
-            <p>
-              It indicates whether the descriptions should be included in the generated code.
-              <br/> <br/>
-              The default value is false.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Descriptions
-            </span>
-            <input
-              type="checkbox"
-              className="form-checkbox cursor-pointer"
-              name="includeDescriptions"
-              checked={this.context?.phpIncludeDescriptions}
-              onChange={this.onChangeIncludeDescriptions}
-            />
-          </label>
-        </li>
-      </ul>
-    );
-  }
-}
 export default PhpGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/PythonGeneratorOptions.tsx b/modelina-website/src/components/playground/options/PythonGeneratorOptions.tsx
index 6263653e11..9f0db3229e 100644
--- a/modelina-website/src/components/playground/options/PythonGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/PythonGeneratorOptions.tsx
@@ -1,36 +1,28 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { PlaygroundPythonConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 
 interface PythonGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface PythonGeneratorState {}
 
 export const defaultState: PythonGeneratorState = {};
 
-class PythonGeneratorOptions extends React.Component<
-  PythonGeneratorOptionsProps,
-  PythonGeneratorState
-> {
-  static contextType = PlaygroundPythonConfigContext;
-  declare context: React.ContextType<typeof PlaygroundPythonConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-  }
+const PythonGeneratorOptions: React.FC<PythonGeneratorOptionsProps> = () => {
+  const context = useContext(PlaygroundPythonConfigContext);
+  const [state, setState] = useState<PythonGeneratorState>(defaultState);
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Python Specific options
+      </h3>
+      <span className="mt-1 max-w-2xl text-sm text-gray-500">
+        Currently no options are available
+      </span>
+    </ul>
+  );
+};
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Python Specific options
-        </h3>
-        <span className="mt-1 max-w-2xl text-sm text-gray-500">
-          Currently no options are available
-        </span>
-      </ul>
-    );
-  }
-}
 export default PythonGeneratorOptions;
\ No newline at end of file
diff --git a/modelina-website/src/components/playground/options/RustGeneratorOptions.tsx b/modelina-website/src/components/playground/options/RustGeneratorOptions.tsx
index 5f1f0130f1..ff46bd5c01 100644
--- a/modelina-website/src/components/playground/options/RustGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/RustGeneratorOptions.tsx
@@ -1,36 +1,28 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { PlaygroundRustConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 
 interface RustGeneratorOptionsProps {
-  setNewConfig?: (queryKey: string, queryValue: string) => void;
+  setNewConfig?: (queryKey: string, queryValue: any) => void;
 }
 
 interface RustGeneratorState {}
 
 export const defaultState: RustGeneratorState = {};
 
-class RustGeneratorOptions extends React.Component<
-  RustGeneratorOptionsProps,
-  RustGeneratorState
-> {
-  static contextType = PlaygroundRustConfigContext;
-  declare context: React.ContextType<typeof PlaygroundRustConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-  }
+const RustGeneratorOptions: React.FC<RustGeneratorOptionsProps> = () => {
+  const context = useContext(PlaygroundRustConfigContext);
+  const [state, setState] = useState<RustGeneratorState>(defaultState);
+
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        Rust Specific options
+      </h3>
+      <span className="mt-1 max-w-2xl text-sm text-gray-500">
+        Currently no options are available
+      </span>
+    </ul>
+  );
+};
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          Rust Specific options
-        </h3>
-        <span className="mt-1 max-w-2xl text-sm text-gray-500">
-          Currently no options are available
-        </span>
-      </ul>
-    );
-  }
-}
 export default RustGeneratorOptions;
diff --git a/modelina-website/src/components/playground/options/TypeScriptGeneratorOptions.tsx b/modelina-website/src/components/playground/options/TypeScriptGeneratorOptions.tsx
index 767107a48b..240f5e918a 100644
--- a/modelina-website/src/components/playground/options/TypeScriptGeneratorOptions.tsx
+++ b/modelina-website/src/components/playground/options/TypeScriptGeneratorOptions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import Select from '../../Select';
 import { PlaygroundTypeScriptConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
@@ -11,260 +11,232 @@ interface TypeScriptGeneratorState { }
 
 export const defaultState: TypeScriptGeneratorState = {};
 
-class TypeScriptGeneratorOptions extends React.Component<
-  TypeScriptGeneratorOptionsProps,
-  TypeScriptGeneratorState
-> {
-  static contextType = PlaygroundTypeScriptConfigContext;
-  declare context: React.ContextType<typeof PlaygroundTypeScriptConfigContext>;
-  constructor(props: any) {
-    super(props);
-    this.state = defaultState;
-    this.onChangeMarshalling = this.onChangeMarshalling.bind(this);
-    this.onChangeVariant = this.onChangeVariant.bind(this);
-    this.onChangeEnumType = this.onChangeEnumType.bind(this);
-    this.onChangeModuleSystem = this.onChangeModuleSystem.bind(this);
-    this.onChangeIncludeExampleFunction = this.onChangeIncludeExampleFunction.bind(this);
-    this.onChangeIncludeJsonBinPack = this.onChangeIncludeJsonBinPack.bind(this);
-    this.onChangeIncludeDescriptions =
-      this.onChangeIncludeDescriptions.bind(this);
-  }
+const TypeScriptGeneratorOptions: React.FC<TypeScriptGeneratorOptionsProps> = ({ setNewConfig }) => {
+  const context = useContext(PlaygroundTypeScriptConfigContext);
+  const [state, setState] = useState<TypeScriptGeneratorState>(defaultState);
 
-  onChangeMarshalling(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsMarshalling', event.target.checked);
-    }
-  }
+  const onChangeMarshalling = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig && setNewConfig('tsMarshalling', event.target.checked);
+  };
 
-  onChangeIncludeDescriptions(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsIncludeDescriptions', event.target.checked);
-    }
-  }
+  const onChangeIncludeDescriptions = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig && setNewConfig('tsIncludeDescriptions', event.target.checked);
+  };
 
-  onChangeVariant(variant: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsModelType', String(variant));
-    }
-  }
+  const onChangeVariant = (variant: string) => {
+    setNewConfig && setNewConfig('tsModelType', variant);
+  };
 
-  onChangeModuleSystem(moduleSystem: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsModuleSystem', String(moduleSystem));
-    }
-  }
+  const onChangeModuleSystem = (moduleSystem: string) => {
+    setNewConfig && setNewConfig('tsModuleSystem', moduleSystem);
+  };
 
-  onChangeEnumType(enumType: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsEnumType', String(enumType));
-    }
-  }
+  const onChangeEnumType = (enumType: string) => {
+    setNewConfig && setNewConfig('tsEnumType', enumType);
+  };
 
-  onChangeIncludeJsonBinPack(event: any) {
-    if (this.props.setNewConfig) {
-      const shouldIncludeMarshalling = this.context?.tsMarshalling === false && event.target.checked === true;
-      this.props.setNewConfig('tsIncludeJsonBinPack', event.target.checked, !shouldIncludeMarshalling);
+  const onChangeIncludeJsonBinPack = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (setNewConfig) {
+      const shouldIncludeMarshalling = context?.tsMarshalling === false && event.target.checked === true;
+      setNewConfig('tsIncludeJsonBinPack', event.target.checked, !shouldIncludeMarshalling);
 
       if (shouldIncludeMarshalling) {
-        this.props.setNewConfig('tsMarshalling', event.target.checked);
+        setNewConfig('tsMarshalling', event.target.checked);
       }
     }
-  }
+  };
 
-  onChangeIncludeExampleFunction(event: any) {
-    if (this.props.setNewConfig) {
-      this.props.setNewConfig('tsIncludeExampleFunction', event.target.checked);
-    }
-  }
+  const onChangeIncludeExampleFunction = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewConfig && setNewConfig('tsIncludeExampleFunction', event.target.checked);
+  };
 
-  render() {
-    return (
-      <ul className="flex flex-col">
-        <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
-          TypeScript Specific options
-        </h3>
+  return (
+    <ul className="flex flex-col">
+      <h3 className="py-2 w-full text-left border-b-[1px] border-gray-700">
+        TypeScript Specific options
+      </h3>
+      <li className="flex gap-1 items-center">
+        <InfoModal text='TypeScript class variant' >
+          <p>
+            It indicates which model type should be rendered for the object type. Its value can be either interface or class.
+            <br /> <br />
+            The default value is class.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            TypeScript class variant
+          </span>
+          <Select
+            options={[
+              { value: 'class', text: 'Class' },
+              { value: 'interface', text: 'Interface' }
+            ]}
+            value={context?.tsModelType}
+            onChange={onChangeVariant}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text='TypeScript enum type: ' >
+          <p>
+            It indicates which type should be rendered for some enum type. Its value can be either union or enum.
+            <br /> <br />
+            The default value is union.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            TypeScript enum type
+          </span>
+          <Select
+            options={[
+              { value: 'union', text: 'Union' },
+              { value: 'enum', text: 'Enum' }
+            ]}
+            value={context?.tsEnumType}
+            onChange={onChangeEnumType}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text='TypeScript module system: ' >
+          <p>
+            It indicates which module system should be used for the generated code. Its value can be either ESM or CJS.
+            <br /> <br />
+            The default value is ESM.
+            <br /> <br />
+            <b>ESM</b> - ECMAScript Modules. This uses the import/export syntax.
+            <br /> <br />
+            <b>CJS</b> - CommonJS Modules. This uses the require/module.exports syntax.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            TypeScript module system
+          </span>
+          <Select
+            options={[
+              { value: 'ESM', text: 'ESM' },
+              { value: 'CJS', text: 'CJS' }
+            ]}
+            value={context?.tsModuleSystem}
+            onChange={onChangeModuleSystem}
+            className="shadow-outline-blue cursor-pointer"
+          />
+        </label>
+      </li>
+      <li className="flex gap-1 items-center">
+        <InfoModal text='TypeScript include descriptions: ' >
+          <p>
+            It indicates whether the descriptions should be included in the generated code.
+            <br /> <br />
+            The default value is false.
+          </p>
+        </InfoModal>
+        <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
+          <span className="mt-1 max-w-2xl text-sm text-gray-500">
+            Include Descriptions
+          </span>
+          <input
+            type="checkbox"
+            className="form-checkbox cursor-pointer"
+            name="includeDescriptions"
+            checked={context?.tsIncludeDescriptions}
+            onChange={onChangeIncludeDescriptions}
+          />
+        </label>
+      </li>
+      {context?.tsModelType === 'class' ? (
         <li className="flex gap-1 items-center">
-          <InfoModal text='TypeScript class variant' >
+          <InfoModal text='TypeScript include un/marshal functions: ' >
             <p>
-              It indicates which model type should be rendered for the object type. Its value can be either interface or class.
+              It indicates whether the un/marshal functions should be included in the generated code.
               <br /> <br />
-              The default value is class.
-            </p>
-          </InfoModal>
-          <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-            <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              TypeScript class variant
-            </span>
-            <Select
-              options={[
-                { value: 'class', text: 'Class' },
-                { value: 'interface', text: 'Interface' }
-              ]}
-              value={this.context?.tsModelType}
-              onChange={this.onChangeVariant}
-              className="shadow-outline-blue cursor-pointer"
-            />
-          </label>
-        </li>
-        <li className="flex gap-1 items-center">
-          <InfoModal text='TypeScript enum type: ' >
-            <p>
-              It indicates which type should be rendered for some enum type. Its value can be either union or enum.
+              The default value is false.
               <br /> <br />
-              The default value is union.
+              <b>Unmarshal</b> - This function takes a JSON object and returns an instance of the class.
+              <br /> <br />
+              <b>Marshal</b> - This function takes an instance of the class and returns a JSON object.
             </p>
           </InfoModal>
           <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
             <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              TypeScript enum type
+              Include un/marshal functions
             </span>
-            <Select
-              options={[
-                { value: 'union', text: 'Union' },
-                { value: 'enum', text: 'Enum' }
-              ]}
-              value={this.context?.tsEnumType}
-              onChange={this.onChangeEnumType}
-              className="shadow-outline-blue cursor-pointer"
+            <input
+              type="checkbox"
+              className="form-checkbox cursor-pointer"
+              name="marshalling"
+              checked={context?.tsMarshalling}
+              onChange={onChangeMarshalling}
             />
           </label>
         </li>
+      ) : null}
+      {context?.tsModelType === 'class' ? (
         <li className="flex gap-1 items-center">
-          <InfoModal text='TypeScript module system: ' >
+          <InfoModal text='TypeScript include JsonBinPack support: ' >
             <p>
-              It indicates which module system should be used for the generated code. Its value can be either ESM or CJS.
-              <br /> <br />
-              The default value is ESM.
+              It indicates whether the <a href={'https://www.jsonbinpack.org/'}>JsonBinPack</a> support should be included in the generated code.
+              This allows you to convert models to a buffer, which is highly space-efficient, instead of sending pure JSON data over the wire.
               <br /> <br />
-              <b>ESM</b> - ECMAScript Modules. This uses the import/export syntax.
-              <br /> <br />
-              <b>CJS</b> - CommonJS Modules. This uses the require/module.exports syntax.
+              The default value is false.
+              <br /><br />
+              <ul className='list-disc list-inside'>
+                <li className='list-disc'>This functionality is for the library jsonbinpack.</li>
+                <li>This preset can ONLY be used with AsyncAPI 2.x and JSON Schema draft 4 to 7 inputs.</li>
+                <li>
+                  This functionality has two requirements:
+                  <ol className='list-decimal list-inside'>
+                    <li>You MUST manually install the library <a href={'https://www.jsonbinpack.org/'}>JsonBinPack</a>.</li>
+                    <li>You MUST also use the Generate un/marshal functions for classes</li>
+                  </ol>
+                </li>
+              </ul>
             </p>
           </InfoModal>
           <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
             <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              TypeScript module system
+              Include JsonBinPack support
             </span>
-            <Select
-              options={[
-                { value: 'ESM', text: 'ESM' },
-                { value: 'CJS', text: 'CJS' }
-              ]}
-              value={this.context?.tsModuleSystem}
-              onChange={this.onChangeModuleSystem}
-              className="shadow-outline-blue cursor-pointer"
+            <input
+              type="checkbox"
+              className="form-checkbox cursor-pointer"
+              name="jsonbinpack"
+              checked={context?.tsIncludeJsonBinPack}
+              onChange={onChangeIncludeJsonBinPack}
             />
           </label>
         </li>
+      ) : null}
+      {context?.tsModelType === 'class' ? (
         <li className="flex gap-1 items-center">
-          <InfoModal text='TypeScript include descriptions: ' >
+          <InfoModal text='TypeScript include example functions: ' >
             <p>
-              It indicates whether the descriptions should be included in the generated code.
+              It indicates whether the generated code should include a function that returns an example instance of the model with placeholder values.
               <br /> <br />
               The default value is false.
             </p>
           </InfoModal>
           <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
             <span className="mt-1 max-w-2xl text-sm text-gray-500">
-              Include Descriptions
+              Include example functions
             </span>
             <input
               type="checkbox"
               className="form-checkbox cursor-pointer"
-              name="includeDescriptions"
-              checked={this.context?.tsIncludeDescriptions}
-              onChange={this.onChangeIncludeDescriptions}
+              name="exampleFunction"
+              checked={context?.tsIncludeExampleFunction}
+              onChange={onChangeIncludeExampleFunction}
             />
           </label>
         </li>
-        {this.context?.tsModelType === 'class' ? (
-          <li className="flex gap-1 items-center">
-            <InfoModal text='TypeScript include un/marshal functions: ' >
-              <p>
-                It indicates whether the un/marshal functions should be included in the generated code.
-                <br /> <br />
-                The default value is false.
-                <br /> <br />
-                <b>Unmarshal</b> - This function takes a JSON object and returns an instance of the class.
-                <br /> <br />
-                <b>Marshal</b> - This function takes an instance of the class and returns a JSON object.
-              </p>
-            </InfoModal>
-            <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-              <span className="mt-1 max-w-2xl text-sm text-gray-500">
-                Include un/marshal functions
-              </span>
-              <input
-                type="checkbox"
-                className="form-checkbox cursor-pointer"
-                name="marshalling"
-                checked={this.context?.tsMarshalling}
-                onChange={this.onChangeMarshalling}
-              />
-            </label>
-          </li>
-        ) : null}
-        {this.context?.tsModelType === 'class' ? (
-          <li className="flex gap-1 items-center">
-            <InfoModal text='TypeScript include JsonBinPack support: ' >
-              <p>
-                It indicates whether the <a href={'https://www.jsonbinpack.org/'}>JsonBinPack</a> support should be included in the generated code.
-                This allows you to convert models to a buffer, which is highly space-efficient, instead of sending pure JSON data over the wire.
-                <br /> <br />
-                The default value is false.
-                <br /><br />
-                <ul className='list-disc list-inside'>
-                  <li className='list-disc'>This functionality is for the library jsonbinpack.</li>
-                  <li>This preset can ONLY be used with AsyncAPI 2.x and JSON Schema draft 4 to 7 inputs.</li>
-                  <li>
-                    This functionality has two requirements:
-                    <ol className='list-decimal list-inside'>
-                      <li>You MUST manually install the library <a href={'https://www.jsonbinpack.org/'}>JsonBinPack</a>.</li>
-                      <li>You MUST also use the Generate un/marshal functions for classes</li>
-                    </ol>
-                  </li>
-                </ul>
-              </p>
-            </InfoModal>
-            <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-              <span className="mt-1 max-w-2xl text-sm text-gray-500">
-                Include JsonBinPack support
-              </span>
-              <input
-                type="checkbox"
-                className="form-checkbox cursor-pointer"
-                name="jsonbinpack"
-                checked={this.context?.tsIncludeJsonBinPack}
-                onChange={this.onChangeIncludeJsonBinPack}
-              />
-            </label>
-          </li>
-        ) : null}
-        {this.context?.tsModelType === 'class' ? (
-          <li className="flex gap-1 items-center">
-            <InfoModal text='TypeScript include example functions: ' >
-              <p>
-                It indicates whether the generated code should include a function that returns an example instance of the model with placeholder values.
-                <br /> <br />
-                The default value is false.
-              </p>
-            </InfoModal>
-            <label className="flex flex-grow gap-1 items-center py-2 justify-between cursor-pointer">
-              <span className="mt-1 max-w-2xl text-sm text-gray-500">
-                Include example functions
-              </span>
-              <input
-                type="checkbox"
-                className="form-checkbox cursor-pointer"
-                name="exampleFunction"
-                checked={this.context?.tsIncludeExampleFunction}
-                onChange={this.onChangeIncludeExampleFunction}
-              />
-            </label>
-          </li>
-        ) : null}
-      </ul>
-    );
-  }
-}
-export default TypeScriptGeneratorOptions;
+      ) : null}
+    </ul>
+  );
+};
+
+export default TypeScriptGeneratorOptions;
\ No newline at end of file
diff --git a/modelina-website/src/pages/index.tsx b/modelina-website/src/pages/index.tsx
index 1e7119b17a..b51846d951 100644
--- a/modelina-website/src/pages/index.tsx
+++ b/modelina-website/src/pages/index.tsx
@@ -49,7 +49,7 @@ export default function Index() {
               </CodeBlock>
               <div className="mt-8">
                 <GithubButton
-                  className="block mt-2 md:mt-0 md:inline-block w-full sm:w-auto mt-8"
+                  className="block md:mt-0 md:inline-block w-full sm:w-auto mt-8"
                   href="https://github.com/asyncapi/cli"
                 />
               </div>
@@ -92,16 +92,16 @@ export default function Index() {
               </div>
             </div>
           </div>
-          <div className = "relative lg:mt-8 h-full">
-            <Image 
-            src = {'/img/card/modelina-card.jpg'}
-            fill 
-            sizes='100vw'
-            alt = {'Modelina card'}
-          />
+          <div className="relative lg:mt-8 h-full">
+            <Image
+              src={'/img/card/modelina-card.jpg'}
+              fill
+              sizes='100vw'
+              alt={'Modelina card'}
+            />
           </div>
         </div>
-        
+
         <div className="relative text-center mt-12">
           <Heading level="h1" typeStyle="heading-lg">
             Usage