diff --git a/client/main.jsx b/client/main.jsx
index d2e380f..a9f7af3 100644
--- a/client/main.jsx
+++ b/client/main.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {StrictMode} from 'react';
 import { createRoot } from 'react-dom/client';
 import { Meteor } from 'meteor/meteor';
 import { App } from '/imports/ui/App';
@@ -6,5 +6,7 @@ import { App } from '/imports/ui/App';
 Meteor.startup(() => {
   const container = document.getElementById('react-target');
   const root = createRoot(container);
-  root.render(<App />);
+  root.render(<StrictMode>
+    <App />
+  </StrictMode>);
 });
diff --git a/imports/ui/Pobles.jsx b/imports/ui/Pobles.jsx
index e6acc93..bacdebb 100644
--- a/imports/ui/Pobles.jsx
+++ b/imports/ui/Pobles.jsx
@@ -10,7 +10,203 @@ import { Link } from 'react-router-dom';
 import { NecessitatsCollection } from '../api/necessitats';
 
 
+const QuadreInfo_Poble = ({esEditor, pobleSeleccionat, setPobleSeleccionat}) => {
+          
+     const refInAmbitAssignat = useRef();
 
+     return <div style={{
+          display: `inline-block`,
+          border: `1px solid #6666`,
+          padding: `.5rem`,
+          borderRadius: `.3em`,
+          backgroundColor: `lightcyan`
+     }}>
+          
+          {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
+
+          <form
+               action={d => {
+                    try {
+                         Meteor.callAsync('editaOAfigPoble',
+                         {
+                              ...pobleSeleccionat || [],
+                              nomPoble: d.get('nomPoble'),
+                              cp: d.get('cp') || "",
+                              comarca: d.get('comarca') || "",
+                              ambitAssociat: d.get('ambit-associat')
+                         }).then(() => setPobleSeleccionat(null))
+                         .catch(err => console.error(err));
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="nomPoble">Població: </label>
+               <input
+                    name="nomPoble"
+                    key={`inNom_${pobleSeleccionat._id}`}
+                    type="text"
+                    defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                    // value={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                    onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
+               /><br />
+               <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
+               <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
+               
+               { esEditor && <>
+               <br /><br />
+               Àmbit associat:
+
+               <input type="text" name="ambit-associat" id="ambit-associat" key={`inAmbit_${pobleSeleccionat._id}`} defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
+               {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
+               <br /><br />
+               </>}
+
+               <input type='submit' value="Actualitzar la Població" />
+               <button onClick={ev => {
+               ev.preventDefault();
+               if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
+                    Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
+                         setPobleSeleccionat(null);
+                    }
+               }}>Elimina</button>
+          </form>
+     </div>;
+};
+
+const BotoPobleAmbIndicadors = ({pob, pobleSeleccionat, setPobleSeleccionat, esEditor}) => {
+     // let pob = pobleSeleccionat;
+     useSubscribe('necessitats', pob.ambitAssociat);
+     const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
+     const [monitors, setMonitors] = useState(false);
+     const [encarregats, setEncarregats] = useState(false);
+     const [voluntaris, setVoluntaris] = useState(false);
+     
+     // let mon, mons, enc, encs, vol, vols;
+
+     (async () => {
+          const mons = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
+          // console.log("monitors: ", monitors);
+          setMonitors(mons?.fetch().length || false);
+
+          const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
+          // console.log("monitors: ", monitors);
+          setEncarregats(encs?.fetch().length || false);
+
+          const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
+          // console.log("monitors: ", monitors);
+          setVoluntaris(vols?.fetch().length || false);
+     })();
+
+     return <li
+          key={`pob_${pob._id}`}
+          style={{
+               display: `block`,
+               border: `1px solid #6666`,
+               borderRadius: `.4em`,
+               padding: `4px`,
+               listStyle: `none`,
+               backgroundColor: `${'lightgreen' || 'lightcoral'}`,
+               position: 'relative',
+               margin: '.2em'
+          }}
+     >
+          {// Indicadors de Responsables
+               <div style={{
+                    position: `absolute`,
+                    // display: `inline-block`,
+                    display: `grid`,
+                    gridTemplateAreas: `"mons encs vols"`,
+                    justifyContent: `space-around`,
+                    left: `0`,
+                    top: `-.8em`,
+                    width: `100%`,
+                    fontSize: `60%`,
+                    textAlign: `center`,
+                    pointerEvents: `none`,
+                    alignItems: `center`
+               }}>
+                    {
+                         monitors
+                         ? <span style={{
+                              border: `1px solid #6666`,
+                              borderRadius: `50%`,
+                              minWidth: `1rem`,
+                              minHeight: `1rem`,
+                              backgroundColor: `#f006`,
+                              gridArea: `mons`
+                         }}>{monitors}</span>
+                         : false
+                    }
+                    {    encarregats
+                         ? <span style={{
+                              border: `1px solid #6666`,
+                              borderRadius: `50%`,
+                              minWidth: `1rem`,
+                              minHeight: `1rem`,
+                              backgroundColor: `#fa0a`,
+                              gridArea: `encs`
+                         }}>{encarregats}</span>
+                         : false
+                    }
+                    {    voluntaris
+                         ? <span style={{
+                              border: `1px solid #6666`,
+                              borderRadius: `50%`,
+                              minWidth: `1rem`,
+                              minHeight: `1rem`,
+                              backgroundColor: `#ff06`,
+                              gridArea: `vols`
+                         }}>{voluntaris}</span>
+                         : false
+                    }
+               </div>
+          }
+
+          {// Indicadors de Necessitats
+               <div style={{
+                    position: `absolute`,
+                    // display: `inline-block`,
+                    display: `flex`,
+                    // justifyContent: `space-around`,
+                    left: `-1.5em`,
+                    // top: `-.8em`,
+                    width: `100%`,
+                    fontSize: `60%`,
+                    textAlign: `center`,
+                    // lineHeight: `100%`
+                    top: `.8em`,
+                    pointerEvents: `none`
+               }}>
+                    {
+                         necessitats.length
+                         ?
+                              <span style={{
+                                   border: `1px solid #6666`,
+                                   borderRadius: `50%`,
+                                   minWidth: `1rem`,
+                                   backgroundColor: `#00a6`
+                              }}>{necessitats.length }</span>
+                         : false
+                    }
+               </div>
+          }
+
+          {// Botó de creació de nou poble
+               <Link to={`/poble/${pob.ambitAssociat}`}>
+                    {pob.nomPoble} {esEditor && <button
+                         onClick={(ev) => {
+                              ev.preventDefault();
+                              ev.stopPropagation();
+                              
+                              setPobleSeleccionat(pob);
+                         }
+                    }>Edita</button>}
+               </Link>
+          }
+     </li>;
+}
 
 export const Pobles = () => {
      
@@ -36,201 +232,10 @@ export const Pobles = () => {
           }, []);
      // })();
 
-     const BotoPobleAmbIndicadors = ({pob}) => {
-          useSubscribe('necessitats', pob.ambitAssociat);
-          const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
-          const [monitors, setMonitors] = useState(false);
-          const [encarregats, setEncarregats] = useState(false);
-          const [voluntaris, setVoluntaris] = useState(false);
-          
-          // let mon, mons, enc, encs, vol, vols;
-
-          (async () => {
-               const mons = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
-               // console.log("monitors: ", monitors);
-               setMonitors(mons?.fetch().length || false);
-
-               const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
-               // console.log("monitors: ", monitors);
-               setEncarregats(encs?.fetch().length || false);
-
-               const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
-               // console.log("monitors: ", monitors);
-               setVoluntaris(vols?.fetch().length || false);
-          })();
-
-          return <li
-               key={`pob_${pob._id}`}
-               style={{
-                    display: `block`,
-                    border: `1px solid #6666`,
-                    borderRadius: `.4em`,
-                    padding: `4px`,
-                    listStyle: `none`,
-                    backgroundColor: `${'lightgreen' || 'lightcoral'}`,
-                    position: 'relative',
-                    margin: '.2em'
-               }}
-          >
-               {// Indicadors de Responsables
-                    <div style={{
-                         position: `absolute`,
-                         // display: `inline-block`,
-                         display: `grid`,
-                         gridTemplateAreas: `"mons encs vols"`,
-                         justifyContent: `space-around`,
-                         left: `0`,
-                         top: `-.8em`,
-                         width: `100%`,
-                         fontSize: `60%`,
-                         textAlign: `center`,
-                         pointerEvents: `none`,
-                         alignItems: `center`
-                    }}>
-                         {
-                              monitors
-                              ? <span style={{
-                                   border: `1px solid #6666`,
-                                   borderRadius: `50%`,
-                                   minWidth: `1rem`,
-                                   minHeight: `1rem`,
-                                   backgroundColor: `#f006`,
-                                   gridArea: `mons`
-                              }}>{monitors}</span>
-                              : false
-                         }
-                         {    encarregats
-                              ? <span style={{
-                                   border: `1px solid #6666`,
-                                   borderRadius: `50%`,
-                                   minWidth: `1rem`,
-                                   minHeight: `1rem`,
-                                   backgroundColor: `#fa0a`,
-                                   gridArea: `encs`
-                              }}>{encarregats}</span>
-                              : false
-                         }
-                         {    voluntaris
-                              ? <span style={{
-                                   border: `1px solid #6666`,
-                                   borderRadius: `50%`,
-                                   minWidth: `1rem`,
-                                   minHeight: `1rem`,
-                                   backgroundColor: `#ff06`,
-                                   gridArea: `vols`
-                              }}>{voluntaris}</span>
-                              : false
-                         }
-                    </div>
-               }
-
-               {// Indicadors de Necessitats
-                    <div style={{
-                         position: `absolute`,
-                         // display: `inline-block`,
-                         display: `flex`,
-                         // justifyContent: `space-around`,
-                         left: `-1.5em`,
-                         // top: `-.8em`,
-                         width: `100%`,
-                         fontSize: `60%`,
-                         textAlign: `center`,
-                         // lineHeight: `100%`
-                         top: `.8em`,
-                         pointerEvents: `none`
-                    }}>
-                         {
-                              necessitats.length
-                              ?
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#00a6`
-                                   }}>{necessitats.length }</span>
-                              : false
-                         }
-                    </div>
-               }
-
-               {// Botó de creació de nou poble
-                    <Link to={`/poble/${pob.ambitAssociat}`}>
-                         {pob.nomPoble} {esEditor && <button
-                              onClick={(ev) => {
-                                   ev.preventDefault();
-                                   ev.stopPropagation();
-                                   
-                                   setPobleSeleccionat(pob);
-                              }
-                         }>Edita</button>}
-                    </Link>
-               }
-          </li>;
-     }
      
      
-     const QuadreInfo_Poble = () => {
-          
-          const refInAmbitAssignat = useRef();
-
-          return <div style={{
-               display: `inline-block`,
-               border: `1px solid #6666`,
-               padding: `.5rem`,
-               borderRadius: `.3em`,
-               backgroundColor: `lightcyan`
-          }}>
-               
-               {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
-
-               <form
-                    action={d => {
-                         try {
-                              Meteor.callAsync('editaOAfigPoble',
-                              {
-                                   ...pobleSeleccionat || [],
-                                   nomPoble: d.get('nomPoble'),
-                                   cp: d.get('cp') || "",
-                                   comarca: d.get('comarca') || "",
-                                   ambitAssociat: d.get('ambit-associat')
-                              }).then(() => setPobleSeleccionat(null))
-                              .catch(err => console.error(err));
-                         } catch (err) {
-                              alert(err);
-                              console.error(err);
-                         }
-                    }}
-               >
-                    <label htmlFor="nomPoble">Població: </label>
-                    <input
-                         name="nomPoble"
-                         type="text"
-                         defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
-                         onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
-                    /><br />
-                    <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
-                    <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
-                    
-                    { esEditor && <>
-                    <br /><br />
-                    Àmbit associat:
-
-                    <input type="text" name="ambit-associat" id="ambit-associat" defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
-                    {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
-                    <br /><br />
-                    </>}
-
-                    <input type='submit' value="Actualitzar la Població" />
-                    <button onClick={ev => {
-                    ev.preventDefault();
-                    if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
-                         Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
-                              setPobleSeleccionat(null);
-                         }
-                    }}>Elimina</button>
-               </form>
-          </div>;
-     };
+     
+     
 
      // const Indicador = ({valor, ambit, }) => {
 
@@ -240,7 +245,7 @@ export const Pobles = () => {
           
           <h1>Pobles</h1>
 
-          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
+          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
           
           <ul style={{
                display: `flex`,
@@ -252,7 +257,7 @@ export const Pobles = () => {
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
                .map(pob => {
-                    return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
+                    return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
                })
           }</ul>