diff --git a/src/components/JoinDiscourse/index.js b/src/components/JoinDiscourse/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..73a14821a800f742ba83cef8a2245470fd14e1ca
--- /dev/null
+++ b/src/components/JoinDiscourse/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css'
+
+export default function JoinDiscourse() {
+  return (
+  <div className={styles.cdd_card}>
+    <p>
+    Rejoins notre communauté francophone dédié au mouvement DevOps ! <br/> C&apos;est par ici ! 
+    </p>
+    <div className={styles.cdd_button}>
+      <img className={styles.cdd_icon} src={useBaseUrl('/img/checklist.png')} />
+      <Link
+        className="button button--primary"
+        href="https://www.compagnons-devops.fr/#join">
+        Je rejoins la communauté! 
+      </Link> 
+    </div>
+  </div>
+  )
+}
diff --git a/src/components/JoinDiscourse/styles.module.css b/src/components/JoinDiscourse/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..f4c5c38372ccce00250658b28c0c0991cd857183
--- /dev/null
+++ b/src/components/JoinDiscourse/styles.module.css
@@ -0,0 +1,12 @@
+.cdd_icon {
+  position: absolute;
+  width: 45px;
+  z-index: -1;
+  transform: translate(-90%, -50%);
+  overflow: visible;
+}
+
+
+.cdd_card {
+  text-align: center;
+}
diff --git a/src/pages/dummy-page.mdx b/src/pages/dummy-page.mdx
index fdbfd5b6420bb0779ec7a6ca4941b2947e894658..0d764e2316d52dbd5fabf41fb670a5e253be8a9f 100644
--- a/src/pages/dummy-page.mdx
+++ b/src/pages/dummy-page.mdx
@@ -1,11 +1,13 @@
 ---
 title: "Dummy page"
 ---
+import JoinDiscourse from '../components/JoinDiscourse'
 
 # Markdown page example
 
 You don't need React to write simple standalone pages.
 
+<JoinDiscourse/>
 <RdoEmissions/>  
 <FrgCommu/>
 <FrgAccelerateur/>
diff --git a/src/pages/radio-devops.md b/src/pages/radio-devops.mdx
similarity index 96%
rename from src/pages/radio-devops.md
rename to src/pages/radio-devops.mdx
index 9fbc531749ba725af329475cd252b5096e9adc6b..c647df191a768d4011f0ff033f2490beff41c919 100644
--- a/src/pages/radio-devops.md
+++ b/src/pages/radio-devops.mdx
@@ -1,6 +1,7 @@
 ---
 title: Radio DevOps
 ---
+import Link from '@docusaurus/Link'
 
 # Radio DevOps
 
@@ -34,7 +35,7 @@ Nous avons donc décidé de créer et d’animer une communauté qui partage nos
 * L’amélioration continue fait de nous des experts en devenir.
 
 <Link
-  className="button button--secondary button--lg"
+  className="button button--primary button--lg"
   href="https://www.compagnons-devops.fr/">
   Rejoignez la communauté des Compagnons du DevOps !
 </Link>  
diff --git a/src/theme/BlogSidebar/Desktop/index.js b/src/theme/BlogSidebar/Desktop/index.js
index 7d6261417a171a1856aa5f925a30dfa20040b0e9..a3d0fb2723488f9da4156a4d19b7d190c50baa3f 100644
--- a/src/theme/BlogSidebar/Desktop/index.js
+++ b/src/theme/BlogSidebar/Desktop/index.js
@@ -5,7 +5,7 @@ import {translate} from '@docusaurus/Translate';
 import Tag from '@theme/Tag';
 import styles from './styles.module.css';
 import popularTags from '@site/static/popularTags.json'
-
+import JoinDiscourse from '@site/src/components/JoinDiscourse'
 
 export default function BlogSidebarDesktop({sidebar}) {
   return (
@@ -51,6 +51,8 @@ export default function BlogSidebarDesktop({sidebar}) {
             </li>
           ))}
         </ul>
+        <hr/>
+        <JoinDiscourse/>
       </nav>
     </aside>
   );
diff --git a/src/theme/BlogSidebar/Mobile/index.js b/src/theme/BlogSidebar/Mobile/index.js
index ad8f3393b0d2ac8352629c6452cf94683c5a725c..dbebbdf5bda8d6e755c1f3b837758ac3763e635d 100644
--- a/src/theme/BlogSidebar/Mobile/index.js
+++ b/src/theme/BlogSidebar/Mobile/index.js
@@ -3,6 +3,7 @@ import Link from '@docusaurus/Link';
 import Tag from '@theme/Tag';
 import popularTags from '@site/static/popularTags.json'
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import JoinDiscourse from '@site/src/components/JoinDiscourse'
 
 
 function BlogSidebarMobileSecondaryMenu({sidebar}) {
@@ -36,6 +37,8 @@ function BlogSidebarMobileSecondaryMenu({sidebar}) {
     activeClassName="menu__link--active">
     Voir tous les tags
     </Link>
+    <hr/>
+    <JoinDiscourse/>
     </>
   );
 }
diff --git a/static/img/checklist.png b/static/img/checklist.png
new file mode 100644
index 0000000000000000000000000000000000000000..35386236f68300842c56532a49f2f9301ca6b44a
Binary files /dev/null and b/static/img/checklist.png differ