diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 00000000..d058846e
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,28 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+ 
+      - name: Install and Build 🔧
+        run: |
+          pnpm i
+          pnpm run build
+ 
+      - name: Deploy 🚀
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
index 74d529ba..0f9f7db4 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,9 @@
 
 {
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleAttributePerLine": true,
diff --git a/package.json b/package.json
index a1a3fb90..458b5b5a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "sing-box-dashboard",
   "version": "1.0.0",
-  "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,11 +12,14 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@eslint/plugin-kit": "^0.2.3",
     "@heroicons/vue": "^2.1.5",
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "pretty-bytes": "^6.1.1",
     "theme-change": "^2.5.0",
     "uuid": "^11.0.3",
@@ -48,5 +50,6 @@
     "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.5.4",
     "vue-tsc": "^2.1.10"
-  }
+  },
+  "packageManager": "pnpm@9.12.1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5f4950a..f0e0a296 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@eslint/plugin-kit':
+        specifier: ^0.2.3
+        version: 0.2.3
       '@heroicons/vue':
         specifier: ^2.1.5
         version: 2.1.5(vue@3.5.12(typescript@5.6.3))
@@ -23,6 +26,12 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      prettier-plugin-organize-imports:
+        specifier: ^4.1.0
+        version: 4.1.0(prettier@3.3.3)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(prettier-plugin-organize-imports@4.1.0(prettier@3.3.3)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3)))(prettier@3.3.3)
       pretty-bytes:
         specifier: ^6.1.1
         version: 6.1.1
@@ -426,8 +435,8 @@ packages:
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.2':
-    resolution: {integrity: sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==}
+  '@eslint/plugin-kit@0.2.3':
+    resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@heroicons/vue@2.1.5':
@@ -1633,6 +1642,71 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==, tarball: https://r2.cnpmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz}
     engines: {node: '>=6.0.0'}
 
+  prettier-plugin-organize-imports@4.1.0:
+    resolution: {integrity: sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==}
+    peerDependencies:
+      prettier: '>=2.0'
+      typescript: '>=2.9'
+      vue-tsc: ^2.1.0
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
+  prettier-plugin-tailwindcss@0.6.9:
+    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.3.3:
     resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
@@ -2314,7 +2388,7 @@ snapshots:
 
   '@eslint/object-schema@2.1.4': {}
 
-  '@eslint/plugin-kit@0.2.2':
+  '@eslint/plugin-kit@0.2.3':
     dependencies:
       levn: 0.4.1
 
@@ -3023,7 +3097,7 @@ snapshots:
       '@eslint/core': 0.7.0
       '@eslint/eslintrc': 3.1.0
       '@eslint/js': 9.14.0
-      '@eslint/plugin-kit': 0.2.2
+      '@eslint/plugin-kit': 0.2.3
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.1
@@ -3508,6 +3582,19 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
+  prettier-plugin-organize-imports@4.1.0(prettier@3.3.3)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3)):
+    dependencies:
+      prettier: 3.3.3
+      typescript: 5.6.3
+    optionalDependencies:
+      vue-tsc: 2.1.10(typescript@5.6.3)
+
+  prettier-plugin-tailwindcss@0.6.9(prettier-plugin-organize-imports@4.1.0(prettier@3.3.3)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3)))(prettier@3.3.3):
+    dependencies:
+      prettier: 3.3.3
+    optionalDependencies:
+      prettier-plugin-organize-imports: 4.1.0(prettier@3.3.3)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
+
   prettier@3.3.3: {}
 
   pretty-bytes@6.1.1: {}
diff --git a/src/App.vue b/src/App.vue
index 677b7e32..fe8b4d10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import Home from './views/HomePage.vue';
-import SetupPage from './views/SetupPage.vue';
-import { activeBackend } from './store/setup';
-
+import { theme } from './store/config'
+import { activeBackend } from './store/setup'
+import Home from './views/HomePage.vue'
+import SetupPage from './views/SetupPage.vue'
 </script>
 
 <template>
-  <div class="h-dvh w-screen overflow-x-hidden bg-base-100 flex">
+  <div
+    class="flex h-dvh w-screen overflow-x-hidden bg-base-100"
+    :data-theme="theme"
+  >
     <SetupPage v-if="!activeBackend"></SetupPage>
     <Home v-else></Home>
   </div>
diff --git a/src/api/index.ts b/src/api/index.ts
index 09e3a4a5..629cc632 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -5,7 +5,12 @@ import axios from 'axios'
 import { ref, watch } from 'vue'
 
 axios.interceptors.request.use((config) => {
-  config.baseURL = activeBackend.value?.protocol + '://' + activeBackend.value?.host + ':' + activeBackend.value?.port
+  config.baseURL =
+    activeBackend.value?.protocol +
+    '://' +
+    activeBackend.value?.host +
+    ':' +
+    activeBackend.value?.port
   config.headers['Authorization'] = 'Bearer ' + activeBackend.value?.password
   return config
 })
@@ -15,19 +20,23 @@ export const fetchVersionAPI = () => {
   return axios.get<{ version: string }>('/version')
 }
 
-watch(activeBackend, async (val) => {
-  if (val) {
-    const { data } = await fetchVersionAPI()
+watch(
+  activeBackend,
+  async (val) => {
+    if (val) {
+      const { data } = await fetchVersionAPI()
 
-    version.value = data.version
-  }
-}, { immediate: true })
+      version.value = data.version
+    }
+  },
+  { immediate: true },
+)
 
 export const fetchProxiesAPI = () => {
   return axios.get<{ proxies: Record<string, Proxy> }>('/proxies')
 }
 
-export const selectProxyAPI = (proxyGroup: string ,name: string) => {
+export const selectProxyAPI = (proxyGroup: string, name: string) => {
   return axios.put(`/proxies/${encodeURIComponent(proxyGroup)}`, { name })
 }
 
@@ -35,8 +44,8 @@ export const fetchProxyLatencyAPI = (proxyName: string, url: string, timeout: nu
   return axios.get<{ delay: number }>(`/proxies/${encodeURIComponent(proxyName)}/delay`, {
     params: {
       url,
-      timeout
-    }
+      timeout,
+    },
   })
 }
 
@@ -44,8 +53,8 @@ export const fetchProxyGroupLatencyAPI = (proxyName: string, url: string, timeou
   return axios.get<{ delay: number }>(`/group/${encodeURIComponent(proxyName)}/delay`, {
     params: {
       url,
-      timeout
-    }
+      timeout,
+    },
   })
 }
 
@@ -73,18 +82,30 @@ export const flushFakeIPAPI = () => {
   return axios.post('/cache/fakeip/flush')
 }
 
-const getWsUrl = (url: string) => {
-  return `${activeBackend.value?.protocol === 'https' ? 'wss' : 'ws'}://${activeBackend.value?.host}:${activeBackend.value?.port}/${url}?token=${activeBackend.value?.password}`
+const createWebSocket = <T>(url: string, searchParams?: Record<string, string>) => {
+  const backend = activeBackend.value
+  const resurl = new URL(
+    `${backend?.protocol === 'https' ? 'wss' : 'ws'}://${backend?.host}:${backend?.port}/${url}`,
+  )
+
+  resurl.searchParams.append('token', backend?.password || '')
+
+  if (searchParams) {
+    Object.entries(searchParams).forEach(([key, value]) => {
+      resurl.searchParams.append(key, value)
+    })
+  }
+
+  return useWebSocket<T>(resurl, {
+    autoClose: false,
+    autoReconnect: true,
+  })
 }
 
 export const fetchConnectionsAPI = <T>() => {
-  return useWebSocket<T>(
-    getWsUrl('connections'),
-  )
+  return createWebSocket<T>('connections')
 }
 
-export const fetchLogsAPI = <T>() => {
-  return useWebSocket<T>(
-    getWsUrl('logs'),
-  )
-}
\ No newline at end of file
+export const fetchLogsAPI = <T>(params: Record<string, string> = {}) => {
+  return createWebSocket<T>('logs', params)
+}
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 75656603..00000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/assets/main.css b/src/assets/main.css
index bd6213e1..b5c61c95 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/src/components/ConnectionCard.tsx b/src/components/ConnectionCard.tsx
index 398ab13c..74798e66 100644
--- a/src/components/ConnectionCard.tsx
+++ b/src/components/ConnectionCard.tsx
@@ -1,145 +1,143 @@
-
-import { disconnectByIdAPI } from '@/api';
-import { isLargeScreen } from '@/helper';
-import { language, compactConnectionCard } from '@/store/config';
-import type { Connection } from '@/types';
-import { ArrowDownIcon, ArrowUpIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
-import dayjs from 'dayjs';
-import prettyBytes from 'pretty-bytes';
-import { defineComponent } from 'vue';
+import { disconnectByIdAPI } from '@/api'
+import { isLargeScreen } from '@/helper'
+import { compactConnectionCard, language } from '@/store/config'
+import type { Connection } from '@/types'
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/outline'
+import dayjs from 'dayjs'
+import prettyBytes from 'pretty-bytes'
+import { defineComponent } from 'vue'
 
 export default defineComponent<{
   conn: Connection
 }>({
   props: {
-    conn: Object
+    conn: Object,
   },
   name: 'ConnectionCard',
   setup(props, { emit }) {
     return () => {
       const flex1 = <span class="flex-1"></span>
       const host = (
-        <span class="text-primary text-xs md:w-80 shrink-0">
-          { props.conn.metadata.host || props.conn.metadata.destinationIP }
-          <span class="hidden sm:inline">:{ props.conn.metadata.destinationPort }</span>
+        <span class="w-80 text-xs text-primary sm:text-sm">
+          {props.conn.metadata.host || props.conn.metadata.destinationIP}
+          <span class="hidden sm:inline">:{props.conn.metadata.destinationPort}</span>
         </span>
       )
       const download = (
-        <div class="badge bg-base-200 text-base-content text-xs flex">
-          <ArrowDownIcon class="w-3 h-4"/>
-          <div class="w-14 text-right">{ prettyBytes(props.conn.download) } (</div>
-          <div class="w-16 text-right">{ prettyBytes(props.conn.downloadSpeed) }/s )</div>
+        <div class="badge flex bg-base-200 px-1 text-xs text-base-content">
+          <ArrowDownIcon class="h-4 w-3" />
+          <div class="hidden w-16 text-right sm:inline">{prettyBytes(props.conn.download)} | </div>
+          <div class="w-20 text-right">{prettyBytes(props.conn.downloadSpeed)}/s</div>
         </div>
       )
       const uploadCompact = (
-        <div class="badge bg-base-200 text-base-content text-xs hidden 2xl:flex">
-          <ArrowUpIcon class="w-3 h-4"/>
-          <div class="w-14 text-right">{ prettyBytes(props.conn.upload) } (</div>
-          <div class="w-16 text-right">{ prettyBytes(props.conn.uploadSpeed) }/s )</div>
+        <div class="badge hidden bg-base-200 px-1 text-xs text-base-content 2xl:flex">
+          <ArrowUpIcon class="h-4 w-3" />
+          <div class="w-16 text-right">{prettyBytes(props.conn.upload)} | </div>
+          <div class="w-20 text-right">{prettyBytes(props.conn.uploadSpeed)}/s</div>
         </div>
       )
       const upload = (
-        <div class="badge bg-base-200 text-base-content text-xs hidden lg:flex">
-          <ArrowUpIcon class="w-3 h-4"/>
-          <div class="w-14 text-right">{ prettyBytes(props.conn.upload) } (</div>
-          <div class="w-16 text-right">{ prettyBytes(props.conn.uploadSpeed) }/s )</div>
+        <div class="badge hidden bg-base-200 px-1 text-xs text-base-content lg:flex">
+          <ArrowUpIcon class="h-4 w-3" />
+          <div class="w-16 text-right">{prettyBytes(props.conn.upload)} | </div>
+          <div class="w-20 text-right">{prettyBytes(props.conn.uploadSpeed)}/s</div>
         </div>
       )
 
       const info = (
-        <button class="btn btn-xs btn-circle" onClick={() => emit('info', props.conn)}>
-          <InformationCircleIcon class="w-4 h-4"/>
-        </button>
-      )
-      const disconnect = (
-        <button onClick={() => disconnectByIdAPI(props.conn.id)}>
-          <XMarkIcon class="w-4 h-4"/>
-        </button>
+        <div class="flex w-12 gap-1">
+          <button onClick={() => emit('info', props.conn)}>
+            <InformationCircleIcon class="h-4 w-4" />
+          </button>
+          <button onClick={() => disconnectByIdAPI(props.conn.id)}>
+            <XMarkIcon class="h-4 w-4" />
+          </button>
+        </div>
       )
       const chians = (
-        <span class="text-xs inline w-44 shrink-0">
-          { [...props.conn.chains].reverse().join('->') }
-        </span>
-      )
-      const rule = (
-        <span class="text-xs w-auto hidden xl:inline">
-          { props.conn.rule }
-        </span>
+        <span class="inline w-44 text-xs">{[...props.conn.chains].reverse().join('->')}</span>
       )
+      const rule = <span class="hidden text-xs xl:inline">{props.conn.rule}</span>
       const processPath = (
-        <span class={`text-xs w-56 shrink-0 hidden lg:inline`}>
-          { props.conn.metadata.processPath }
+        <span class={`hidden min-w-48 px-2 text-xs 2xl:inline`}>
+          {props.conn.metadata.processPath}
         </span>
       )
       const startTime = (
-        <span class="text-xs inline lg:w-28 shrink-0">
-          { dayjs(props.conn.start).locale(language.value).fromNow() }
+        <span class="inline w-32 whitespace-nowrap text-right text-xs">
+          {dayjs(props.conn.start).locale(language.value).fromNow()}
         </span>
       )
       const type = (
-        <span class={`text-xs w-36 shrink-0 hidden xl:inline`}>
-          { props.conn.metadata.type } | { props.conn.metadata.network }
+        <span class={`hidden shrink-0 text-xs lg:inline`}>
+          {props.conn.metadata.type} | {props.conn.metadata.network}
         </span>
       )
       const typeCompact = (
-        <span class={`text-xs w-36 shrink-0 hidden md:inline`}>
-          { props.conn.metadata.type } | { props.conn.metadata.network }
+        <span class={`hidden shrink-0 text-xs md:inline`}>
+          {props.conn.metadata.type} | {props.conn.metadata.network}
         </span>
       )
       const connection = (
-        <span class="text-xs hidden 2xl:flex gap-1 w-60 shrink-0">
-          <span>{ props.conn.metadata.sourceIP }:{ props.conn.metadata.sourcePort }</span>
+        <span class="hidden min-w-64 gap-1 truncate text-xs xl:flex">
+          <span>
+            {props.conn.metadata.sourceIP}:{props.conn.metadata.sourcePort}
+          </span>
           <span>-&gt;</span>
-          <span>{ props.conn.metadata.destinationIP }:{ props.conn.metadata.destinationPort }</span>
+          <span>
+            {props.conn.metadata.destinationIP}:{props.conn.metadata.destinationPort}
+          </span>
         </span>
       )
       const connectionCompact = (
-        <span class="text-xs hidden 3xl:flex gap-1 w-60 shrink-0">
-          <span>{ props.conn.metadata.sourceIP }</span>
+        <span class="hidden min-w-48 gap-1 truncate text-xs 3xl:flex">
+          <span>{props.conn.metadata.sourceIP}</span>
           <span>-&gt;</span>
-          <span>{ props.conn.metadata.destinationIP }</span>
+          <span>{props.conn.metadata.destinationIP}</span>
         </span>
       )
 
       if (isLargeScreen.value && compactConnectionCard.value) {
         return (
-          <div class="card flex-row items-center w-full bg-base-100 shadow-xl px-2 py-1 gap-1">
-            { host }
-            { chians }
-            { flex1 }
-            { connectionCompact }
-            { typeCompact }
-            { download }
-            { uploadCompact }
-            { startTime } 
-            { info }
-            { disconnect }
+          <div class="card w-full flex-row items-center justify-between gap-1 bg-base-100 px-2 py-1 shadow-xl">
+            {host}
+            {chians}
+            {connectionCompact}
+            {typeCompact}
+            {download}
+            {uploadCompact}
+            {startTime}
+            {info}
           </div>
         )
       } else {
         return (
-          <div class="card w-full bg-base-100 shadow-xl p-1 gap-1">
+          <div class="card w-full gap-[2px] bg-base-100 px-2 py-[1px] shadow-xl">
             <div class="flex flex-row items-center gap-1 px-1">
-              { host }
-              { flex1 }
-              { connection }
-              { type }
-              { download }
-              { upload }
+              {host}
+              {flex1}
+              {processPath}
+              {connection}
+              {download}
+              {upload}
             </div>
             <div class="flex flex-row items-center gap-1 px-1">
-              { chians }
-              { rule }
-              { flex1 }
-              { processPath }
-              { startTime }
-              { info }
-              { disconnect }
+              {chians}
+              {rule}
+              {flex1}
+              {type}
+              {startTime}
+              {info}
             </div>
           </div>
         )
       }
     }
-  }
+  },
 })
-
diff --git a/src/components/LatencyTag.vue b/src/components/LatencyTag.vue
index 0e10042f..b96c6a48 100644
--- a/src/components/LatencyTag.vue
+++ b/src/components/LatencyTag.vue
@@ -1,17 +1,23 @@
 <template>
-  <div class="w-12 badge shadow-sm flex items-center justify-center">
-    <div :class="twMerge('text-xs', color)" v-if="latency > 0">
+  <div class="badge flex w-12 items-center justify-center shadow-sm">
+    <div
+      :class="twMerge('text-xs', color)"
+      v-if="latency > 0"
+    >
       {{ latency }}ms
     </div>
-    <BoltIcon v-else class="w-4 h-4"/>
+    <BoltIcon
+      v-else
+      class="h-4 w-4"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { getLatencyByName } from '@/store/proxies';
-import { twMerge } from 'tailwind-merge';
-import { computed } from 'vue';
-import { BoltIcon } from '@heroicons/vue/24/outline';
+import { getLatencyByName } from '@/store/proxies'
+import { BoltIcon } from '@heroicons/vue/24/outline'
+import { twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
 const props = defineProps<{
   name: string
 }>()
@@ -26,4 +32,4 @@ const color = computed(() => {
     return 'text-red-500'
   }
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/ProxyGroup.vue b/src/components/ProxyGroup.vue
index 13f2eac5..446bf3ca 100644
--- a/src/components/ProxyGroup.vue
+++ b/src/components/ProxyGroup.vue
@@ -8,39 +8,58 @@
         <div class="text-sm">
           {{ proxyGroup.now }}
         </div>
-        <LatencyTag :class="twMerge('z-10', isLatencyTesting ? 'animate-pulse' : '')" :name="proxyGroup.now"
-          @click.stop="handlerLatencyTest" />
+        <LatencyTag
+          :class="twMerge('z-10', isLatencyTesting ? 'animate-pulse' : '')"
+          :name="proxyGroup.now"
+          @click.stop="handlerLatencyTest"
+        />
         <div class="flex-1" />
-        <div class="text-sm">
-          {{ prettyBytes(downloadTotal) }}/s
-        </div>
+        <div class="text-sm">{{ prettyBytes(downloadTotal) }}/s</div>
       </div>
-      <div class="flex flex-wrap gap-1 pt-2" v-if="!showCollapse">
-        <div v-for="node in proxyGroup.all" :key="node" class="shadow-sm w-4 h-4 rounded-full flex items-center justify-center"
-          :class="getBgColor(getLatencyByName(node))">
-          <div class="w-2 h-2 rounded-full bg-white" v-if="proxyGroup.now === node"></div>
+      <div
+        class="flex flex-wrap gap-1 pt-2"
+        v-if="!showCollapse"
+      >
+        <div
+          v-for="node in proxyGroup.all"
+          :key="node"
+          class="flex h-4 w-4 items-center justify-center rounded-full shadow-sm"
+          :class="getBgColor(getLatencyByName(node))"
+        >
+          <div
+            class="h-2 w-2 rounded-full bg-white"
+            v-if="proxyGroup.now === node"
+          ></div>
         </div>
       </div>
     </div>
-    <input type="checkbox" v-model="showCollapse" />
+    <input
+      type="checkbox"
+      v-model="showCollapse"
+    />
     <div class="collapse-content flex flex-col gap-2">
       <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
-        <ProxyNodeCard v-for="node in proxyGroup.all" :key="node" :name="node" :active="node === proxyGroup.now"
-          @click="selectProxy(proxyGroup.name, node)" />
+        <ProxyNodeCard
+          v-for="node in proxyGroup.all"
+          :key="node"
+          :name="node"
+          :active="node === proxyGroup.now"
+          @click="selectProxy(proxyGroup.name, node)"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import LatencyTag from '@/components/LatencyTag.vue';
-import ProxyNodeCard from '@/components/ProxyNodeCard.vue';
-import { collapseGroupMap } from '@/store/config';
-import { activeConnections } from '@/store/connections';
-import { selectProxy, proxyMap, proxyGroupLatencyTest, getLatencyByName } from '@/store/proxies';
-import prettyBytes from 'pretty-bytes';
-import { twMerge } from 'tailwind-merge';
-import { computed, ref } from 'vue';
+import LatencyTag from '@/components/LatencyTag.vue'
+import ProxyNodeCard from '@/components/ProxyNodeCard.vue'
+import { collapseGroupMap } from '@/store/config'
+import { activeConnections } from '@/store/connections'
+import { getLatencyByName, proxyGroupLatencyTest, proxyMap, selectProxy } from '@/store/proxies'
+import prettyBytes from 'pretty-bytes'
+import { twMerge } from 'tailwind-merge'
+import { computed, ref } from 'vue'
 const props = defineProps<{
   name: string
 }>()
@@ -61,7 +80,7 @@ const showCollapse = computed({
   },
   set(value) {
     collapseGroupMap.value[props.name] = value
-  }
+  },
 })
 const proxyGroup = computed(() => proxyMap.value[props.name])
 const isLatencyTesting = ref(false)
@@ -79,4 +98,4 @@ const downloadTotal = computed(() => {
 
   return speed
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/ProxyNodeCard.vue b/src/components/ProxyNodeCard.vue
index 17a047d9..fe4434b5 100644
--- a/src/components/ProxyNodeCard.vue
+++ b/src/components/ProxyNodeCard.vue
@@ -1,24 +1,32 @@
 <template>
-  <div :class="twMerge(
-    'flex rounded-md bg-base-200 shadow-md p-2 items-center gap-2 cursor-pointer',
-    props.active && 'bg-primary text-primary-content'
-  )">
+  <div
+    :class="
+      twMerge(
+        'flex cursor-pointer items-center gap-2 rounded-md bg-base-200 p-2 shadow-md',
+        props.active && 'bg-primary text-primary-content',
+      )
+    "
+  >
     <div class="flex-1 text-xs md:text-sm">{{ node.name }}</div>
-    <div class="flex gap-2 items-center text-xs">
+    <div class="flex items-center gap-2 text-xs">
       <div class="flex-1">
         <span>{{ typeFormatter(node.type) }}</span>
         <span v-if="node.udp"> | udp</span>
       </div>
-      <LatencyTag :class="isLatencyTesting ? 'animate-pulse' : ''" :name="node.name" @click.stop="handlerLatencyTest"/>
+      <LatencyTag
+        :class="isLatencyTesting ? 'animate-pulse' : ''"
+        :name="node.name"
+        @click.stop="handlerLatencyTest"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { proxyLatencyTest, proxyMap } from '@/store/proxies';
-import { twMerge } from 'tailwind-merge';
-import LatencyTag from './LatencyTag.vue';
-import { computed, ref } from 'vue';
+import { proxyLatencyTest, proxyMap } from '@/store/proxies'
+import { twMerge } from 'tailwind-merge'
+import { computed, ref } from 'vue'
+import LatencyTag from './LatencyTag.vue'
 
 const props = defineProps<{
   name: string
@@ -41,5 +49,4 @@ const handlerLatencyTest = async () => {
   await proxyLatencyTest(props.name)
   isLatencyTesting.value = false
 }
-
 </script>
diff --git a/src/components/sidebar/CommonCtrl.vue b/src/components/sidebar/CommonCtrl.vue
index 43a94599..ff2e5987 100644
--- a/src/components/sidebar/CommonCtrl.vue
+++ b/src/components/sidebar/CommonCtrl.vue
@@ -1,42 +1,104 @@
 <template>
-  <div class="flex flex-col gap-2">
-    <div class="flex">
-      <div class="text-xs flex flex-col gap-2 p-2">
-        <div>{{ $t('connections') }}: {{ activeConnections.length }}</div>
-        <div>{{ $t('download') }}: {{ prettyBytes(downloadTotal) }} ({{ prettyBytes(downloadSpeedTotal) }}/s)</div>
-        <div>{{ $t('upload') }}: {{ prettyBytes(uploadTotal) }} ({{ prettyBytes(uploadSpeedTotal) }}/s)</div>
-        <div>{{ $t('memoryUsage') }}: {{ prettyBytes(memory) }}</div>
-        <div>{{ $t('version') }}: {{ version }}</div>
-        <div class="flex gap-2">
-          <select class="select select-xs w-48 select-bordered" v-model="activeUuid">
-            <option v-for="opt in opts" :key="opt.value" :value="opt.value" >{{ opt.label }}</option>
-          </select>
-          <button class="btn btn-xs btn-circle" @click="addBackend">
-            <PlusIcon class="w-4 h-4" />
-          </button>
-        </div>
+  <div class="flex justify-between">
+    <div class="flex flex-col gap-2 p-2 text-xs">
+      <div>{{ $t('connections') }}: {{ activeConnections.length }}</div>
+      <div>
+        {{ $t('download') }}: {{ prettyBytes(downloadTotal) }} ({{
+          prettyBytes(downloadSpeedTotal)
+        }}/s)
       </div>
-      <div class="flex justify-end items-end flex-1 p-2">
-        <LanguageIcon class="w-6 h-6 cursor-pointer" @click="swapLanguage"></LanguageIcon>
-        <label class="swap swap-rotate">
-          <input type="checkbox" class="theme-controller" v-model="isDark" value="dark" />
-          <SunIcon class="swap-off h-6 w-6 fill-current" />
-          <MoonIcon class="swap-on h-6 w-6 fill-current" />
-        </label>
+      <div>
+        {{ $t('upload') }}: {{ prettyBytes(uploadTotal) }} ({{ prettyBytes(uploadSpeedTotal) }}/s)
       </div>
+      <div>{{ $t('memoryUsage') }}: {{ prettyBytes(memory) }}</div>
+      <div>{{ $t('version') }}: {{ version }}</div>
+      <select
+        class="select select-bordered select-xs w-48"
+        v-model="theme"
+      >
+        <option
+          v-for="opt in themes"
+          :key="opt"
+          :value="opt"
+        >
+          {{ opt }}
+        </option>
+      </select>
+      <div class="flex gap-2">
+        <select
+          class="select select-bordered select-xs w-48"
+          v-model="activeUuid"
+        >
+          <option
+            v-for="opt in opts"
+            :key="opt.value"
+            :value="opt.value"
+          >
+            {{ opt.label }}
+          </option>
+        </select>
+        <button
+          class="btn btn-circle btn-xs"
+          @click="addBackend"
+        >
+          <PlusIcon class="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-1 items-end justify-end p-2">
+      <LanguageIcon
+        class="h-6 w-6 cursor-pointer"
+        @click="swapLanguage"
+      ></LanguageIcon>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { version } from '@/api';
-import { i18n } from '@/i18n';
-import { isDark, LANG, language } from '@/store/config';
-import { activeConnections, downloadTotal, memory, uploadTotal } from '@/store/connections';
-import { activeUuid, backendList } from '@/store/setup';
-import { SunIcon, MoonIcon, LanguageIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import prettyBytes from 'pretty-bytes';
-import { computed } from 'vue';
+import { version } from '@/api'
+import { i18n } from '@/i18n'
+import { LANG, language, theme } from '@/store/config'
+import { activeConnections, downloadTotal, memory, uploadTotal } from '@/store/connections'
+import { activeUuid, backendList } from '@/store/setup'
+import { LanguageIcon, PlusIcon } from '@heroicons/vue/24/outline'
+import prettyBytes from 'pretty-bytes'
+import { computed } from 'vue'
+
+const themes = [
+  'default',
+  'light',
+  'dark',
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'corporate',
+  'synthwave',
+  'retro',
+  'cyberpunk',
+  'valentine',
+  'halloween',
+  'garden',
+  'forest',
+  'aqua',
+  'lofi',
+  'pastel',
+  'fantasy',
+  'wireframe',
+  'black',
+  'luxury',
+  'dracula',
+  'cmyk',
+  'autumn',
+  'business',
+  'acid',
+  'lemonade',
+  'night',
+  'coffee',
+  'winter',
+  'dim',
+  'nord',
+  'sunset',
+]
 
 const downloadSpeedTotal = computed(() => {
   return activeConnections.value.reduce((total, conn) => {
@@ -54,7 +116,7 @@ const opts = computed(() => {
   return backendList.value.map((b) => {
     return {
       label: `${b.protocol}://${b.host}:${b.port}`,
-      value: b.uuid
+      value: b.uuid,
     }
   })
 })
@@ -67,5 +129,4 @@ const swapLanguage = () => {
   language.value = language.value === LANG.ZH_CN ? LANG.EN_US : LANG.ZH_CN
   i18n.global.locale = language.value
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/sidebar/ConnectionCtrl.vue b/src/components/sidebar/ConnectionCtrl.vue
index 97314378..63275ef4 100644
--- a/src/components/sidebar/ConnectionCtrl.vue
+++ b/src/components/sidebar/ConnectionCtrl.vue
@@ -1,43 +1,96 @@
 <template>
-  <div class="p-2 flex flex-col gap-2 text-sm">
-    <div class="flex items-center gap-2" v-if="isLargeScreen">
+  <div class="flex flex-col gap-2 p-2 text-sm">
+    <div
+      class="flex items-center gap-2"
+      v-if="isLargeScreen"
+    >
       {{ $t('compactCard') }}:
-      <input type="checkbox" class="toggle" v-model="compactConnectionCard" />
+      <input
+        type="checkbox"
+        class="toggle"
+        v-model="compactConnectionCard"
+      />
     </div>
     <div class="flex items-center gap-2">
-      {{ $t('sortBy') }}: 
-      <select class="select select-bordered select-sm" v-model="connectionSortType">
-        <option v-for="opt in Object.values(sortType)" :key="opt" :value="opt">{{ $t(opt) || opt }}</option>
+      {{ showActiveConnections ? $t('activeConnections') : $t('closedConnections') }}:
+      <input
+        type="checkbox"
+        class="toggle"
+        v-model="showActiveConnections"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      {{ $t('sortBy') }}:
+      <select
+        class="select select-bordered select-sm"
+        v-model="connectionSortType"
+      >
+        <option
+          v-for="opt in Object.values(SORT_TYPE)"
+          :key="opt"
+          :value="opt"
+        >
+          {{ $t(opt) || opt }}
+        </option>
       </select>
     </div>
     <div class="flex items-center gap-2">
-      {{ $t('quickFilter') }}: 
-      <input type="text" class="input input-bordered input-sm w-32 join-item" v-model="quickFilterRegex" />
-      <input type="checkbox" class="toggle" v-model="quickFilterEnabled" />
+      {{ $t('quickFilter') }}:
+      <input
+        type="text"
+        class="input input-sm join-item input-bordered w-32"
+        v-model="quickFilterRegex"
+      />
+      <input
+        type="checkbox"
+        class="toggle"
+        v-model="quickFilterEnabled"
+      />
     </div>
     <div class="join">
-      <input type="text" class="input input-bordered input-sm join-item" v-model="connectionFilter" />
-      <button class="btn btn-bordered btn-sm join-item" @click="isPaused = !isPaused">
-        <component :is="!isPaused ? PauseIcon : PlayIcon" class="w-4 h-4" />
+      <input
+        type="text"
+        class="input input-sm join-item input-bordered"
+        v-model="connectionFilter"
+      />
+      <button
+        class="btn-bordered btn join-item btn-sm"
+        @click="isPaused = !isPaused"
+      >
+        <component
+          :is="!isPaused ? PauseIcon : PlayIcon"
+          class="h-4 w-4"
+        />
       </button>
-      <button class="btn btn-bordered btn-sm join-item" @click="handlerClickCloseAll">
-        <XMarkIcon class="w-4 h-4" />
+      <button
+        class="btn-bordered btn join-item btn-sm"
+        @click="handlerClickCloseAll"
+      >
+        <XMarkIcon class="h-4 w-4" />
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { disconnectByIdAPI } from '@/api';
-import { isLargeScreen } from '@/helper';
-import { compactConnectionCard } from '@/store/config';
-import { connectionFilter, connectionSortType, isPaused, quickFilterEnabled, quickFilterRegex, renderConnections, sortType } from '@/store/connections';
-import { PauseIcon, PlayIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { disconnectByIdAPI } from '@/api'
+import { isLargeScreen } from '@/helper'
+import { compactConnectionCard } from '@/store/config'
+import {
+  connectionFilter,
+  connectionSortType,
+  isPaused,
+  quickFilterEnabled,
+  quickFilterRegex,
+  renderConnections,
+  showActiveConnections,
+  SORT_TYPE,
+} from '@/store/connections'
+import { PauseIcon, PlayIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 const handlerClickCloseAll = () => {
-  renderConnections.value.forEach(conn => {
+  renderConnections.value.forEach((conn) => {
     disconnectByIdAPI(conn.id)
   })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/sidebar/LogsCtrl.vue b/src/components/sidebar/LogsCtrl.vue
index 9dd61278..8186b312 100644
--- a/src/components/sidebar/LogsCtrl.vue
+++ b/src/components/sidebar/LogsCtrl.vue
@@ -1,15 +1,41 @@
 <template>
-  <div class="join p-2">
-    <input type="text" class="input input-bordered input-sm join-item" v-model="logFilter" />
-    <button class="btn btn-bordered btn-sm join-item" @click="isPaused = !isPaused">
-      <component :is="!isPaused ? PauseIcon : PlayIcon" class="w-4 h-4" />
-    </button>
+  <div class="flex flex-col gap-2 p-2 text-sm">
+    <div class="flex items-center gap-2">
+      {{ $t('logLevel') }}:
+      <select
+        class="select select-bordered select-sm"
+        v-model="logLevel"
+        @change="initLogs"
+      >
+        <option
+          v-for="opt in Object.values(LOG_LEVEL)"
+          :key="opt"
+          :value="opt"
+        >
+          {{ opt }}
+        </option>
+      </select>
+    </div>
+    <div class="join">
+      <input
+        type="text"
+        class="input input-sm join-item input-bordered"
+        v-model="logFilter"
+      />
+      <button
+        class="btn-bordered btn join-item btn-sm"
+        @click="isPaused = !isPaused"
+      >
+        <component
+          :is="!isPaused ? PauseIcon : PlayIcon"
+          class="h-4 w-4"
+        />
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { logFilter, isPaused } from '@/store/logs';
-import { PauseIcon, PlayIcon } from '@heroicons/vue/24/outline';
-
-
-</script>
\ No newline at end of file
+import { initLogs, isPaused, LOG_LEVEL, logFilter, logLevel } from '@/store/logs'
+import { PauseIcon, PlayIcon } from '@heroicons/vue/24/outline'
+</script>
diff --git a/src/components/sidebar/ProxiesCtrl.vue b/src/components/sidebar/ProxiesCtrl.vue
index 2d672444..87f0490c 100644
--- a/src/components/sidebar/ProxiesCtrl.vue
+++ b/src/components/sidebar/ProxiesCtrl.vue
@@ -1,21 +1,37 @@
 <template>
-  <div class="p-2 flex flex-col gap-2" v-if="configs">
-    <button class="btn btn-sm w-full" @click="flushFakeIPAPI">{{ $t('flushFakeIP') }}</button>
-    <select class="select select-sm w-full select-bordered" :value="configs.mode" @change="handlerModeChange">
+  <div
+    class="flex flex-col gap-2 p-2"
+    v-if="configs"
+  >
+    <button
+      class="btn btn-sm w-full"
+      @click="flushFakeIPAPI"
+    >
+      {{ $t('flushFakeIP') }}
+    </button>
+    <select
+      class="select select-bordered select-sm w-full"
+      :value="configs.mode"
+      @change="handlerModeChange"
+    >
       <option>Direct</option>
       <option>Rule</option>
       <option>Global</option>
     </select>
-    <input type="text" class="input input-bordered input-sm w-full" v-model="speedtestUrl" />
+    <input
+      type="text"
+      class="input input-sm input-bordered w-full"
+      v-model="speedtestUrl"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { flushFakeIPAPI } from '@/api';
-import { configs, speedtestUrl, updateConfigs } from '@/store/config';
+import { flushFakeIPAPI } from '@/api'
+import { configs, speedtestUrl, updateConfigs } from '@/store/config'
 
 const handlerModeChange = (e: Event) => {
   const mode = (e.target as HTMLSelectElement).value
   updateConfigs({ mode })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/helper/index.ts b/src/helper/index.ts
index a9cd4da3..3753f6ee 100644
--- a/src/helper/index.ts
+++ b/src/helper/index.ts
@@ -1,5 +1,5 @@
-import { useWindowSize } from "@vueuse/core"
-import { computed } from "vue"
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
 
 const windowSize = useWindowSize()
 
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 81359b15..bf60efa8 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -25,4 +25,7 @@ export default {
   sortBy: 'Sort By',
   rule: 'Rule',
   sourceIP: 'Source IP',
+  activeConnections: 'Active Connections',
+  closedConnections: 'Closed Connections',
+  logLevel: 'Log Level',
 }
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 91851852..c776b46a 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,12 +1,12 @@
+import { LANG, language } from '@/store/config'
 import { createI18n } from 'vue-i18n'
 import en from './en'
 import zh from './zh'
-import { LANG, language } from '@/store/config'
 
 export const i18n = createI18n({
   locale: language.value,
   messages: {
     [LANG.EN_US]: en,
-    [LANG.ZH_CN]: zh
-  }
-})
\ No newline at end of file
+    [LANG.ZH_CN]: zh,
+  },
+})
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 585210f9..7834b17e 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -25,4 +25,7 @@ export default {
   sortBy: '排序方式',
   rule: '规则',
   sourceIP: '源IP',
+  activeConnections: '活跃连接',
+  closedConnections: '已关闭连接',
+  logLevel: '日志等级',
 }
diff --git a/src/main.ts b/src/main.ts
index 127864e4..ef6830f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,11 @@
-import './assets/main.css'
+import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
+import './assets/main.css'
 import { i18n } from './i18n'
+import router from './router'
 const app = createApp(App)
 
 dayjs.extend(relativeTime)
diff --git a/src/router/index.ts b/src/router/index.ts
index 1d4a8e28..d4cbeb42 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -35,9 +35,9 @@ const router = createRouter({
       component: RulesPage,
     },
     {
-      path: "/:catchAll(.*)",
+      path: '/:catchAll(.*)',
       redirect: ROUTE_NAME.proxies,
-    }
+    },
   ],
 })
 
diff --git a/src/store/config.ts b/src/store/config.ts
index 3ce2889b..23bc0f44 100644
--- a/src/store/config.ts
+++ b/src/store/config.ts
@@ -1,15 +1,18 @@
-import { getConfigsAPI, patchConfigsAPI } from "@/api";
-import { useStorage } from "@vueuse/core";
-import { ref } from "vue";
+import { getConfigsAPI, patchConfigsAPI } from '@/api'
+import { useStorage } from '@vueuse/core'
+import { ref } from 'vue'
 
 export enum LANG {
   EN_US = 'en-US',
-  ZH_CN = 'zh-CN'
+  ZH_CN = 'zh-CN',
 }
 
+export const theme = useStorage<string>('config/theme', 'default')
 export const language = useStorage<LANG>('config/language', LANG.EN_US)
-export const isDark = useStorage<boolean>('config/dark', false)
-export const speedtestUrl = useStorage<string>('config/speedtest-url', 'http://www.gstatic.com/generate_204')
+export const speedtestUrl = useStorage<string>(
+  'config/speedtest-url',
+  'http://www.gstatic.com/generate_204',
+)
 export const speedtestTimeout = useStorage<number>('config/speedtest-timeout', 5000)
 export const compactConnectionCard = useStorage<boolean>('config/compact-connection-card', false)
 export const hostLabelMap = useStorage<Record<string, string>>('config/host-label-map', {})
diff --git a/src/store/connections.ts b/src/store/connections.ts
index 9b9c2d8c..9246fab8 100644
--- a/src/store/connections.ts
+++ b/src/store/connections.ts
@@ -1,17 +1,21 @@
-import { fetchConnectionsAPI } from "@/api";
-import type { Connection, ConnectionRawMessage } from "@/types";
-import { useStorage } from "@vueuse/core";
-import { computed, ref, watch } from "vue";
+import { fetchConnectionsAPI } from '@/api'
+import type { Connection, ConnectionRawMessage } from '@/types'
+import { useStorage } from '@vueuse/core'
+import { differenceWith } from 'lodash'
+import { computed, ref, watch } from 'vue'
 
 export const activeConnections = ref<Connection[]>([])
+export const closedConnections = ref<Connection[]>([])
+
 export const downloadTotal = ref(0)
 export const uploadTotal = ref(0)
 export const memory = ref(0)
 
 export const quickFilterRegex = useStorage<string>('config/quick-filter-regex', 'dns|direct')
 export const quickFilterEnabled = useStorage<boolean>('config/quick-filter-enabled', false)
+export const showActiveConnections = ref(true)
 
-export enum sortType {
+export enum SORT_TYPE {
   HOST = 'host',
   RULE = 'rule',
   CHAINS = 'chains',
@@ -22,61 +26,74 @@ export enum sortType {
   SOURCE_IP = 'sourceIP',
 }
 
-const sortFunctionMap: Record<sortType, (a: Connection, b: Connection) => number> = {
-  [sortType.HOST]: (a: Connection, b: Connection) => {
-    return (a.metadata.host || a.metadata.destinationIP).localeCompare((b.metadata.host || b.metadata.destinationIP))
+const sortFunctionMap: Record<SORT_TYPE, (a: Connection, b: Connection) => number> = {
+  [SORT_TYPE.HOST]: (a: Connection, b: Connection) => {
+    return (a.metadata.host || a.metadata.destinationIP).localeCompare(
+      b.metadata.host || b.metadata.destinationIP,
+    )
   },
-  [sortType.RULE]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.RULE]: (a: Connection, b: Connection) => {
     return a.rule.localeCompare(b.rule)
   },
-  [sortType.CHAINS]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.CHAINS]: (a: Connection, b: Connection) => {
     return a.chains.join('').localeCompare(b.chains.join(''))
   },
-  [sortType.DOWNLOAD]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.DOWNLOAD]: (a: Connection, b: Connection) => {
     return b.download - a.download
   },
-  [sortType.DOWNLOAD_SPEED]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.DOWNLOAD_SPEED]: (a: Connection, b: Connection) => {
     return b.downloadSpeed - a.downloadSpeed
   },
-  [sortType.UPLOAD]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.UPLOAD]: (a: Connection, b: Connection) => {
     return b.upload - a.upload
   },
-  [sortType.UPLOAD_SPEED]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.UPLOAD_SPEED]: (a: Connection, b: Connection) => {
     return b.uploadSpeed - a.uploadSpeed
   },
-  [sortType.SOURCE_IP]: (a: Connection, b: Connection) => {
+  [SORT_TYPE.SOURCE_IP]: (a: Connection, b: Connection) => {
     return a.metadata.sourceIP.localeCompare(b.metadata.sourceIP)
   },
 }
 
-export const connectionSortType = useStorage<sortType>('config/connection-sort-type', sortType.HOST)
+export const connectionSortType = useStorage<SORT_TYPE>(
+  'config/connection-sort-type',
+  SORT_TYPE.HOST,
+)
 export const connectionFilter = ref('')
 export const isPaused = ref(false)
 
 export const renderConnections = computed(() => {
-  return activeConnections.value.filter((conn) => {
-    if (quickFilterEnabled.value && quickFilterRegex.value) {
-      const regex = new RegExp(quickFilterRegex.value)
-
-      return !regex.test(conn.chains.join(''))
-    }
+  return (showActiveConnections.value ? activeConnections.value : closedConnections.value)
+    .filter((conn) => {
+      if (quickFilterEnabled.value && quickFilterRegex.value) {
+        const regex = new RegExp(quickFilterRegex.value)
+
+        return !(
+          regex.test(conn.chains.join('')) ||
+          regex.test(conn.metadata.host) ||
+          regex.test(conn.metadata.destinationIP)
+        )
+      }
 
-    return true
-  }).filter(conn => {
-    if (connectionFilter.value) {
-      return [
-        conn.metadata.host,
-        conn.metadata.destinationIP,
-        conn.metadata.destinationPort,
-        conn.chains,
-        conn.rule,
-      ].some(i => i?.includes(connectionFilter.value))
-    }
+      return true
+    })
+    .filter((conn) => {
+      if (connectionFilter.value) {
+        return [
+          conn.metadata.host,
+          conn.metadata.destinationIP,
+          conn.metadata.destinationPort,
+          conn.chains,
+          conn.rule,
+        ].some((i) => i?.includes(connectionFilter.value))
+      }
 
-    return true
-  }).sort((a, b) => {
-    return a.id.localeCompare(b.id)
-  }).sort(sortFunctionMap[connectionSortType.value])
+      return true
+    })
+    .sort((a, b) => {
+      return a.id.localeCompare(b.id)
+    })
+    .sort(sortFunctionMap[connectionSortType.value])
 })
 
 let cancel: () => void
@@ -84,7 +101,7 @@ let cancel: () => void
 export const initConnections = () => {
   cancel?.()
   activeConnections.value = []
-  
+
   const ws = fetchConnectionsAPI<string>()
   const unwatch = watch(ws.data, (data) => {
     if (!data) return
@@ -103,19 +120,28 @@ export const initConnections = () => {
     if (isPaused.value) {
       return
     }
-    activeConnections.value = parsedData.connections?.map((connection) => {
-      const preConnection = activeConnections.value.find((c) => c.id === connection.id) ?? { download: 0, upload: 0 }
 
-      return {
-        ...connection,
-        downloadSpeed: connection.download - preConnection.download,
-        uploadSpeed: connection.upload - preConnection.upload
-      }
-    }) ?? []
+    closedConnections.value = [
+      ...closedConnections.value,
+      ...differenceWith(activeConnections.value, parsedData.connections, (a, b) => a.id === b.id),
+    ]
+    activeConnections.value =
+      parsedData.connections?.map((connection) => {
+        const preConnection = activeConnections.value.find((c) => c.id === connection.id) ?? {
+          download: 0,
+          upload: 0,
+        }
+
+        return {
+          ...connection,
+          downloadSpeed: connection.download - preConnection.download,
+          uploadSpeed: connection.upload - preConnection.upload,
+        }
+      }) ?? []
   })
 
   cancel = () => {
     unwatch()
     ws.close()
   }
-}
\ No newline at end of file
+}
diff --git a/src/store/logs.ts b/src/store/logs.ts
index 1cdb670a..0f74bb48 100644
--- a/src/store/logs.ts
+++ b/src/store/logs.ts
@@ -1,10 +1,20 @@
-import { fetchLogsAPI } from "@/api";
-import type { Log, LogWithSeq } from "@/types";
-import { ref, watch } from "vue";
+import { fetchLogsAPI } from '@/api'
+import type { Log, LogWithSeq } from '@/types'
+import { useStorage } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+export enum LOG_LEVEL {
+  Info = 'info',
+  Error = 'error',
+  Warning = 'warning',
+  Debug = 'debug',
+  Silent = 'silent',
+}
 
 export const logs = ref<LogWithSeq[]>([])
 export const logFilter = ref('')
 export const isPaused = ref(false)
+export const logLevel = useStorage<string>('config/log-level', LOG_LEVEL.Info)
 
 let cancel: () => void
 
@@ -13,7 +23,9 @@ export const initLogs = () => {
   logs.value = []
 
   let idx = 1
-  const ws = fetchLogsAPI<string>()
+  const ws = fetchLogsAPI<string>({
+    level: logLevel.value,
+  })
   const unwatch = watch(ws.data, (data) => {
     if (!data) return
 
@@ -26,7 +38,7 @@ export const initLogs = () => {
 
     logs.value.unshift({
       ...parsedData,
-      seq: idx++
+      seq: idx++,
     })
 
     logs.value = logs.value.slice(0, 1000)
@@ -36,4 +48,4 @@ export const initLogs = () => {
     unwatch()
     ws.close()
   }
-}
\ No newline at end of file
+}
diff --git a/src/store/proxies.ts b/src/store/proxies.ts
index 34b5384c..ac65b342 100644
--- a/src/store/proxies.ts
+++ b/src/store/proxies.ts
@@ -1,9 +1,15 @@
-import { disconnectByIdAPI, fetchProxiesAPI, fetchProxyGroupLatencyAPI, fetchProxyLatencyAPI, selectProxyAPI } from "@/api";
-import type { Proxy, ProxyGroup } from "@/types";
-import { ref } from "vue";
+import {
+  disconnectByIdAPI,
+  fetchProxiesAPI,
+  fetchProxyGroupLatencyAPI,
+  fetchProxyLatencyAPI,
+  selectProxyAPI,
+} from '@/api'
+import type { Proxy, ProxyGroup } from '@/types'
 import { last } from 'lodash'
-import { activeConnections } from "./connections";
-import { speedtestTimeout, speedtestUrl } from "./config";
+import { ref } from 'vue'
+import { speedtestTimeout, speedtestUrl } from './config'
+import { activeConnections } from './connections'
 
 export const proxyGroups = ref<ProxyGroup[]>([])
 export const proxyMap = ref<Record<string, Proxy>>({})
@@ -16,14 +22,18 @@ export const getLatencyByName = (proxyName: string) => {
 export const fetchProxies = async () => {
   const { data } = await fetchProxiesAPI()
   const sortIndex = data.proxies['GLOBAL'].all ?? []
-  const proxies = Object.values(data.proxies).filter((proxy) => proxy.all?.length && proxy.name !== 'GLOBAL') as ProxyGroup[]
+  const proxies = Object.values(data.proxies).filter(
+    (proxy) => proxy.all?.length && proxy.name !== 'GLOBAL',
+  ) as ProxyGroup[]
 
   proxyMap.value = data.proxies
-  proxyGroups.value = proxies.sort((prev, next) =>
-      sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name))
+  proxyGroups.value = proxies.sort(
+    (prev, next) => sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name),
+  )
 
   latencyMap.value = Object.fromEntries(
-      Object.entries(data.proxies).map(([name, proxy]) => [name, getLatencyFromHistory(proxy)]))
+    Object.entries(data.proxies).map(([name, proxy]) => [name, getLatencyFromHistory(proxy)]),
+  )
 }
 
 export const selectProxy = async (proxyGroup: string, name: string) => {
@@ -35,13 +45,21 @@ export const selectProxy = async (proxyGroup: string, name: string) => {
 }
 
 export const proxyLatencyTest = async (proxyName: string) => {
-  const { data: latencyResult } = await fetchProxyLatencyAPI(proxyName, speedtestUrl.value, speedtestTimeout.value)
+  const { data: latencyResult } = await fetchProxyLatencyAPI(
+    proxyName,
+    speedtestUrl.value,
+    speedtestTimeout.value,
+  )
 
   latencyMap.value[getNowProxyNodeName(proxyName)] = latencyResult.delay
 }
 
 export const proxyGroupLatencyTest = async (proxyGroupName: string) => {
-  const { data: latencyResult } = await fetchProxyGroupLatencyAPI(proxyGroupName, speedtestUrl.value, speedtestTimeout.value)
+  const { data: latencyResult } = await fetchProxyGroupLatencyAPI(
+    proxyGroupName,
+    speedtestUrl.value,
+    speedtestTimeout.value,
+  )
 
   Object.entries(latencyResult).forEach(([name, latency]) => {
     latencyMap.value[getNowProxyNodeName(name)] = latency
diff --git a/src/store/rules.ts b/src/store/rules.ts
index 95204c5b..f94c139b 100644
--- a/src/store/rules.ts
+++ b/src/store/rules.ts
@@ -1,6 +1,6 @@
-import { getRulesAPI } from "@/api";
-import type { Rule } from "@/types";
-import { ref } from "vue";
+import { getRulesAPI } from '@/api'
+import type { Rule } from '@/types'
+import { ref } from 'vue'
 
 export const rules = ref<Rule[]>()
 export const fetchRules = async () => {
diff --git a/src/store/setup.ts b/src/store/setup.ts
index 10e5f34b..4fba7510 100644
--- a/src/store/setup.ts
+++ b/src/store/setup.ts
@@ -1,19 +1,21 @@
 import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
-import { v4 as uuid } from 'uuid'
 import { isEqual, omit } from 'lodash'
+import { v4 as uuid } from 'uuid'
+import { computed } from 'vue'
 
 type Backend = {
-  host: string,
-  port: number,
-  password: string,
-  protocol: string,
+  host: string
+  port: number
+  password: string
+  protocol: string
   uuid: string
 }
 
 export const backendList = useStorage<Backend[]>('setup/api-list', [])
 export const activeUuid = useStorage<string>('setup/active-uuid', '')
-export const activeBackend = computed(() => backendList.value.find((backend) => backend.uuid === activeUuid.value))
+export const activeBackend = computed(() =>
+  backendList.value.find((backend) => backend.uuid === activeUuid.value),
+)
 
 export const addBackend = (backend: Omit<Backend, 'uuid'>) => {
   const currentEnd = backendList.value.find((end) => {
@@ -29,7 +31,7 @@ export const addBackend = (backend: Omit<Backend, 'uuid'>) => {
 
   backendList.value.push({
     ...backend,
-    uuid: id
+    uuid: id,
   })
   activeUuid.value = id
-}
\ No newline at end of file
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2702c3d1..9f9ebdcd 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,8 +1,6 @@
-declare module '*.vue' {
-}
+declare module '*.vue' {}
 
-declare module '*.tsx' {
-}
+declare module '*.tsx' {}
 
 export type Proxy = {
   name: string
@@ -53,7 +51,7 @@ export type Connection = ConnectionRawMessage & {
 }
 
 export type Log = {
-  type: LOG_LEVEL
+  type: 'info' | 'warning' | 'error' | 'debug'
   payload: string
 }
 
diff --git a/src/views/ConnectionsPage.vue b/src/views/ConnectionsPage.vue
index a819af5b..1f3b1d61 100644
--- a/src/views/ConnectionsPage.vue
+++ b/src/views/ConnectionsPage.vue
@@ -1,18 +1,29 @@
 <template>
-  <div class="p-2 h-full overflow-x-hidden overflow-y-auto">
+  <div class="h-full overflow-y-auto overflow-x-hidden p-2">
     <template v-if="!renderConnections.length">
-      <div class="card bg-base-100 w-full p-2 shadow-xl gap-1 text-sm flex-row">
+      <div class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl">
         {{ $t('noContent') }}
       </div>
     </template>
-    <div class="flex flex-col gap-1">
-      <ConnectionCard v-for="conn in renderConnections" :key="conn.id" :conn="conn" @info="handlerInfo"></ConnectionCard>
+    <div class="flex flex-col gap-[2px]">
+      <ConnectionCard
+        v-for="conn in renderConnections"
+        :key="conn.id"
+        :conn="conn"
+        @info="handlerInfo"
+      ></ConnectionCard>
     </div>
-    <dialog ref="modalRef" class="modal">
+    <dialog
+      ref="modalRef"
+      class="modal"
+    >
       <div class="modal-box">
         <VueJsonPretty :data="infoConn" />
       </div>
-      <form method="dialog" class="modal-backdrop">
+      <form
+        method="dialog"
+        class="modal-backdrop"
+      >
         <button>close</button>
       </form>
     </dialog>
@@ -20,12 +31,12 @@
 </template>
 
 <script setup lang="ts">
-import ConnectionCard from '@/components/ConnectionCard';
-import { renderConnections } from '@/store/connections';
-import type { Connection } from '@/types';
-import { ref } from 'vue';
+import ConnectionCard from '@/components/ConnectionCard'
+import { renderConnections } from '@/store/connections'
+import type { Connection } from '@/types'
+import { ref } from 'vue'
 import VueJsonPretty from 'vue-json-pretty'
-import 'vue-json-pretty/lib/styles.css';
+import 'vue-json-pretty/lib/styles.css'
 
 const infoConn = ref<Connection>()
 const modalRef = ref<{
@@ -36,5 +47,4 @@ const handlerInfo = (conn: Connection) => {
   infoConn.value = conn
   modalRef.value?.showModal()
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index ae1f1563..a8097cb8 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,57 +1,93 @@
 <template>
-  <div class="drawer md:drawer-open w-128">
-    <input id="sidebar" type="checkbox" class="drawer-toggle" />
+  <div class="w-128 drawer md:drawer-open">
+    <input
+      id="sidebar"
+      type="checkbox"
+      class="drawer-toggle"
+    />
 
     <div class="drawer-side z-30">
-      <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"></label>
-      <div class="flex flex-col bg-base-200 text-base-content h-full">
-        <ul class="menu w-80 p-4 flex-1">
-          <li v-for="r in routes" :key="r">
-            <a :class="r === route.name ? 'active' : ''" :href="`#${r}`">{{ $t(r) }}</a>
+      <label
+        for="sidebar"
+        aria-label="close sidebar"
+        class="drawer-overlay"
+      ></label>
+      <div class="flex h-full flex-col bg-base-200 text-base-content">
+        <ul class="menu w-80 flex-1 p-4">
+          <li
+            v-for="r in routes"
+            :key="r"
+          >
+            <a
+              :class="r === route.name ? 'active' : ''"
+              :href="`#${r}`"
+              >{{ $t(r) }}</a
+            >
           </li>
         </ul>
-        <div class="card bg-base-100 shadow-lg m-2">
-          <component v-if="sidebarComp" :is="sidebarComp" />
+        <div class="card m-2 bg-base-100 shadow-lg">
+          <component
+            v-if="sidebarComp"
+            :is="sidebarComp"
+          />
           <CommonSidebar />
         </div>
       </div>
     </div>
 
-    <div class="drawer-content h-full overflow-hidden">
-      <RouterView></RouterView>
-      <label for="sidebar">
-        <div class="btn btn-sm p-1 btn-circle btn-primary shadow-lg drawer-button md:hidden fixed bottom-6 right-6 z-20">
-          =
-        </div>
-      </label>
-    </div>
+    <div
+      class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden md:relative md:w-auto"
+    >
+      <RouterView class="flex-1"></RouterView>
 
+      <div class="flex w-full items-center justify-center gap-1 bg-base-200 p-1 md:hidden">
+        <ul class="menu menu-horizontal menu-sm">
+          <li
+            v-for="r in routes"
+            :key="r"
+          >
+            <a
+              :class="r === route.name ? 'active' : ''"
+              :href="`#${r}`"
+              >{{ $t(r) }}</a
+            >
+          </li>
+        </ul>
+        <label for="sidebar">
+          <div
+            class="btn btn-circle drawer-button btn-sm bg-neutral text-neutral-content shadow-lg"
+          >
+            <Bars3Icon class="h-4 w-4" />
+          </div>
+        </label>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { initConnections } from '@/store/connections';
-import { initLogs } from '@/store/logs';
+import CommonSidebar from '@/components/sidebar/CommonCtrl.vue'
+import ConnectionCtrl from '@/components/sidebar/ConnectionCtrl.vue'
+import LogsCtrl from '@/components/sidebar/LogsCtrl.vue'
+import ProxiesCtrl from '@/components/sidebar/ProxiesCtrl.vue'
+import { ROUTE_NAME } from '@/router'
+import { fetchConfigs } from '@/store/config'
+import { initConnections } from '@/store/connections'
+import { initLogs } from '@/store/logs'
+import { fetchProxies } from '@/store/proxies'
+import { fetchRules } from '@/store/rules'
+import { activeUuid } from '@/store/setup'
+import { Bars3Icon } from '@heroicons/vue/24/outline'
+import { computed, watch } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
-import CommonSidebar from '@/components/sidebar/CommonCtrl.vue';
-import { ROUTE_NAME } from '@/router';
-import { computed, watch } from 'vue';
-import LogsCtrl from '@/components/sidebar/LogsCtrl.vue';
-import ConnectionCtrl from '@/components/sidebar/ConnectionCtrl.vue';
-import ProxiesCtrl from '@/components/sidebar/ProxiesCtrl.vue';
-import { activeUuid } from '@/store/setup';
-import { fetchProxies } from '@/store/proxies';
-import { fetchRules } from '@/store/rules';
-import { fetchConfigs } from '@/store/config';
 
 const sidebarCompMap = {
   [ROUTE_NAME.connections]: ConnectionCtrl,
   [ROUTE_NAME.logs]: LogsCtrl,
-  [ROUTE_NAME.proxies]: ProxiesCtrl
+  [ROUTE_NAME.proxies]: ProxiesCtrl,
 }
 
 const sidebarComp = computed(() => {
-
   if (route.name) {
     return sidebarCompMap[route.name as keyof typeof sidebarCompMap]
   }
@@ -62,14 +98,17 @@ const sidebarComp = computed(() => {
 const route = useRoute()
 const routes = Object.values(ROUTE_NAME)
 
-watch(activeUuid, () => {
-  fetchConfigs()
-  fetchProxies()
-  fetchRules()
-  initConnections()
-  initLogs()
-}, {
-  immediate: true
-})
-
-</script>
\ No newline at end of file
+watch(
+  activeUuid,
+  () => {
+    fetchConfigs()
+    fetchProxies()
+    fetchRules()
+    initConnections()
+    initLogs()
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
diff --git a/src/views/LogsPage.vue b/src/views/LogsPage.vue
index bb136284..a4098d7d 100644
--- a/src/views/LogsPage.vue
+++ b/src/views/LogsPage.vue
@@ -1,25 +1,32 @@
 <template>
-  <div class="p-2 flex flex-col gap-2 h-full overflow-x-hidden overflow-y-auto">
-    <template v-if="!renderLogs.length">  
-      <div class="card bg-base-100 w-full p-2 shadow-xl gap-1 text-sm flex-row">
+  <div class="flex h-full flex-col gap-[2px] overflow-y-auto overflow-x-hidden p-2">
+    <template v-if="!renderLogs.length">
+      <div class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl">
         {{ $t('noContent') }}
       </div>
     </template>
-    <div 
-      v-for="log in renderLogs" 
-      :key="log.seq" 
-      class="card bg-base-100 w-full p-2 shadow-xl gap-1 text-sm flex-row"
+    <div
+      v-for="log in renderLogs"
+      :key="log.seq"
+      class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl"
     >
       <span>{{ log.seq }}</span>
-      <span class="text-primary">{{ log.type }}</span>
+      <span :class="textColorMapForType[log.type]">{{ log.type }}</span>
       <span>{{ log.payload }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { logFilter, logs } from '@/store/logs';
-import { computed } from 'vue';
+import { LOG_LEVEL, logFilter, logs } from '@/store/logs'
+import { computed } from 'vue'
+
+const textColorMapForType = {
+  [LOG_LEVEL.Error]: 'text-error',
+  [LOG_LEVEL.Warning]: 'text-warning',
+  [LOG_LEVEL.Info]: 'text-primary',
+  [LOG_LEVEL.Debug]: 'text-accent',
+}
 
 const renderLogs = computed(() => {
   return logs.value.filter((log) => {
diff --git a/src/views/ProxiesPage.vue b/src/views/ProxiesPage.vue
index 0ac58886..1bccc5a6 100644
--- a/src/views/ProxiesPage.vue
+++ b/src/views/ProxiesPage.vue
@@ -1,26 +1,39 @@
 <template>
-  <div class="p-2 h-full overflow-x-hidden overflow-y-auto">
+  <div class="h-full overflow-y-auto overflow-x-hidden p-2">
     <template v-if="isLargeScreen">
-      <div class="flex flex-1 gap-2">
-        <div v-for="idx in [0, 1]" :key="idx" class="flex flex-1 flex-col gap-2">
-          <ProxyGroup v-for="proxyGroup in filterContent(proxyGroups, idx)" :key="proxyGroup.name"
-            :name="proxyGroup.name" />
+      <div class="flex flex-1 gap-1">
+        <div
+          v-for="idx in [0, 1]"
+          :key="idx"
+          class="flex flex-1 flex-col gap-1"
+        >
+          <ProxyGroup
+            v-for="proxyGroup in filterContent(proxyGroups, idx)"
+            :key="proxyGroup.name"
+            :name="proxyGroup.name"
+          />
         </div>
       </div>
     </template>
-    <div class="flex flex-1 flex-col gap-2" v-else>
-      <ProxyGroup v-for="proxyGroup in proxyGroups" :key="proxyGroup.name" :name="proxyGroup.name" />
+    <div
+      class="flex flex-1 flex-col gap-1"
+      v-else
+    >
+      <ProxyGroup
+        v-for="proxyGroup in proxyGroups"
+        :key="proxyGroup.name"
+        :name="proxyGroup.name"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import ProxyGroup from '@/components/ProxyGroup.vue';
-import { isLargeScreen } from '@/helper';
-import { proxyGroups } from '@/store/proxies';
+import ProxyGroup from '@/components/ProxyGroup.vue'
+import { isLargeScreen } from '@/helper'
+import { proxyGroups } from '@/store/proxies'
 
 const filterContent: <T>(all: T[], target: number) => T[] = (all, target) => {
   return all.filter((_, index: number) => index % 2 === target)
 }
-
 </script>
diff --git a/src/views/RulesPage.vue b/src/views/RulesPage.vue
index a8a7e1f1..0ba422fe 100644
--- a/src/views/RulesPage.vue
+++ b/src/views/RulesPage.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="p-2 flex flex-col gap-2 h-full overflow-x-hidden overflow-y-auto">
-    <div 
-      v-for="rule in rules" 
-      :key="rule.payload" 
-      class="card bg-base-100 w-full p-2 shadow-xl gap-1 text-sm flex-row">
+  <div class="flex h-full flex-col gap-[2px] overflow-y-auto overflow-x-hidden p-2">
+    <div
+      v-for="rule in rules"
+      :key="rule.payload"
+      class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl"
+    >
       <div class="w-20 text-primary">{{ rule.proxy }}</div>
       <div class="flex-1">{{ rule.payload }}</div>
     </div>
@@ -11,6 +12,5 @@
 </template>
 
 <script setup lang="ts">
-import { rules } from '@/store/rules';
-
+import { rules } from '@/store/rules'
 </script>
diff --git a/src/views/SetupPage.vue b/src/views/SetupPage.vue
index ba88430a..45de12a8 100644
--- a/src/views/SetupPage.vue
+++ b/src/views/SetupPage.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="w-full h-full flex justify-center items-center">
-    <div class="p-6 bg-base-100 shadow-lg rounded-lg">
-      <h1 class="text-2xl font-semibold mb-4">{{ $t('setup') }}</h1>
+  <div class="flex h-full w-full items-center justify-center">
+    <div class="rounded-lg bg-base-100 p-6 shadow-lg">
+      <h1 class="mb-4 text-2xl font-semibold">{{ $t('setup') }}</h1>
       <div class="form-control mb-4">
         <label class="label">
           <span class="label-text">{{ $t('protocol') }}</span>
         </label>
-        <select class="select select-bordered w-full" v-model="form.protocol">
+        <select
+          class="select select-bordered w-full"
+          v-model="form.protocol"
+        >
           <option value="http">HTTP</option>
           <option value="https">HTTPS</option>
         </select>
@@ -15,25 +18,44 @@
         <label class="label">
           <span class="label-text">{{ $t('host') }}</span>
         </label>
-        <input type="text" class="input input-bordered w-full" v-model="form.host" />
+        <input
+          type="text"
+          class="input input-bordered w-full"
+          v-model="form.host"
+        />
       </div>
       <div class="form-control mb-4">
         <label class="label">
           <span class="label-text">{{ $t('port') }}</span>
         </label>
-        <input type="text" class="input input-bordered w-full" v-model="form.port" />
+        <input
+          type="text"
+          class="input input-bordered w-full"
+          v-model="form.port"
+        />
       </div>
       <div class="form-control">
         <label class="label">
           <span class="label-text">{{ $t('password') }}</span>
         </label>
-        <input type="password" class="input input-bordered w-full" v-model="form.password" />
+        <input
+          type="password"
+          class="input input-bordered w-full"
+          v-model="form.password"
+        />
       </div>
-      <button class="btn btn-primary w-full mt-4" @click="handleSubmit">
+      <button
+        class="btn btn-primary mt-4 w-full"
+        @click="handleSubmit"
+      >
         {{ $t('submit') }}
       </button>
-      <button class="btn btn-xs w-full mt-2" v-for="backend in backendList" :key="backend.uuid"
-        @click="activeUuid = backend.uuid">
+      <button
+        class="btn btn-xs mt-2 w-full"
+        v-for="backend in backendList"
+        :key="backend.uuid"
+        @click="activeUuid = backend.uuid"
+      >
         {{ backend.protocol }}://{{ backend.host }}:{{ backend.port }}
       </button>
     </div>
@@ -41,9 +63,9 @@
 </template>
 
 <script setup lang="ts">
+import router from '@/router'
 import { activeUuid, addBackend, backendList } from '@/store/setup'
 import { reactive } from 'vue'
-import router from '@/router';
 
 const form = reactive({
   protocol: 'http',
diff --git a/tailwind.config.js b/tailwind.config.js
index 9c2b185e..bf8b0cf7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+import daisyui from 'daisyui'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -14,8 +16,10 @@ export default {
       '3xl': '1700px',
     },
   },
-  themes: ["light", "dark", "sunset"],
+  daisyui: {
+    themes: true,
+  },
   plugins: [
-    require('daisyui'),
+    daisyui,
   ],
 }
\ No newline at end of file