diff --git a/react/common/src/App.css b/react/common/src/App.css
index c8faa14..cf13910 100644
--- a/react/common/src/App.css
+++ b/react/common/src/App.css
@@ -1,23 +1,27 @@
-/*
-@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
-@import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
-@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
-@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
-*/
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css");
+@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/css/bootstrap-italia.min.css");
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js");
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/js/bootstrap-italia.bundle.min.js");
+
+:root {
+  --font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
+
+body {
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
+
+.it-brand-wrapper .icon {
+  width: 120px;
+  height: auto;
+}
+
+.page-shell-card {
+  border: 1px solid #e6e6e6;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
+}
 
 /* Submit button styling (elixForms main submit) */
 .mainview .container .submit {
diff --git a/react/common/src/ElixFormsComponentAbstract.tsx b/react/common/src/ElixFormsComponentAbstract.tsx
index cd3330a..8ab9355 100644
--- a/react/common/src/ElixFormsComponentAbstract.tsx
+++ b/react/common/src/ElixFormsComponentAbstract.tsx
@@ -93,14 +93,18 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
 
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
-      description,
-      environmentMessage,
-      additionalFieldsJson,
+      isDarkTheme,
+      userDisplayName,
+      moduleName,
       headerTitle,
-      pageTitle,
-      pageDescription,
-      submitDescription,
-      heroImageSrc
+      headerHeroImageSrc: headerTitleImageSrc,
+      cardTitle,
+      cardDescription,
+      alertInfoTitle,
+      alertInfoMessage,
+      instructionsTitle,
+      instructionsMessage,
+      submitText,
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
@@ -108,121 +112,161 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     const hasAuthenticationError = missingMandatoryParams.length > 0;
 
     return (
-      <div className="container-fluid px-0" id="pageBody">
+      <div>
         <header className="it-header-wrapper">
+          <div className="it-header-slim-wrapper">
+            <div className="container">
+              <div className="row">
+                <div className="col-12">
+                  <div className="it-header-slim-wrapper-content">
+                    {/* <a className="d-none d-lg-block navbar-brand" href="#">Ente appartenenza</a> */}
+                    <div className="nav-mobile">
+                      {/* <nav aria-label="Navigazione accessoria">
+                        <a className="it-opener d-lg-none" data-bs-toggle="collapse" href="#menu1a" role="button"
+                          aria-expanded="false" aria-controls="menu4">
+                          <span>Ente appartenenza</span>
+                          <svg className="icon" aria-hidden="true">
+                            <use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use>
+                          </svg>
+                        </a>
+                        <div className="link-list-wrapper collapse" id="menu1a">
+                          <ul className="link-list">
+                            <li><a className="dropdown-item list-item" href="#">Link 1</a></li>
+                            <li><a className="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
+                          </ul>
+                        </div>
+                      </nav> */}
+                    </div>
+                    <div className="it-header-slim-right-zone">
+                      {/* <div className="nav-item dropdown">
+                        <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                          aria-expanded="false">
+                          <span className="visually-hidden">Selezione lingua: lingua selezionata</span>
+                          <span>ITA</span>
+                          <svg className="icon d-none d-lg-block">
+                            <use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use>
+                          </svg>
+                        </a>
+                        <div className="dropdown-menu">
+                          <div className="row">
+                            <div className="col-12">
+                              <div className="link-list-wrapper">
+                                <ul className="link-list">
+                                  <li><a className="dropdown-item list-item" href="#"><span>ITA <span
+                                          className="visually-hidden">selezionata</span></span></a></li>
+                                  <li><a className="dropdown-item list-item" href="#"><span>ENG</span></a></li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div> */}
+                      <div className="it-access-top-wrapper">
+                        {userDisplayName}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div className="it-header-center-wrapper">
             <div className="container">
               <div className="it-header-center-content-wrapper">
                 <div className="it-brand-wrapper">
-                  <a href="/">
+                  <a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
+                    <img className='icon' src="https://procedure.unipr.it/UploadImgs/12_marchio_UNIPR_neg_b1_squareLogo.png" alt="Università di Parma" />
                     <div className="it-brand-text">
-                      <h2 className="no_toc">Ente Pubblico</h2>
-                      <h3 className="no_toc d-none d-md-block">Sito istituzionale</h3>
+                      <p className="h2 no_toc">Università di Parma</p>
+                      {/* <p className="h3 no_toc d-none d-md-block">Procedure Online</p> */}
                     </div>
                   </a>
                 </div>
 
                 <div className="it-right-zone">
-                  <div className="it-search-wrapper">
+                  {/* <div className="it-search-wrapper">
                     <span className="d-none d-md-block">Cerca</span>
                     <button className="search-link" aria-label="Cerca">
                       <span className="it-search"></span>
                     </button>
-                  </div>
+                  </div> */}
                 </div>
 
               </div>
             </div>
           </div>
         </header>
-        <div className="row g-0">
-          <div id="userConsole" className="col-12">
-            <header className='it-header-wrapper'>
-              <div className="neutral">
-                <div className="grid_12">
-                  <div className="console_header">
-                    <div className="leftDiv">
-                      <h1>elixForms</h1>
-                      <div className="logo">
-                        <a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
-                          <img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università di Parma" />
-                        </a>
+
+        <div className="container my-2 mx-4">
+          <div className='cmp-breadcrumb' role='navigation'>
+            <nav className="breadcrumb-container" aria-label="breadcrumb">
+              <ol className="breadcrumb">
+                <li className='breadcrumb-item'>Procedure Online<span className="separator">/</span></li>
+                <li className="breadcrumb-item active" aria-current="page">{moduleName}</li>
+              </ol>
+            </nav>
+          </div>
+
+          {headerTitleImageSrc && <img src={headerTitleImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
+          {headerTitle && (<p className='h2'>{headerTitle}</p>)}
+
+          <div className="container">
+            <div className="card shadow-sm mb-4">
+              <div className="card-body">
+                {cardTitle && <p className="h3 mb-3">{cardTitle}</p>}
+                {cardDescription && <p className="lead text-secondary">{cardDescription}</p>}
+
+                {(alertInfoTitle || alertInfoMessage) &&
+                  <div className="alert alert-warning" role="status">
+                    {alertInfoTitle && <p className="h6 mb-1">{alertInfoTitle}</p>}
+                    {alertInfoMessage &&<p className="text-secondary mb-0">{alertInfoMessage}</p>}
+                  </div>}
+
+                {hasAuthenticationError ? (
+                  <div className="alert alert-danger" role="alert">Accesso non autorizzato!</div>
+                ) : (
+                  <>
+                    {this.renderExtraContentPre()}
+
+                    {(instructionsTitle || instructionsMessage) &&
+                      <div className="alert alert-info" role="status">
+                        {instructionsTitle && <p className="h6 mb-1">{instructionsTitle}</p>}
+                        {instructionsMessage && <p className="text-secondary mb-0">{instructionsMessage}</p>}
                       </div>
-                    </div>
-                    <div className="rightDiv">
-                      <div className="rightDivInside info padding_r">
-                        <div className="clear"></div>
-                      </div>
-                    </div>
-                    <div className="clear"></div>
-                  </div>
-                </div>
-                <div className="clear"></div>
-              </div>
-            </header>
-
-            <div className="row">
-              <div className="col-12">
-                {headerTitle && (
-                  <div>
-                    <div className="mb-4">
-                      <h2 className="h4 mb-0">{headerTitle}</h2>
-                    </div>
-                  </div>
-                )}
-                <div className="py-4">
-                  <div className="container py-4">
-                    {pageTitle && <h1 className="mb-3">{pageTitle}</h1>}
-                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
-                    {pageDescription && <p className="lead">{pageDescription}</p>}
-
-                    {environmentMessage && <div className="alert alert-info">{environmentMessage}</div>}
-                    {description && <div className="mb-3">{description}</div>}
-
-                    {hasAuthenticationError ? (
-                      <div className="alert alert-danger" role="alert">
-                        Accesso non autorizzato. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
-                      </div>
-                    ) : (
-                      <>
-                        {this.renderExtraContentPre()}
-
-                        <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
-                          {this.createMandatoryFormFields(queryParams)}
-                          {this.createAdditionalFormFields()}
-                          {this.renderCustomFormFields()}
-                          <div className="mt-4 d-flex justify-content-start">
-                            <button type="submit" className="btn btn-primary">{submitDescription ?? 'Invia'}</button>
-                          </div>
-                        </form>
-
-                        {this.renderExtraContentPost()}
-                      </>
-                    )}
-                  </div>
-                </div>
+                    }
+                      <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
+                        {this.createMandatoryFormFields(queryParams)}
+                        {this.createAdditionalFormFields()}
+                        {this.renderCustomFormFields()}
+                        <div className="mt-4 d-flex justify-content-end">
+                          <button type="submit" className="btn btn-primary">{submitText ?? 'INVIA'} <span className="it-arrow-right text-white ms-2"></span></button>
+                        </div>
+                      </form>
+                      {this.renderExtraContentPost()}
+                    </>
+                  )}
               </div>
             </div>
+          </div>
+        </div>
 
-            <div className="clearfix"></div>
-
-            <footer className="it-footer mt-5">
-              <div className="it-footer-main">
-                <div className="container">
-                  <div className="row clearfix">
-                    <div className="col-sm-12">
-                      <div className="footer-content">
-                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
-                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
-                      </div>
+        <footer className="it-footer">
+          <div className="it-footer-small-prints clearfix">
+            <div className="container">
+              <section>
+                <div className="row clearfix">
+                  <div className="col-sm-12">
+                    <div className="footer-content text-white text-center p-2">
+                      <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
+                      {/* <div className="subfooter-bottom"><div>versione 1.24.0</div></div> */}
                     </div>
                   </div>
                 </div>
-              </div>
-            </footer>
+              </section>
+            </div>
           </div>
-          <div className="clear"></div>
-        </div>
+        </footer>
       </div>
     );
   }
diff --git a/react/common/src/IElixFormsComponentProperties.ts b/react/common/src/IElixFormsComponentProperties.ts
index a3df6b1..f73919d 100644
--- a/react/common/src/IElixFormsComponentProperties.ts
+++ b/react/common/src/IElixFormsComponentProperties.ts
@@ -1,17 +1,19 @@
 export interface IElixFormsComponentProperties {
-  description: string;
   isDarkTheme: boolean;
-  environmentMessage: string;
-  hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
-
+  
   // Layout Properties
+  moduleName: string;
   headerTitle?: string;
-  pageTitle?: string;
-  pageDescription?: string;
-  submitDescription?: string;
-  heroImageSrc?: string;
+  headerHeroImageSrc?: string;
+  cardTitle: string;
+  cardDescription?: string;
+  alertInfoTitle?: string;
+  alertInfoMessage?: string;
+  instructionsTitle?: string;
+  instructionsMessage?: string;
+  submitText?: string;
 }
 
 // Additional Fields JSON Schema
diff --git a/react/recupero-proposta-cct-da-contratti/src/App.jsx b/react/recupero-proposta-cct-da-contratti/src/App.jsx
index eb02a25..3a31df1 100644
--- a/react/recupero-proposta-cct-da-contratti/src/App.jsx
+++ b/react/recupero-proposta-cct-da-contratti/src/App.jsx
@@ -4,15 +4,19 @@ import RecuperoPropostaCctDaContrattiComponent from './RecuperoPropostaCctDaCont
 function App() {
   return (
     <RecuperoPropostaCctDaContrattiComponent
-      description=""
       isDarkTheme={false}
-      environmentMessage=""
-      hasTeamsContext={false}
-      userDisplayName=""
-      headerTitle="Modulo - Placeholder Titolo Modulo"
-      pageTitle="Recupero Proposta CCT da Contratti"
-      pageDescription=""
-      submitDescription='CONFERMA E PROSEGUI'
+      userDisplayName='useruseruser'
+
+      moduleName='Module name'
+      headerTitle='Header title'
+      headerHeroImageSrc='https://procedure.unipr.it/UploadImgs/8_marchio_UNIPR_pos_b1_small_SVG.png'
+      cardTitle='Recupero Proposta CCT da Contratti (card title)'
+      cardDescription='Card description'
+      alertInfoTitle='Alert Info'
+      alertInfoMessage='environment message'
+      instructionsTitle='Istruzioni di compilazione'
+      instructionsMessage='Completa i campi richiesti per procedere con la richiesta.'
+      submitText='CONFERMA E PROSEGUI'
     />
   );
 }
diff --git a/react/scelta-carriera/src/App.css b/react/scelta-carriera/src/App.css
index 6cd1116..6c3531a 100644
--- a/react/scelta-carriera/src/App.css
+++ b/react/scelta-carriera/src/App.css
@@ -1,4 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css');
+
+:root {
+  --font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
+
+body {
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
 /*
 @import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
 @import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
diff --git a/react/scelta-carriera/src/App.jsx b/react/scelta-carriera/src/App.jsx
index d23382e..b893892 100644
--- a/react/scelta-carriera/src/App.jsx
+++ b/react/scelta-carriera/src/App.jsx
@@ -5,15 +5,14 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
 function App() {
   return (
     <SceltaCarrieraComponent
-      description=""
+      moduleName=""
       isDarkTheme={false}
-      environmentMessage=""
-      hasTeamsContext={false}
+      alertInfoMessage=""
       userDisplayName="John Doe"
       headerTitle="Modulo A/13 - Richiesta di Certificato"
-      pageTitle="Scelta Carriera"
-      pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
-      heroImageSrc={heroImg}
+      cardTitle="Scelta Carriera"
+      cardDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
+      headerHeroImageSrc={heroImg}
     />
   )
 }