diff --git a/web/src/components/DailyMemoDiaryDialog.tsx b/web/src/components/DailyMemoDiaryDialog.tsx
index 24f52f23..2d604725 100644
--- a/web/src/components/DailyMemoDiaryDialog.tsx
+++ b/web/src/components/DailyMemoDiaryDialog.tsx
@@ -100,7 +100,7 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
           </div>
         </div>
         <DatePicker
-          className={`date-picker ${showDatePicker ? "" : "hidden"}`}
+          className={`date-picker ${showDatePicker ? "" : "!hidden"}`}
           datestamp={currentDateStamp}
           handleDateStampChange={handleDataPickerChange}
         />
diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
index d3c961b6..429edc55 100644
--- a/web/src/components/MemoFilter.tsx
+++ b/web/src/components/MemoFilter.tsx
@@ -14,7 +14,7 @@ const MemoFilter: React.FC<FilterProps> = () => {
   const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut);
 
   return (
-    <div className={`filter-query-container ${showFilter ? "" : "hidden"}`}>
+    <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
       <span className="tip-text">Filter:</span>
       <div
         className={"filter-item-container " + (shortcut ? "" : "hidden")}
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/common/Selector.tsx
index 8135dee7..7a21a2c6 100644
--- a/web/src/components/common/Selector.tsx
+++ b/web/src/components/common/Selector.tsx
@@ -68,7 +68,7 @@ const Selector: React.FC<Props> = (props: Props) => {
         </span>
       </div>
 
-      <div className={`items-wrapper ${showSelector ? "" : "hidden"}`}>
+      <div className={`items-wrapper ${showSelector ? "" : "!hidden"}`}>
         {dataSource.map((d) => {
           return (
             <div