diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index a09cb3a4..650ece68 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -42,7 +42,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import { ref } from 'vue'
+import { useStorage } from "@vueuse/core";
 
 const links = [
   {
@@ -72,5 +72,5 @@ const links = [
   },
 ]
 
-const isSidebarCollapsed = ref(false)
+const isSidebarCollapsed = useStorage("sidebar_is_collapsed", false);
 </script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 1e815bd9..65745de1 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -27,16 +27,16 @@
             {{ user.full_name }}
           </div>
         </div>
-        <FeatherIcon
-          name="chevron-down"
-          class="h-4 w-4 duration-300 ease-in-out"
+        <div
+          class="duration-300 ease-in-out"
           :class="
             isCollapsed
               ? 'opacity-0 ml-0 w-0 overflow-hidden'
               : 'opacity-100 ml-2 w-auto'
           "
-          aria-hidden="true"
-        />
+        >
+          <FeatherIcon name="chevron-down" class="h-4 w-4" aria-hidden="true" />
+        </div>
       </button>
     </template>
   </Dropdown>