diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..cf70988
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+**/node_modules
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..f781d69
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,20 @@
+FROM docker.hub.ipao.vip/golang:1.22-alpine as builder
+
+COPY . /app
+
+RUN go env -w GOPROXY=https://go.hub.ipao.vip,direct && \
+    go env -w GO111MODULE=on && \
+    cd /app && \
+    go mod tidy && \
+    go build -o /app/exporter .
+
+
+FROM docker.hub.ipao.vip/alpine:3.20
+
+COPY --from=builder /app/exporter /usr/local/bin/exporter
+COPY config.yml /root/.exporter.yml
+
+WORKDIR /root
+
+ENTRYPOINT  ["/usr/local/bin/exporter"]
+CMD [ "serve" ]
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 819582f..69cea9e 100644
--- a/Makefile
+++ b/Makefile
@@ -3,4 +3,9 @@ model:
 	rm -rf ./database
 	jet -dsn=postgresql://postgres:xixi0202@10.1.1.3:5432/telegram_resource?sslmode=disable -path=./database
 
-	# gofumpt -w -l -extra ./database
\ No newline at end of file
+	# gofumpt -w -l -extra ./database
+
+.PHONY: docker
+docker:
+	docker build -t docker-af.hub.ipao.vip/rogeecn/tg-exporter:latest .
+	docker push docker-af.hub.ipao.vip/rogeecn/tg-exporter:latest
\ No newline at end of file
diff --git a/frontend/dist.go b/frontend/dist.go
new file mode 100644
index 0000000..35009a5
--- /dev/null
+++ b/frontend/dist.go
@@ -0,0 +1,18 @@
+package frontend
+
+import "embed"
+
+// embedded files
+//
+//go:embed dist/assets/*
+var StaticDist embed.FS
+
+// embedded dist/favicon.ico
+//
+//go:embed dist/favicon.ico
+var Favicon []byte
+
+// embedded dist/index.html
+//
+//go:embed dist/index.html
+var IndexPage string
diff --git a/frontend/src/components/ListItem.vue b/frontend/src/components/ListItem.vue
index a992a25..5b50981 100644
--- a/frontend/src/components/ListItem.vue
+++ b/frontend/src/components/ListItem.vue
@@ -1,18 +1,25 @@
 <template>
-  <div class="bg-slate-100 border rounded mb-4 p-2 md:mb-8 md:p-4">
-    <div v-if="item.Content.length > 0" class="text-wrap font-sans" v-html="processedContent"></div>
+  <div class="mb-4 md:mb-8 border rounded overflow-hidden" :id="`message-${item.ID}`">
+    <div class="bg-slate-100 p-2  md:p-4">
+      <div v-if="item.Content.length > 0" class="text-wrap font-sans" v-html="processedContent"></div>
 
-    <div v-if="item.Media.length > 0" class="mt-2 md:mt-4">
-      <div class="medias grid grid-cols-3 gap-2 md:gap-4">
-        <template v-for="media in item.Media" :key="media.id">
-          <MediaItem :media="media" :channel="item.ChannelID" />
-        </template>
+      <div v-if="item.Media.length > 0" class="mt-2 md:mt-4">
+        <div class="medias grid grid-cols-3 gap-2 md:gap-4">
+          <template v-for="media in item.Media" :key="media.id">
+            <MediaItem :media="media" :channel="item.ChannelID" />
+          </template>
+        </div>
       </div>
     </div>
+    <div class="grid grid-cols-2">
+      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center">Like</button>
+      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center text-red-600" @click="delMessage()">Delete</button>
+    </div>
   </div>
 </template>
 
 <script>
+import { deleteMessage } from "@/services/messages";
 import { computed, defineComponent } from "vue";
 import MediaItem from "./MediaItem.vue";
 
@@ -21,6 +28,7 @@ function nl2br(str, is_xhtml) {
   return (str + "").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1" + breakTag + "$2");
 }
 
+
 export default defineComponent({
   components: {
     MediaItem,
@@ -35,9 +43,36 @@ export default defineComponent({
       return nl2br(content, false);
     });
 
+    const delMessage = async () => {
+      console.log("delMessage")
+      if (!confirm("Are you sure?")) {
+        return;
+      }
+
+      const itemId = props.item.ID
+
+      await deleteMessage(itemId);
+
+      // delete dom id #message-{{ item.ID }}
+      console.log("delete", `message-${itemId}`);
+      const messageEle = document.getElementById(`message-${itemId}`);
+      if (messageEle) {
+        // remove with animation
+        messageEle.style.transition = "height 0.5s";
+        messageEle.style.height = "0px";
+        messageEle.style.border = "0px";
+        messageEle.style.margin = "0px";
+
+        setTimeout(() => {
+          messageEle.remove();
+        }, 500);
+      }
+    };
+
     return {
       item: props.item,
       processedContent,
+      delMessage,
     };
   },
 });
diff --git a/frontend/src/components/MediaPhoto.vue b/frontend/src/components/MediaPhoto.vue
index 5affdb0..4754042 100644
--- a/frontend/src/components/MediaPhoto.vue
+++ b/frontend/src/components/MediaPhoto.vue
@@ -1,5 +1,6 @@
 <template>
-  <img :src="photoSrc()" class="max-w-full h-full max-h-full" loading="lazy" decoding="async" @click="openPreview" />
+  <img :src="photoSrc()" @click="openPreview" decoding="async" loading="lazy"
+    class="w-full max-w-full h-full max-h-full" />
   <div v-if="isPreviewVisible" class="modal" @click="closePreview">
     <img :src="photoSrc()" alt="Preview" class="preview-image" />
   </div>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 7fe077c..050ff8d 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -10,15 +10,20 @@ const router = createRouter({
       component: () => import('@/views/Home.vue'),
     },
     {
-      path: '/favorites',
-      name: 'favorites',
+      path: '/favorites/:offset(\d+)?',
+      name: 'favorite-messages',
       component: () => import('@/views/FavoriteMessages.vue'),
     },
     {
-      path: '/channels/:channel/messages',
+      path: '/channels/:channel/messages/:offset(\d+)?',
       name: 'channel-messages',
       component: () => import('@/views/ChannelMessages.vue'),
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: import('@/views/NotFound.vue'),
+    },
   ]
 })
 
diff --git a/frontend/src/services/messages.js b/frontend/src/services/messages.js
index ea58a0a..9de5971 100644
--- a/frontend/src/services/messages.js
+++ b/frontend/src/services/messages.js
@@ -36,3 +36,10 @@ export async function getFavoriteMessages(params) {
   const resp = await http.get(`/favorites`, { params });
   return processResponseMessage(resp.data);
 }
+
+export async function deleteMessage(messageId) {
+  // return mock('messages', processResponseMessage)
+
+  const resp = await http.delete(`/messages/${messageId}`)
+  return resp.data;
+}
diff --git a/frontend/src/views/ChannelMessages.vue b/frontend/src/views/ChannelMessages.vue
index 5344eee..351dff9 100644
--- a/frontend/src/views/ChannelMessages.vue
+++ b/frontend/src/views/ChannelMessages.vue
@@ -16,16 +16,31 @@ import ListItem from "@/components/ListItem.vue";
 import { getChannel } from "@/services/channels";
 import { getChannelMessages } from "@/services/messages";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
+const router = useRouter();
+
 
 const channel = ref({});
 const messages = ref([]);
 
 const loadMore = async () => {
-  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
-  messages.value.push(...items);
+  // router goto next page
+  // offset is last message ID
+  const offset = messages.value[messages.value.length - 1].ID
+  router.push({
+    name: "channel-messages",
+    params: {
+      channel: route.params.channel,
+      offset: offset,
+    },
+  });
+
+  messages.value = await getChannelMessages(route.params.channel, { offset: offset });
+  console.log("messages", messages.value);
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {
@@ -34,7 +49,7 @@ onMounted(async () => {
   console.log("channel", channel.value);
 
   // get channel messages
-  messages.value = await getChannelMessages(route.params.channel);
+  messages.value = await getChannelMessages(route.params.channel, { offset: route.params.offset });
   console.log("messages", messages.value);
 });
 </script>
diff --git a/frontend/src/views/FavoriteMessages.vue b/frontend/src/views/FavoriteMessages.vue
index a24e856..a983ed4 100644
--- a/frontend/src/views/FavoriteMessages.vue
+++ b/frontend/src/views/FavoriteMessages.vue
@@ -17,15 +17,31 @@
 import ListItem from "@/components/ListItem.vue";
 import { getFavoriteMessages } from "@/services/messages";
 import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const messages = ref([]);
 
 const loadMore = async () => {
-  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
-  messages.value.push(...items);
+  // router goto next page
+  // offset is last message ID
+  const offset = messages.value[messages.value.length - 1].ID
+  router.push({
+    name: "favorite-messages",
+    params: {
+      channel: route.params.channel,
+      offset: offset,
+    },
+  });
+
+  messages.value = await getFavoriteMessages({ offset: offset });
+  console.log("messages", messages.value);
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {
-  messages.value = await getFavoriteMessages();
+  messages.value = await getFavoriteMessages({ offset: route.params.offset });
 });
 </script>
diff --git a/frontend/src/views/NotFound.vue b/frontend/src/views/NotFound.vue
new file mode 100644
index 0000000..7a9b859
--- /dev/null
+++ b/frontend/src/views/NotFound.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>404 NotFound</h1>
+</template>
diff --git a/home.text b/home.text
deleted file mode 100644
index 7e12685..0000000
--- a/home.text
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div class="flex flex-col space-y-3">
-        <ListItem v-for="item in items" :key="item.id" :item="item" />
-    </div>
-</template>
-
-<script setup lang="ts">
-    import { PostItem } from '@/types'
-    import { onMounted, ref } from 'vue'
-    import ListItem from '../components/ListItem.vue'
-    import data from '../data'
-    import { } from 
-
-const items = ref<PostItem[]>([])
-
-onMounted(() => {
-    items.value = [
-        {
-            id: 1,
-            content: "Hello Man\nHow are you doing",
-            medias: data,
-        },
-    ]
-})
-</script>
\ No newline at end of file
diff --git a/internal/cmd_serve.go b/internal/cmd_serve.go
index 1ce2cc6..43265fd 100644
--- a/internal/cmd_serve.go
+++ b/internal/cmd_serve.go
@@ -7,7 +7,7 @@ import (
 
 	"exporter/database/telegram_resource/public/model"
 	"exporter/database/telegram_resource/public/table"
-	"exporter/frontend/dist"
+	"exporter/frontend"
 
 	. "github.com/go-jet/jet/v2/postgres"
 	"github.com/gofiber/fiber/v2"
@@ -42,21 +42,22 @@ func serveCmd(cmd *cobra.Command, args []string) error {
 	app.Static("/medias", "/share/telegram/outputs")
 
 	app.Use(favicon.New(favicon.Config{
-		Data: dist.Favicon,
+		Data: frontend.Favicon,
 	}))
 
 	app.Use("/assets", filesystem.New(filesystem.Config{
-		Root:       http.FS(dist.StaticDist),
-		PathPrefix: "assets",
+		Root:       http.FS(frontend.StaticDist),
+		PathPrefix: "dist/assets",
 	}))
 
 	// Initialize default config
 	app.Use(recover.New())
 
-	app.Get("/", func(c *fiber.Ctx) error {
+	indexFunc := func(c *fiber.Ctx) error {
 		c.Context().SetContentType("text/html")
-		return c.SendString(dist.IndexPage)
-	})
+		return c.SendString(frontend.IndexPage)
+	}
+	app.Get("/", indexFunc)
 
 	group := app.Group("/api")
 
@@ -202,5 +203,8 @@ func serveCmd(cmd *cobra.Command, args []string) error {
 		return nil
 	})
 
+	// not found route use frontend router
+	// handle 404
+	app.Use(indexFunc)
 	return app.Listen(fmt.Sprintf(":%d", port))
 }