diff --git a/scripts.js b/scripts.js
index 7a7f490..c87156b 100644
--- a/scripts.js
+++ b/scripts.js
@@ -95,6 +95,7 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
     for (let i = 0; i < locationData.daily.time.length; i++) {
         const cardElement = document.createElement('div');
             cardElement.className = "card";
+            cardElement.selected = false;
         const cardDay = document.createElement('h3');
         let timeDate = new Date(locationData.daily.time[i]);
             if(i === 0){cardDay.textContent = "Today";}
@@ -118,11 +119,21 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
 
         cardElement.hourly = locationData.hourly;
         cardElement.addEventListener('click', () => {
+
+            cardContainer.childNodes.forEach(element => {
+                if(element.selected === true) {
+                    element.selected = false;
+                    element.classList.remove('selected');
+                }
+            });
+            cardElement.selected = true;
+            cardElement.classList.add('selected');
             const removeDisplay = document.getElementById('hoursOfDay');
             if(removeDisplay){
                 cardContainer.removeChild(removeDisplay);
             }
             cardContainer.appendChild(displayHourlyWeather(locationData, i));
+            
         })
         cardContainer.appendChild(cardElement);
  
diff --git a/styles.css b/styles.css
index 3620485..11cf8dc 100644
--- a/styles.css
+++ b/styles.css
@@ -135,7 +135,11 @@ main{
     align-items: center;
     justify-content: center;
     text-align: center;
-    margin-top: 2rem;
+    margin-top: 1rem;
+}
+
+h1{
+    font-size: 60px;
 }
 
 #cards-container{
@@ -220,10 +224,18 @@ footer{
         display: flex;
         gap: 1rem;
         padding: 1rem;
-        background-color: rgba(6, 26, 64, .1);
-        border-radius: 1rem;
+        background-color: rgba(6, 26, 64, .2);
+        border-radius: 0 0 1rem 1rem;
         overflow-x: scroll;
     }
+
+    .selected{
+        border-radius: 1rem 1rem 0 0;
+        background-color: rgba(6, 26, 64, .2);
+        transform-origin: top;
+        transform: scaleY(107.4%);
+        overflow: hidden;
+    }
 }