diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index 93299f2d4..34ecb023d 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -71,7 +71,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
             ...position,
             maxHeight
           }}
-          className="sn-dropdown max-h-120 max-w-80 flex flex-col py-2 overflow-y-scroll fixed"
+          className="sn-dropdown sn-dropdown--animated max-h-120 max-w-80 flex flex-col py-2 overflow-y-scroll fixed"
         >
           {open && (
             <NotesOptions
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 193515ede..d9ca46dc5 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -63,7 +63,7 @@ const SearchOptions = observer(({ appState }: Props) => {
         style={{
           top: optionsPanelTop,
         }}
-        className="sn-dropdown sn-dropdown-anchor-right absolute grid gap-2 py-2"
+        className="sn-dropdown sn-dropdown--anchor-right sn-dropdown--animated absolute grid gap-2 py-2"
       >
         <Switch
           className="h-10"
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 9a4f00026..1b3edcc12 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -208,21 +208,24 @@
 .sn-dropdown {
   @extend .bg-default;
   @extend .min-w-80;
-  @extend .transition-transform;
-  @extend .duration-150;
-  @extend .slide-down-animation;
   @extend .rounded;
   @extend .box-shadow;
 
   z-index: $z-index-dropdown-menu;
 
-  &.sn-dropdown-anchor-right {
+  &.sn-dropdown--anchor-right {
     right: 0;
   }
 
   &[data-state='collapsed'] {
     display: none;
   }
+  
+  &.sn-dropdown--animated {
+    @extend .transition-transform;
+    @extend .duration-150;
+    @extend .slide-down-animation;
+  }
 }
 
 /** Lesser specificity will give priority to reach's styles */