diff --git a/src/app/slices/ui.ts b/src/app/slices/ui.ts
index 721b048b..5d98bc30 100644
--- a/src/app/slices/ui.ts
+++ b/src/app/slices/ui.ts
@@ -50,7 +50,14 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     fillUI(state, action: PayloadAction<Partial<UIState>>) {
-      const { SSEStatus, ready, online, msgSound = false, ...rest } = action.payload;
+      const {
+        SSEStatus,
+        ready,
+        online,
+        msgSound = false,
+        fileListView = "item",
+        ...rest
+      } = action.payload;
       window.MSG_SOUND = msgSound;
       return { ...state, msgSound, ...rest };
     },
diff --git a/src/components/FileBox/index.tsx b/src/components/FileBox/index.tsx
index ff3230da..08ccaff7 100644
--- a/src/components/FileBox/index.tsx
+++ b/src/components/FileBox/index.tsx
@@ -14,6 +14,7 @@ import {
   VideoPreview
 } from "./preview";
 import { shallowEqual } from "react-redux";
+import DownloadArea from "../FileMessage/DownloadArea";
 
 interface Data {
   file_type: string;
@@ -135,13 +136,7 @@ const FileBox: FC<Props> = ({
             </span>
           </em>
         </div>
-        <a
-          className="hidden md:block whitespace-nowrap"
-          download={name}
-          href={`${content}&download=true`}
-        >
-          <IconDownload className="fill-gray-500 dark:fill-gray-300" />
-        </a>
+        <DownloadArea copyLink={content} downloadLink={`${content}&download=true`} />
       </div>
       {withPreview && <div className="h-[calc(100%_-_64px)] overflow-hidden">{previewContent}</div>}
     </div>
diff --git a/src/components/FileMessage/DownloadArea.tsx b/src/components/FileMessage/DownloadArea.tsx
index 9d972bc1..497a9074 100644
--- a/src/components/FileMessage/DownloadArea.tsx
+++ b/src/components/FileMessage/DownloadArea.tsx
@@ -10,7 +10,7 @@ type Props = {
 const DownloadArea = ({ copyLink, downloadLink }: Props) => {
   const { copy, copied } = useCopy();
   return (
-    <div className="flex flex-col-reverse gap-2 items-center">
+    <div className="flex flex-col-reverse gap-1.5 items-center">
       <button
         className="hidden md:block whitespace-nowrap"
         disabled={copied}
diff --git a/src/components/Message/useMessageOperation.tsx b/src/components/Message/useMessageOperation.tsx
index f4327211..23c0f550 100644
--- a/src/components/Message/useMessageOperation.tsx
+++ b/src/components/Message/useMessageOperation.tsx
@@ -79,7 +79,10 @@ export default function useMessageOperation({ mid, context, contextId }: Params)
     loginUser?.uid == from_uid ||
     loginUser?.is_admin ||
     (channel && channel.owner == loginUser?.uid);
-  const canCopy = [ContentTypes.text, ContentTypes.markdown].includes(content_type) || isImage;
+  const canCopy =
+    [ContentTypes.text, ContentTypes.markdown, ContentTypes.audio, ContentTypes.file].includes(
+      content_type
+    ) || isImage;
   return {
     copyContent: isImage ? copyContent.bind(null, true) : copyContent.bind(null, false),
     canCopy,
diff --git a/src/routes/files/Filter/Channel.tsx b/src/routes/files/Filter/Channel.tsx
index 8882c3a2..68988bd8 100644
--- a/src/routes/files/Filter/Channel.tsx
+++ b/src/routes/files/Filter/Channel.tsx
@@ -31,12 +31,14 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
           return (
             <li
               key={gid}
-              className="relative cursor-pointer flex items-center gap-2"
+              className="relative cursor-pointer flex items-center gap-2 justify-between"
               onClick={handleClick.bind(null, gid)}
             >
               <ChannelIcon personal={!is_public} />
-              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">{name}</span>
-              {select == gid && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
+              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm flex-1">
+                {name}
+              </span>
+              {select == gid && <CheckSign className="" />}
             </li>
           );
         })}
diff --git a/src/routes/files/Filter/From.tsx b/src/routes/files/Filter/From.tsx
index eedf5ba7..a2c6eef9 100644
--- a/src/routes/files/Filter/From.tsx
+++ b/src/routes/files/Filter/From.tsx
@@ -30,11 +30,13 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
         </li>
         {users.map(({ uid }) => {
           return (
-            <li key={uid} className="relative cursor-pointer" onClick={handleClick.bind(null, uid)}>
+            <li
+              key={uid}
+              className="relative flex items-center gap-2 justify-between cursor-pointer"
+              onClick={handleClick.bind(null, uid)}
+            >
               <User uid={uid} interactive={true} />
-              {select == uid && (
-                <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />
-              )}
+              {select == uid && <CheckSign className="" />}
             </li>
           );
         })}
diff --git a/src/routes/files/index.tsx b/src/routes/files/index.tsx
index cc577379..c4d53486 100644
--- a/src/routes/files/index.tsx
+++ b/src/routes/files/index.tsx
@@ -36,7 +36,7 @@ function Files() {
   const [getFiles, { data }] = useLazyGetFilesQuery();
   const listContainerRef = useRef<HTMLDivElement>();
   const [filter, setFilter] = useState({});
-  const view = useAppSelector((store) => store.ui.fileListView.view, shallowEqual);
+  const view = useAppSelector((store) => store.ui.fileListView, shallowEqual);
 
   const updateFilter = (data) => {
     setFilter((prev) => {
@@ -55,7 +55,7 @@ function Files() {
   if (!data) return null;
   // return null;
   const nonExpiredFiles = data.filter((item) => !item.expired);
-  console.log("nonExpiredFiles", nonExpiredFiles);
+  console.log({ view });
   return (
     <div className="h-screen md:overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-gray-700">
       <Search value={filter.name} updateSearchValue={handleUpdateSearch} />
diff --git a/src/routes/resources/Filter/Channel.tsx b/src/routes/resources/Filter/Channel.tsx
index 533902e0..b2160d18 100644
--- a/src/routes/resources/Filter/Channel.tsx
+++ b/src/routes/resources/Filter/Channel.tsx
@@ -35,12 +35,14 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
           return (
             <li
               key={gid}
-              className="relative cursor-pointer flex items-center gap-2"
+              className="cursor-pointer flex items-center gap-2 justify-between"
               onClick={handleClick.bind(null, gid)}
             >
               <ChannelIcon personal={!is_public} />
-              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">{name}</span>
-              {select == gid && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
+              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm flex-1">
+                {name}
+              </span>
+              {select == gid && <CheckSign className="" />}
             </li>
           );
         })}
diff --git a/src/routes/resources/Filter/From.tsx b/src/routes/resources/Filter/From.tsx
index eedf5ba7..a2c6eef9 100644
--- a/src/routes/resources/Filter/From.tsx
+++ b/src/routes/resources/Filter/From.tsx
@@ -30,11 +30,13 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
         </li>
         {users.map(({ uid }) => {
           return (
-            <li key={uid} className="relative cursor-pointer" onClick={handleClick.bind(null, uid)}>
+            <li
+              key={uid}
+              className="relative flex items-center gap-2 justify-between cursor-pointer"
+              onClick={handleClick.bind(null, uid)}
+            >
               <User uid={uid} interactive={true} />
-              {select == uid && (
-                <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />
-              )}
+              {select == uid && <CheckSign className="" />}
             </li>
           );
         })}