diff --git a/README.md b/README.md
index 88aa877..6d7cb08 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,32 @@
-DO NOT USE
-this is a test repo in order to train me !
+# DO NOT USE !
 
-## todo
+This is a test repository i'm using to train me with Typescript. In fact it is working but I'm pretty sure this is not the best code you will ever see !
 
-As a user I want to be able to upload a file and add a filigrane to it.
+## What Filigrane does ?
 
-As a user I want to see all the files that are imported in differents input for the current tab.
+Filigrane is a small service that will help you add _watermark_ on your file in order to avoid anyone else to reuse it for another purpose. In fact there is other service that does it. For example, french gouvernment offer [FiligraneFacile](https://filigrane.beta.gouv.fr/) and to be honest right now this is the service that we use. But my goal is to create a browser extension in order to automatically apply the watermark when you submit a file to a form.
 
-As a user I want to be able to add a filigrane to the file that are imported in the tab.
+If it work as expexted, the user will have nothing to do, just fill a form online and the extension add a watermark and replace your file by the "protected" one.
 
-As a user I want to see a preview of the file that is edited.
+## User stories
 
-As a user I want to download the file that is updated.
+- As a user of the website I want to
+  - [x] upload a file and add a filigrane to it.
+  - [x] preview the file with the filigrane
+  - [x] download the protected file
+  - [ ] revert the protection and retrieve the original file
+- As a user of the extension I want to
+  - [ ] see all the files uploaded in the current tab
+  - [ ] add watermark to the files in the current tab
+  - [ ] automatically do the process for me
+  - [ ] revert the changes on a specific file
 
-As a user I want to revert the change and return to the original version of the file.
+## Technical backlog
+
+This is a list of technical tasks I want to adress if I have time.
+
+- [ ] Create a chrome extension that is using the same code as the service
+- [ ] Add some tests
+- [ ] Remove the dependency with FiligraneFacile, do all the process in local
+- [ ] Keep the file format as the original one
+- [ ] Remove webpack
diff --git a/src/asset/html/index.html b/src/asset/html/index.html
index 67fe68b..08ebb7e 100644
--- a/src/asset/html/index.html
+++ b/src/asset/html/index.html
@@ -3,35 +3,55 @@
     <link rel="stylesheet" href="style/index.min.css" />
   </head>
   <body>
-    <nav class="demo imponent">
+    <nav class="imponent">
       <a href="" class="brand">
         <img class="logo" src="icons/icon_128.png" />
         <span>Filigrane</span>
       </a>
     </nav>
-    <div class="content">
-      <div class="main">
-        <p>Click here to add filigrane to any file.</p>
+    <div class="content flex center four">
+      <article class="card full half-600 third-1200">
+        <header>
+          <p>Click here to add filigrane to any file.</p>
 
-        <input id="input-file" type="file" multiple="true" />
+          <input id="input-file" type="file" multiple="true" />
+        </header>
 
         <div id="files" class="files">
-          <div class="file" style="display: none">
-            <label class="name"></label>
-            <div class="actions"></div>
+          <div class="file stack" style="display: none">
+            <div class="flex six">
+              <span class="fourth">
+                <embed
+                  id="preview"
+                  class="fourth center"
+                  style="padding: 10px; margin: auto; display: block; width: 100%; overflow: hidden"
+                  alt="Click to see preview"
+                ></embed>
+              </span>
+              <span class="three-fourth">
+                <label id="name">This is a name</label>
+                <br />
+                <small id="size">6ko</small>
+                <div class="processing"></div>
+                <div class="actions">
+                  <!-- <button id="revert">Revert</button> -->
+                  <button id="download">Download</button>
+                </div>
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="bottom flex three grow">
-        <div class="two-third">
-          <input id="input-text" type="text" placeholder="Enter any text" />
-        </div>
-        <div>
-          <button id="submit">Add</button>
-        </div>
-      </div>
-    </div>
 
+        <footer>
+          <div class="flex three">
+            <input class="two-third" id="input-text" type="text" placeholder="Enter any text" />
+            <span>
+              <button id="submit" type="submit" style="margin: 0 auto">Add</button>
+            </span>
+          </div>
+        </footer>
+      </article>
+    </div>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/src/asset/html/options.html b/src/asset/html/options.html
deleted file mode 100644
index 93d51e4..0000000
--- a/src/asset/html/options.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<html>
-    <head></head>
-    <body>
-        <p>This is an option page</p>
-    </body>
-</html>
\ No newline at end of file
diff --git a/src/asset/style/index.scss b/src/asset/style/index.scss
index 0dd1af0..d3b3066 100644
--- a/src/asset/style/index.scss
+++ b/src/asset/style/index.scss
@@ -1,42 +1,63 @@
 @import '~picnic/src/picnic';
 
-$height: 500px;
-$width: 350px;
-
-body {
-  display: flex;
-  justify-content: center;
+.content {
+  padding-top: 3em;
   align-items: center;
-}
+  height: 100%;
 
-.content {
-  background-color: lightgrey;
-  position: relative;
-  margin: auto;
-  height: $height;
-  width: $width;
-  padding: 5px;
-
-  .main {
-    padding: 10px;
-    margin: auto;
-  }
+  .files {
+    overflow-y: scroll;
+    height: 50%;
 
-  .bottom {
-    position: absolute;
-    bottom: 0;
-    margin: auto;
-    left: 0;
-    right: 0;
+    .file {
+      &:not(.loading) .processing {
+        display: none;
+      }
 
-    div {
-      margin: auto;
+      &.loading .actions {
+        display: none;
+      }
     }
   }
 }
 
-// .files {
-//   .file {
-//     display: none;
+// $height: 500px;
+// $width: 350px;
+
+// body {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+
+// .content {
+//   background-color: lightgrey;
+//   // position: relative;
+//   // margin: auto;
+//   height: $height;
+//   // width: $width;
+//   // padding: 5px;
+
+//   // .main {
+//   //   padding: 10px;
+//   //   margin: auto;
+//   // }
+
+//   .bottom {
+//     position: absolute;
+//     bottom: 0;
+//     margin: auto;
+//     left: 0;
+//     right: 0;
+
+//     div {
+//       margin: auto;
+//     }
 //   }
 // }
+
+// // .files {
+// //   .file {
+// //     display: none;
+// //   }
+// // }
diff --git a/src/index.ts b/src/index.ts
index 2559aed..218ffa6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@ import { saveAs } from 'file-saver';
 import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
-  const filesMap = new Map<string, File>();
+  const filigraneServices = new FiligraneServices();
 
   document.addEventListener('DOMContentLoaded', () => {
     const inputFile = document.getElementById('input-file') as HTMLInputElement;
@@ -15,54 +15,61 @@ import { FiligraneServices } from './services/filigrane.services';
 
     inputFile.addEventListener('change', (ev) => {
       for (const file of inputFile.files!) {
-        const id = crypto.randomUUID();
-
-        console.log(fileExample);
+        const id = filigraneServices.prepareFile(file);
 
         const newFileElement = fileExample.cloneNode(true) as HTMLElement;
         newFileElement.id = id;
-
-        (newFileElement.getElementsByClassName('name')[0] as HTMLElement).innerText = file.name;
+        console.log(URL.createObjectURL(filigraneServices.getBlobFor(id)));
+        const preview = newFileElement.querySelector('#preview') as HTMLEmbedElement;
+        const blob = filigraneServices.getBlobFor(id);
+        preview.type = blob.type;
+        preview.src = URL.createObjectURL(blob);
+
+        (newFileElement.querySelector('#name') as HTMLElement).innerText = file.name;
+        (newFileElement.querySelector('#size') as HTMLElement).innerText = file.size.toString();
+
+        newFileElement.querySelector('#preview')!.addEventListener('click', () => {
+          const url = URL.createObjectURL(filigraneServices.getBlobFor(id));
+          console.log(id);
+          console.log(url);
+          window.open(url);
+        });
+
+        newFileElement.querySelector('#download')!.addEventListener('click', () => {
+          saveAs(filigraneServices.getBlobFor(id), `${file.name}.pdf`);
+        });
 
         files.appendChild(newFileElement);
-        filesMap.set(id, file);
 
         newFileElement.style.display = '';
       }
     });
 
     submit!.onclick = async (ev) => {
-      const filigrane = inputText.value || `Added from Filigrane.app on ${new Date().toDateString()}.`;
       for (const fileElt of files.children) {
         if (fileElt.id) {
-          console.log(`sending ${fileElt.id}`);
-          const file = filesMap.get(fileElt.id);
-          if (!file) {
-            throw Error(`File ${fileElt.id} lost ?`);
-          }
-
-          const actions = fileElt.getElementsByClassName('actions')[0] as HTMLElement;
-
-          actions.innerText = 'Adding Filigrane';
-
-          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane);
-          const newFileBlob = new Blob([newFile], { type: 'application/pdf' });
-
-          const preview = document.createElement('button');
-          preview.innerText = 'Preview';
-          preview.onclick = () => {
-            window.open(URL.createObjectURL(newFileBlob));
-          };
-
-          const download = document.createElement('button');
-          download.innerText = 'Download';
-          download.onclick = () => {
-            saveAs(newFileBlob, `${file.name}.pdf`);
-          };
-
-          actions.innerHTML = '';
-          actions.appendChild(preview);
-          actions.appendChild(download);
+          fileElt.classList.add('loading');
+
+          const process = fileElt.getElementsByClassName('processing')[0] as HTMLElement;
+
+          await filigraneServices.addFiligraneToFile(
+            fileElt.id,
+            inputText.value,
+            (step) => (process.innerText = step),
+            () => {
+              const url = URL.createObjectURL(filigraneServices.getBlobFor(fileElt.id));
+
+              const preview = fileElt.querySelector('#preview') as HTMLEmbedElement;
+              const blob = filigraneServices.getBlobFor(fileElt.id);
+              preview.type = blob.type;
+              preview.src = URL.createObjectURL(blob);
+
+              fileElt.classList.remove('loading');
+            },
+            (message: string) => {
+              fileElt.classList.remove('loading');
+            },
+          );
         }
       }
     };
diff --git a/src/popup.ts b/src/popup.ts
index ee05bce..9aebc4f 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -1,5 +1,4 @@
-import { FiligraneServices } from "./services/filigrane.services";
-
+import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
   let filesWithFiligrane: File[];
@@ -19,8 +18,8 @@ import { FiligraneServices } from "./services/filigrane.services";
       const files = (document.getElementById('input-file')! as HTMLInputElement).files!;
       if (files.length) {
         for (const filefromInput of files) {
-          const file = await FiligraneServices.addFiligraneToFile(filefromInput);
-          filesWithFiligrane.push(file);
+          // const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
+          // filesWithFiligrane.push(file);
         }
       }
 
diff --git a/src/services/filigrane.services.ts b/src/services/filigrane.services.ts
index 5f832b2..4e8e35c 100644
--- a/src/services/filigrane.services.ts
+++ b/src/services/filigrane.services.ts
@@ -14,42 +14,62 @@ function sleep(ms: number) {
   });
 }
 
-export namespace FiligraneServices {
-  export async function addFiligraneToFile(file: File, watermark: string = 'this is a test from code'): Promise<File> {
-    // const uploadUrl = 'https://api.filigrane.beta.gouv.fr/api/document/files';
+export class FiligraneServices {
+  private readonly data: Map<string, { origin: File; filigrane?: File }> = new Map();
+
+  public prepareFile(file: File): string {
+    let id: string;
+
+    do {
+      id = crypto.randomUUID();
+    } while (this.data.has(id));
+
+    this.data.set(id, { origin: file });
+
+    return id;
+  }
+
+  public async addFiligraneToFile(
+    id: string,
+    watermark: string = `Added with Filigrane.app on ${new Date().toDateString()}.`,
+    onEvent: (step: string) => void,
+    onCompleted: () => void,
+    onError: (message: string) => void,
+  ): Promise<void> {
+    if (!this.data.has(id)) {
+      onError('File is not find in the data.');
+      return;
+    }
+
+    const file = this.data.get(id)!.origin;
 
     var formData = new FormData();
     formData.append('files', file);
     formData.append('watermark', watermark);
 
-    const { data, status } = await axios.post<ResponseData>(
-      'https://api.filigrane.beta.gouv.fr/api/document/files',
-      formData,
-      // {
-      //   files: [new File(e.target.result, 'name.pdf')],
-      //   watermark: 'this is a test from code'
-      // } as SendData,
-      {
-        headers: {
-          Accept: 'application/json',
-        },
+    onEvent('Sending file to beta.gouv.fr.');
+
+    const baseUrl = 'https://api.filigrane.beta.gouv.fr/api/document';
+
+    const { data, status } = await axios.post<ResponseData>(`${baseUrl}/files`, formData, {
+      headers: {
+        Accept: 'application/json',
       },
-    );
-    console.log(data, status);
+    });
 
+    onEvent('File has been sent.');
+
+    let cpt = 0;
     let res;
     let restart = false;
     do {
       restart = false;
       try {
-        res = await axios.get<ResponseData2>(`https://api.filigrane.beta.gouv.fr/api/document/url/${data.token}`);
+        onEvent(`Trying to retrieve new file for the ${cpt} time(s).`);
+        res = await axios.get<ResponseData2>(`${baseUrl}/url/${data.token}`);
       } catch (error) {
-        console.log(error);
-
         if (error instanceof AxiosError && error.response) {
-          console.log(error.status);
           if (error.response.status === 404 || error.response.status === 409) {
-            console.log('sleep anbd restart');
             await sleep(1500);
             restart = true;
           }
@@ -57,22 +77,30 @@ export namespace FiligraneServices {
       }
     } while (restart);
 
-    console.log(res);
+    onEvent('File is ready will delete it.');
 
     var param = {
       type: 'download',
-      url: `https://api.filigrane.beta.gouv.fr/api/document/${data.token}`,
+      url: `${baseUrl}/${data.token}`,
       filename: file.name,
     };
 
     const test = await axios.get(param.url, {
       responseType: 'blob',
     });
-    return new File([test.data], `${file.name}-filigrane.pdf`);
-    // let container = new DataTransfer();
-    // container.items.add(newFile);
-    // input.files = container.files;
 
-    // return data.token
+    onEvent('File ready.');
+
+    this.data.get(id)!.filigrane = new File([test.data], `${file.name}-filigrane.pdf`);
+
+    onCompleted();
+  }
+
+  public getBlobFor(id: string): Blob {
+    const file = this.data.get(id)!;
+    if (file.filigrane) {
+      return new Blob([file.filigrane], { type: 'application/pdf' });
+    }
+    return new Blob([file.origin], { type: file.origin.type });
   }
 }
