diff --git a/css/bulma-adjustments.css b/css/bulma-adjustments.css
index a722717..739591c 100644
--- a/css/bulma-adjustments.css
+++ b/css/bulma-adjustments.css
@@ -48,10 +48,6 @@
     cursor: pointer;
 }
 
-.hidden {
-    display: none;
-}
-
 #fme-maps-container h4 {
   font-weight: bold;
 }
diff --git a/index.html b/index.html
index b7cc6f7..0e65137 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     <body>
         <script></script>
 
-        <span id="dev-mode" class="hidden">Dev mode</span>
+        <span id="dev-mode" class="is-hidden">Dev mode</span>
         
         <nav class="navbar is-link">
             <div class="navbar-brand">
@@ -30,56 +30,61 @@
         </nav>
         
         <section id="section-1" class="section">
-            <!--
-            <div class="field has-addons">
-                <p class="control">
-                    <button class="button">&lt;</button>
-                </p>
-                <p class="control">
-                    <input type="date" class="button">
-                </p>
-                <p class="control">
-                    <button class="button">&gt;</button>
-                </p>
-            </div>
-            <div class="field has-addons">
-                <p class="control">
-                    <button class="button">&lt;</button>
-                </p>
-                <p class="control">
-                    <input type="button" class="button" value="08:00 - 08:30">
-                </p>
-                <p class="control">
-                    <button class="button">&gt;</button>
-                </p>
-            </div><br>
-            -->
+            <nav class="level">
+                <div class="level-item">
+                    <div class="field has-addons has-addons-centered">
+                        <p class="control">
+                        <button id="date-prev" class="button">&lt;</button>
+                        </p>
+                        <p class="control">
+                        <input id="date-selector" type="button" class="button">
+                        </p>
+                        <p class="control">
+                        <button id="date-next" class="button">&gt;</button>
+                        </p>
+                    </div>
+                </div>
+                <div class="level-item">
+                    <div class="field has-addons has-addons-centered">
+                        <p class="control">
+                        <button id="time-prev" class="button">&lt;</button>
+                        </p>
+                        <p class="control">
+                        <input id="time-selector" type="button" class="button" value="08:00 - 08:30">
+                        </p>
+                        <p class="control">
+                        <button id="time-next" class="button">&gt;</button>
+                        </p>
+                    </div>
+                </div>
+            </nav>
+
             <div id="subject-container" class="grid buttons"></div>
-            <div id="no-subjects" class="hidden">No s'està impartint cap classe en aquests moments.</div>
-            <div id="fme-maps-container" class="hidden">
-              <h4>Mapes de les aules de l'FME</h4>
-              <div class="maps">
-                <div class="map">
-                  <img src="img/ps.png">
-                  <div class="map--label">Planta <b>-1</b></div>
+            <div id="no-subjects" class="is-hidden">No s'està impartint cap classe en aquests moments.</div>
+            <div id="fme-maps-container" class="is-hidden">
+                <h4>Plànols de les aules de l'FME</h4>
+                <div class="maps">
+                    <div class="map">
+                        <img src="img/ps.png">
+                        <div class="map--label">Planta <b>-1</b></div>
+                    </div>
+                    <div class="map">
+                        <img src="img/p0.png">
+                        <div class="map--label">Planta <b>0</b></div>
+                    </div>
+                    <div class="map">
+                        <img src="img/p1.png">
+                        <div class="map--label">Planta <b>1</b></div>
+                    </div>
                 </div>
-                <div class="map">
-                  <img src="img/p0.png">
-                  <div class="map--label">Planta <b>0</b></div>
-                </div>
-                <div class="map">
-                  <img src="img/p1.png">
-                  <div class="map--label">Planta <b>1</b></div>
-                </div>
-              </div>
             </div>
-            
+
         </section>
 
-        <section id="section-2" class="section hidden">
+        <section id="section-2" class="section is-hidden">
             <button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>
 
-            <!-- <div id="repeated-subject-warning" class="hidden">
+            <div id="repeated-subject-warning" class="is-hidden">
                 <br><article class="message is-warning">
                     <div class="message-body">
                         Heu triat una assignatura que es fa en dues aules alhora. Comproveu que sou a l'aula <strong id="repeated-subject-warning-class">aula</strong>.
@@ -103,9 +108,9 @@
             </div>
         </section>
 
-        <section id="section-3" class="section hidden">
+        <section id="section-3" class="section is-hidden">
             <button class="button is-link is-light" onclick="switchSection('section-2')">Torna enrere (Lletra)</button>
-            
+
             <div id="number-container" class="buttons grid">
                 <button class="button" id="number-1" data-number="1">1</button>
                 <button class="button" id="number-2" data-number="2">2</button>
@@ -119,7 +124,7 @@
                 <button class="button" id="number-10" data-number="10">10</button>
             </div>
         </section>
-        <section id="section-send" class="section hidden">
+        <section id="section-send" class="section is-hidden">
             <button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
             <br/><br/>
             <span class="has-text-weight-bold">Assignatura:</span>
@@ -134,7 +139,7 @@
             <span id="letter-final">A</span><span id="number-final">1</span><br><br>
 
             <button id="send-button" class="button is-link is-large">Omple el formulari</button><br><br>
-            
+
             Hi ha errors? <br /><a class="button is-link is-light" href="https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform">Completa el formulari manualment</a>
 
 
diff --git a/js/build_page.js b/js/build_page.js
index 6fcae69..81b76ed 100644
--- a/js/build_page.js
+++ b/js/build_page.js
@@ -1,5 +1,3 @@
-
-
 const idsFormulari = {
     room: "1063142948",
     day: "2115504093",
@@ -24,6 +22,9 @@
 
 const formBaseUrl = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform";
 
+const MIN_HOUR = 8;
+const MAX_HOUR = 23; // Pels altres graus de la Facultat
+
 var final_JSON = {
     "class": null,
     "number": "",
@@ -33,6 +34,8 @@
 var current_section = "section-1";
 
 var repeated_subjects;
+var current_time;
+
 
 function fillInSummary() {
     var begins = new Date(parseInt(final_JSON.class.begins)*1000);
@@ -41,7 +44,7 @@
     document.getElementById('subject-final').textContent = final_JSON.class.friendly_name || final_JSON.class.calendar_name;
     document.getElementById('classroom-final').textContent = final_JSON.class.room;
     document.getElementById('date-final').textContent = begins.toLocaleDateString();
-    document.getElementById('time-final').textContent = formatDate(begins) + ' - ' + formatDate(ends);
+    document.getElementById('time-final').textContent = formatTime(begins) + ' - ' + formatTime(ends);
     document.getElementById('letter-final').textContent = final_JSON.letter;
     document.getElementById('number-final').textContent = final_JSON.number;
 }
@@ -59,10 +62,10 @@
         final_JSON["class"] = selectedClass;
         // Missatge advertència classe repetida
         if (repeated_subjects.has(selectedClass.id)) {
-            document.getElementById('repeated-subject-warning').classList.remove('hidden');
+            document.getElementById('repeated-subject-warning').classList.remove('is-hidden');
             document.getElementById('repeated-subject-warning-class').textContent = selectedClass.room;
         } else {
-            document.getElementById('repeated-subject-warning').classList.add('hidden');
+            document.getElementById('repeated-subject-warning').classList.add('is-hidden');
         }
         // Anchor següent pregunta
         switchSection("section-2");
@@ -89,8 +92,8 @@
 
 function switchSection(s) {
     setTimeout(function(){ 
-        document.getElementById(current_section).classList.add('hidden');
-        document.getElementById(s).classList.remove('hidden');
+        document.getElementById(current_section).classList.add('is-hidden');
+        document.getElementById(s).classList.remove('is-hidden');
         current_section = s;
     }, 75);
 }
@@ -169,7 +172,7 @@
         document.getElementById("subject-container").appendChild(classeDiv);
         ++duplicateSubjectCounter;
     }
-
+  
     var elements = document.getElementsByClassName("button");
     Array.from(elements).forEach(function(element) {
         element.addEventListener('click', clickButton);
@@ -182,29 +185,117 @@
     });
 }
 
-function formatDate(d) {
-    var str = "";
+function getDefaultTime() {
+    var time = new Date();
+    time.setSeconds(0);
+    time.setMilliseconds(0);
+    if (time.getMinutes() < 30) time.setMinutes(0);
+    else time.setMinutes(30);
+    if (time.getHours() < MIN_HOUR) {
+        time.setHours(MIN_HOUR);
+        time.setMinutes(0);
+    }
+    if (time.getHours() >= MAX_HOUR) {
+        time.setHours(MAX_HOUR - 1);
+        time.setMinutes(30);
+    }
+    return time
+}
+
+function buildTimeSelector(date) {
+    document.getElementById("date-selector").value = formatDate(date);
+    var end_time = new Date(date.getTime() + 30*60000);  // 1 min = 60000 ms
+    document.getElementById("time-selector").value = formatTime(date) + " - " + formatTime(end_time);
+}
+
+function addDateEventListeners(date) {
+    document.getElementById("date-prev").addEventListener('click', function (el) {
+        current_time = new Date(current_time.getTime() - 24*60*60000);
+        buildTimeSelector(current_time);
+        fetchClasses();
+    });
+    document.getElementById("date-next").addEventListener('click', function (el) {
+        current_time = new Date(current_time.getTime() + 24*60*60000);
+        buildTimeSelector(current_time);
+        fetchClasses();
+    });
+    document.getElementById("time-prev").addEventListener('click', function (el) {
+        current_time = new Date(current_time.getTime() - 30*60000);
+        if (current_time.getHours() < MIN_HOUR) {
+            current_time = new Date(current_time.getTime() - 24*60*60000);
+            current_time.setHours(MAX_HOUR - 1);
+            current_time.setMinutes(30);
+        }
+        buildTimeSelector(current_time);
+        fetchClasses();
+    });
+    document.getElementById("time-next").addEventListener('click', function (el) {
+        current_time = new Date(current_time.getTime() + 30*60000);
+        if (current_time.getHours() >= MAX_HOUR) {
+            current_time = new Date(current_time.getTime() + 24*60*60000);
+            current_time.setHours(MIN_HOUR);
+            current_time.setMinutes(0);
+        }
+        buildTimeSelector(current_time);
+        fetchClasses();
+    });
+}
+
+function formatTime(d) {
+    return d.toLocaleTimeString("ca", {timeStyle: 'short'});
+    /* var str = "";
     str += d.getHours();
     str += ":";
     if (d.getMinutes() < 10) str += "0";
-    str += d.getMinutes();
-    return str;
+     str += d.getMinutes();
+    return str; */
+}
+
+function formatDate(d) {
+    return d.toLocaleDateString("ca");
+}
+
+function fetchClasses() {
+    console.log(api_url + "getClassesInTime/" + current_time.getTime()/1000);
+    fetch(api_url + "getClassesInTime/" + current_time.getTime()/1000, {
+        "mode": "cors",
+        "credentials": "include"
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.payload.classes.length == 0) {
+                document.getElementById('no-subjects').classList.remove('is-hidden');
+                document.getElementById('subject-container').classList.add('is-hidden');
+                document.getElementById('fme-maps-container').classList.add('is-hidden');
+            } else {
+                repeated_subjects = findRepeatedSubjects(data.payload.classes);
+                buildSubjectContainer(data.payload.classes, repeated_subjects);
+                document.getElementById('no-subjects').classList.add('is-hidden');
+                document.getElementById('subject-container').classList.remove('is-hidden');
+                document.getElementById('fme-maps-container').classList.remove('is-hidden');
+            }
+
+        });
 }
 
 function onPageLoad() {
 
-    // Check if devMode is on
+    // Check if user is signed in
     if (localStorage.getItem('devMode') == 'true') {
         var banner = document.getElementById('dev-mode');
         banner.addEventListener('click', _ => {
             localStorage.devMode = 'false';
             location.reload();
         });
-        banner.classList.remove('hidden');
+        banner.classList.remove('is-hidden');
         api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/'
     } else {
         api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/";
     }
+
+    current_time = getDefaultTime();
+    buildTimeSelector(current_time);
+
     fetch(api_url + "isSignedIn", {
         "mode": "cors",
         "credentials": "include"
@@ -226,21 +317,7 @@
             }
         });
 
-    fetch(api_url + "getCurrentClasses", {
-        "mode": "cors",
-        "credentials": "include"
-    })
-        .then(response => response.json())
-        .then(data => {
-            if (data.payload.classes.length == 0) {
-                document.getElementById('no-subjects').classList.remove('hidden');
-            } else {
-                repeated_subjects = findRepeatedSubjects(data.payload.classes);
-                buildSubjectContainer(data.payload.classes, repeated_subjects);
-                document.getElementById('fme-maps-container').classList.remove('hidden');
-            }
-
-        });
+    fetchClasses();
 }
 
 function sendForm() {
@@ -263,8 +340,8 @@
             var params = new URLSearchParams();
             params.append("entry." + idsFormulari.room, final_JSON.class.room); // class, number, letter
             params.append("entry." + idsFormulari.day, begins.getFullYear().toString() + '-' + (begins.getMonth() + 1).toString().padStart(2, "0") + '-' + begins.getDate().toString().padStart(2, "0"));
-            params.append("entry." + idsFormulari.begins, formatDate(begins));
-            params.append("entry." + idsFormulari.ends, formatDate(ends));
+            params.append("entry." + idsFormulari.begins, formatTime(begins));
+            params.append("entry." + idsFormulari.ends, formatTime(ends));
             params.append("entry." + idsFormulari.rows[final_JSON.letter], 'Columna ' + final_JSON.number);
             // params.append("entry." + idsFormulari.notes, '[Autogenerat per delefme/covid-tracability -- Assignatura seleccionada: ' + (final_JSON.class.friendly_name || final_JSON.class.calendar_name) + ']');
 
@@ -293,6 +370,8 @@
         document.getElementById("send-button").classList.add('is-loading');
         sendForm();
     });
+
+    addDateEventListeners();
 }
 
 addEventListeners();