diff --git a/package.json b/package.json
index e5a05f6fe..eb8431246 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,10 @@
     "directory-tree": "^3.5.2",
     "dotenv-cli": "^7.4.2",
     "drizzle-orm": "^0.30.10",
+    "fs-reverse": "^0.0.3",
     "glob": "10.3.10",
     "highlight.js": "^11.10.0",
+    "i": "^0.3.7",
     "image-type": "^5.2.0",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b6529a35..4cde5010e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,12 +116,18 @@ dependencies:
   drizzle-orm:
     specifier: ^0.30.10
     version: 0.30.10(mysql2@3.11.3)
+  fs-reverse:
+    specifier: ^0.0.3
+    version: 0.0.3
   glob:
     specifier: 10.3.10
     version: 10.3.10
   highlight.js:
     specifier: ^11.10.0
     version: 11.10.0
+  i:
+    specifier: ^0.3.7
+    version: 0.3.7
   image-type:
     specifier: ^5.2.0
     version: 5.2.0
@@ -4381,17 +4387,39 @@ packages:
       vue-template-compiler: 2.7.16
     dev: true
 
+  /@vue/reactivity@3.5.13:
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+    dependencies:
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/reactivity@3.5.9:
     resolution: {integrity: sha512-88ApgNZ6yPYpyYkTfXzcbWk6O8+LrPRIpa/U4AdeTzpfRUO+EUt5jemnTBVSlAUNmlYY96xa5feUNEq+BouLog==}
     dependencies:
       '@vue/shared': 3.5.9
 
+  /@vue/runtime-core@3.5.13:
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/runtime-core@3.5.9:
     resolution: {integrity: sha512-YAeP0zNkjSl5mEc1NxOg9qoAhLNbREElHAhfYbMXT57oF0ixehEEJWBhg2uvVxslCGh23JhpEAyMvJrJHW9WGg==}
     dependencies:
       '@vue/reactivity': 3.5.9
       '@vue/shared': 3.5.9
 
+  /@vue/runtime-dom@3.5.13:
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+    dev: false
+
   /@vue/runtime-dom@3.5.9:
     resolution: {integrity: sha512-5Oq/5oenpB9lw94moKvOHqBDEaMSyDmcu2HS8AtAT6/pwdo/t9fR9aVtLh6FzYGGqZR9yRfoHAN6P7goblq1aA==}
     dependencies:
@@ -4409,6 +4437,10 @@ packages:
       '@vue/shared': 3.5.9
       vue: 3.5.9(typescript@5.6.2)
 
+  /@vue/shared@3.5.13:
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+    dev: false
+
   /@vue/shared@3.5.9:
     resolution: {integrity: sha512-8wiT/m0mnsLhTME0mPgc57jv+4TipRBSAAmheUdYgiOaO6AobZPNOmm87ub4np65VVDgLcWxc+Edc++5Wyz1uA==}
 
@@ -7068,6 +7100,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /from@0.1.7:
+    resolution: {integrity: sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==}
+    dev: false
+
   /fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
     requiresBuild: true
@@ -7106,6 +7142,12 @@ packages:
       minipass: 7.1.2
     dev: true
 
+  /fs-reverse@0.0.3:
+    resolution: {integrity: sha512-zu+5yhmaWueDBAWm7y6ejj2PipVep3EQlQYdfS6r3zsfzIfTVkcdbrsqye2UovisDqogu5dJFxae/dUAOYQqBA==}
+    dependencies:
+      from: 0.1.7
+    dev: false
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -7582,6 +7624,11 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  /i@0.3.7:
+    resolution: {integrity: sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==}
+    engines: {node: '>=0.4'}
+    dev: false
+
   /iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -12085,8 +12132,8 @@ packages:
       chart.js: '=> ^3.1.0'
       vue: '>= 3'
     dependencies:
-      '@vue/runtime-core': 3.5.9
-      '@vue/runtime-dom': 3.5.9
+      '@vue/runtime-core': 3.5.13
+      '@vue/runtime-dom': 3.5.13
       chart.js: 4.4.4
       csstype: 3.1.3
       lodash-es: 4.17.21
diff --git a/src/def/index.ts b/src/def/index.ts
index 2f871cfb6..4678ea30f 100644
--- a/src/def/index.ts
+++ b/src/def/index.ts
@@ -7,6 +7,17 @@ import type {
   ScoreRankingSystem,
 } from './common'
 
+export enum LogLevel {
+  unknown = -1,
+  error = 0,
+  warn = 1,
+  info = 2,
+  http = 3,
+  verbose = 4,
+  debug = 5,
+  silly = 6,
+}
+
 export enum Lang {
   enGB = 'en-GB',
   zhCN = 'zh-CN',
diff --git a/src/pages/admin/logs.vue b/src/pages/admin/logs.vue
index 87f7d3b2b..bba01c849 100644
--- a/src/pages/admin/logs.vue
+++ b/src/pages/admin/logs.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts" async>
+import { LogLevel } from '~/def'
+
+enum Direction {
+  asc = 'asc',
+  desc = 'desc',
+}
+
 definePageMeta({
   middleware: 'admin',
 })
 
 const app = useNuxtApp()
-const last = ref(50)
-const { data: logs } = await app.$client.admin.log.last.useQuery(last)
 const { t, locale } = useI18n()
 
+const direction = ref<Direction>(Direction.desc)
+const q = reactive({
+  last: 50,
+  loglevel: LogLevel.warn,
+})
+const { data: logs, refresh } = await app.$client.admin.log.last.useQuery(q)
+watch(q, () => refresh())
+
 useHead({
   title: () => t(localeKey.title.logs.__path__),
   titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
@@ -28,6 +41,38 @@ async function truncate() {
         truncate
       </button>
     </div>
+    <div class="grid grid-cols-12 py-4 gap-4">
+      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+        <label for="loglevel" class="label">Log Level: {{ LogLevel[q.loglevel] }}</label>
+        <input id="loglevel" v-model.number="q.loglevel" type="range" min="0" max="6" class="range range-sm" step="1">
+        <div class="flex w-full justify-between px-2 text-xs">
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+          <span>|</span>
+        </div>
+      </div>
+      <div class="col-span-6 md:col-span-4 lg:col-span-2 form-control">
+        <label for="last" class="label">Last</label>
+        <input id="last" v-model.number="q.last" class="input input-sm">
+      </div>
+      <div class="col-span-6 md:col-span-4 lg:col-span-2 form-control">
+        <label for="direction" class="label">Direction</label>
+        <select id="direction" v-model="direction" class="select select-sm">
+          <option v-for="d in Object.values(Direction)" :key="d" :value="d">
+            {{ d }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="py-4">
+      <button class="btn" @click="() => refresh()">
+        fetch
+      </button>
+    </div>
     <div class="overflow-x-auto rounded border border-base-300">
       <table class="table table-sm table-zebra table-pin-rows">
         <thead>
@@ -40,9 +85,9 @@ async function truncate() {
           </tr>
         </thead>
         <tbody>
-          <tr v-for="log in logs" :key="`log-${log.timestamp}`">
+          <tr v-for="log in direction === Direction.asc ? logs : logs?.toReversed()" :key="`log-${log.timestamp}`">
             <td class="whitespace-pre">
-              {{ log.timestamp.toLocaleString(locale) }}
+              {{ new Date(log.timestamp).toLocaleString(locale) }}
             </td>
             <td class="whitespace-pre">
               {{ log.level }}
diff --git a/src/server/backend/$base/server/log.ts b/src/server/backend/$base/server/log.ts
index 3238ec1e3..3a037c687 100644
--- a/src/server/backend/$base/server/log.ts
+++ b/src/server/backend/$base/server/log.ts
@@ -1,11 +1,13 @@
 import { resolve } from 'node:path'
 import { access, rename, writeFile } from 'node:fs/promises'
 import fs from 'node:fs'
+import fsR from 'fs-reverse'
 import winston from 'winston'
 import { type Id } from '..'
 import { Monitored } from './@extends'
 import { Logger, disposeAll, observe } from '$base/logger'
 import { type UserCompact } from '~/def/user'
+import { LogLevel } from '~/def'
 
 export class LogProvider implements Monitored {
   [Monitored.status]: Monitored[typeof Monitored.status] = [Monitored.Status.Up]
@@ -15,39 +17,26 @@ export class LogProvider implements Monitored {
     LogProvider.setupFileTransports()
   }
 
-  async get(last: number) {
+  async get(opt: Partial<{ last: number; loglevel: LogLevel }>) {
+    const {
+      last = 100,
+      loglevel = LogLevel.warn,
+    } = opt
     try {
       await access(LogProvider.combined, fs.constants.R_OK)
-      return LogProvider.readLastNLinesFromFile(LogProvider.combined, last)
-        .then(lines => lines.map((line) => {
-          if (!line.trim()) {
-            return undefined
-          }
-          try {
-            const v = JSON.parse(line)
-            v.timestamp = new Date(v.timestamp)
-            return v
-          }
-          catch (e) {
-            return {
-              level: 'Worst',
-              label: 'Unknown cause, recorded bad log',
-              backend: 'Log',
-              message: line,
-              timestamp: new Date(0),
-            }
-          }
-        }).filter(TSFilter)) as Promise<{
-          [x: string]: unknown
-          level: string
-          label: string
-          backend?: string
-          timestamp: Date
-          message?: string
-          fix?: string
-        }[]>
+      return await LogProvider.readLastNLinesFromFile(LogProvider.combined, last, loglevel)
+        .then(lines => lines.filter(TSFilter)) as {
+        [x: string]: unknown
+        level: string
+        label: string
+        backend?: string
+        timestamp: Date
+        message?: string
+        fix?: string
+      }[]
     }
     catch (e) {
+      console.error(e)
       this[Monitored.status] = [Monitored.Status.Degraded]
       throw e
     }
@@ -90,27 +79,30 @@ export class LogProvider implements Monitored {
     observe(new winston.transports.File({ ...LogProvider.sharedBaseCfg, filename: LogProvider.combined }))
   }
 
-  static async readLastNLinesFromFile(filePath: string, n: number): Promise<string[]> {
-    const fileStream = fs.createReadStream(filePath, { encoding: 'utf8', highWaterMark: 1024 * 1024 })
-    const buffer: string[] = []
-    const lastNLines: string[] = []
+  static async readLastNLinesFromFile(filePath: string, n: number, level: LogLevel): Promise<Record<any, any>[]> {
+    const fileStream = fsR(filePath, { encoding: 'utf8', highWaterMark: 1024 * 1024, matcher: '\n' }) as fs.ReadStream
 
-    for await (const chunk of fileStream) {
-      const lines = chunk.split(/\r?\n/)
-      const tail = lines.pop()
-      if (tail) {
-        buffer.unshift(tail)
-      }
-      lastNLines.push(...lines.reverse())
-      if (lastNLines.length >= n) {
-        break
-      }
-    }
+    const matched = await new Promise<Array<Record<any, any> & { level: LogLevel }>>((resolve) => {
+      const matched: Array<Record<any, any> & { level: LogLevel }> = []
+      fileStream.on('data', (line) => {
+        try {
+          const json = JSON.parse(line as string)
+          if (LogLevel[json.level as keyof typeof LogLevel] <= level) {
+            matched.push(json)
+          }
+          if (matched.length >= n) {
+            resolve(matched)
+          }
+        }
+        catch {}
+      })
+      fileStream.on('end', () => {
+        resolve(matched)
+      })
+    })
 
-    if (lastNLines.length < n) {
-      lastNLines.push(...buffer)
-    }
+    fileStream.destroy()
 
-    return lastNLines.slice(0, n)
+    return matched
   }
 }
diff --git a/src/server/trpc/routers/admin/log.ts b/src/server/trpc/routers/admin/log.ts
index 4e477d3aa..960191395 100644
--- a/src/server/trpc/routers/admin/log.ts
+++ b/src/server/trpc/routers/admin/log.ts
@@ -1,14 +1,17 @@
-import { number } from 'zod'
+import { nativeEnum, number, object } from 'zod'
+import { LogLevel } from '~/def'
 import { logs } from '~/server/singleton/service'
 import { staffProcedure as pAdmin } from '~/server/trpc/middleware/role'
 import { router as _router } from '~/server/trpc/trpc'
 
 export const router = _router({
-  last: pAdmin.input(number()).query(async ({ input }) => {
-    return (await logs.get(input)).reverse()
-  }),
+  last: pAdmin
+    .input(object({ last: number(), loglevel: nativeEnum(LogLevel) }))
+    .query(async ({ input }) => {
+      return (await logs.get(input)).reverse()
+    }),
   truncate: pAdmin.mutation(async ({ ctx }) => {
     await logs.truncate(ctx.user)
-    return await logs.get(2)
+    return await logs.get({ last: 2 })
   }),
 })