diff --git a/src/app/pages/kind/kind.component.html b/src/app/pages/kind/kind.component.html
index 70a5580e..826bacaa 100644
--- a/src/app/pages/kind/kind.component.html
+++ b/src/app/pages/kind/kind.component.html
@@ -1,4 +1,197 @@
-<h1>page de démo</h1>
-<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
-</p>
-<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>
+<h1>Atoms</h1>
+<section>
+    <article>
+        <h2>Headings</h2>
+
+        <h1>Ceci est un h1</h1>
+        <h2>Ceci est un h2</h2>
+        <h3>Ceci est un h3</h3>
+    </article>
+
+    <article>
+        <h2>Links</h2>
+        <div>
+            <a [routerLink]="'/home'" class="next">
+                <span class="text" i18n>
+                    C'est parti !
+                </span>
+            </a>
+        </div>
+        <div>
+            <a [routerLink]="'/home'" class="prev">
+                <span class="text" i18n>
+                    C'est parti !
+                </span>
+            </a>
+        </div>
+    </article>
+
+    <article>
+        <h2>Buttons</h2>
+
+        <p>
+            <input type="submit" value="Input Submit with border" class="btn_border"><br>
+            <input type="submit" value="Input Submit with background" class="btn_background"><br>
+            <input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br>
+            <input type="submit" value="Input Submit delete with background" class="btn_background btn_delete">
+        </p>
+
+        <p>
+            <button class="btn_border">Button with border</button><br>
+            <button class="btn_background">Button with background</button><br>
+            <button class="btn_border btn_delete">Button delete with background</button><br>
+            <button class="btn_background btn_delete">Button delete with background</button>
+        </p>
+        
+    </article>
+
+    <article>
+        <h2>Forms element</h2>
+
+        <h3>Labels</h3>
+
+        <label for="">Un label pour les labelliser tous</label>
+
+        <h3>Input text</h3>
+        <input type="text" name="" id=""><br>
+        <input type="text" name="" id="" value="texte">
+
+        <h3>Input email</h3>
+        <input type="email" name="" id=""><br>
+        <input type="email" name="" id="" value="adresse@email.com">
+
+        <h3>Input password</h3>
+        <input type="password" name="" id=""><br>
+        <input type="password" name="" id="" value="password">
+
+        <h3>Input date</h3>
+        <input type="date" name="" id=""><br>
+        <input type="date" name="" id="" value="1985-11-23">
+
+        <h3>Select</h3>
+        <select name="" id="">
+            <option value="">
+                1
+            </option>
+            <option value="">
+                2
+            </option>
+            <option value="">
+                3
+            </option>
+        </select>
+
+        <h3>Textarea</h3>
+        <textarea name="" id="" cols="30" rows="10"></textarea>
+    </article>
+
+    <article>
+        <h2>Paragraphs</h2>
+
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
+            Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
+            delectus beatae!</p>
+    </article>
+
+    <article>
+        <h2>Lists</h2>
+
+        <h3>Unordered list</h3>
+        <ul>
+            <li>
+                plop
+            </li>
+            <li>
+                plop
+            </li>
+            <li>
+                plop
+            </li>
+        </ul>
+
+        <h3>Ordered list</h3>
+        <ol>
+            <li>
+                plop
+            </li>
+            <li>
+                plop
+            </li>
+            <li>
+                plop
+            </li>
+        </ol>
+    </article>
+
+    <article>
+        <h2>Images</h2>
+        <img src="http://placekitten.com/200/300" alt="">
+    </article>
+</section>
+
+<section>
+    <h1>Molecules</h1>
+
+    <article>
+        <h2>Label + input text</h2>
+        <label for="test-text">Ceci est un label un peu long mais pas trop</label>
+        <input type="text" name="test-text" id="test-text">
+    </article>
+
+    <article>
+        <h2>Label + select</h2>
+        <label for="test-select">Ceci est un label un peu long mais pas trop</label>
+        <select name="test-select" id="test-select">
+            <option value="">
+                1
+            </option>
+            <option value="">
+                2
+            </option>
+            <option value="">
+                3
+            </option>
+        </select>
+    </article>
+
+    <article>
+        <h2>Input text with info</h2>
+        <a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
+    </article>
+
+    <article>
+        <h2>Commentaries</h2>
+    </article>
+</section>
+
+<section>
+    <h1>Components</h1>
+
+    <article>
+        <h2>Images list</h2>
+        <a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
+    </article>
+
+    <article>
+        <h2>Calendar</h2>
+    </article>
+
+    <article>
+        <h2>Modale</h2>
+    </article>
+
+    <article>
+        <h2>Way to vote</h2>
+        <a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
+    </article>
+
+    <article>
+        <h2>Voted</h2>
+        <a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
+    </article>
+
+    <article>
+        <h2>Graphics</h2>
+        <a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
+    </article>
+</section>
\ No newline at end of file
diff --git a/src/app/pages/kind/kind.component.scss b/src/app/pages/kind/kind.component.scss
index e69de29b..76e12fed 100644
--- a/src/app/pages/kind/kind.component.scss
+++ b/src/app/pages/kind/kind.component.scss
@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+section {
+  &:not(:last-of-type) {
+    border-bottom: 6px solid #000;
+  }
+
+  & + & {
+      margin-top: 3rem;
+  }
+}
+
+article {
+  padding: 2rem 0;
+  border-top: 3px solid #ffb92c;
+
+  h3 {
+    &:not(:first-of-type) {
+      margin-top: 2rem;
+    }
+  }
+}