diff --git a/api/auth.js b/api/auth.js
index 43a9ded9..f2154f16 100644
--- a/api/auth.js
+++ b/api/auth.js
@@ -68,6 +68,7 @@ GET.auth.discord = async ({ url }) => {
       roles: [rolesByKey.student.id, specialities[speciality].id],
     },
   })
+  
 
   join.reply.ok || console.error('Unable to join discord:', join.reply)
   user.role = roles.find((r) => join.roles.includes(r.id))?.key || 'student'
diff --git a/app.jsx b/app.jsx
index 54030577..8adf1e45 100644
--- a/app.jsx
+++ b/app.jsx
@@ -6,15 +6,15 @@ import { P, divider } from './component/elements.jsx'
 import { Router } from './lib/router.js'
 import { Profile } from './page/profile.jsx'
 import { Home } from './page/home.jsx'
-import { Exercise } from './page/exercise.jsx'
+import { ModuleHome } from './page/module_home.jsx'
 
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <ModuleHome path="/modules" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}
diff --git a/component/header.jsx b/component/header.jsx
index c8d765a7..41778437 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>{!props.removeTiret && ' - '}<Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
@@ -78,6 +78,11 @@ export const Header = ({ page, title, children }) => {
   return (
     <header>
       <Nav path={path} />
+      {'\n'}
+      <Title>Page</Title>
+      {'\n'}
+      <h1>{`  ${path}`} </h1>
+      {'\n'}
       {children}
     </header>
   )
diff --git a/component/markdown.jsx b/component/markdown.jsx
new file mode 100644
index 00000000..cbd1d31f
--- /dev/null
+++ b/component/markdown.jsx
@@ -0,0 +1,63 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    .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,
+        <>
+          <Span fg="red">{'#'.repeat(Number(el.slice(1)))}</Span>&nbsp;
+        </>,
+        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, ...props }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <NavLink href={link ? link : null} {...props}>
+      <Span
+        style={{
+          padding: '0.1rem',
+          background: !link && 'rgba(75, 75, 75, 0.63)',
+        }}
+        fg={link ? 'cyan-darker' : 'white'}
+      >
+        <ColorIze>{link ? '[' : '`'}</ColorIze>
+        {children}
+        <ColorIze>{link ? ']' : '`'}</ColorIze>
+      </Span>
+    </NavLink>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return <Div class="warn">{children}</Div>
+}
diff --git a/component/moduleLi.jsx b/component/moduleLi.jsx
new file mode 100644
index 00000000..efc55c23
--- /dev/null
+++ b/component/moduleLi.jsx
@@ -0,0 +1,78 @@
+import { css } from '../lib/dom'
+import { navigate } from '../lib/router'
+import { P, Span } from './elements'
+import { NavLink } from './header.jsx'
+
+css(`
+  .module-li {
+    display:block;
+    cursor:pointer;
+    margin:1ch;
+    padding:0.2ch;
+    display:flex;
+    width: 100%;
+    flex-direction:row;
+    align-items:center;
+    justify-conternt: space-around;
+    cursor:not-allowed;
+  }
+
+  .module-li p {
+    margin-right:1ch;
+    width:30%;
+    color: grey;
+  }
+
+  .module-li span {
+    margin-right:1ch;
+    color:grey;
+  }
+
+  .module-li.pass {
+    cursor:pointer;
+  }
+
+  .module-li.pass p{
+    color: white;
+  }
+
+  .module-li.pass span {
+    color:white;
+  }
+
+
+`)
+
+export const ModuleLi = ({
+  name,
+  language,
+  exercises,
+  quizzes,
+  isPassed,
+  isActive,
+  results,
+}) => {
+  return (
+    <NavLink
+      class={`module-li ${isPassed || isActive ? 'pass' : ''}`}
+      href={(isPassed || isActive) && '/module/' + name}
+      style={{
+        outline: !isPassed && !isActive && 'none',
+        textDecoration: 'none',
+      }}
+      removeTiret
+    >
+      <P>📕 - {name}</P>
+      <Span>
+        <Span bg="selection">
+          [{results ? results.exercises : 0}/{exercises} exos done]
+        </Span>
+      </Span>
+      <Span>
+        <Span bg="selection">
+          [{results ? results.quizzes : 0}/{quizzes} quizzes done]
+        </Span>
+      </Span>
+    </NavLink>
+  )
+}
diff --git a/data/fakeExercise.json b/data/fakeExercise.json
deleted file mode 100644
index 0a9f7c6e..00000000
--- a/data/fakeExercise.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "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"]
-}
diff --git a/data/fakeModules.json b/data/fakeModules.json
new file mode 100644
index 00000000..b8b4bcd6
--- /dev/null
+++ b/data/fakeModules.json
@@ -0,0 +1,46 @@
+{
+    "01-JS Basics":{
+      "description":
+        "this  module talk about the basics  programmation in javascript",
+      "notions": ["variables", "data types", "operators", "condition", "iteraction"],
+      "children": [
+        { "name": "Hello There", "type": "exercise", "key": "01-Hello There.exercise.md"},
+        {
+          "name": "Anything To Declare",
+          "type": "exercise",
+          "key": "02-Anything To Declare.exercise.md"
+        },
+        { "name": "Good Search", "type": "exercise", "key": "03-Good Search.exercise.md"},
+        { "name": "World of DOM", "type": "quiz", "key": "04-World of DOM.quiz.md"},
+        {
+          "name": "Redeclaration Love",
+          "type": "exercise",
+          "key": "05-Redeclaration of Love"
+        },
+        { "name": "Duplicate", "type": "exercise", "key": "06-Duplicate.exercise.md"},
+        { "name": "cool", "type": "quiz", "key": "07-cool.quiz.md"}
+      ]
+    },
+    "02-JS Conditions":{
+      "description":
+        "this  module talk about the basics  programmation in javascript",
+      "notions": ["variables", "data types", "operators", "condition", "iteraction"],
+      "children": [
+        { "name": "Hello There", "type": "exercise", "key": "01-Hello There.exercise.md"},
+        {
+          "name": "Anything To Declare",
+          "type": "exercise",
+          "key": "02-Anything To Declare.exercise.md"
+        },
+        { "name": "Good Search", "type": "exercise", "key": "03-Good Search.exercise.md"},
+        { "name": "World of DOM", "type": "quiz", "key": "04-World of DOM.quiz.md"},
+        {
+          "name": "Redeclaration Love",
+          "type": "exercise",
+          "key": "05-Redeclaration of Love"
+        },
+        { "name": "Duplicate", "type": "exercise", "key": "06-Duplicate.exercise.md"},
+        { "name": "cool", "type": "quiz", "key": "07-cool.quiz.md"}
+      ]
+    }
+}
diff --git a/data/fakeUserData.json b/data/fakeUserData.json
new file mode 100644
index 00000000..7e263ecd
--- /dev/null
+++ b/data/fakeUserData.json
@@ -0,0 +1,11 @@
+{
+  "name":"Koffi",
+  "lastname":"Kouamé Rameaux",
+  "results":{
+    "01-JS Basics":{
+        "01-Hello There":{"type": "exercise","percent":0.6,"attempts":4,"seconds":60,"pass":true},
+      "02-Anything To Declare":{"type" : "exercise" , "percent":0.7,"seconds":125,"attempts":15,"pass":true},
+      "03-Good Search":{"type":"exercise","attempts": 14,"pass":false }
+    }
+  }
+}
diff --git a/page/exercise.jsx b/page/exercise.jsx
deleted file mode 100644
index 4e548efb..00000000
--- a/page/exercise.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { css } from '../lib/dom.js'
-import { Main, Div, P } from '../component/elements.jsx'
-import { name, description } 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 .instructions ul {
-      margin-left:50px;
-    }
-
-    .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>
-    <Div class="exercise">
-      <h1>&#x270D; {name}</h1>
-      <hr />
-      <P class="description">{description}</P>
-      <Div class="instructions">
-        <h3>&#x1F4CB; Instructions </h3>
-        <ul>
-          <li>do this</li>
-          <li>do that</li>
-          <li>do more</li>
-        </ul>
-      </Div>
-      <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>
-      </Div>
-    </Div>
-  </Main>
-)
diff --git a/page/module_home.jsx b/page/module_home.jsx
new file mode 100644
index 00000000..d6c8de84
--- /dev/null
+++ b/page/module_home.jsx
@@ -0,0 +1,91 @@
+import { css } from '../lib/dom'
+import { Div, Span, P } from '../component/elements'
+import { MTitle, MItalicWord } from '../component/markdown'
+import modules from '../data/fakeModules.json'
+import userData from '../data/fakeUserData.json'
+import { ModuleLi } from '../component/moduleLi.jsx'
+
+css(`
+    .module_home p.describ {
+        white-space: normal;
+    }
+`)
+
+export const ModuleHome = () => {
+  const getUserpassedExoLength = (moduleName, type) =>
+    Object.entries(userData.results[moduleName]).filter(
+      (f) => f[1].type === type && f[1].pass,
+    ).length
+  const getModueExoLength = (moduleName, type) =>
+    modules[moduleName].children.filter((c) => c.type === type).length
+  const getExoNumber = (name) => Number(name.split('-', 1).join(''))
+
+  const isPassed = (moduleName) => {
+    const exosLength = getModueExoLength(moduleName, 'exercise')
+    const quizzesLength = getModueExoLength(moduleName, 'quiz')
+    const keys = Object.keys(userData.results)
+    if (getExoNumber(keys[keys.length - 1]) > getExoNumber(moduleName)) {
+      return true
+    }
+    if (userData.results[moduleName]) {
+      const userExercises = getUserpassedExoLength(moduleName, 'exercise')
+      const userQuizzes = getUserpassedExoLength(moduleName, 'quiz')
+      return exosLength === userExercises && quizzesLength === userQuizzes
+    } else return false
+  }
+
+  const isActive = (name) => {
+    const keys = Object.keys(userData.results)
+    const last = keys[keys.length - 1]
+    const find = keys.findIndex((n) => n === name)
+    if (find === keys.length - 1 && !isPassed(name)) return true
+    if (getExoNumber(name) === getExoNumber(last) + 1 && isPassed(last))
+      return true
+    return false
+  }
+
+  return (
+    <Div class="module_home">
+      <MTitle.h2> List of Modules</MTitle.h2>
+      {'\n'}
+      <P class="describ">
+        Here, the list of modules ..., the modules are listed progressively. you
+        must complete the first module before accessing the next one, the more
+        you uncheck the modules, the more you will improve your skills.
+      </P>
+      {'\n'}
+      <MItalicWord type="ps">
+        PS: modules can be added at any time by the trainer, or at your request
+      </MItalicWord>
+      {'\n'}
+      <MTitle.h3> Modules </MTitle.h3>
+      {'\n'}
+      <ul class="modules">
+        {Object.keys(modules).map((name) => (
+          <ModuleLi
+            key={name}
+            name={name}
+            isPassed={isPassed(name)}
+            isActive={isActive(name)}
+            results={
+              (isPassed(name) || isActive(name)) && {
+                exercises: Object.entries(userData.results[name]).filter(
+                  (v) => v[1].type === 'exercise' && v[1].pass,
+                ).length,
+                quizzes: Object.entries(userData.results[name]).filter(
+                  (v) => v[1].type === 'quiz' && v[1].pass,
+                ).length,
+              }
+            }
+            exercises={
+              modules[name].children.filter((c) => c.type === 'exercise').length
+            }
+            quizzes={
+              modules[name].children.filter((c) => c.type === 'quiz').length
+            }
+          />
+        ))}
+      </ul>
+    </Div>
+  )
+}