diff --git a/public/env/envlist.json b/public/env/envlist.json
new file mode 100644
index 0000000..4eed498
--- /dev/null
+++ b/public/env/envlist.json
@@ -0,0 +1,10 @@
+window.environments = [
+  {
+    'name':'typobasic',
+    'desc': "Environnement de rédaction contenant l'ensemble des élements typographiques de base."
+  },
+  {
+    'name':'courrier',
+    'desc': "Environnement permettant la rédaction d'un courrier."
+  }
+];
diff --git a/public/index.html b/public/index.html
index 4123528..a99cd85 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script type="text/javascript" src="env/envlist.json"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/_dialog.scss b/src/assets/_dialog.scss
new file mode 100644
index 0000000..696bc03
--- /dev/null
+++ b/src/assets/_dialog.scss
@@ -0,0 +1,50 @@
+
+@import './_vars';
+.dialog{
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(100, 100, 100, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 500;
+
+  .dialog-content{
+    padding: 10px;
+    width: 800px;
+    height: 400px;
+    background-color: $bg-color;
+    position: relative;
+  }
+
+  .close-btn {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      padding:0;
+      margin : 0;
+      border: none;
+      cursor: pointer;
+      background-color: $bg-color;
+      color: $txt-color;
+      font-size: $button-width;
+      display: block;
+      line-height: unset;
+
+      svg{
+        width: $button-width;
+        height: $button-width;
+     }
+
+  }
+
+  .ok-button{
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    cursor: pointer;
+  }
+}
diff --git a/src/components/Dedediteur.vue b/src/components/Dedediteur.vue
index d5644f1..37af507 100644
--- a/src/components/Dedediteur.vue
+++ b/src/components/Dedediteur.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="editor" v-bind:class="{ preview: isPreviewMode }">
 
+        <open-pane v-bind:environmentList="environmentList" v-on:open-pane:open="openEnvFile" v-if="isOpeningState"/>
         <meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/>
 
         <div class="bottom-bar">
@@ -168,6 +169,7 @@
         Link
     } from 'tiptap-extensions'
 
+    import OpenPane from './OpenPane';
     import MetaEditor from './MetaEditor';
 
 
@@ -180,15 +182,18 @@
             EditorContent,
             EditorMenuBar,
             EditorMenuBubble,
+            OpenPane,
             MetaEditor
         },
         data() {
+          console.log(window.environments);
             return {
                 nbWords: 0,
                 nbParagraphs: 0,
                 nbSentences: 0,
                 nbCharacters : 0,
-                environmentName: 'typobasic',
+                isOpeningState: false,
+                environmentList : window.environments ? window.environments : [],
                 cssEnvElement : null,
                 isMetaEditorVisible: false,
                 isPreviewMode: false,
@@ -238,9 +243,6 @@
                 console.warn('Something went wrong.', err);
             });
 
-            this.addPrettyBackground();
-
-
         },
 
         methods: {
@@ -280,9 +282,9 @@
             },
 
 
-             installEnvironment() {
+             installEnvironment(envName) {
                 let self = this;
-                Environment.getEnvironment(this.environmentName).then(async function (env) {
+                Environment.getEnvironment(envName).then(async function (env) {
                     if(!env)
                         alert('À venir.');
                     else {
@@ -323,7 +325,8 @@
             },
 
             newFile() {
-                this.editor.setContent('<p></p>');
+              this.isOpeningState = true;
+                //this.editor.setContent('<p></p>');
             },
 
             htmlExport() {
@@ -335,11 +338,16 @@
                 //document.getElementById('preview_button').innerHTML = this.isPreviewMode ? '&times;' :'';
             },
 
-            addPrettyBackground(){
-                let editorElement = document.querySelector('.ProseMirror');
-                console.log(editorElement);
+            openEnvFile(envName){
+              this.isOpeningState = false;
+              if(envName){
+                this.installEnvironment(envName);
+                this.editor.setContent('<p></p>');
+              }
+
             }
 
+
         }
     }
 </script>
diff --git a/src/components/MetaEditor.vue b/src/components/MetaEditor.vue
index 387a81e..e87a0fc 100644
--- a/src/components/MetaEditor.vue
+++ b/src/components/MetaEditor.vue
@@ -1,20 +1,18 @@
 <template>
-    <div class="meta-editor">
-        <div class="meta-editor-content">
+    <div class="meta-editor dialog">
+        <div class="meta-editor-content dialog-content">
             <button title="fermer" class="close-btn" v-on:click="hide">
-                &times;
-                <!--<svg viewPort="0 0 42 42" version="1.1"-->
-                     <!--xmlns="http://www.w3.org/2000/svg">-->
-                    <!--<line x1="0" y1="42"-->
-                          <!--x2="42" y2="0"-->
-                          <!--stroke="black"-->
-                          <!--stroke-width="1"/>-->
-                    <!--<line x1="0" y1="0"-->
-                          <!--x2="42" y2="42"-->
-                          <!--stroke="black"-->
-                          <!--stroke-width="1"/>-->
-                <!--</svg>-->
-
+              <svg viewPort="0 0 42 42" version="1.1"
+                                   xmlns="http://www.w3.org/2000/svg">
+                                  <line x1="0" y1="42"
+                                        x2="42" y2="0"
+                                        stroke="black"
+                                        stroke-width="2"/>
+                                  <line x1="0" y1="0"
+                                        x2="42" y2="42"
+                                        stroke="black"
+                                        stroke-width="2"/>
+                </svg>
             </button>
             <h3>Métadonnées</h3>
             <div>
@@ -70,18 +68,9 @@
 
 <style lang="scss">
     @import '../assets/_vars';
-
+    @import '../assets/_dialog';
     .meta-editor {
-        width: 100vw;
-        height: 100vh;
-        background-color: rgba(100, 100, 100, 0.75);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 500;
+
 
         h3 {
             text-align: center;
@@ -89,11 +78,7 @@
         }
 
         .meta-editor-content {
-            padding: 10px;
-            width: 800px;
-            height: 400px;
-            background-color: $bg-color;
-            position: relative;
+
 
             div {
                 margin: 5px;
@@ -104,22 +89,7 @@
                 }
             }
 
-            .close-btn {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-                padding:0;
-                margin : 0;
-                border: none;
-                cursor: pointer;
-                background-color: $bg-color;
-                //height: $button-width;
-                font-size: $button-width;
-                /*svg{
-                    width: $button-width;
-                    height: 4$button-width;
-                }*/
-            }
+
 
         }
     }
diff --git a/src/components/OpenPane.vue b/src/components/OpenPane.vue
new file mode 100644
index 0000000..779e87d
--- /dev/null
+++ b/src/components/OpenPane.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="open-pane dialog">
+        <div class="dialog-content">
+          <button title="fermer" class="close-btn" v-on:click="close">
+            <svg viewPort="0 0 42 42" version="1.1"
+                                 xmlns="http://www.w3.org/2000/svg">
+                                <line x1="0" y1="42"
+                                      x2="42" y2="0"
+                                      stroke="black"
+                                      stroke-width="2"/>
+                                <line x1="0" y1="0"
+                                      x2="42" y2="42"
+                                      stroke="black"
+                                      stroke-width="2"/>
+              </svg>
+
+          </button>
+          <h3>Nouveau document</h3>
+          <p>Quel type de document souhaitez-vous créer ?</p>
+          <div class="env-blocks">
+            <div class="env-block" v-bind:class="{ selected: currentEnv===env}" v-on:click="envSelected(env)" @mouseover="hovering(env)" @mouseout="hovering(null)" v-bind:key="env.name" v-for="env in environmentList">
+              {{env.name}}
+            </div>
+          </div>
+          <div id="desc">
+            {{currentDesc}}
+          </div>
+            <button v-if="currentEnv !== null" class="ok-button" v-on:click="hide()">Valider</button>
+            <button v-else class="ok-button" disabled >Valider</button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+    export default {
+        components: {},
+        props: ['environmentList'],
+        data() {
+          return {
+              currentEnv : null,
+              currentDesc: '',
+            }
+        },
+        beforeDestroy() {
+
+        },
+
+        mounted() {
+
+        },
+
+        methods: {
+
+            close : function(){
+              this.$emit('open-pane:open', null);
+            },
+            hide: function(){
+                this.$emit('open-pane:open', this.currentEnv ? this.currentEnv.name : null);
+            },
+
+            hovering(env){
+              this.currentDesc = env ? env.desc : "";
+            },
+
+            envSelected(env){
+              this.currentEnv = env;
+            }
+
+        }
+    }
+</script>
+
+<style lang="scss">
+@import '../assets/_dialog';
+h3{
+  text-align: center;
+}
+
+.env-blocks{
+  display: flex;
+  justify-content: center;
+  .env-block{
+    min-width: 200px;
+    min-height: 200px;
+    border: 2px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin:2px;
+    cursor: pointer;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    &:hover{
+      background-color: $txt-color;
+      color:$bg-color;
+    }
+
+    &.selected{
+      border: 2px solid black;
+      font-size: 1.8rem;
+    }
+  }
+}
+#desc{
+  width : 75%;
+  margin: auto;
+  padding-top:15px;
+}
+</style>
