diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 31daa25cef..3e4a1aab72 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { SVGProps, useEffect, useRef, useState } from 'react';
 
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -36,6 +36,9 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
     });
   }, [pathname, list, searchParams]);
 
+  const ChevronUpDownIcon = (props: SVGProps<SVGSVGElement>) =>
+    openSelect ? <ChevronUpIcon {...props} /> : <ChevronDownIcon {...props} />;
+
   return (
     <div className="relative" ref={ref}>
       <div
@@ -45,7 +48,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
-        <ChevronDownIcon className="h-4" />
+        <ChevronUpDownIcon className="h-4" />
       </div>
       {openSelect && (
         <div