diff --git a/src/routes/chat/VoiceFullscreen.tsx b/src/routes/chat/VoiceFullscreen.tsx
index 2dc331af..94da7cb4 100644
--- a/src/routes/chat/VoiceFullscreen.tsx
+++ b/src/routes/chat/VoiceFullscreen.tsx
@@ -111,7 +111,7 @@ const VoiceFullscreen = ({ id, context }: Props) => {
                         {shareScreen ? <div className={clsx("w-1 h-1 absolute z-40 rounded-full bg-green-700/60", special ? "top-2 left-2" : "top-1 left-1 px-2")} /> : null}
                         {!disablePin &&
                             <Tooltip tip={"Remove pin"} disabled={!special} placement="right">
-                                <button data-uid={uid} data-action={special ? "unpin" : "pin"} role={"button"} onClick={handlePin} className={clsx("absolute left-1 top-1 z-40 p-1 rounded bg-black/50", special ? "px-2 py-0.5" : "invisible group-hover:visible")}>
+                                <button data-uid={uid} data-action={special ? "unpin" : "pin"} role={"button"} onClick={handlePin} className={clsx("absolute left-1 top-1 z-40 rounded bg-black/50", special ? "px-2 py-0.5" : "px-1 invisible group-hover:visible")}>
                                     <IconPin className={clsx(special ? "w-4 fill-green-600" : "w-3 fill-gray-200")} />
                                 </button>
                             </Tooltip>}
diff --git a/src/routes/resources/Filter/Channel.tsx b/src/routes/resources/Filter/Channel.tsx
index e356d1fa..df686cba 100644
--- a/src/routes/resources/Filter/Channel.tsx
+++ b/src/routes/resources/Filter/Channel.tsx
@@ -16,7 +16,7 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
 
   return (
     <div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[400px] flex flex-col items-start relative drop-shadow">
-      <div className=" bg-white dark:bg-transparent sticky top-0 z-10">
+      <div className=" bg-white dark:bg-gray-800 sticky top-0 z-10 w-full">
         <Search embed={true} value={input} updateSearchValue={updateInput} />
       </div>
       <ul className="w-full flex flex-col gap-4 p-2">
diff --git a/src/routes/resources/Filter/From.tsx b/src/routes/resources/Filter/From.tsx
index 69527c19..2ae879b1 100644
--- a/src/routes/resources/Filter/From.tsx
+++ b/src/routes/resources/Filter/From.tsx
@@ -16,7 +16,7 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
 
   return (
     <div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[300px] flex flex-col items-start relative drop-shadow">
-      <div className="bg-white dark:bg-transparent sticky top-0 z-10">
+      <div className="bg-white dark:bg-gray-800 sticky top-0 z-10 w-full">
         <Search embed={true} value={input} updateSearchValue={updateInput} />
       </div>
       <ul className="w-full flex flex-col">
diff --git a/src/routes/resources/Filter/index.tsx b/src/routes/resources/Filter/index.tsx
index ad066392..44e7e810 100644
--- a/src/routes/resources/Filter/index.tsx
+++ b/src/routes/resources/Filter/index.tsx
@@ -66,7 +66,7 @@ export default function Filter({ filter, updateFilter }) {
             <Avatar
               width={16}
               height={16}
-              className="rounded-full"
+              className="rounded-full w-4 h-4"
               name={userMap[from].name}
               src={userMap[from].avatar}
             />
@@ -74,7 +74,7 @@ export default function Filter({ filter, updateFilter }) {
           <span className="txt">
             {t("from")} {from && userMap[from].name}
           </span>
-          <ArrowDown className="dark:stroke-gray-400" />
+          <ArrowDown className="dark:stroke-gray-100" />
         </div>
       </Tippy>
       <Tippy
@@ -89,7 +89,7 @@ export default function Filter({ filter, updateFilter }) {
           onClick={toggleFilterVisible.bind(null, { channel: true })}
         >
           <span className="txt">{channel ? `In ${channelMap[channel].name}` : t("channel")}</span>
-          <ArrowDown className="dark:stroke-gray-400" />
+          <ArrowDown className="dark:stroke-gray-100" />
         </div>
       </Tippy>
       <Tippy
@@ -104,7 +104,7 @@ export default function Filter({ filter, updateFilter }) {
           onClick={toggleFilterVisible.bind(null, { type: true })}
         >
           <span className="txt">{type ? FileTypes[type].title : t("type")}</span>
-          <ArrowDown className="dark:stroke-gray-400" />
+          <ArrowDown className="dark:stroke-gray-100" />
         </div>
       </Tippy>
       <Tippy
@@ -119,7 +119,7 @@ export default function Filter({ filter, updateFilter }) {
           onClick={toggleFilterVisible.bind(null, { date: true })}
         >
           <span className="txt">{date ? Dates[date].title : t("date")}</span>
-          <ArrowDown className="dark:stroke-gray-400" />
+          <ArrowDown className="dark:stroke-gray-100" />
         </div>
       </Tippy>
     </div>