diff --git a/css/style.css b/css/style.css
index 55e126e..d4b257a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -200,6 +200,10 @@ body {
     text-transform: uppercase;
 }
 
+.nav-section-title i {
+    transition: transform 0.3s ease;
+}
+
 .nav-btn {
     display: flex;
     align-items: center;
@@ -231,6 +235,16 @@ body {
 
 .subscriptions-list {
     padding: 0 12px;
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+}
+
+.subscriptions-list.collapsed {
+    max-height: 0;
+    opacity: 0;
+    padding: 0 12px;
 }
 
 .subscription-item {
diff --git a/js/script.js b/js/script.js
index 6d61b15..da18c32 100644
--- a/js/script.js
+++ b/js/script.js
@@ -778,12 +778,12 @@ function bindEvents() { // Bind events to the DOM elements
         const subscriptionsList = document.querySelector('.subscriptions-list');
         const chevron = subscriptionTitle.querySelector('i');
         
-        if (subscriptionsList.style.display === 'none') {
-            subscriptionsList.style.display = 'block';
-            chevron.style.transform = 'rotate(0deg)';
-        } else {
-            subscriptionsList.style.display = 'none';
+        subscriptionsList.classList.toggle('collapsed');
+        
+        if (subscriptionsList.classList.contains('collapsed')) {
             chevron.style.transform = 'rotate(-90deg)';
+        } else {
+            chevron.style.transform = 'rotate(0deg)';
         }
     });
 }