diff --git a/imports/ui/BarraNav/BarraNav.jsx b/imports/ui/BarraNav/BarraNav.jsx
index 6e7dc86..a071deb 100644
--- a/imports/ui/BarraNav/BarraNav.jsx
+++ b/imports/ui/BarraNav/BarraNav.jsx
@@ -19,6 +19,10 @@ const SeccióUsuaris = lazy(async () => {
     const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
     return ({ default: module.SeccióUsuaris });
 });
+const SeccióCodis = lazy(async () => {
+    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
+    return ({ default: module.SeccióCodis });
+});
 
 const BarraNav = ({esAdministrador, setEsAdministrador}) => {
     const userId = Meteor.userId();
@@ -38,6 +42,7 @@ const BarraNav = ({esAdministrador, setEsAdministrador}) => {
           <SeccióPobles />
           <SeccióNecessitats />
           <SeccióTipus />
+          <SeccióCodis />
      </PanellSeccions>;
 };
 
diff --git a/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx b/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx
index ead6caf..8092e6a 100644
--- a/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx
+++ b/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx
@@ -34,15 +34,21 @@ export const SeccióUsuaris = () => <BotóSecció
      linkto="usuaris"
 />;
 
+export const SeccióCodis = () => <BotóSecció
+     titol="Codis"
+     linkto="codis"
+/>;
+
 export const PanellSeccions = ({children}) => {
      return <><div style={{
           display: `flex`,
           border: `1px solid #cccc`,
           padding: `.5rem`,
           borderRadius: `.5rem`,
-          backgroundColor: `lightslategray`
+          backgroundColor: `lightslategray`,
+          flexWrap: `wrap`,
+          justifyContent: `space-around`
      }}>{children}</div>
      <br />
      </>;
 };
-