diff --git a/index.html b/index.html
index 51ca51a..1dd3f61 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,21 @@
     <p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
     <hr />
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
-    <img src="https://via.placeholder.com/800x600/" alt="">
+    <p>
+        <button>Bouton</button>
+        <a href="#" class="button">Bouton lien</a>
+        <a class="button">Bouton non cliquable mais lien</a>
+        <span class="button">Bouton span</span>
+        <br />
+        <button disabled>Bouton disabled</button>
+        <a href="#" class="button disabled">Bouton lien disabled</a>
+        <br />
+        <a href="#" class="badge">Badge lien</a>
+        <span class="badge">Badge span</span>
+        <br />
+        <a href="#" class="button link">Bouton lien .link</a>
+    </p>
+    
     <main>
         <section>
             <ul>
@@ -54,6 +68,7 @@
             <td>Row 2, Column 3</td>
         </tr>
     </table>
+    <img src="https://via.placeholder.com/800x600/" alt="">
     <footer>
         <small>©
             <script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved.
diff --git a/src/_buttons.scss b/src/_buttons.scss
deleted file mode 100644
index f05938a..0000000
--- a/src/_buttons.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-a.button, a.button:visited, button, input[type=submit] {
-    font-size: 1rem;
-    background-color: var(--color-accent);
-    color: var(--color-contrast-accent);
-    padding: 0.66rem 1rem;
-    margin-bottom: 0.66rem;
-    border-radius: var(--button-radius);
-    transition: background-color .5s ease;
-    border: none;
-    &:hover {
-        background-color: var(--color-accent-hover);
-    }
-}
-
diff --git a/src/_typography.scss b/src/_typography.scss
index 7aeb450..2693474 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -17,7 +17,7 @@ mark {
     border-radius: 0.1rem;
 }
 
-a {
+a[href] {
     color: var(--color-accent-text);
     outline-color: var(--color-accent-text);
     text-decoration: underline dashed 1px;
@@ -27,7 +27,7 @@ a {
         color: var(--color-accent-text);
     }
 
-    &:hover,
+    &:hover:not(:disabled):not(.disabled),
     &:active {
         background-color: var(--color-link-hover);
         text-decoration: none;
@@ -39,7 +39,7 @@ mark {
     color: var(--color-accent-text);
 }
 
-a:focus-visible,
+a[href]:focus-visible,
 input:focus-visible {
     outline-color: var(--color-accent-text);
     outline-style: dashed;
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
new file mode 100644
index 0000000..1178554
--- /dev/null
+++ b/src/components/_buttons.scss
@@ -0,0 +1,43 @@
+.button, .button:visited, button, input[type=submit], .badge {
+    font-size: 1em;
+    background-color: var(--color-accent);
+    color: var(--color-contrast-accent);
+    padding: 0.66rem 1rem;
+    margin-bottom: 0.66rem;
+    border-radius: var(--button-radius);
+    line-height: 1;
+    border: none;
+    display: inline-block;
+}
+
+a[href].button:not(.link), a[href].button:visited, button, input[type=submit], a[href].badge:not(.link), a[href].badge:visited {
+    color: var(--color-contrast-accent);
+    text-decoration: none;
+    transition: background-color .5s ease;
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--color-accent-hover);
+    }
+}
+
+.button.link, .badge.link {
+    color: var(--color-accent-text);
+    background-color: transparent;
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--color-link-hover);
+    }
+
+    &.outline {
+        border: 1px solid var(--color-accent-text);
+        text-decoration: none;
+    }
+}
+
+.badge {
+    font-size: 0.8em;
+    padding: 0.33rem .5rem;
+}
+
+:disabled, .disabled {
+    filter: #{"grayscale(1)"};
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
new file mode 100644
index 0000000..e8d2cd4
--- /dev/null
+++ b/src/components/_cards.scss
@@ -0,0 +1,3 @@
+.card {
+    border-radius: var(--card-radius);
+}
\ No newline at end of file
diff --git a/src/components/_well.scss b/src/components/_well.scss
new file mode 100644
index 0000000..22f6bcb
--- /dev/null
+++ b/src/components/_well.scss
@@ -0,0 +1,8 @@
+.alert {
+    border-radius: var(--card-radius);
+}
+
+.alert {
+    background-color: var(--color-accent-background);
+    color: var(--color-accent-text);
+}
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 97bc4fe..e071b5a 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -22,13 +22,8 @@
 
 @import 'core';
 @import 'typography';
-@import 'buttons';
 
-.card, .alert {
-    border-radius: var(--card-radius);
-}
-
-.alert {
-    background-color: var(--color-accent-background);
-    color: var(--color-accent-text);
-}
\ No newline at end of file
+// Liste des composants
+@import 'components/buttons';
+@import 'components/cards';
+@import 'components/well';
\ No newline at end of file