diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index 1ad6733f..455a8750 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -1015,6 +1015,7 @@
             document.getElementById('side-panel').classList.toggle('collapsed');
             document.getElementById('new-conversation').classList.toggle('collapsed');
             document.getElementById('existing-conversations').classList.toggle('collapsed');
+            document.getElementById('side-panel-collapse').style.transform = document.getElementById('side-panel').classList.contains('collapsed') ? 'rotate(0deg)' : 'rotate(180deg)';
 
             document.getElementById('chat-section-wrapper').classList.toggle('mobile-friendly');
         }
@@ -1059,7 +1060,7 @@
                         id="collapse-side-panel-button"
                         onclick="handleCollapseSidePanel()"
                     >
-                        <svg class="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg id="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#0F0F0F"/>
                         </svg>
                     </button>
@@ -1162,6 +1163,7 @@
         }
 
         #side-panel {
+            width: 250px;
             padding: 10px;
             background: var(--background-color);
             border-radius: 5px;
@@ -1169,11 +1171,11 @@
             overflow-y: scroll;
             text-align: left;
             transition: width 0.3s ease-in-out;
-            width: 250px;
         }
 
         div#side-panel.collapsed {
-            width: 1px;
+            width: 0;
+            padding: 0;
             display: block;
             overflow: hidden;
         }
@@ -1361,7 +1363,7 @@
             font-size: large;
         }
 
-        svg.side-panel-collapse {
+        svg#side-panel-collapse {
             width: 30px;
             height: 30px;
         }
@@ -1615,7 +1617,7 @@
                 padding: 0;
             }
 
-            svg.side-panel-collapse {
+            svg#side-panel-collapse {
                 width: 24px;
                 height: 24px;
             }
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index a942541a..7ecb70d6 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -969,6 +969,7 @@ To get started, just start typing below. You can also type / to see a list of co
             document.getElementById('side-panel').classList.toggle('collapsed');
             document.getElementById('new-conversation').classList.toggle('collapsed');
             document.getElementById('existing-conversations').classList.toggle('collapsed');
+            document.getElementById('side-panel-collapse').style.transform = document.getElementById('side-panel').classList.contains('collapsed') ? 'rotate(0deg)' : 'rotate(180deg)';
 
             document.getElementById('chat-section-wrapper').classList.toggle('mobile-friendly');
         }
@@ -1004,7 +1005,7 @@ To get started, just start typing below. You can also type / to see a list of co
                         id="collapse-side-panel-button"
                         onclick="handleCollapseSidePanel()"
                     >
-                        <svg class="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg id="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#0F0F0F"/>
                         </svg>
                     </button>
@@ -1229,6 +1230,7 @@ To get started, just start typing below. You can also type / to see a list of co
         }
 
         #side-panel {
+            width: 250px;
             padding: 10px;
             background: var(--background-color);
             border-radius: 5px;
@@ -1236,11 +1238,11 @@ To get started, just start typing below. You can also type / to see a list of co
             overflow-y: scroll;
             text-align: left;
             transition: width 0.3s ease-in-out;
-            width: 250px;
         }
 
         div#side-panel.collapsed {
-            width: 1px;
+            width: 0;
+            padding: 0;
             display: block;
             overflow: hidden;
         }
@@ -1425,7 +1427,7 @@ To get started, just start typing below. You can also type / to see a list of co
             font-size: large;
         }
 
-        svg.side-panel-collapse {
+        svg#side-panel-collapse {
             width: 30px;
             height: 30px;
         }
@@ -1564,7 +1566,7 @@ To get started, just start typing below. You can also type / to see a list of co
                 padding: 0;
             }
 
-            svg.side-panel-collapse {
+            svg#side-panel-collapse {
                 width: 24px;
                 height: 24px;
             }