diff --git a/css/bulma-adjustments.css b/css/bulma-adjustments.css
index 739591c..f0960a4 100644
--- a/css/bulma-adjustments.css
+++ b/css/bulma-adjustments.css
@@ -21,6 +21,36 @@
 .buttons.grid .complex-button {
     flex: 1 0 34%;
     margin: 15px 10px;
+    min-width: min(100%, 300px);
+}
+
+.buttons.grid .complex-button.is-selected .message-header {
+    background-color: #3273dc;
+    color: #fff;
+}
+
+.buttons.grid .complex-button.is-selected .message-body.is-selected {
+    background-color: #eef3fc;
+    color: #2160c4;
+}
+
+.rooms-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.rooms-container .message-body {
+    border-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    flex-grow: 1;
+
+    cursor: pointer;
+}
+
+.rooms-container .message-body:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-right: solid 1px #4a4a4a;
 }
 
 .section {
diff --git a/css/duplicate-subjects.css b/css/duplicate-subjects.css
deleted file mode 100644
index f27d1bb..0000000
--- a/css/duplicate-subjects.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.buttons.grid .complex-button {
-    flex: 1 0 34%;
-    margin: 15px 10px;
-
-}
-
-.buttons.grid .complex-button-full {
-    flex: 1 0 68%;
-    margin: 15px 10px;
-}
-
-.buttons.grid .complex-button2Right {
-    flex: 1 0 34%;
-    margin: 15px 10px;
-    border-bottom-left-radius: 0px;
-    margin-left: -10px;
-    border-left: 3.5px solid #4A4A4A;
-}
-
-.buttons.grid .complex-button2Left {
-    flex: 1 0 34%;
-    margin: 15px 10px;
-    margin-right: -10px;
-    border-bottom-right-radius: 0px;
-    border-right: 3.5px solid #4A4A4A;
-}
diff --git a/index.html b/index.html
index fbec2d0..7d822a7 100644
--- a/index.html
+++ b/index.html
@@ -3,21 +3,19 @@
 <html lang="ca">
     <head>
         <meta charset="UTF-8">
-		<title>Seients DAFME</title>
+        <title>Seients DAFME</title>
 
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link rel="manifest" href="manifest.json">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="manifest" href="manifest.json">
 
-		<!-- Apple web app -->
-		<link rel="apple-touch-icon" href="./images/icon-64.png">
-		<meta name="apple-mobile-web-app-title" content="Seients DAFME">
-		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta name="apple-mobile-web-app-status-bar-style" content="white">
-        
+        <!-- Apple web app -->
+        <link rel="apple-touch-icon" href="./images/icon-64.png">
+        <meta name="apple-mobile-web-app-title" content="Seients DAFME">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="white">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
         <link rel="stylesheet" href="./css/bulma-adjustments.css">
-	<link rel="stylesheet" href="./css/duplicate-subjects.css">
     </head>
     <body>
         <script></script>
diff --git a/js/build_page.js b/js/build_page.js
index 2c80793..8178181 100644
--- a/js/build_page.js
+++ b/js/build_page.js
@@ -56,17 +56,11 @@
     if (parent == "subject-container") {
         // Canvi de background del button
         var selectedClass = JSON.parse(btn.getAttribute('data-class'));
-        $("#subject-container .complex-button").removeClass("is-link")
-        btn.classList.add("is-link");
+        $("#subject-container .complex-button, #subject-container .message-body").removeClass("is-selected")
+        btn.classList.add('is-selected');
+        btn.parentNode.parentNode.classList.add('is-selected');
         // Canvi JSON
         final_JSON["class"] = selectedClass;
-        // Missatge advertència classe repetida
-        if (repeated_subjects.has(selectedClass.id)) {
-            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('is-hidden');
-        }
         // Anchor següent pregunta
         switchSection("section-2");
     } else if (parent == "number-container") {
@@ -109,102 +103,80 @@
     return rep;
 }
 
-function buildSubjectContainer(classes, repeated) {
-    var duplicateSubjectBoolNext, duplicateSubjectBoolPrev;
-    var duplicateSubjectCounter = 0;
-    
-    // Flush existing classes
-    document.querySelectorAll('.message').forEach(function(classe) {
-        classe.classList.add('is-hidden');
+function transformClasses(rawClasses) {
+    var classes = [];
+    rawClasses.forEach(c => {
+        var found = false;
+        for (var i = 0; i < classes.length; ++i) {
+            if ((classes[i][0].friendly_name || classes[i][0].calendar_name) == (c.friendly_name || c.calendar_name)) {
+                classes[i].push(c);
+                found = true;
+                break;
+            }
+        }
+
+        if (!found) {
+            classes.push([c]);
+        }
     });
-    
-    for (var [i, classe] of classes.entries()) {       
-        console.log(classe);
-        var hora_inici = formatTime(new Date(parseInt(classe.begins)*1000));
-        var hora_final = formatTime(new Date(parseInt(classe.ends)*1000));
-        var classeDiv;
-        
-        // Check if the subject is repeated
-        if (i < classes.length - 1) {
-            duplicateSubjectBoolNext = classes[i+1].friendly_name == classe.friendly_name;
-        }
-        else { 
-            duplicateSubjectBoolNext = false;
-        }
-        if (i > 0) {
-            duplicateSubjectBoolPrev = classes[i-1].friendly_name == classe.friendly_name;
-        }
-        else {
-            duplicateSubjectBoolPrev = false;
-        }
-        
-        // Change the previous classeDiv
-        if(duplicateSubjectBoolNext && duplicateSubjectCounter%2 == 1) {
-            classeDiv.classList.add('message', 'complex-button-full');
-            duplicateSubjectCounter++;
-        }
-        
-        classeDiv = document.createElement('div');
-        
-        if (duplicateSubjectBoolPrev) {
-            classeDiv.classList.add('message', 'complex-button2Right');
-        } else if(duplicateSubjectBoolNext) {
-            classeDiv.classList.add('message', 'complex-button2Left');
-            console.log("hola");
-        } else {
-            classeDiv.classList.add('message', 'complex-button');
-        }
-        
+
+    return classes;
+}
+
+function buildSubjectContainer(classes) {
+    // Flush existing classes
+    document.querySelectorAll('#subject-container .message').forEach(function(classe) {
+        classe.parentNode.removeChild(classe);
+    });
+
+    for (var uniqueClasses of classes) {
+        var firstClass = uniqueClasses[0];
+        var hora_inici = formatTime(new Date(parseInt(firstClass.begins)*1000));
+        var hora_final = formatTime(new Date(parseInt(firstClass.ends)*1000));
+
+        var classeDiv = document.createElement('div');
         classeDiv.classList.add('message', 'complex-button');
-        classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room;
-        classeDiv.setAttribute('data-class', JSON.stringify(classe));
 
         var header = document.createElement('div');
         header.classList.add('message-header');
+        header.textContent = firstClass.friendly_name || firstClass.calendar_name;
 
-        if (!(duplicateSubjectBoolPrev)) {
-            header.textContent = classe.friendly_name || classe.calendar_name;
-            header.style.color = "#FFFFFF";
-        } else {
-            header.textContent = classe.friendly_name || classe.calendar_name;;
-            header.style.color = "#4A4A4A";
-        }
-        
-        var body = document.createElement('div');
-        body.classList.add('message-body');
-
-        var div1 = document.createElement('div');
-        var span = document.createElement('span');
-        span.textContent = classe.room;
-
-        div1.classList.add('has-text-weight-bold');
-
-        div1.textContent = 'Aula ';
-        div1.appendChild(span);
-
-        var div2 = document.createElement('div');
-        div2.textContent = hora_inici + ' - ' + hora_final;
-
-        body.appendChild(div1);
-        body.appendChild(div2);
+        var roomsDiv = document.createElement('div');
+        roomsDiv.classList.add('rooms-container');
 
         classeDiv.appendChild(header);
-        classeDiv.appendChild(body);
 
+        for (var classe of uniqueClasses) {
+            if (classe.user_selected) {
+                classeDiv.classList.add('is-primary');
+            }
+
+            var body = document.createElement('div');
+            body.classList.add('message-body');
+            body.setAttribute('data-class', JSON.stringify(classe));
+            body.addEventListener('click', clickButton);
+            body.parent = 'subject-container';
+
+            var div1 = document.createElement('div');
+
+            div1.classList.add('has-text-weight-bold');
+            div1.textContent = 'Aula ';
+
+            var span = document.createElement('span');
+            span.textContent = classe.room;
+            div1.appendChild(span);
+
+            var div2 = document.createElement('div');
+            div2.textContent = hora_inici + ' - ' + hora_final;
+
+            body.appendChild(div1);
+            body.appendChild(div2);
+            roomsDiv.appendChild(body);
+        }
+
+        classeDiv.appendChild(roomsDiv);
         document.getElementById("subject-container").appendChild(classeDiv);
-        ++duplicateSubjectCounter;
     }
-  
-    var elements = document.getElementsByClassName("button");
-    Array.from(elements).forEach(function(element) {
-        element.addEventListener('click', clickButton);
-        element.parent = element.parentNode.id;
-    });
-    var elements = document.getElementsByClassName("complex-button");
-    Array.from(elements).forEach(function(element) {
-        element.addEventListener('click', clickButton);
-        element.parent = element.parentNode.id;
-    });
 }
 
 function getDefaultTime() {
@@ -278,7 +250,6 @@
 }
 
 function fetchClasses() {
-    console.log(api_url + "getClassesInTime/" + current_time.getTime()/1000);
     fetch(api_url + "getClassesInTime/" + current_time.getTime()/1000, {
         "mode": "cors",
         "credentials": "include"
@@ -290,8 +261,8 @@
                 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);
+                var transformedClasses = transformClasses(data.payload.classes);
+                buildSubjectContainer(transformedClasses);
                 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');