diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 96a9396d48c..628689b78cf 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -210,9 +210,12 @@
 
 
 /* Custom CSS for snippets */
-.carousel.oe_big .carousel-inner {
+.carousel.oe_small .carousel-inner {
+    height: 200px;
+}
+.carousel.oe_medium .carousel-inner {
     height: 300px;
 }
-.carousel.oe_small .carousel-inner {
-    height: 220px;
-}
\ No newline at end of file
+.carousel.oe_big .carousel-inner {
+    height: 450px;
+}
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index bb6fbf19041..be107ae0623 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -297,7 +297,7 @@ footer {
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 .dark {
   background: #eff8f8;
-  background: rgba(100, 200, 200, 0.1);
+  background: rgba(100, 200, 200, 0.14);
   -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
   -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 53154729981..bef7a59e77d 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -226,7 +226,7 @@ footer
 
 .dark
     background: #eff8f8
-    background: rgba(100, 200, 200, 0.1)
+    background: rgba(100, 200, 200, 0.14)
     -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
     -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
     box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 5151e313875..f3d731d1fd4 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -878,12 +878,14 @@
             var size = 'big';
             if (this.$target.hasClass('oe_small'))
                 size = 'small';
+            else if (this.$target.hasClass('oe_medium'))
+                size = 'medium';
 
             this.$editor.find('select[name="carousel-size"] option[value="'+size+'"]').prop('selected', true);
 
             this.$editor.find('select[name="carousel-size"]').on('change', function(e) {
                 self.$target
-                    .removeClass('oe_big oe_small')
+                    .removeClass('oe_big oe_small oe_medium')
                     .addClass("oe_" + $(e.currentTarget).val());
             });
         }
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 60fe1eeeeef..1b231fa3275 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -30,8 +30,9 @@
         <li class='oe_snippet_options'>
             <a class="carousel-style">
                 <select class="form-control" name="carousel-size">
-                    <option value="big">Big</option>
                     <option value="small">Small</option>
+                    <option value="medium">Medium</option>
+                    <option value="big">Big</option>
                 </select>
             </a>
         </li>
@@ -85,7 +86,7 @@
         </div>
 
         <!-- body to insert after drag and drop thumbnail -->
-        <div id="myCarousel" class="oe_snippet_body carousel slide oe_big mb32" data-interval="10000">
+        <div id="myCarousel" class="oe_snippet_body carousel slide oe_medium mb32" data-interval="10000">
             <!-- Carousel items -->
             <div class="carousel-inner">
                 <div class="item image_text active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
@@ -300,7 +301,7 @@
     <div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_label'>Big Picture</div>
         <div class='oe_snippet_thumbnail'>
-            <div style="position: absolute; top: 14px; left: 5px;  width: 94%;">
+            <div style="position: absolute; top: 8px; left: 5px;  width: 94%;">
                 <div style="display: block;">
                     Big Picture
                     <img src="/website/static/src/img/big_picture.png" style="max-width: 100%"/>
@@ -447,16 +448,16 @@
             <div style="padding-top: 22px;">
                 Image Gallery
                 <div class="clearfix">
-                    <div style="float: right; width: 58px;height: 32px;">
-                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 27px;"/>
-                        <img src="/website/static/src/img/deers_thumb.jpg" style="max-width: 27px;"/>
-                        <img src="/website/static/src/img/desert_thumb.jpg" style="max-width: 27px;"/>
-                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 27px;"/>
+                    <div style="float: right; width: 56px;height: 30px;">
+                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
+                        <img src="/website/static/src/img/deers_thumb.jpg" style="max-width: 24px;"/>
+                        <img src="/website/static/src/img/desert_thumb.jpg" style="max-width: 24px;"/>
+                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
                     </div>
-                    <img src="/website/static/src/img/desert.jpg" style="float-left; width: 56px;height: 34px;margin-top: 2px;"/>
-                    <img src="/website/static/src/img/deers_thumb.jpg" style="float-left; max-width: 27px;"/>
-                    <img src="/website/static/src/img/landscape.jpg" style="float-left; max-width: 54px;"/>
-                    <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 27px;"/>
+                    <img src="/website/static/src/img/desert.jpg" style="float-left; width: 50px;height: 31px;margin-top: 4px;"/>
+                    <img src="/website/static/src/img/deers_thumb.jpg" style="float-left; max-width: 24px;"/>
+                    <img src="/website/static/src/img/landscape.jpg" style="float-left; max-width: 50px;"/>
+                    <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
                 </div>
             </div>
         </div>