diff --git a/assets/webRings/DNNwebring.gif b/assets/webRings/DNNwebring.gif
new file mode 100644
index 0000000..2a716d9
Binary files /dev/null and b/assets/webRings/DNNwebring.gif differ
diff --git a/assets/webRings/berthe.cc.png b/assets/webRings/berthe.cc.png
new file mode 100644
index 0000000..9723f00
Binary files /dev/null and b/assets/webRings/berthe.cc.png differ
diff --git a/assets/webRings/murmure-cafe-webring.png b/assets/webRings/murmure-cafe-webring.png
new file mode 100644
index 0000000..99583ab
Binary files /dev/null and b/assets/webRings/murmure-cafe-webring.png differ
diff --git a/index.html b/index.html
index 55bc7f3..f412bd3 100644
--- a/index.html
+++ b/index.html
@@ -216,6 +216,17 @@
                 </article>
         </section>
       </aside>
+      <footer id="webRingSection" aria-label="les copaines du LOL">
+        <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+          <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
+        </a>
+        <a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
+          <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
+        </a>
+        <a href="https://drags-nerds.net" target="_blank" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+          <img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+        </a>
+      </footer>
       <noscript>
         <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
       </noscript>
diff --git a/style/main.css b/style/main.css
index 0ad0f9e..029f098 100644
--- a/style/main.css
+++ b/style/main.css
@@ -577,6 +577,7 @@ main{
                         .solidBox:hover{
                           color: var(--back-color);
                           background-color: var(--main-color);
+                          border-color: var(--back-color);
                         }
 
                         .solidBox:has(details[open]){
@@ -628,4 +629,35 @@ main{
                         }
                 }
       }
+
+      #webRingSection{
+        width: 100%;
+        padding: 13.12px;
+        padding-bottom: 16.1px;
+        min-height: 44px;
+        display: grid;
+        background-color: var(--back-color);
+        border-color: var(--main-color);
+        border-style: solid;
+        border-width: thin 0 0 0;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 7.77px;
+
+              a{
+                width: 100%;
+                height: 31px;
+
+                      img{
+                        width: 100%;
+                      }
+
+                      .needOutline{
+                        border-color: var(--main-color);
+                        border-style: solid;
+                        border-width: thin;
+                      }
+              }
+
+              
+      }
 }
diff --git a/style/responsive.css b/style/responsive.css
index 2ec6c19..a39f4b6 100644
--- a/style/responsive.css
+++ b/style/responsive.css
@@ -135,6 +135,11 @@
                        }
               }
       }
+
+      #webRingSection{
+        grid-template-columns: repeat(6, 1fr);
+        min-height: 66px;
+      }
     }
   }
 
@@ -314,5 +319,10 @@
                     }
             }
     }
+
+    #webRingSection{
+        grid-template-columns: repeat(8, 1fr);
+        min-height: 77px;
+      }
   }
 }