diff --git a/resources/www/admin/styles/main.scss b/resources/www/admin/styles/main.scss
index 513e89ab84..1ee2799b96 100644
--- a/resources/www/admin/styles/main.scss
+++ b/resources/www/admin/styles/main.scss
@@ -231,6 +231,139 @@ div.switch_right.unchecked {
 .ui-datepicker {
   z-index: 1500;
 }
+
+.dialog_container {
+  #template_add_dialog, #user_add_dialog, #dialog-form {
+    &.ui-dialog-content {
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+    form {
+      margin-bottom: 10px;
+    }
+    label {
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #1d1d1d;
+    }
+    input[type=text] {
+      width: 94%;
+      background-color: #ffffff;
+      border: solid 1px #979797;
+    }
+  }
+}
+
+.dialog_container {
+  #dialog-form {
+    .selectdiv {
+      position: relative;
+    }
+    select::-ms-expand {
+      display: none;
+    }
+    .selectdiv:after {
+      content: "";
+      /* background-color: #000; */
+      background-image: url(/assets/common/images/icons/arrow.png);
+      background-position: center;
+      background-size: cover;
+      right: 18px;
+      top: 9px;
+      position: absolute;
+      width: 8px;
+      height: 12px;
+      pointer-events: none;
+    }
+    .selectdiv select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      display: block;
+      width: 98%;
+      height: 30px;
+      margin: 5px 0px;
+      padding: 0px 8px;
+      line-height: 1.75;
+      -ms-word-break: normal;
+      word-break: normal;
+      border: solid 1px #979797;
+      background-image: linear-gradient(16deg, transparent 50%, transparent 50%),
+      linear-gradient(135deg, transparent, transparent), linear-gradient(to right, #979797, #979797);
+      background-position: calc(100% - 3px) calc(1em + 2px), calc(100% - 4px) calc(1em + 2px), 100% 0;
+      background-size: 5px 5px, 5px 5px, 30px 2.5em;
+      background-repeat: no-repeat;
+      margin-bottom: 20px;
+    }
+    input[type=text] {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.dialog_container {
+  .ui-dialog-title {
+    font-family: Roboto;
+    font-size: 18px;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #4a4a4a;
+  }
+  .ui-dialog-titlebar-close {
+    border: none;
+    margin-right: 4px;
+  }
+  .ui-icon.ui-icon-closethick {
+    background-image: url("/assets/common/images/icons/cross-white.png");
+    background-position: center;
+    background-size: cover;
+  }
+  .ui-dialog-buttonpane {
+    border-top: solid 1px #979797;
+  }
+  .ui-dialog-buttonpane .ui-button {
+    border-radius: 15px;
+    background-color: #ffffff;
+    border: solid 1px #4a4a4a;
+    font-family: Roboto;
+    font-size: 14px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #1d1d1d;
+    height: 30px;
+    min-width: 135px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .ui-dialog-buttonpane .ui-button:nth-child(2) {
+    background-color: #4a4a4a;
+    color: #FFFFFF;
+  }
+  .ui-button-icon-only {
+    text-indent: -9999px;
+    background: transparent;
+  }
+  .ui-dialog-buttonpane .ui-dialog-buttonset {
+    float: none;
+    text-align: center;
+  }
+}
+
 /******* BOARD ****************************************************************/
 .board_section {
   margin: 0 0 30px;
diff --git a/resources/www/common/images/icons/arrow.png b/resources/www/common/images/icons/arrow.png
new file mode 100644
index 0000000000..b2c1574217
Binary files /dev/null and b/resources/www/common/images/icons/arrow.png differ
diff --git a/resources/www/common/images/icons/cross-white.png b/resources/www/common/images/icons/cross-white.png
new file mode 100644
index 0000000000..9804aa4409
Binary files /dev/null and b/resources/www/common/images/icons/cross-white.png differ
diff --git a/templates/web/admin/index.html.twig b/templates/web/admin/index.html.twig
index 0cd773856f..d0cbbbfc86 100644
--- a/templates/web/admin/index.html.twig
+++ b/templates/web/admin/index.html.twig
@@ -105,7 +105,7 @@
     <div id="template_add_dialog" title="{{ 'Creer un modele' | trans }}">
         <form>
             <label>{{ 'Nom du nouveau modele' | trans }}</label>
-            <input type="text" name="value" />
+            <input id="template-add-input" type="text" name="value"/>
             <img src="/assets/common/images/icons/loaderFFF.gif" class="new_user_loader" style="display:none;"/>
         </form>
     </div>
diff --git a/templates/web/admin/subdefs.html.twig b/templates/web/admin/subdefs.html.twig
index fe26b7645c..d96e1be51f 100644
--- a/templates/web/admin/subdefs.html.twig
+++ b/templates/web/admin/subdefs.html.twig
@@ -244,12 +244,14 @@
             }
 
 
-            $("#dialog-form").dialog({
+            var subdefCreateDialog = $("#dialog-form").dialog({
                 autoOpen: false,
-                height: 420,
-                width: 300,
+                width: 382,
                 modal: true,
                 buttons: {
+                    Cancel: function () {
+                        $(this).dialog("close");
+                    },
                     "Create a Subdef": function () {
                         var bValid = true;
 
@@ -268,9 +270,6 @@
                             $(this).dialog("close");
                             $('form.subdefs').submit();
                         }
-                    },
-                    Cancel: function () {
-                        $(this).dialog("close");
                     }
                 },
                 close: function () {
@@ -278,6 +277,8 @@
                 }
             });
 
+            subdefCreateDialog.closest('.ui-dialog').addClass('dialog_container');
+
             $("#create-subdef")
             // .button()
                 .click(function () {
@@ -335,28 +336,37 @@
                 <label for="name">{{ 'create_subdef_modal_subdefinition_name' | trans }}</label>
                 <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" value=""/><br/>
                 <label for="accessclass">{{ 'create_subdef_modal_access_class' | trans }}</label>
-                <select name="accessclass" id="accessclass">
-                    <option value="document">{{ 'create_subdef_modal_access_class_document' | trans }}</option>
-                    <option value="preview" selected="selected">{{ 'create_subdef_modal_access_class_preview' | trans }}</option>
-                    <option value="thumbnail">{{ 'create_subdef_modal_access_class_no_restriction' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="accessclass" id="accessclass">
+                        <option value="document">{{ 'create_subdef_modal_access_class_document' | trans }}</option>
+                        <option value="preview"
+                                selected="selected">{{ 'create_subdef_modal_access_class_preview' | trans }}</option>
+                        <option value="thumbnail">{{ 'create_subdef_modal_access_class_no_restriction' | trans }}</option>
+                    </select>
+                </div>
                 <label for="subviewType">{{ 'create_subdef_modal_record_phraseanet_type' | trans }}</label>
-                <select name="subviewType" id="subviewType" onchange="subview_type(this)">
-                    <option>{{ 'Choisir' | trans }}</option>
-                    <option value="image">{{ 'image' | trans }}</option>
-                    <option value="video">{{ 'video' | trans }}</option>
-                    <option value="audio">{{ 'audio' | trans }}</option>
-                    <option value="document">{{ 'document' | trans }}</option>
-                    <option value="flash">{{ 'flash' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="subviewType" id="subviewType" onchange="subview_type(this)">
+                        <option>{{ 'Choisir' | trans }}</option>
+                        <option value="image">{{ 'image' | trans }}</option>
+                        <option value="video">{{ 'video' | trans }}</option>
+                        <option value="audio">{{ 'audio' | trans }}</option>
+                        <option value="document">{{ 'document' | trans }}</option>
+                        <option value="flash">{{ 'flash' | trans }}</option>
+                    </select>
+                </div>
                 <label for="mediaType">{{ 'create_subdef_modal_preview_mediatype' | trans }}</label>
-                <select name="mediaType" id="mediaType" onchange="media_type(this)">
-                    <option>{{ 'Choisir' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="mediaType" id="mediaType" onchange="media_type(this)">
+                        <option>{{ 'Choisir' | trans }}</option>
+                    </select>
+                </div>
                 <label for="presets">{{ 'create_subdef_modal_presets' | trans }}</label>
-                <select name="presets" id="presets">
-                    <option>{{ 'Choisir' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="presets" id="presets">
+                        <option>{{ 'Choisir' | trans }}</option>
+                    </select>
+                </div>
             </fieldset>
         </form>
     </div>
diff --git a/templates/web/admin/users.html.twig b/templates/web/admin/users.html.twig
index e5ce345938..68c646751f 100644
--- a/templates/web/admin/users.html.twig
+++ b/templates/web/admin/users.html.twig
@@ -292,38 +292,42 @@
             });
 
             var buttons = {};
-            buttons[language.create_user] = function () {
-                check_new_user(false);
-            };
             buttons[language.annuler] = function () {
                 $('#user_add_dialog').dialog('close')
             };
+            buttons[language.create_user] = function () {
+                check_new_user(false);
+            };
 
-            $('#user_add_dialog').dialog({
+            var userAddDialog = $('#user_add_dialog').dialog({
                 buttons: buttons,
                 modal: true,
                 resizable: false,
                 draggable: false,
-                width: 500
+                width: 382,
             }).dialog('close');
 
+            userAddDialog.closest('.ui-dialog').addClass('dialog_container');
+
             var buttons = {};
-            buttons[language.create_template] = function () {
-                check_new_user(true);
-            };
             buttons[language.annuler] = function () {
                 $('#template_add_dialog').dialog('close');
             };
+            buttons[language.create_template] = function () {
+                check_new_user(true);
+            };
 
-            $('#template_add_dialog').dialog({
+            var templateAddDialog = $('#template_add_dialog').dialog({
                 buttons: buttons,
                 modal: true,
                 resizable: false,
                 draggable: false,
-                width: 500
+                width: 382,
 
             }).dialog('close');
 
+            templateAddDialog.closest('.ui-dialog').addClass('dialog_container');
+
             function check_new_user(is_template) {
                 var container = is_template ? $('#template_add_dialog') : $('#user_add_dialog');
                 $('#new_user_loader').show();