diff --git a/app.jsx b/app.jsx
index 54030577..06eeb6c8 100644
--- a/app.jsx
+++ b/app.jsx
@@ -12,9 +12,9 @@ const App = () => (
   <>
     <Header />
     <Router>
+      <Exercise path="/exercise" />
       <Profile path="/profile" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}
diff --git a/component/header.jsx b/component/header.jsx
index c8d765a7..ecb4854f 100644
--- a/component/header.jsx
+++ b/component/header.jsx
@@ -20,7 +20,7 @@ const LinkMatch = ({ match, children, path, ...props }) => (
 const clearStorage = () => localStorage.clear()
 
 // prettier-ignore
-const NavLink = (props) => <li> - <Link {...props} /></li>
+export const NavLink = (props) => <li> - <Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
diff --git a/component/markdown.jsx b/component/markdown.jsx
new file mode 100644
index 00000000..3893f694
--- /dev/null
+++ b/component/markdown.jsx
@@ -0,0 +1,70 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    li.mli {
+      display:block;
+    }
+
+    .warn {
+      outline: 1px dashed red;
+      padding: 0.8rem;
+    }
+
+`)
+
+export const MTitle = Object.fromEntries(
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((el) => [
+    el,
+    ({ children, ...props }) =>
+      h(
+        el,
+        props,
+        <Color.Red style={{ marginRight: '1ch' }}>
+          {'#'.repeat(Number(el.slice(1)))}
+        </Color.Red>,
+        children,
+      ),
+  ]),
+)
+
+export const MItalicWord = ({ children, color, type }) => {
+  return (
+    <P>
+      <Color.Orange>{'>'}</Color.Orange>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      <Span fg={color} style={{ fontStyle: 'italic' }}>
+        {children}
+      </Span>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      {type === 'ps' && <Color.Orange>{'<'}</Color.Orange>}
+    </P>
+  )
+}
+
+export const MLi = ({ children, link }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <li class={`mli`}>
+      <NavLink href={link ? link : null} style={{ outline: !link && 'none' }}>
+        <Span
+          style={{
+            padding: '0.1rem',
+            background: !link && 'rgba(75, 75, 75, 0.63)',
+            textDecoration: link && 'underline',
+          }}
+          fg={link ? 'cyan-darker' : 'white'}
+        >
+          <ColorIze>{link ? '[' : '`'}</ColorIze>
+          {children}
+          <ColorIze>{link ? ']' : '`'}</ColorIze>
+        </Span>
+      </NavLink>
+    </li>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return <Div class="warn">{children}</Div>
+}
diff --git a/data/fakeExercise.json b/data/fakeExercise.json
index 0a9f7c6e..ed367c5f 100644
--- a/data/fakeExercise.json
+++ b/data/fakeExercise.json
@@ -1,6 +1,6 @@
 {
-  "name":"01 - Hello There",
-  "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dolor sit amet lectus consequat condimentum. Morbi ultrices vitae nulla a mollis. Suspendisse arcu leo, finibus in accumsan ut, ultrices dictum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut accumsan vitae nisi vel porttitor. Nullam hendrerit nibh a sapien sagittis dignissim. Fusce suscipit nisl vel eros volutpat venenatis. Duis nec vehicula magna. Sed varius dictum quam, ac tempus augue rhoncus ac.",
-  "instructions":["create a variable", "create a constante", "create a condition"],
-  "notions": ["Basics Programming","Loop","Iteraction"]
+  "name":"01-Hello There",
+  "description":"lorem ipsum",
+  "instructions":["do this", "do that","do like thaht"],
+  "notions":[{"name":"Loop","link":"/notions/js-loop"},{"name":"Variables","link":"/notions/js-variables"},{"name":"Conditions","link":"/notions/js-conditions"}]
 }
diff --git a/page/exercise.jsx b/page/exercise.jsx
index 4e548efb..824892e1 100644
--- a/page/exercise.jsx
+++ b/page/exercise.jsx
@@ -1,134 +1,56 @@
 import { css } from '../lib/dom.js'
-import { Main, Div, P } from '../component/elements.jsx'
-import { name, description } from '../data/fakeExercise.json'
+import { Div, P } from '../component/elements.jsx'
+import { MTitle, MItalicWord, MLi, Warning } from '../component/markdown.jsx'
+import exercise from '../data/fakeExercise.json'
 
 css(`
-     .exercise{
-       width:100%;
-       height: auto;
-     }
-
-     .exercise>h1 {
-       font-size: 2rem;
-       font-weight:bolder;
-     }
-
-
-
-     .exercise>hr {
-       width: 100%;
-       height:2px;
-       background: grey;
-       margin-top: 5px;
-     }
-
-     .exercise p.description {
-         white-space:normal !important;
-         background: #090c12a8;
-         color: grey;
-         margin: 10px auto;
-         padding:1rem;
-         border-radius:0.3rem;
-    }
-
-    .exercise .instructions h3{
-      font-size:2rem;
+    .exercise h1,.exercise h3 {
+      font-weight: bolder;
     }
 
-    .exercise .instructions ul {
-      margin-left:50px;
+    .exercise .instructions .description,.exercise .notions p{
+      padding: 0.3rem;
     }
-
-    .exercise .instructions ul li {
-      display:block;
-      margin:7px auto;
-      font-weight:bolder;
-      font-size:1.2rem;
-    }
-
-    .exercise .instructions ul li:before {
-       content:'👉';
-       font-size: 1.5rem;
-       margin-right:10px;
-
-    }
-
-    .exercise .notions {
-      width:100%;
-      height: auto;
-      padding: 0.5rem;
-      border-radius: 0.7rem;
-      background:#110909;
-      margin-top: 18px;
-    }
-
-    .exercise .notions h1 {
-      font-size:1.7rem;
-      margin-top: -18px;
-    }
-
-    .exercise .notions h1 span {
-      color: yellow;
-      font-weight:bolder;
-      font-size: 3rem;
-      margin-right: 10px;
-    }
-
-    .exercise .notions p{
-      white-space:normal !important;
-      font-size:1.2rem;
-    }
-
-    .exercise .notions ul {
-       margin-top: 10px;
-    }
-
-    .exercise .notions ul li {
-      display:block;
-      width:0px;
-      background: grey;
-      font-size:1rem;
-      margin: 7px 0;
-      cursor:pointer;
-      font-style:oblique;
-    }
-
-    .exercise .notions ul li:hover{
-      color: skyblue;
-      font-weight:bolder;
-    }
-
-    .exercise .notions ul li:before{
-      content:'🔗';
-      font-size: 1rem;
-    }
-
 `)
-export const Exercise = () => (
-  <Main>
+export const Exercise = () => {
+  return (
     <Div class="exercise">
-      <h1>&#x270D; {name}</h1>
-      <hr />
-      <P class="description">{description}</P>
+      <MTitle.h2>{exercise.name}</MTitle.h2>
+      {'\n'}
       <Div class="instructions">
-        <h3>&#x1F4CB; Instructions </h3>
-        <ul>
-          <li>do this</li>
-          <li>do that</li>
-          <li>do more</li>
-        </ul>
+        <MTitle.h3>Instructions</MTitle.h3>
+        {'\n'}
+        {exercise.description && (
+          <P class="description">{exercise.description}</P>
+        )}
+        {'\n'}
+        {exercise.instructions && (
+          <ul>
+            {exercise.instructions.map((key) => (
+              <MLi key={key}>{key}</MLi>
+            ))}
+          </ul>
+        )}
       </Div>
+      {'\n'}
       <Div class="notions">
-        <h1>
-          <span>⚠</span>Warning
-        </h1>
-        <P> to do this exercise you should know the following concepts : </P>
-        <ul>
-          <li> progession </li>
-          <li> progession </li>
-          <li> progession </li>
-        </ul>
+        <MTitle.h3>Warning</MTitle.h3>
+        {'\n'}
+        <Warning>
+          <MItalicWord color="red">
+            To do this Exercise you should know the following concepts :
+          </MItalicWord>
+          {'\n'}
+          <ul>
+            {exercise.notions.map(({ name, link }) => (
+              <MLi key={name} link={link}>
+                {name}
+              </MLi>
+            ))}
+          </ul>
+        </Warning>
       </Div>
+      {'\n'}
     </Div>
-  </Main>
-)
+  )
+}