diff --git a/docs/changelog.rst b/docs/changelog.rst
index 956c41e..78babe3 100644
--- a/docs/changelog.rst
+++ b/docs/changelog.rst
@@ -8,6 +8,7 @@ Changelog
  * Add youtube section https://prosopopee.readthedocs.org/en/latest/sections.html#youtube by beudbeud
  * Add quotes section https://prosopopee.readthedocs.org/en/latest/sections.html#quote by beudbeud
  * Add deploy and preview option https://prosopopee.readthedocs.io/en/latest/build.html#preview by beudbeud
+ * Load only css and jss if the section is used by beudbeud
 
 0.4 (2016-12-11)
 
diff --git a/prosopopee/themes/exposure/templates/gallery-index.html b/prosopopee/themes/exposure/templates/gallery-index.html
index ae75a7d..dafd57d 100644
--- a/prosopopee/themes/exposure/templates/gallery-index.html
+++ b/prosopopee/themes/exposure/templates/gallery-index.html
@@ -1,3 +1,10 @@
+{% for section in gallery.sections %}
+{% if section.type == 'panorama' %}
+{% set panorama = true %}
+{% elif section.type == 'audio'%}
+{% set audio = true %}
+{% endif %}
+{% endfor %}
 <!DOCTYPE html>
 <html>
   <head>
@@ -6,8 +13,11 @@
     <link type="text/css" rel="stylesheet" href="../static/css/fonts.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
+    {% if panorama %}
     <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
+    {% elif audio %}
     <link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css"  media="screen,projection"/>
+    {% endif %}
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     {% if gallery.description %}
@@ -38,15 +48,19 @@
     </div>
     <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
+    {% if panorama %}
     <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
+    {% elif audio %}
+    <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
+    {% endif %}
     <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="../static/js/picturefill.min.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     <script type="text/javascript">
 $(function() {
 
   baguetteBox.run(".baguette", {});
 
+  {% if panorama %}
   $(".panorama").panorama_viewer({
     repeat: true,
     direction: "horizontal",
@@ -54,8 +68,10 @@ $(function() {
     easing: "linear",
     overlay: true
   });
+  {% endif %}
 });
 
+{% if audio %}
 $('audio').mediaelementplayer({
   alwaysShowControls: true,
   features: ['playpause','progress','volume'],
@@ -66,6 +82,7 @@ $('audio').mediaelementplayer({
   iPhoneUseNativeControls: true,
   AndroidUseNativeControls: true
 });
+{% endif %}
 
 var video = $("video");
 video.on('click', function(e){
diff --git a/prosopopee/themes/material/templates/gallery-index.html b/prosopopee/themes/material/templates/gallery-index.html
index 407980e..dcb594d 100644
--- a/prosopopee/themes/material/templates/gallery-index.html
+++ b/prosopopee/themes/material/templates/gallery-index.html
@@ -1,3 +1,10 @@
+{% for section in gallery.sections %}
+{% if section.type == 'panorama' %}
+{% set panorama = true %}
+{% elif section.type == 'audio'%}
+{% set audio = true %}
+{% endif %}
+{% endfor %}
 <!DOCTYPE html>
 <html>
   <head>
@@ -6,8 +13,13 @@
     <link rel="stylesheet" href="../static/css/materialize.css"/>
     <link rel="stylesheet" href="../static/css/style-page.css">
     <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
+    {% for section in gallery.sections %}
+    {% if panorama %}
     <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
+    {% endif %}
+    {% if audio %}
     <link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css"  media="screen,projection"/>
+    {% endif %}
     <link rel="stylesheet" href="../static/css/font-awesome.css">
 
     <!--Let browser know website is optimized for mobile-->
@@ -46,8 +58,11 @@
     <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
+    {% if panorama %}
     <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
+    {% elif audio %}
     <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
+    {% endif %}
     <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
@@ -66,7 +81,7 @@ video.on('click', function(e){
     vid.webkitRequestFullscreen();
   }
 });
-
+{% if audio %}
 $('audio').mediaelementplayer({
   alwaysShowControls: true,
   features: ['playpause','progress','volume'],
@@ -77,6 +92,7 @@ $('audio').mediaelementplayer({
   iPhoneUseNativeControls: true,
   AndroidUseNativeControls: true
 });
+{% endif %}
 
 
 $(function() {
@@ -92,6 +108,7 @@ $(function() {
 
 $(function() {
   baguetteBox.run(".baguette", {});
+  {% if panorama %}
   $(".panorama").panorama_viewer({
     repeat: true,
     direction: "horizontal",
@@ -99,6 +116,7 @@ $(function() {
     easing: "linear",
     overlay: true
   });
+  {% endif %}
 });
 
 {% if settings.settings.light_mode %}
