diff --git a/index-live-chat.html b/index-live-chat.html
index 85f7b7a..041e2bd 100644
--- a/index-live-chat.html
+++ b/index-live-chat.html
@@ -55,7 +55,7 @@
           <div class="primary flex-child-shrink">
             <h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
             <h1>live streaming</h1>
-          </div>
+	  </div>
         </div>
 	<!--
         <div class="cell small-12">
@@ -118,8 +118,8 @@
         var v = videojs('video');
         v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
       } else {
-        $('#v-ideo').hide();
-        $('#w-ebchat').hide();
+        $('#video').hide();
+        $('#webchat').hide();
         $('#instructions').show();
       }
     });
diff --git a/index-live.html b/index-live.html
index f01acd3..2b43657 100644
--- a/index-live.html
+++ b/index-live.html
@@ -2,9 +2,9 @@
 <html class="no-js" lang="en" dir="ltr">
 <head>
   <!--
-    version 0.1
-    date: 2020 11 27
-    author jorge@hangar.org
+    version: 0.2
+    date: 2020 12 16
+    author: jorge@hangar.org
   -->
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -12,7 +12,7 @@
   <title>live - hangar.org</title>
   <link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
   <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
-  <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/video-js.min.css">
+  <link rel="stylesheet" href="./assets/css/video-js.min.css">
   <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
   <!-- header icons anf favicons -->
   <link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
@@ -37,36 +37,45 @@
   </style>
 </head>
 <body class="live-streaming">
+  <!-- change color switcher -->
   <input type="checkbox" id=changecolor class="colorswitch">
   <label for=changecolor class="colorswitch">
     <span class="slider"></span>
   </label>
+  <!-- change view switcher-->
+<!--
   <input type="checkbox" id=changeview class="viewswitch">
     <label for=changeview class="viewswitch">
       <span class="slider"></span>
     </label>
-  <div id="wrapper" class="colorswitch-invert">
+-->
+  <div id="wrapper" class="colorswitch-invert viewswitch-change">
     <a name="top"></a>
-    <div class="grid-container">
+    <header class="grid-container">
       <div class="grid-x grid-padding-x">
         <div class="cell small-12 flex-container flex-dir-column">
-          <header class="primary flex-child-shrink">
+          <div class="primary flex-child-shrink">
             <h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
             <h1>live streaming</h1>
-          </header>
+	  </div>
         </div>
+	<!--
+        <div class="cell small-12">
+          <h3> Un subtítulo queda muy bien</h3>
+          <p>Podemos poner el texto que queramos aqui <a href="#" title="titol del enllaç">enlaces incluidos</a> si nos interesa.</p>
+        </div>
+	-->
       </div>
-    </div>
-    <div class="grid-container viewswitch-container">
+    </header>
+    <main class="grid-container viewswitch-container">
       <div class="grid-x grid-padding-x">
         <div class="cell small-12 flex-container flex-dir-column">
-          <content class="primary flex-child-auto">
-            <video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
-            <div id="webchat" class="embedchat">
-              <iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe>
-            </div>
+          <div class="primary flex-child-auto">
+            <content class="video-webchat">
+              <video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
+            </content>
 
-            <div id="instructions" style="display:none;">
+            <aside id="instructions" style="display:none;">
               <p>
                 To create a new stream, pick a unique name for it, and set your broadcast
                 software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
@@ -80,29 +89,25 @@
                 <code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
                 Use this url also for html embedding.
               </p>
-            </div>
-            <aside class="">
-              <p>
-              </p>
             </aside>
-          </content>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="grid-container">
+    </main>
+    <footer class="grid-container">
       <div class="grid-x grid-padding-x">
         <div class="cell small-12 flex-container flex-dir-column">
-          <footer class="text-center flex-child-shrink">
+          <div class="text-center flex-child-shrink">
             <p>
               another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
             </p>
-          </footer>
+          </div>
         </div>
       </div>
-    </div>
+    </footer>
   </div>
-  <script src="https://grafica.hangar.org/assets/js/jquery-slim.min.js"></script>
-  <script src="https://grafica.hangar.org/assets/js/video.min.js"></script>
+  <script src="./assets/js/jquery-slim.min.js"></script>
+  <script src="./assets/js/video.min.js"></script>
   <script>
     $(function() {
       if (window.location.hash) {
