diff --git a/.changeset/thirty-baboons-poke.md b/.changeset/thirty-baboons-poke.md
new file mode 100644
index 00000000..51994e59
--- /dev/null
+++ b/.changeset/thirty-baboons-poke.md
@@ -0,0 +1,5 @@
+---
+'@genseki/ui': patch
+---
+
+[FIX] Filter Component UI
diff --git a/packages/ui/src/components/primitives/filter.tsx b/packages/ui/src/components/primitives/filter.tsx
index bb75adfd..a3ff5cd7 100644
--- a/packages/ui/src/components/primitives/filter.tsx
+++ b/packages/ui/src/components/primitives/filter.tsx
@@ -44,6 +44,13 @@ export function Filter<T extends FilterOptions>({ options, onChange, classNames
     setInternalOptions(options)
   }, [options])
 
+  function handleOpenChange(open: boolean) {
+    if (!open) {
+      setInternalOptions(options)
+    }
+    setOpenModal(open)
+  }
+
   function toggleItem(column: string, label: string) {
     setInternalOptions((prev) => {
       const prevOptions = prev[column]
@@ -73,8 +80,8 @@ export function Filter<T extends FilterOptions>({ options, onChange, classNames
     setOpenModal(false)
   }
 
-  function columnCount(column: string) {
-    return internalOptions[column]?.length || 0
+  function columnSelectedCount(column: string) {
+    return internalOptions[column]?.filter((o) => o.isSelected).length || 0
   }
 
   const columns = Object.keys(internalOptions)
@@ -84,7 +91,7 @@ export function Filter<T extends FilterOptions>({ options, onChange, classNames
   )
 
   return (
-    <Popover open={openModal} onOpenChange={setOpenModal}>
+    <Popover open={openModal} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button variant="outline" className={cn('w-fit', classNames?.trigger)}>
           <Typography className="text-icon-tertiary">Filter</Typography>
@@ -114,7 +121,7 @@ export function Filter<T extends FilterOptions>({ options, onChange, classNames
                   <Typography weight="normal" type="body">
                     {column}
                   </Typography>
-                  <CountBadge count={columnCount(column)} />
+                  <CountBadge count={columnSelectedCount(column)} />
                 </li>
               ))}
             </ul>
@@ -164,7 +171,7 @@ function CountBadge({ count }: { count: number }) {
   return (
     <div
       className={cn(
-        'size-[22px] rounded-full bg-surface-primary border flex items-center justify-center',
+        'size-[22px] rounded-full bg-surface-primary border flex items-center justify-center text-xs',
         {
           'opacity-0': count === 0,
         }