diff --git a/app.jsx b/app.jsx
index 54030577..0fe754a5 100644
--- a/app.jsx
+++ b/app.jsx
@@ -6,15 +6,14 @@ 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 { Quiz } from './page/quiz.jsx'
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <Quiz path="/quizzes" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}
diff --git a/component/elements.jsx b/component/elements.jsx
index d16be66e..399191a0 100644
--- a/component/elements.jsx
+++ b/component/elements.jsx
@@ -14,7 +14,7 @@ const colorize = (tag) => (props) => {
   const style = getStyle(props)
   props.bg && (style.backgroundColor = colors[props.bg])
   props.fg && (style.color = colors[props.fg])
-  props.bg && console.log({ style, props })
+ // props.bg && console.log({ style, props })
   return h(tag, props)
 }
 
diff --git a/component/form.jsx b/component/form.jsx
index 57d3cbf8..63311260 100644
--- a/component/form.jsx
+++ b/component/form.jsx
@@ -90,9 +90,13 @@ export const Text = ({ name, value, comment, errors, children, ...props }) => {
 
 export const Form = ({ title, children, submit, ...props }) => (
   <form {...props}>
-    {'\n'}
-    <Title>{title}</Title>
-    {'\n'}
+    {title && (
+      <>
+        <Title>{title}</Title>
+        {'\n'}
+      </>
+    )}
+
     {children}
     {submit && (
       <>
diff --git a/component/header.jsx b/component/header.jsx
index c8d765a7..ba7c20dc 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 (
@@ -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..cbeedd2f
--- /dev/null
+++ b/component/markdown.jsx
@@ -0,0 +1,73 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    li.mli {
+      display:block;
+    }
+`)
+
+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 Check = ({ val }) => {
+  return <Color.Comment bg="white">[{val}]</Color.Comment>
+}
+
+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}>
+        <Span fg="orange"> - </Span>
+        <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 style={{ outline: '1px dashed red', padding: '0.8rem' }}>
+      {children}
+    </Div>
+  )
+}
diff --git a/component/quizQuestionCard.jsx b/component/quizQuestionCard.jsx
new file mode 100644
index 00000000..498f3268
--- /dev/null
+++ b/component/quizQuestionCard.jsx
@@ -0,0 +1,114 @@
+import { useEffect, useState, useRef } from 'preact/hooks'
+import { css } from '../lib/dom.js'
+import { Div, P, Span } from './elements.jsx'
+import { Check } from './markdown.jsx'
+
+css(`
+    .question_card {
+      padding: 2ch;
+      outline: 2px dashed var(--comment-darker);
+      margin: 2ch;
+    }
+
+    .question_card p {
+      display:flex;
+      flex-direction: row;
+      align-items:center;
+      justify-content:flex-start;
+      margin: 1ch auto;
+      width: auto;
+    }
+
+
+    .question_card .checkCard {
+      position: relative;
+      height: 25px;
+      width: 25px;
+      margin-right: 10px;
+  }
+
+  .question_card .checkCard input {
+    opacity:0;
+    width:100%;
+    height: 100%;
+    top:0;
+    position: absolute;
+    z-index: 1;
+ }
+
+
+  .question_card .checkCard span {
+    width: 100%;
+    height: 100%;
+    postion:absolute;
+    top:0;
+    z-index:0;
+  }
+
+
+`)
+
+const CheckCard = ({ isManyResponse, question, resp, setAnswer }) => {
+  const [isChecked, setIsChecked] = useState(false)
+  let inter = null
+  let input = useRef(null)
+
+  useEffect(() => {
+    if (!isManyResponse) {
+      inter = setInterval(() => {
+        setIsChecked(input.current.checked)
+      })
+    }
+    return () => {
+      clearInterval(inter)
+    }
+  }, [isManyResponse])
+
+  return (
+    <Div class="checkCard">
+      <input
+        ref={input}
+        type={isManyResponse ? 'checkbox' : 'radio'}
+        name={'input-' + question.slice(0, 5)}
+        value={resp}
+        onChange={(e) => {
+          setIsChecked(e.target.checked)
+          setAnswer(question, resp, isManyResponse)
+        }}
+      />
+      <Check val={isChecked ? 'X' : ' '} />
+    </Div>
+  )
+}
+
+export const QuestionCard = ({ question, responses, ...rest }) => {
+  let isManyResponse = Object.entries(responses).filter((r) => r[1]).length > 1
+  return (
+    <Div class="question_card">
+      <h3>💡 {question} ? </h3>
+      <Div class="responses">
+        {Object.keys(responses).map((resp) => {
+          return (
+            <P
+              onClick={(e) => {
+                if (!e.target.type) {
+                  e.target.children.length
+                    ? e.target.children[0].click()
+                    : e.target.parentElement.click()
+                }
+              }}
+            >
+              <CheckCard
+                isManyResponse={isManyResponse}
+                resp={resp}
+                question={question}
+                {...rest}
+              />
+              <Span>{resp}</Span>
+            </P>
+          )
+        })}
+      </Div>
+    </Div>
+  )
+}
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/fakeQuiz.json b/data/fakeQuiz.json
new file mode 100644
index 00000000..f49b26ea
--- /dev/null
+++ b/data/fakeQuiz.json
@@ -0,0 +1,33 @@
+{
+   "name":"07-cool",
+   "time":"04:00",
+   "questions":{
+        "what' s javascript":{
+          "a framework" : false,
+          "a language" : true,
+          "a librairie" : false
+        },
+        "What's mean DOM in javascript":{
+          "Document Object Manual" : false,
+          "Document Object Monitor" : false,
+          "Docuemnt Object Model" : true
+        },
+        "Who create javascript":{
+          "Ryan Dal":false,
+          "Brenda Eich":true,
+          "Bill Gates":false
+        },
+        "What is the tag using in html to do javascript":{
+          "script":true,
+          "code": false,
+          "meta":false
+        },
+        "Among these frameworks, what are they made with javascript ":{
+           "meteor":true,
+           "PyQt":false,
+           "Tkinter":false,
+           "React":true,
+           "Vue":true
+        }
+   }
+}
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/quiz.jsx b/page/quiz.jsx
new file mode 100644
index 00000000..e59047aa
--- /dev/null
+++ b/page/quiz.jsx
@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'preact/hooks'
+import { Div, P, Span } from '../component/elements.jsx'
+import { MTitle } from '../component/markdown.jsx'
+import { css } from '../lib/dom.js'
+import { Form } from '../component/form.jsx'
+import quiz from '../data/fakeQuiz.json'
+import { QuestionCard } from '../component/quizQuestionCard.jsx'
+
+css(`
+  .quiz {
+    width: 100%;
+    height: auto;
+  }
+  .quiz .questions-container {
+    width: 100%;
+    height:700px;
+    overflow-x:hidden;
+  }
+
+  .quiz .options {
+    display:flex;
+    width: 100%;
+    align-items:center;
+     justify-content: space-between;
+  }
+
+`)
+
+export const Quiz = () => {
+  const [answeredQuestions, setAnsweredQuestions] = useState({})
+  const [time, setTime] = useState(quiz.time)
+  const [timeColor, setTimeColor] = useState('white')
+  let timeInterval = null
+
+  const deCount = () => {
+    const seconds =
+      time
+        .split(':')
+        .map((r, ind) => (ind === 0 ? Number(r) * 60 : Number(r)))
+        .reduce((ac, at) => ac + at, 0) - 1
+
+    let min = Math.floor(seconds / 60)
+    let sec = seconds % 60
+    if (min <= 1) setTimeColor('red-darker')
+    setTime((min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec))
+  }
+
+  const setAnswer = (question, response, isMultiple) => {
+    if (answeredQuestions[question] && isMultiple) {
+      if (answeredQuestions[question].includes(response)) {
+        answeredQuestions[question] = answeredQuestions[question].filter(
+          (v) => v !== response,
+        )
+        if (!answeredQuestions[question].length)
+          delete answeredQuestions[question]
+      } else answeredQuestions[question].push(response)
+    } else answeredQuestions[question] = isMultiple ? [response] : response
+    return setAnsweredQuestions({ ...answeredQuestions })
+  }
+
+  useEffect(() => {
+    timeInterval = setInterval(() => {
+      deCount()
+    }, 1000)
+    return () => {
+      clearInterval(timeInterval)
+    }
+  }, [time])
+
+  return (
+    <Div class="quiz">
+      <MTitle.h2>{quiz.name}</MTitle.h2>
+      {'\n'}
+      <Div class="options">
+        <P>
+          {' '}
+          > Time Remaining :{' '}
+          <Span bg="selection" fg={timeColor}>
+            [{time}]
+          </Span>
+        </P>
+        <P>
+          Answered :{' '}
+          <Span bg="selection" fg="comment-lighter">
+            [{Object.keys(answeredQuestions).length}/
+            {Object.keys(quiz.questions).length}]
+          </Span>
+        </P>
+      </Div>
+      {'\n'}
+      <Div class="questions-container">
+        <Form submit="submit" title="Answer questions and submit">
+          {Object.keys(quiz.questions).map((question) => {
+            return (
+              <QuestionCard
+                key={question}
+                question={question}
+                responses={quiz.questions[question]}
+                setAnswer={setAnswer}
+              />
+            )
+          })}
+        </Form>
+      </Div>
+      {'\n'}
+    </Div>
+  )
+}