diff --git a/client/index.ts b/client/index.ts
index 892bc88..dc27019 100644
--- a/client/index.ts
+++ b/client/index.ts
@@ -8,6 +8,7 @@ import ReactDOM from 'react-dom/client'
 
 import './ui/custom-elements/chat-image.ts'
 import './ui/custom-elements/chat-video.ts'
+import './ui/custom-elements/chat-file.ts'
 
 const urlParams = new URL(location.href).searchParams
 
diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 67f8b5a..cdc53be 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -36,8 +36,8 @@ const markedInstance = new marked.Marked({
             if (/uploaded_files\/[A-Za-z0-9]+$/.test(href)) {
                 return ({
                     Image: `<chat-image src="${href}" alt="${text}"></chat-image>`,
-                    Video: `<chat-video src="${href}" alt="${text}"></chat-video>`,
-                    File: `<chat-file src="${href}" alt="${text}"></chat-file>`,
+                    Video: `<chat-video src="${href}"></chat-video>`,
+                    File: `<chat-file href="${href}" name="${/^Video|File=(.*)/.exec(text)?.[1] || 'Unnamed file'}"></chat-file>`,
                 })?.[type] || ``
             }
             return ``
@@ -280,6 +280,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                             'src',
                                             'alt',
                                             'href',
+                                            'name',
                                         ],
                                     }).replaceAll('\n', '<br>')
                                     const lastDate = date
diff --git a/client/ui/custom-elements/chat-file.ts b/client/ui/custom-elements/chat-file.ts
new file mode 100644
index 0000000..4fea0eb
--- /dev/null
+++ b/client/ui/custom-elements/chat-file.ts
@@ -0,0 +1,22 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-file', class extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.style.display = 'block'
+        const e = new DOMParser().parseFromString(`
+        <div style="width: 100%;height: 100%;">
+            <mdui-card variant="outlined" clickable style="display: flex;align-items: center;">
+                <mdui-icon name="insert_drive_file" style="margin: 13px;font-size: 34px;"></mdui-icon>
+                <span style="margin-right: 13px;"></span>
+            </mdui-card>
+        </div>`, 'text/html').body.firstChild as HTMLElement
+        $(e).find('span').text($(this).attr("name"))
+        const href = $(this).attr('href')
+        // deno-lint-ignore no-window
+        e.onclick = () => window.open(href, '_blank')
+        this.appendChild(e)
+    }
+})