diff --git a/src/pages/sq/dashboard/wa-hook/wa_hook_home.tsx b/src/pages/sq/dashboard/wa-hook/wa_hook_home.tsx
index 154a51e..1fa390c 100644
--- a/src/pages/sq/dashboard/wa-hook/wa_hook_home.tsx
+++ b/src/pages/sq/dashboard/wa-hook/wa_hook_home.tsx
@@ -4,7 +4,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import useSWR from "swr";
 
 export default function WaHookHome() {
-  const { data, error, isLoading, mutate } = useSWR("/wa-hook", apiFetch["wa-hook"].list.get,{
+  const { data, error, isLoading, mutate } = useSWR("/wa-hook", apiFetch["wa-hook"].list.get, {
     refreshInterval: 3000,
     revalidateOnFocus: true,
     revalidateOnReconnect: true,
@@ -23,7 +23,17 @@ export default function WaHookHome() {
   return (
     <Stack>
       <Title order={2}>WaHookHome</Title>
-      <pre>{JSON.stringify(data?.data?.list, null, 2)}</pre>
+      {data?.data?.list.map((item) => (
+        <Stack key={item.id}>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0]?.wa_id}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0]?.profile?.name}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.from}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.id}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.timestamp}</Text>
+          <Text key={item.id}>{item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.type}</Text>
+        </Stack>
+      ))}
     </Stack>
   );
 }
diff --git a/src/server/routes/wa_hook_route.ts b/src/server/routes/wa_hook_route.ts
index 5c90373..51fc378 100644
--- a/src/server/routes/wa_hook_route.ts
+++ b/src/server/routes/wa_hook_route.ts
@@ -122,9 +122,19 @@ const WaHookRoute = new Elysia({
         }
     })
     .get("/list", async () => {
-        const list = await prisma.waHook.findMany();
+        const list = await prisma.waHook.findMany({
+            orderBy: {
+                createdAt: "desc",
+            },
+        });
+
+        const result = list.map((item) => ({
+            id: item.id,
+            data: item.data as WAHookMessage,
+            createdAt: item.createdAt,
+        }))
         return {
-            list,
+            list: result,
         };
     }, {
         detail: {