diff --git a/.gitignore b/.gitignore
index 79518f7..b95f779 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,8 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# lock files
+bun.lockb
+yarn.lock
+.yarn/
diff --git a/package.json b/package.json
index 86979df..791748a 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/dompurify": "^3",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.21.16",
+		"bits-ui": "^0.22.0",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.454.0",
 		"prettier": "^3.3.2",
diff --git a/src/app.css b/src/app.css
index ca35437..c037f66 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,139 +3,141 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 224 71.4% 4.1%;
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
 
-		--muted: 220 14.3% 95.9%;
-		--muted-foreground: 220 8.9% 46.1%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
 
-		--popover: 0 0% 100%;
-		--popover-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
 
-		--card: 0 0% 100%;
-		--card-foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
 
-		--border: 220 13% 91%;
-		--input: 220 13% 91%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
 
-		--primary: 33deg 43% 91%;
-		--primary-foreground: 210 20% 98%;
+    --primary: 33deg 43% 91%;
+    --primary-foreground: 210 20% 98%;
 
-		--secondary: 220 14.3% 95.9%;
-		--secondary-foreground: 220.9 39.3% 11%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
 
-		--accent: 220 14.3% 95.9%;
-		--accent-foreground: 220.9 39.3% 11%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
 
-		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 210 20% 98%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 20% 98%;
 
-		--ring: 224 71.4% 4.1%;
+    --ring: 224 71.4% 4.1%;
 
-		--radius: 0.5rem;
+    --radius: 0.5rem;
 
-	}
+  }
 
-	.dark {
-		--background: 249 22% 12%;
-		--foreground: 245 50% 91%;
+  .dark {
+    --background: 249 22% 12%;
+    --foreground: 245 50% 91%;
 
-		--muted: 215 27.9% 16.9%;
-		--muted-foreground: 217.9 10.6% 64.9%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
 
-		--popover: 224 71.4% 4.1%;
-		--popover-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
 
-		--card: 35 88% 72%;
-		--card-foreground: 248 13% 36%;
+    --card: 35 88% 72%;
+    --card-foreground: 248 13% 36%;
 
-		--border: 248 13% 36%;
-		--input: 215 27.9% 16.9%;
+    --border: 248 13% 36%;
+    --input: 215 27.9% 16.9%;
 
-		--primary: 248deg 25% 18%;
-		--primary-foreground: 248deg 15% 61%;
+    --primary: 248deg 25% 18%;
+    --primary-foreground: 248deg 15% 61%;
 
-		--secondary: 249deg 15% 28%;
-		--secondary-foreground: 210 20% 98%;
+    --secondary: 249deg 15% 28%;
+    --secondary-foreground: 210 20% 98%;
 
-		--accent: 215 27.9% 16.9%;
-		--accent-foreground: 210 20% 98%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
 
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
 
-		--ring: 216 12.2% 83.9%;
-	}
+    --ring: 216 12.2% 83.9%;
+  }
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
+  * {
+    @apply border-border;
+  }
 
-	body {
-		@apply bg-background text-foreground;
-	}
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-	body {
-		@apply dark;
-	}
+  body {
+    @apply dark;
+  }
 }
 
 @font-face {
-	font-family: "PingFang";
-	src:
-		local('PingFang Bold'), src("/PingFang Bold.woff2") type("woff2");
-	font-weight: bold;
+  font-family: "PingFang";
+  src:
+    local('PingFang Bold'), src("/PingFang Bold.woff2") type("woff2");
+  font-weight: bold;
 }
 
 @font-face {
-	font-family: "PingFang";
-	src:
-		local('PingFang Medium'), src("/PingFang Medium.woff2") type("woff2");
-	font-weight: normal;
+  font-family: "PingFang";
+  src:
+    local('PingFang Medium'), src("/PingFang Medium.woff2") type("woff2");
+  font-weight: normal;
 }
 
 @font-face {
-	font-family: "PingFang";
-	src:
-		local('PingFang Heavy'), src("/PingFang Heavy.woff2") type("woff2");
-	font-weight: bolder;
+  font-family: "PingFang";
+  src:
+    local('PingFang Heavy'), src("/PingFang Heavy.woff2") type("woff2");
+  font-weight: bolder;
 
 }
 
 @font-face {
-	font-family: "PingFang";
-	src:
-		local('PingFang Light'), src("/PingFang Light.woff2") type("woff2");
-	font-weight: lighter;
+  font-family: "PingFang";
+  src:
+    local('PingFang Light'), src("/PingFang Light.woff2") type("woff2");
+  font-weight: lighter;
 }
 
 @font-face {
-	font-family: "PingFang";
-	src:
-		local('PingFang Regular'), src("/PingFang Regular.woff2") type("woff2");
-	font-weight: normal;
+  font-family: "PingFang";
+  src:
+    local('PingFang Regular'), src("/PingFang Regular.woff2") type("woff2");
+  font-weight: normal;
 }
 
 body {
-	font-family: "PingFang";
-	font-weight: 400;
-	overflow-x: hidden;
+  font-family: "PingFang";
+  font-weight: 400;
+  overflow-x: hidden;
+  width: 100dvw;
+  min-height: 100dvh;
 }
 
 ::-webkit-scrollbar {
-	width: 8px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-	background-color: hsl(var(--muted))
+  background-color: hsl(var(--muted))
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: hsl(248deg, 13%, 36%);
-	border-radius: 10px;
+  background-color: hsl(248deg, 13%, 36%);
+  border-radius: 10px;
 }
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 4cb0320..c44ee60 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,63 +1,81 @@
-import { Fetch, Post, PostResponse } from '$lib/protobuf/niming';
-import axios from 'axios';
+import { FetchResponse, Post, PostResponse } from '$lib/protobuf/niming';
+import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
 
-export const ResultEnum = {
-	Ok: 1,
-	Err: 2
-} as const;
 
-export type ResultEnum = typeof ResultEnum[keyof typeof ResultEnum];
 
-export interface Result<T> {
-	kind: ResultEnum;
-	message: string
-	enclose?: T;
+export class Result<T> {
+  status: number
+  enclose?: T
+  message?: string
+  constructor(status: number, enclose?: T, message?: string) {
+    this.status = status;
+    this.enclose = enclose;
+    this.message = message;
+  }
+  ok(): boolean { return this.status == 1 }
+  set_status(status: number) {
+    this.status = status
+  }
+}
+
+
+function axios_request(method: string, url: string, params?: Map<string, string> | Object, data?: Uint8Array): Promise<AxiosResponse<ArrayBuffer, any>> {
+  let cfg: AxiosRequestConfig<Uint8Array> = {
+    method,
+    url,
+    params,
+    data,
+    responseType: "arraybuffer",
+    headers: { 'Content-Type': 'application/x-protobuf' },
+  }
+
+  return axios(cfg)
 }
 
 export class API {
-	page: number
-	constructor() {
-		this.page = 0
-	}
-	async send_post(content: string, refer: bigint | undefined, files: File[] | undefined) {
-		let readed: Uint8Array[] = [];
-		files?.forEach((e) => {
-			e.arrayBuffer().then((arrbuf) => {
-				readed.push(new Uint8Array(arrbuf));
-			});
-		});
-		let ctx = Post.create({ content: content, files: readed });
-		if (refer !== undefined) {
-			ctx.ref = refer;
-		}
-		let result: Result<PostResponse> = { kind: ResultEnum.Err, message: "" };
-		await axios
-			.post('/article/', Post.toBinary(ctx), {
-				headers: { 'Content-Type': 'application/x-protobuf' },
-				responseType: "arraybuffer"
-			})
-			.then((e) => {
-				result.kind = ResultEnum.Ok;
-				result.enclose = PostResponse.fromBinary(e.data);
-			})
-			.catch((err) => {
-				if (err.response) {
-					result.message = err.response.data.error;
-				}
-			});
-		return result;
-	}
-	async fetch() {
-		let result: Result<Fetch> = { kind: ResultEnum.Err, message: "" };
-		axios.get("/article/list", { responseType: "arraybuffer" }).then((e) => {
-			result.kind = ResultEnum.Ok;
-			result.enclose = Fetch.fromBinary(e.data);
-		}).catch((e) => {
+  page: number
+  constructor() {
+    this.page = 0
+  }
+  async send_post(content: string, refer: bigint | undefined, files: File[] | undefined) {
+    let files_buf: Uint8Array[] = [];
+    files?.forEach((e) => {
+      e.arrayBuffer().then((arrbuf) => {
+        files_buf.push(new Uint8Array(arrbuf));
+      });
+    });
 
-		});
-		this.page++;
-		return result;
-	}
+    let ctx = Post.create({ content: content, files: files_buf });
+    if (refer !== undefined) {
+      ctx.ref = refer;
+    }
+
+    let result = new Result<PostResponse>(0)
+
+    await axios_request('post', '/article', undefined, Post.toBinary(ctx))
+      .then(e => {
+        result.enclose = PostResponse.fromBinary(new Uint8Array(e.data))
+        result.set_status(1);
+      }).catch(e => {
+        result.message = e.response?.data
+      });
+    return result;
+  }
+  async fetch(): Promise<Result<FetchResponse>> {
+    let result = new Result<FetchResponse>(0)
+
+    await axios_request('get', '/article/list', { page: this.page })
+      .then(e => {
+        result.enclose = FetchResponse.fromBinary(new Uint8Array(e.data))
+        result.set_status(1);
+        this.page += 1;
+      })
+      .catch(e => {
+        result.message = e.response?.data
+      })
+
+    return result;
+  }
 }
 let api_inst = new API();
 export default api_inst;
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..86827f3
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..af1e188
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..71b3328
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..e8e368c
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..7d0444d
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..af9d1ff
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5022ad5..856f2b6 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,2 +1 @@
 // place files you want to import through the `$lib` alias in this folder.
-export * from './textmark'
diff --git a/src/lib/protobuf/definitions/niming.proto b/src/lib/protobuf/definitions/niming.proto
index 893fde4..1c2e3e0 100644
--- a/src/lib/protobuf/definitions/niming.proto
+++ b/src/lib/protobuf/definitions/niming.proto
@@ -8,21 +8,30 @@ message Post {
   repeated bytes files = 3;
 }
 
-// The response of the posting, defining what should return.
-message PostResponse {
-  string hash = 1;
-  uint64 id = 2;
+enum Status {
+  Failed = 0;
+  Success = 1;
 }
 
-message Fetch {
+// The response of the posting, defining what should return.
+message PostResponse {
+  Status status = 1;
+  string hash = 2;
+  uint64 id = 3;
+  optional string failed_message = 4;
+}
+
+message FetchResponse {
   message Message {
     uint64 id = 1;
     string content = 2;
     // reply to a post, like a mail chat.
-    optional uint64 ref = 3;
+    // optional uint64 ref = 3;
     // request files through /article/file/<id> with MIME type.
     // See it as a BLOB url;
-    repeated uint64 files_id = 4;
+    repeated string files_hash = 3;
+    optional string igid = 4;
+    repeated string comments_hash = 5;
   }
   // Several post info
   repeated Message posts = 1;
diff --git a/src/lib/protobuf/niming.ts b/src/lib/protobuf/niming.ts
index 87f0591..95d1c5f 100644
--- a/src/lib/protobuf/niming.ts
+++ b/src/lib/protobuf/niming.ts
@@ -38,29 +38,37 @@ export interface Post {
  */
 export interface PostResponse {
     /**
-     * @generated from protobuf field: string hash = 1;
+     * @generated from protobuf field: Status status = 1;
+     */
+    status: Status;
+    /**
+     * @generated from protobuf field: string hash = 2;
      */
     hash: string;
     /**
-     * @generated from protobuf field: uint64 id = 2;
+     * @generated from protobuf field: uint64 id = 3;
      */
     id: bigint;
+    /**
+     * @generated from protobuf field: optional string failed_message = 4;
+     */
+    failedMessage?: string;
 }
 /**
- * @generated from protobuf message Fetch
+ * @generated from protobuf message FetchResponse
  */
-export interface Fetch {
+export interface FetchResponse {
     /**
      * Several post info
      *
-     * @generated from protobuf field: repeated Fetch.Message posts = 1;
+     * @generated from protobuf field: repeated FetchResponse.Message posts = 1;
      */
-    posts: Fetch_Message[];
+    posts: FetchResponse_Message[];
 }
 /**
- * @generated from protobuf message Fetch.Message
+ * @generated from protobuf message FetchResponse.Message
  */
-export interface Fetch_Message {
+export interface FetchResponse_Message {
     /**
      * @generated from protobuf field: uint64 id = 1;
      */
@@ -71,17 +79,34 @@ export interface Fetch_Message {
     content: string;
     /**
      * reply to a post, like a mail chat.
-     *
-     * @generated from protobuf field: optional uint64 ref = 3;
-     */
-    ref?: bigint;
-    /**
+     * optional uint64 ref = 3;
      * request files through /article/file/<id> with MIME type.
      * See it as a BLOB url;
      *
-     * @generated from protobuf field: repeated uint64 files_id = 4;
+     * @generated from protobuf field: repeated string files_hash = 3;
      */
-    filesId: bigint[];
+    filesHash: string[];
+    /**
+     * @generated from protobuf field: optional string igid = 4;
+     */
+    igid?: string;
+    /**
+     * @generated from protobuf field: repeated string comments_hash = 5;
+     */
+    commentsHash: string[];
+}
+/**
+ * @generated from protobuf enum Status
+ */
+export enum Status {
+    /**
+     * @generated from protobuf enum value: Failed = 0;
+     */
+    Failed = 0,
+    /**
+     * @generated from protobuf enum value: Success = 1;
+     */
+    Success = 1
 }
 // @generated message type with reflection information, may provide speed optimized methods
 class Post$Type extends MessageType<Post> {
@@ -149,12 +174,15 @@ export const Post = new Post$Type();
 class PostResponse$Type extends MessageType<PostResponse> {
     constructor() {
         super("PostResponse", [
-            { no: 1, name: "hash", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 2, name: "id", kind: "scalar", T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ }
+            { no: 1, name: "status", kind: "enum", T: () => ["Status", Status] },
+            { no: 2, name: "hash", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
+            { no: 3, name: "id", kind: "scalar", T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ },
+            { no: 4, name: "failed_message", kind: "scalar", opt: true, T: 9 /*ScalarType.STRING*/ }
         ]);
     }
     create(value?: PartialMessage<PostResponse>): PostResponse {
         const message = globalThis.Object.create((this.messagePrototype!));
+        message.status = 0;
         message.hash = "";
         message.id = 0n;
         if (value !== undefined)
@@ -166,12 +194,18 @@ class PostResponse$Type extends MessageType<PostResponse> {
         while (reader.pos < end) {
             let [fieldNo, wireType] = reader.tag();
             switch (fieldNo) {
-                case /* string hash */ 1:
+                case /* Status status */ 1:
+                    message.status = reader.int32();
+                    break;
+                case /* string hash */ 2:
                     message.hash = reader.string();
                     break;
-                case /* uint64 id */ 2:
+                case /* uint64 id */ 3:
                     message.id = reader.uint64().toBigInt();
                     break;
+                case /* optional string failed_message */ 4:
+                    message.failedMessage = reader.string();
+                    break;
                 default:
                     let u = options.readUnknownField;
                     if (u === "throw")
@@ -184,12 +218,18 @@ class PostResponse$Type extends MessageType<PostResponse> {
         return message;
     }
     internalBinaryWrite(message: PostResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* string hash = 1; */
+        /* Status status = 1; */
+        if (message.status !== 0)
+            writer.tag(1, WireType.Varint).int32(message.status);
+        /* string hash = 2; */
         if (message.hash !== "")
-            writer.tag(1, WireType.LengthDelimited).string(message.hash);
-        /* uint64 id = 2; */
+            writer.tag(2, WireType.LengthDelimited).string(message.hash);
+        /* uint64 id = 3; */
         if (message.id !== 0n)
-            writer.tag(2, WireType.Varint).uint64(message.id);
+            writer.tag(3, WireType.Varint).uint64(message.id);
+        /* optional string failed_message = 4; */
+        if (message.failedMessage !== undefined)
+            writer.tag(4, WireType.LengthDelimited).string(message.failedMessage);
         let u = options.writeUnknownFields;
         if (u !== false)
             (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
@@ -201,26 +241,26 @@ class PostResponse$Type extends MessageType<PostResponse> {
  */
 export const PostResponse = new PostResponse$Type();
 // @generated message type with reflection information, may provide speed optimized methods
-class Fetch$Type extends MessageType<Fetch> {
+class FetchResponse$Type extends MessageType<FetchResponse> {
     constructor() {
-        super("Fetch", [
-            { no: 1, name: "posts", kind: "message", repeat: 1 /*RepeatType.PACKED*/, T: () => Fetch_Message }
+        super("FetchResponse", [
+            { no: 1, name: "posts", kind: "message", repeat: 1 /*RepeatType.PACKED*/, T: () => FetchResponse_Message }
         ]);
     }
-    create(value?: PartialMessage<Fetch>): Fetch {
+    create(value?: PartialMessage<FetchResponse>): FetchResponse {
         const message = globalThis.Object.create((this.messagePrototype!));
         message.posts = [];
         if (value !== undefined)
-            reflectionMergePartial<Fetch>(this, message, value);
+            reflectionMergePartial<FetchResponse>(this, message, value);
         return message;
     }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: Fetch): Fetch {
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: FetchResponse): FetchResponse {
         let message = target ?? this.create(), end = reader.pos + length;
         while (reader.pos < end) {
             let [fieldNo, wireType] = reader.tag();
             switch (fieldNo) {
-                case /* repeated Fetch.Message posts */ 1:
-                    message.posts.push(Fetch_Message.internalBinaryRead(reader, reader.uint32(), options));
+                case /* repeated FetchResponse.Message posts */ 1:
+                    message.posts.push(FetchResponse_Message.internalBinaryRead(reader, reader.uint32(), options));
                     break;
                 default:
                     let u = options.readUnknownField;
@@ -233,10 +273,10 @@ class Fetch$Type extends MessageType<Fetch> {
         }
         return message;
     }
-    internalBinaryWrite(message: Fetch, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* repeated Fetch.Message posts = 1; */
+    internalBinaryWrite(message: FetchResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* repeated FetchResponse.Message posts = 1; */
         for (let i = 0; i < message.posts.length; i++)
-            Fetch_Message.internalBinaryWrite(message.posts[i], writer.tag(1, WireType.LengthDelimited).fork(), options).join();
+            FetchResponse_Message.internalBinaryWrite(message.posts[i], writer.tag(1, WireType.LengthDelimited).fork(), options).join();
         let u = options.writeUnknownFields;
         if (u !== false)
             (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
@@ -244,29 +284,31 @@ class Fetch$Type extends MessageType<Fetch> {
     }
 }
 /**
- * @generated MessageType for protobuf message Fetch
+ * @generated MessageType for protobuf message FetchResponse
  */
-export const Fetch = new Fetch$Type();
+export const FetchResponse = new FetchResponse$Type();
 // @generated message type with reflection information, may provide speed optimized methods
-class Fetch_Message$Type extends MessageType<Fetch_Message> {
+class FetchResponse_Message$Type extends MessageType<FetchResponse_Message> {
     constructor() {
-        super("Fetch.Message", [
+        super("FetchResponse.Message", [
             { no: 1, name: "id", kind: "scalar", T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ },
             { no: 2, name: "content", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 3, name: "ref", kind: "scalar", opt: true, T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ },
-            { no: 4, name: "files_id", kind: "scalar", repeat: 1 /*RepeatType.PACKED*/, T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ }
+            { no: 3, name: "files_hash", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 9 /*ScalarType.STRING*/ },
+            { no: 4, name: "igid", kind: "scalar", opt: true, T: 9 /*ScalarType.STRING*/ },
+            { no: 5, name: "comments_hash", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 9 /*ScalarType.STRING*/ }
         ]);
     }
-    create(value?: PartialMessage<Fetch_Message>): Fetch_Message {
+    create(value?: PartialMessage<FetchResponse_Message>): FetchResponse_Message {
         const message = globalThis.Object.create((this.messagePrototype!));
         message.id = 0n;
         message.content = "";
-        message.filesId = [];
+        message.filesHash = [];
+        message.commentsHash = [];
         if (value !== undefined)
-            reflectionMergePartial<Fetch_Message>(this, message, value);
+            reflectionMergePartial<FetchResponse_Message>(this, message, value);
         return message;
     }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: Fetch_Message): Fetch_Message {
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: FetchResponse_Message): FetchResponse_Message {
         let message = target ?? this.create(), end = reader.pos + length;
         while (reader.pos < end) {
             let [fieldNo, wireType] = reader.tag();
@@ -277,15 +319,14 @@ class Fetch_Message$Type extends MessageType<Fetch_Message> {
                 case /* string content */ 2:
                     message.content = reader.string();
                     break;
-                case /* optional uint64 ref */ 3:
-                    message.ref = reader.uint64().toBigInt();
+                case /* repeated string files_hash */ 3:
+                    message.filesHash.push(reader.string());
                     break;
-                case /* repeated uint64 files_id */ 4:
-                    if (wireType === WireType.LengthDelimited)
-                        for (let e = reader.int32() + reader.pos; reader.pos < e;)
-                            message.filesId.push(reader.uint64().toBigInt());
-                    else
-                        message.filesId.push(reader.uint64().toBigInt());
+                case /* optional string igid */ 4:
+                    message.igid = reader.string();
+                    break;
+                case /* repeated string comments_hash */ 5:
+                    message.commentsHash.push(reader.string());
                     break;
                 default:
                     let u = options.readUnknownField;
@@ -298,23 +339,22 @@ class Fetch_Message$Type extends MessageType<Fetch_Message> {
         }
         return message;
     }
-    internalBinaryWrite(message: Fetch_Message, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+    internalBinaryWrite(message: FetchResponse_Message, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
         /* uint64 id = 1; */
         if (message.id !== 0n)
             writer.tag(1, WireType.Varint).uint64(message.id);
         /* string content = 2; */
         if (message.content !== "")
             writer.tag(2, WireType.LengthDelimited).string(message.content);
-        /* optional uint64 ref = 3; */
-        if (message.ref !== undefined)
-            writer.tag(3, WireType.Varint).uint64(message.ref);
-        /* repeated uint64 files_id = 4; */
-        if (message.filesId.length) {
-            writer.tag(4, WireType.LengthDelimited).fork();
-            for (let i = 0; i < message.filesId.length; i++)
-                writer.uint64(message.filesId[i]);
-            writer.join();
-        }
+        /* repeated string files_hash = 3; */
+        for (let i = 0; i < message.filesHash.length; i++)
+            writer.tag(3, WireType.LengthDelimited).string(message.filesHash[i]);
+        /* optional string igid = 4; */
+        if (message.igid !== undefined)
+            writer.tag(4, WireType.LengthDelimited).string(message.igid);
+        /* repeated string comments_hash = 5; */
+        for (let i = 0; i < message.commentsHash.length; i++)
+            writer.tag(5, WireType.LengthDelimited).string(message.commentsHash[i]);
         let u = options.writeUnknownFields;
         if (u !== false)
             (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
@@ -322,6 +362,6 @@ class Fetch_Message$Type extends MessageType<Fetch_Message> {
     }
 }
 /**
- * @generated MessageType for protobuf message Fetch.Message
+ * @generated MessageType for protobuf message FetchResponse.Message
  */
-export const Fetch_Message = new Fetch_Message$Type();
+export const FetchResponse_Message = new FetchResponse_Message$Type();
diff --git a/src/lib/textmark.ts b/src/lib/textmark.ts
deleted file mode 100644
index 8974bbc..0000000
--- a/src/lib/textmark.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Marked } from "marked";
-import { markedHighlight } from "marked-highlight";
-import hljs from "highlight.js";
-import DOMPurify from "isomorphic-dompurify";
-
-
-export default class TextMark {
-	marked: Marked
-	constructor() {
-		this.marked = new Marked(
-			markedHighlight({
-				emptyLangClass: 'hljs',
-				langPrefix: 'hljs language-',
-				highlight(code, lang, _) {
-					const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-					return hljs.highlight(code, { language }).value;
-				}
-			})
-		);
-		this.marked = this.marked.use({
-			async: true,
-			gfm: true,
-			pedantic: false,
-			hooks: {
-				postprocess(e) {
-					return DOMPurify.sanitize(e)
-				}
-			}
-		})
-	}
-	async parse(pure_mark: boolean, content: string): Promise<string> {
-		if (!pure_mark) {
-			let processed = "";
-			content.split("\n").forEach((e) => {
-				processed += e + "  \n"
-			})
-			content = processed;
-
-		}
-		return this.marked.parse(content);
-	}
-}
-
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1b20a8f..e940e31 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	let { children } = $props();
 </script>
 
-<div class="sticky top-0 z-10 grid h-16 w-full grid-cols-4 text-nowrap bg-background">
+<div class="sticky top-0 z-50 grid h-16 w-full grid-cols-4 text-nowrap bg-background">
 	<div class="col-span-3 grid grid-cols-4 text-4xl">
 		<a class="m-auto" href="/">中工匿名</a>
 	</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5494105..9e45d83 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
 	import MessageCard from './message_card.svelte';
 	import MingcuteAddCircleFill from '~icons/mingcute/add-circle-fill';
-	import Overlay, { toggle_overlay, get_overlay } from './overlay.svelte';
 	import Marker, { get_content, files, clear_content } from './marker.svelte';
-	import api_inst, { ResultEnum, type Result } from '$lib/api';
+	import api_inst, { type Result } from '$lib/api';
+	import { FetchResponse_Message, type PostResponse } from '$lib/protobuf/niming';
+	import { onMount } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { Dialog } from 'bits-ui';
+	import { fade } from 'svelte/transition';
 
 	let timer = false;
+	let open = $state(false);
 
 	const send = () => {
 		if (!timer) {
 			timer = true;
-			api_inst.send_post(get_content(), undefined, files).then((result: Result<null>) => {
+			api_inst.send_post(get_content(), undefined, files).then((result: Result<PostResponse>) => {
 				alert(result.message);
-				if (result.kind == ResultEnum.Ok) {
+				if (result.ok()) {
 					clear_content();
-					toggle_overlay();
+					open = false;
 				}
 				setTimeout(() => {
 					timer = false;
@@ -22,40 +27,64 @@
 			});
 		}
 	};
+
+	let posts = new SvelteSet<FetchResponse_Message>();
+	onMount(() => {
+		api_inst.page = 0;
+		let observe = new IntersectionObserver(
+			(_) => {
+				console.log('Intersecting');
+				api_inst.fetch().then((e) => {
+					console.log(api_inst.page);
+					if (e.ok() && e.enclose != undefined) {
+						e.enclose?.posts.forEach((post) => {
+							posts.add(post);
+						});
+					}
+				});
+			},
+			{
+				root: null,
+				rootMargin: '0px',
+				threshold: 1
+			}
+		);
+		const element = document.querySelector('#loader');
+		if (element != null) {
+			observe.observe(element);
+		}
+	});
+	$inspect(posts);
 </script>
 
-<div style="width:100dvw;" class="grid h-dvh px-5 py-3">
-	<!-- <p class="justify-self-center m-auto">空空如也...</p> -->
-	<MessageCard
-		content="
-# H1 
-## H2
-### H3
-[url](https://google.com)  
-![image](http://localhost:5173/favicon.png)
-Test   
-NormalText
-"
-	/>
+<div
+	class="relative grid h-fit min-h-dvh w-dvw grid-cols-1 justify-items-center gap-10 py-3 lg:grid-cols-2 lg:px-[10dvw]"
+>
+	{#each posts as p}
+		<MessageCard post={p}></MessageCard>
+	{/each}
+	<div class="absolute bottom-0 left-0 h-10 w-full text-center" id="loader">Loading...</div>
 </div>
-<button id="add" onclick={toggle_overlay} class="text-3xl"> <MingcuteAddCircleFill /> </button>
-<Overlay>
-	<div
-		class="flex flex-col rounded-lg bg-primary px-5 py-3 md:w-4/6 lg:w-1/2"
-		style="height:60dvh;"
-	>
-		<div class="relative h-6 w-full">
-			<button class="absolute left-0" onclick={toggle_overlay}>取消</button>
-			<button class="absolute right-0" onclickcapture={send}>發送</button>
-		</div>
-		<Marker />
-	</div>
-</Overlay>
-
-<style>
-	#add {
-		position: fixed;
-		bottom: calc(15dvh);
-		right: calc(10dvw);
-	}
-</style>
+<Dialog.Root bind:open>
+	<Dialog.Trigger class="fixed bottom-[15dvh] right-[10dvw] text-4xl">
+		<MingcuteAddCircleFill />
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			transition={fade}
+			transitionConfig={{ duration: 150 }}
+			class="fixed inset-0 z-50 bg-black/80"
+		/>
+		<Dialog.Content
+			class="fixed left-[50%] top-[50%] z-50 h-[40dvh] w-[50dvw] translate-x-[-50%] translate-y-[-50%] 
+      rounded-lg border bg-background p-5 shadow-popover outline-none sm:w-[80dvw] md:w-[60dvw]"
+		>
+			<div class="grid grid-cols-3">
+				<Dialog.Close class="text-left">離開</Dialog.Close>
+				<Dialog.Title class="text-center">新增文章</Dialog.Title>
+				<button class="pr-1 text-right" onclickcapture={send}>Send</button>
+			</div>
+			<Marker></Marker>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/src/routes/links/+page.svelte b/src/routes/links/+page.svelte
new file mode 100644
index 0000000..6a8518b
--- /dev/null
+++ b/src/routes/links/+page.svelte
@@ -0,0 +1,3 @@
+<div>
+	<p>IG: <a href="">IG 帳號</a></p>
+</div>
diff --git a/src/routes/marker.svelte b/src/routes/marker.svelte
index 4efdef1..794ce2b 100644
--- a/src/routes/marker.svelte
+++ b/src/routes/marker.svelte
@@ -5,13 +5,6 @@
 
 	let files: Array<File> = [];
 	const get_content = () => {
-		let length = dyn_files == undefined ? 0 : dyn_files.length;
-		for (let i = 0; i < length; i++) {
-			let item = dyn_files?.item(i);
-			if (item != null) {
-				files.push(item);
-			}
-		}
 		return content;
 	};
 	const clear_content = () => {
@@ -24,9 +17,13 @@
 
 <script lang="ts">
 	import { Textarea } from '$lib/components/ui/textarea';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import type { KeyboardEventHandler } from 'svelte/elements';
 	import MingcutePicFill from '~icons/mingcute/pic-fill';
+	import MingcuteCloseCircleFill from '~icons/mingcute/close-circle-fill';
+	import { SvelteMap } from 'svelte/reactivity';
 
+	// It makes some of ARIA commands into inputs (like tab into \t)
 	const key_scrap: KeyboardEventHandler<HTMLTextAreaElement> = (event: KeyboardEvent) => {
 		let ct: HTMLTextAreaElement = event.currentTarget as HTMLTextAreaElement;
 		if (event.key == 'Tab') {
@@ -37,6 +34,26 @@
 			ct.selectionStart = ct.selectionEnd = start + 1;
 		}
 	};
+
+	// it use svelte's map in order to achieve reactivity(like $state)
+	// https://svelte.dev/docs/svelte/svelte-reactivity
+	let dyn_image_links = new SvelteMap<string, string>();
+
+	// it create a map of name and local files path to show images
+	const update_image = () => {
+		if (dyn_files != undefined) {
+			dyn_image_links.clear();
+			for (let i = 0; i < dyn_files.length; i++) {
+				let item = dyn_files.item(i);
+				if (item != null) {
+					dyn_image_links.set(item.name, URL.createObjectURL(item));
+				}
+			}
+		}
+	};
+	const delete_image = (key: string) => {
+		dyn_image_links.delete(key);
+	};
 </script>
 
 <div class="flex h-full w-full flex-col justify-items-center gap-3 pt-[3%]">
@@ -48,16 +65,37 @@
 	/>
 	<hr />
 	<div class="w-full">
-		<input
-			id="enclosed"
-			type="file"
-			accept=".gif,.png,.jpeg,.jpg,.webm,.heic,.heif,.mp4,.webp"
-			multiple
-			class="hidden"
-			bind:files={dyn_files}
-		/>
-		<label for="enclosed" class="mx-auto w-fit"><MingcutePicFill class="text-xl" /> </label>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<input
+					id="enclosed"
+					type="file"
+					accept=".gif,.png,.jpeg,.jpg,.webm,.heic,.heif,.mp4,.webp"
+					multiple
+					class="hidden"
+					bind:files={dyn_files}
+					onchange={update_image}
+				/>
+				<label for="enclosed" class="mx-auto w-fit"><MingcutePicFill class="text-xl" /> </label>
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				<p>Add a picture</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
 	</div>
+	<!-- selected images preview -->
+	{#if dyn_image_links.size > 0}
+		<div class="flex h-[75px] w-full max-w-full flex-row gap-3 overflow-y-hidden">
+			{#each dyn_image_links as entries}
+				<div class="relative h-[70px] w-[70px]">
+					<img src={entries[1]} alt="selected files" class="object-scale-down" />
+					<button class="absolute right-0 top-0" onclick={() => delete_image(entries[0])}>
+						<MingcuteCloseCircleFill />
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
diff --git a/src/routes/message_card.svelte b/src/routes/message_card.svelte
index 3af4709..93ec18d 100644
--- a/src/routes/message_card.svelte
+++ b/src/routes/message_card.svelte
@@ -1,53 +1,73 @@
 <script lang="ts">
-	let { content }: { content: string } = $props();
+	let { post }: { post: FetchResponse_Message } = $props();
 	import * as Dialog from '$lib/components/ui/dialog';
-	import { Marked } from 'marked';
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+	import type { FetchResponse_Message } from '$lib/protobuf/niming';
 	import DOMPurify from 'isomorphic-dompurify';
-	import { markedHighlight } from 'marked-highlight';
-	import hljs from 'highlight.js';
-	//TODO Need sanitizer
-	const marked = new Marked(
-		markedHighlight({
-			emptyLangClass: 'hljs',
-			langPrefix: 'hljs language-',
-			highlight(code, lang, info) {
-				const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-				return hljs.highlight(code, { language }).value;
-			}
-		})
-	);
-	marked.use({
-		hooks: {
-			postprocess: (text) => {
-				return DOMPurify.sanitize(text);
-			}
-		}
-	});
-	let parsed = marked.parse(content, {
-		async: true,
-		gfm: true,
-		pedantic: false
-	});
+
+	//Icons
+	import MingcuteForwardFill from '~icons/mingcute/forward-fill';
+	import MingcuteInsFill from '~icons/mingcute/ins-fill';
+	import MingcuteHeartFill from '~icons/mingcute/heart-fill';
+
+	const url = /(https|http):\/\/[\S]*/g;
+	const parser = (text: string) => {
+		text.replaceAll(url, (sub) => {
+			return `<a href=${sub}>${sub}</a>`;
+		});
+		return text;
+	};
+	let item = DOMPurify.sanitize(parser(post.content));
 </script>
 
 <Dialog.Root>
-	<Dialog.Trigger
-		class="max-h-80 max-w-64 overflow-y-hidden bg-amber-400 text-slate-900 drop-shadow-[5px_10px_#f38f0f]"
-	>
-		<div class="inner_card">
-			{#await parsed}
-				loading
-			{:then item}
-				{@html item}
-			{/await}
+	<div class="flex h-fit w-fit flex-row-reverse">
+		<div class="z-10 flex w-10 flex-col-reverse gap-3 text-2xl">
+			<!-- Interactions -->
+			<button class=" text-center" aria-label="like"><MingcuteHeartFill /></button>
+			<button
+				class=" text-center"
+				aria-label="ig"
+				onclick={() => {
+					window.open('', '_blank');
+				}}
+			>
+				<MingcuteInsFill />
+			</button>
+			<button class=" text-center" aria-label="forward"><MingcuteForwardFill /></button>
 		</div>
-	</Dialog.Trigger>
+		<Dialog.Trigger
+			class="h-fit max-h-80 max-w-[70dvw] overflow-y-hidden bg-amber-400 text-slate-900 drop-shadow-[5px_10px_#f38f0f] lg:max-w-96"
+		>
+			<div class="inner_card">
+				{@html item}
+				{#if post.filesHash.length > 0}
+					<ScrollArea class="mt-10 w-full" orientation="horizontal">
+						{#each post.filesHash as hash}
+							<img src={'/article/file/' + hash} alt="pictures" />
+						{/each}
+					</ScrollArea>
+				{/if}
+			</div>
+		</Dialog.Trigger>
+	</div>
 	<Dialog.Content>
-		{#await parsed}
-			loading
-		{:then item}
-			{@html item}
-		{/await}
+		{@html item}
+		{#if post.filesHash.length > 1}
+			<ScrollArea class="w-full whitespace-nowrap rounded-md border" orientation="horizontal">
+				<div class="flex h-[35dvh] w-fit space-x-4 p-4">
+					{#each post.filesHash as hash}
+						<img src={'/article/file/' + hash} alt="pictures" class="aspect-auto object-cover" />
+					{/each}
+				</div>
+			</ScrollArea>
+		{:else if post.filesHash.length == 1}
+			<img
+				src={'/article/file/' + post.filesHash[0]}
+				alt="pictures"
+				class="aspect-auto object-cover"
+			/>
+		{/if}
 	</Dialog.Content>
 </Dialog.Root>
 
@@ -59,9 +79,9 @@
 		code {
 			@apply bg-amber-600;
 		}
-		mask-image: linear-gradient(0deg, transparent, white 50%);
+		mask-image: linear-gradient(0deg, transparent, white 30%);
 		height: 100%;
-		padding: 0px 5%;
+		padding: 5px 5% 40px;
 		text-align: left;
 	}
 </style>
diff --git a/src/routes/overlay.svelte b/src/routes/overlay.svelte
deleted file mode 100644
index d9e97e6..0000000
--- a/src/routes/overlay.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script module lang="ts">
-	let overlay = $state(false);
-	const toggle_overlay = () => {
-		overlay = !overlay;
-		if (overlay) {
-			document.body.classList.add('overflow-y-hidden');
-		} else {
-			document.body.classList.remove('overflow-y-hidden');
-		}
-	};
-	const get_overlay = () => {
-		return overlay;
-	};
-	export { toggle_overlay, get_overlay };
-</script>
-
-<script lang="ts">
-	let { children } = $props();
-</script>
-
-<div
-	class={'fixed left-0 top-0 z-20 h-dvh w-dvw ' +
-		(overlay ? 'overlay_blur grid place-items-center' : 'hidden')}
-	role="dialog"
->
-	{@render children()}
-</div>
-
-<style>
-	.overlay_blur {
-		backdrop-filter: blur(10px);
-	}
-</style>
diff --git a/src/routes/tos/+page.svelte b/src/routes/tos/+page.svelte
index c734ed3..2f849cb 100644
--- a/src/routes/tos/+page.svelte
+++ b/src/routes/tos/+page.svelte
@@ -1,6 +1,4 @@
-<div class="flex justify-center">
-	<div class="w-1/2 break-keep text-center text-2xl">
-		<p>“中工匿名”不記錄個人網路位置、名字。</p>
-		<p>如訊息侵害他人權利，違反大眾道德觀，皆不保證留存。</p>
-	</div>
+<div class="w-dvw text-center text-xl font-bold lg:text-3xl">
+	<p>“中工匿名”不記錄個人姓名。</p>
+	<p>如訊息侵害他人權利，違反大眾道德觀，皆不保證留存。</p>
 </div>
diff --git a/vite.config.ts b/vite.config.ts
index 2bed3b5..e1c2b45 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,13 +3,13 @@ import { defineConfig } from 'vite';
 import Icons from 'unplugin-icons/vite'
 
 export default defineConfig({
-	plugins: [sveltekit(), Icons({ compiler: 'svelte' })],
-	server: {
-		proxy: {
-			'/article': {
-				target: "http://10.16.20.17:5000",
-				changeOrigin: true,
-			}
-		}
-	}
+  plugins: [sveltekit(), Icons({ compiler: 'svelte' })],
+  server: {
+    proxy: {
+      '/article': {
+        target: "http://10.16.20.17:5000",
+        changeOrigin: true,
+      }
+    }
+  }
 });