diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index beb5921..1bc5a4d 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -1,3 +1,76 @@
+import { useRequest } from '~/signals'
+import { For, onMount } from 'solid-js'
+import type { Config as IConfig } from '~/types'
+import { z } from 'zod'
+import { validator } from '@felte/validator-zod'
+import { createForm } from '@felte/solid'
+
+const schema = z.object({
+  port: z.number(),
+  'socks-port': z.number(),
+  'redir-port': z.number(),
+  'tproxy-port': z.number(),
+  'mixed-port': z.number(),
+})
+
 export const Config = () => {
-  return <div>config</div>
+  const request = useRequest()
+  const formItemList = [
+    {
+      key: 'port',
+      label: 'port',
+      type: 'number',
+    },
+    {
+      key: 'socks-port',
+      label: 'socks-port',
+      type: 'number',
+    },
+    {
+      key: 'redir-port',
+      label: 'redir-port',
+      type: 'number',
+    },
+    {
+      key: 'tproxy-port',
+      label: 'tproxy-port',
+      type: 'number',
+    },
+    {
+      key: 'mixed-port',
+      label: 'mixed-port',
+      type: 'number',
+    },
+  ]
+
+  const { form, setInitialValues, reset } = createForm<z.infer<typeof schema>>({
+    extend: validator({ schema }),
+  })
+  onMount(async () => {
+    const configs = await request.get('configs').json<IConfig>()
+
+    setInitialValues(configs)
+    reset()
+  })
+
+  return (
+    <div>
+      config
+      <form class="contents" use:form={form}>
+        <For each={formItemList}>
+          {(item) => (
+            <div class="flex flex-row items-center gap-4">
+              {item.label}:
+              <input
+                name={item.key}
+                type={item.type}
+                class="input input-bordered"
+                placeholder={item.label}
+              />
+            </div>
+          )}
+        </For>
+      </form>
+    </div>
+  )
 }
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index ef66f65..003c7b3 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -46,7 +46,11 @@ export const Connections = () => {
 
   const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
 
-  const [sorting, setSorting] = createSignal<SortingState>([])
+  const defaultSorting = Object.freeze({
+    id: 'ID',
+    desc: true,
+  })
+  const [sorting, setSorting] = createSignal<SortingState>([defaultSorting])
 
   const columns: ColumnDef<Connection>[] = [
     {
@@ -182,7 +186,6 @@ export const Connections = () => {
                                 header.column.columnDef.header,
                                 header.getContext(),
                               )}
-
                           {{
                             asc: <IconSortAscending />,
                             desc: <IconSortDescending />,
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index dbbc904..fe83dd0 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -1,3 +1,62 @@
+import { For, createSignal, onMount } from 'solid-js'
+import { useRequest } from '~/signals'
+import type { Rule, RuleProvider } from '~/types'
+
 export const Rules = () => {
-  return <div>rules</div>
+  const request = useRequest()
+  const [rules, setRules] = createSignal<Rule[]>([])
+  const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
+
+  onMount(async () => {
+    const { rules } = await request
+      .get('rules')
+      .json<{ rules: Record<string, Rule> }>()
+
+    setRules(Object.values(rules))
+
+    const { providers } = await request
+      .get('providers/rules')
+      .json<{ providers: Record<string, RuleProvider> }>()
+
+    setRulesProviders(Object.values(providers))
+  })
+
+  return (
+    <div class="flex flex-col gap-4">
+      <div>
+        <h1 class="pb-4 text-lg font-semibold">Rules</h1>
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
+          <For each={rules()}>
+            {(rule) => (
+              <div class="card card-bordered card-compact border-secondary p-4">
+                <div>{rule.payload}</div>
+                <div>
+                  {rule.type}: {rule.proxy}
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+
+      <div>
+        <h1 class="pb-4 text-lg font-semibold">Rules Providers</h1>
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
+          <For each={rulesProviders()}>
+            {(rulesProvider) => (
+              <div class="card card-bordered card-compact border-secondary p-4">
+                <div>{rulesProvider.name}</div>
+                <div>
+                  {rulesProvider.vehicleType}: {rulesProvider.behavior} (
+                  {rulesProvider.ruleCount})
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index 70489cb..902bfcc 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -37,7 +37,7 @@ export const Setup = () => {
         {
           id: uuid(),
           url: values.url,
-          secret: '',
+          secret: values.secret,
         },
         ...endpointList(),
       ])
diff --git a/src/types.d.ts b/src/types.d.ts
index 3e50fe3..bcff54c 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -42,6 +42,13 @@ export type ProxyProvider = {
   vehicleType: string
 }
 
+export type Rule = {
+  type: string
+  payload: string
+  proxy: string
+  size: number
+}
+
 export type RuleProvider = {
   behavior: string
   format: string