diff --git a/resources/www/common/images/icons/add-new-range-hover.png b/resources/www/common/images/icons/add-new-range-hover.png
new file mode 100644
index 0000000000..5432662f9f
Binary files /dev/null and b/resources/www/common/images/icons/add-new-range-hover.png differ
diff --git a/resources/www/common/images/icons/add-new-range.png b/resources/www/common/images/icons/add-new-range.png
new file mode 100644
index 0000000000..e977cbfa24
Binary files /dev/null and b/resources/www/common/images/icons/add-new-range.png differ
diff --git a/resources/www/common/images/icons/icon-photography-hover.png b/resources/www/common/images/icons/icon-photography-hover.png
new file mode 100644
index 0000000000..62a3268680
Binary files /dev/null and b/resources/www/common/images/icons/icon-photography-hover.png differ
diff --git a/resources/www/common/images/icons/icon-photography.png b/resources/www/common/images/icons/icon-photography.png
new file mode 100644
index 0000000000..9ff9d335c2
Binary files /dev/null and b/resources/www/common/images/icons/icon-photography.png differ
diff --git a/resources/www/common/images/icons/picto-add-new-range-white.png b/resources/www/common/images/icons/picto-add-new-range-white.png
new file mode 100644
index 0000000000..20b66cfe8c
Binary files /dev/null and b/resources/www/common/images/icons/picto-add-new-range-white.png differ
diff --git a/resources/www/common/images/icons/picto-close-window-selected.png b/resources/www/common/images/icons/picto-close-window-selected.png
new file mode 100644
index 0000000000..be4dcea278
Binary files /dev/null and b/resources/www/common/images/icons/picto-close-window-selected.png differ
diff --git a/resources/www/common/images/icons/picto-close-window.png b/resources/www/common/images/icons/picto-close-window.png
new file mode 100644
index 0000000000..512d5b1f63
Binary files /dev/null and b/resources/www/common/images/icons/picto-close-window.png differ
diff --git a/resources/www/common/images/icons/picto-delete-hover.png b/resources/www/common/images/icons/picto-delete-hover.png
new file mode 100644
index 0000000000..5c4c95d90e
Binary files /dev/null and b/resources/www/common/images/icons/picto-delete-hover.png differ
diff --git a/resources/www/common/images/icons/picto-delete.png b/resources/www/common/images/icons/picto-delete.png
new file mode 100644
index 0000000000..f317fd0954
Binary files /dev/null and b/resources/www/common/images/icons/picto-delete.png differ
diff --git a/resources/www/common/images/icons/picto-export-thumbnail-hover.png b/resources/www/common/images/icons/picto-export-thumbnail-hover.png
new file mode 100644
index 0000000000..e1bcc59bd6
Binary files /dev/null and b/resources/www/common/images/icons/picto-export-thumbnail-hover.png differ
diff --git a/resources/www/common/images/icons/picto-export-thumbnail.png b/resources/www/common/images/icons/picto-export-thumbnail.png
new file mode 100644
index 0000000000..a278bf7177
Binary files /dev/null and b/resources/www/common/images/icons/picto-export-thumbnail.png differ
diff --git a/resources/www/common/images/icons/picto-information-shortcut-key.png b/resources/www/common/images/icons/picto-information-shortcut-key.png
new file mode 100644
index 0000000000..ca61bd3a6f
Binary files /dev/null and b/resources/www/common/images/icons/picto-information-shortcut-key.png differ
diff --git a/resources/www/common/images/icons/picto-save-chapter-white.png b/resources/www/common/images/icons/picto-save-chapter-white.png
new file mode 100644
index 0000000000..fd6ffebe9f
Binary files /dev/null and b/resources/www/common/images/icons/picto-save-chapter-white.png differ
diff --git a/resources/www/common/images/icons/save-chapter-hover.png b/resources/www/common/images/icons/save-chapter-hover.png
new file mode 100644
index 0000000000..a0b1e2abdf
Binary files /dev/null and b/resources/www/common/images/icons/save-chapter-hover.png differ
diff --git a/resources/www/common/images/icons/save-chapter.png b/resources/www/common/images/icons/save-chapter.png
new file mode 100644
index 0000000000..c7e4172c74
Binary files /dev/null and b/resources/www/common/images/icons/save-chapter.png differ
diff --git a/templates/web/common/index_bootstrap.html.twig b/templates/web/common/index_bootstrap.html.twig
index d68774695d..64a98240e6 100644
--- a/templates/web/common/index_bootstrap.html.twig
+++ b/templates/web/common/index_bootstrap.html.twig
@@ -29,8 +29,9 @@
         <script type="text/javascript"
                 src="/assets/vendors/underscore/underscore{% if not app.debug %}.min{% endif %}.js"></script>
         {% block rss %}{% endblock %}
-        {% block javascript %}{% endblock %}
-        <script type="text/javascript" src="/assets/vendors/jquery-ui/jquery-ui.js"></script>
+        {% block javascript %}
+            <script type="text/javascript" src="/assets/vendors/jquery-ui/jquery-ui.js"></script>
+        {% endblock %}
     </head>
     <body class="PNB">
         <div id="mainContainer" class="PNB">
diff --git a/templates/web/prod/actions/Tools/confirm.html.twig b/templates/web/prod/actions/Tools/confirm.html.twig
index d48dd2551b..44e6dca450 100644
--- a/templates/web/prod/actions/Tools/confirm.html.twig
+++ b/templates/web/prod/actions/Tools/confirm.html.twig
@@ -1,25 +1,10 @@
 <div id="thumb_confirm">
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <img class="selected" src="{{image}}"/>
-      </td>
-      <td>
-        <img style=" width:50px;height:80px;"src="/assets/prod/images/ThumbExtractor/question_mark.png"/>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2" style='text-align:left'>
-        {{ 'you are about to change the  representation thumbnail of your video' | trans }} : <span style='color:#1B9DD0'>{{video_title}}</span>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2" style='text-align:left'>
-        {{ 'do you want to validate' | trans }}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
+  <img class="selected" src="{{ image }}"/>
+  <div>
+      {{ 'you are about to change the  representation thumbnail of your video' | trans }} : <span
+            style='color:#884c92'>{{ video_title }}</span>
+  </div>
+  <div>
+      {{ 'do you want to validate' | trans }}
+  </div>
 </div>
diff --git a/templates/web/prod/actions/Tools/videoEditor.html.twig b/templates/web/prod/actions/Tools/videoEditor.html.twig
index d01700d4f5..7341b843ed 100644
--- a/templates/web/prod/actions/Tools/videoEditor.html.twig
+++ b/templates/web/prod/actions/Tools/videoEditor.html.twig
@@ -10,10 +10,10 @@
     {% endfor %}
 {% endif %}
 
-<div id='prod-tool-box' class="PNB10">
+<div id='prod-tool-box' class="PNB10 video-edit">
 
     {# jquery Tabs #}
-    <div id="tool-tabs" class="tabs">
+    <div id="tool-tabs" class="tabs PNB">
         {# jquery menu #}
         <div>
             <ul>
@@ -33,108 +33,110 @@
         {% if selectionLength == 1 %}
             {% for record in records %}
                 {% if record.get_type() == 'video' %}
-                    <div id="thumbExtractor" class="tabBox">
-                        <div class="PNB10 main_title">
-                            <img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
-                            {{ "screenshot video" | trans }}
-                        </div>
-                        <hr style='margin-top:25px;'/>
-                        <div class="PNB part_title_left"></div>
+                    <div id="thumbExtractor">
 
-                        <div class="PNB frame_video">
-                            {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
-                            {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
-                            {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
-                            {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
+                        <div id="thumbExtractor-preview">
+                            <div class="frame_video">
+                                {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
+                                {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
+                                {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
+                                {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
 
-                            {% set technical_info = record.get_technical_infos %}
-                            {% set width = technical_info[dataW].value %}
-                            {% set height = technical_info[dataH].value %}
+                                {% set technical_info = record.get_technical_infos %}
+                                {% set width = technical_info[dataW].value %}
+                                {% set height = technical_info[dataH].value %}
 
-                            {% if width and height %}
-                                {% set rawRatio =  (width / height)|number_format(3, '.') %}
-                                {% set rawRatioLength =  rawRatio|length %}
-                                {% set ratio = rawRatio|slice(0,rawRatioLength-1) %}
-                            {% else %}
-                                {% set ratio = '' %}
-                            {% endif %}
+                                {% if width and height %}
+                                    {% set rawRatio =  (width / height)|number_format(3, '.') %}
+                                    {% set rawRatioLength =  rawRatio|length %}
+                                    {% set ratio = rawRatio|slice(0,rawRatioLength-1) %}
+                                {% else %}
+                                    {% set ratio = '' %}
+                                {% endif %}
 
-                            <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
-                                {% for subdef in previewHtml5 %}
-                                    <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
-                                {% endfor %}
-                                {{ 'No preview available' | trans }}
-                            </video>
-                        </div>
-
-                        <div class="PNB action_bar_left">
-                        </div>
-
-                        <div id="thumb_camera_button" class="PNB">
-                            <img src="/assets/prod/images/ThumbExtractor/camera_button.png"
-                                 alt="{{ 'take a screenshot' | trans }}"/>
-                        </div>
-
-                        <div class="PNB part_title_right">
-                        </div>
-
-                        <div class="PNB frame_canva">
-                            <div id="thumb_delete_button">
-                                <img src="/assets/prod/images/ThumbExtractor/delete.png"/>
+                                <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
+                                    {% for subdef in previewHtml5 %}
+                                        <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
+                                    {% endfor %}
+                                    {{ 'No preview available' | trans }}
+                                </video>
                             </div>
-                            <p id='thumb_info'>{{ 'To take a screenshot click on camera' | trans }}</p>
-                            <canvas id="thumb_canvas"></canvas>
-                            <div id="alt_canvas_container"
-                                 style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
-                                {% for subdef in outputFormats %}
-                                    <canvas data-width="{{ subdef.get_width() }}" data-name="{{ subdef.get_name() }}"
-                                            class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
-                                {% endfor %}
+
+                            <div id="thumb_camera_button"></div>
+
+                            <div class="vertical-divider"></div>
+
+                            <div class="video-data-container">
+                                <dl class="dl-horizontal">
+                                    <dt>Ratio</dt>
+                                    <dd>{{ ratio }}</dd>
+                                    <dt>Type</dt>
+                                    <dd>{{ record.get_mime() }}</dd>
+                                    {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
+                                        <dt>{{ 'Images par secondes' | trans }}</dt>
+                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
+                                        </dd>
+                                    {% endif %}
+                                    {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
+                                        <dt>{{ 'Codec Audio' | trans }}</dt>
+                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
+                                    {% endif %}
+                                    <dt>{{ 'Size' | trans }}</dt>
+                                    <dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
+                                        (null) %}
+                                        {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
+                                        {% if width is not none and height is not none %}
+                                            {{ width ~ " x " ~ height }}
+                                        {% endif %}</dd>
+                                </dl>
                             </div>
 
                         </div>
-                        <div id="thumb_slider" class="PNB">
-                            <div id="thumb_wrapper">
+                        <div class="horizontal-divider"></div>
+                        <div id="thumbExtractor-screenshot">
+                            <p id='thumb_info'>{{ "screenshot video" | trans }}</p>
+
+                            <div id="frame">
+                                <div class="frame_canva">
+                                    <div id="thumb_delete_button"/>
+                                    <div id="thumb_download_button"/>
+                                    <canvas id="thumb_canvas"></canvas>
+                                    <div id="alt_canvas_container"
+                                         style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
+                                        {% for subdef in outputFormats %}
+                                            <canvas data-width="{{ subdef.get_width() }}"
+                                                    data-height="{{ subdef.get_height() }}"
+                                                    data-name="{{ subdef.get_name() }}"
+                                                    class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
+                                        {% endfor %}
+                                    </div>
+
+                                </div>
+                            </div>
+
+                            <div id="thumb_slider">
+                                <div id="thumb_wrapper">
+                                </div>
+                            </div>
+                            <div class="thumb_submit_action">
+                                <input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
+                                <input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
+                                <button id="thumb_validate_button" class="btn btn-inverse"
+                                        type="button">{{ "validate" | trans }}</button>
+
                             </div>
-                        </div>
-                        <div class="thumb_submit_action PNB">
-                            <input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
-                            <input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
-                            <button id="thumb_validate_button" class="btn btn-inverse"
-                                    type="button">{{ "validate" | trans }}</button>
 
                         </div>
+
                     </div>
                     <div id="rangeExtractor" class="">
-                        <div class="main_title">
-                            <img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
-                            {{ "video range extractor" | trans }}
+                        <div class="video-range-editor-side-container">
+                            <div class="main_title">
+                                {{ "prod:edit: chapters" | trans }}
+                            </div>
+                            <hr/>
                         </div>
                         <div class="video-range-editor-container"></div>
-                        <div class="video-data-container">
-                            <dl class="dl-horizontal">
-                                <dt>Ratio</dt>
-                                <dd>{{ ratio }}</dd>
-                                <dt>Type</dt>
-                                <dd>{{ record.get_mime() }}</dd>
-                                {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
-                                    <dt>{{ 'Images par secondes' | trans }}</dt>
-                                    <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
-                                    </dd>
-                                {% endif %}
-                                {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
-                                    <dt>{{ 'Codec Audio' | trans }}</dt>
-                                    <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
-                                {% endif %}
-                                <dt>{{ 'Size' | trans }}</dt>
-                                <dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
-                                    (null) %}
-                                    {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
-                                    {% if width is not none and height is not none %}
-                                        {{ width ~ " x " ~ height }}
-                                    {% endif %}</dd>
-                            </dl>
-                        </div>
                     </div>
                 {% endif %}
             {% endfor %}