diff --git a/app/pages.go b/app/pages.go
index c1ab8b7..13d5fc7 100644
--- a/app/pages.go
+++ b/app/pages.go
@@ -20,8 +20,28 @@ func Index(ctx *gin.Context) {
 	if err != nil {
 		result["msg"] = fmt.Sprintf("数据获取失败: %s", err.Error())
 	}
-	result["friendCount"] = len(friends)
-	result["groupCount"] = len(groups)
+	var in, notIn int
+	for _, d := range friends {
+		if d.IsOk {
+			in++
+		} else {
+			notIn++
+		}
+	}
+	result["friendCount"] = in
+	result["friendWithoutCount"] = notIn
+
+	var gin, gnotIn int
+	for _, d := range groups {
+		if d.IsOk {
+			gin++
+		} else {
+			gnotIn++
+		}
+	}
+	result["groupCount"] = gin
+	result["groupWithoutCount"] = gnotIn
+
 	result["vnc"] = config.Conf.Wechat.VncUrl
 	result["isVnc"] = config.Conf.Wechat.VncUrl != ""
 	result["aiModels"] = config.Conf.Ai.Models
diff --git a/views/friend.html b/views/friend.html
index 979b7f9..ee74506 100644
--- a/views/friend.html
+++ b/views/friend.html
@@ -21,87 +21,79 @@
   <main class="-mt-32">
     <div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
       <div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6 text-2xl">
-        <table class="min-w-full divide-y divide-gray-300">
-          <thead class="bg-gray-50">
-          <tr>
-            <th scope="col"
-                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-              微信Id
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              微信号
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">昵称
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              最后活跃时间
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              是否在通讯录
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              是否启用AI
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              是否启用指令
-            </th>
-          </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200 bg-white">
+        <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
           {{ range .friends }}
-          <tr class="even:bg-gray-50">
-            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-              {{ .Wxid }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{
-              .CustomAccount }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{
-              .Nickname }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ if eq .LastActive.IsNil true }}
-              无数据
-              {{ else }}
-              {{ .LastActive }}
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ if eq .IsOk true }}
-              <span
-                class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">是</span>
-              {{ else }}
-              <span
-                class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">否</span>
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ template "ai" . }}
-              <!-- 使用的模型 -->
-              {{ if eq .EnableAi true }}
-              <select id="location" name="location"
-                      class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6"
-                      onchange="aiModelChange(event, {{.Wxid}})">
-                <option value="" {{ if eq .AiModel
-                "" }}selected{{ end }}>默认(gpt-3.5-turbo-0613)
-                </option>
-
-                {{$useModel := .AiModel}}
-                {{ range $.aiModels }}
-                <option value="{{.Model}}" {{ if eq $useModel .Model}}selected{{ end }}>
-                  {{.Name}}({{.Model}})
-                </option>
+          <li class="overflow-hidden rounded-xl border border-gray-200">
+            <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
+              <img src="assets/img/status-{{ if eq .IsOk true }}ok{{else}}fail{{end}}.png" alt="Tuple" class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
+              <div class="flex-1">
+                <div class="text-sm font-medium leading-6 text-gray-900">{{ .Nickname }}</div>
+                {{ if eq .IsOk true }}
+                <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">正常</span>
+                {{ else }}
+                <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">已删除</span>
                 {{ end }}
-              </select>
+              </div>
+            </div>
+            <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">原始微信Id<br/>微信号</dt>
+                <dd>
+                  <div class="text-gray-700">{{ .Wxid }}</div>
+                  {{ if not (eq .CustomAccount "") }}
+                  <div class="truncate text-gray-500">{{ .CustomAccount }}</div>
+                  {{end}}
+                </dd>
+              </div>
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">最后活跃时间</dt>
+                <dd class="flex items-start gap-x-2">
+                  <div class="font-medium text-gray-900">
+                    {{ if eq .LastActive.IsNil true }}
+                    无数据
+                    {{ else }}
+                    <time datetime="{{ .LastActive }}">{{ .LastActive }}</time>
+                    {{ end }}
+                  </div>
+                </dd>
+              </div>
+
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">AI</dt>
+                <dd class="flex items-start gap-x-2">
+                  {{ template "ai" . }}
+                </dd>
+              </div>
+              {{ if eq .EnableAi true }}
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500 mt-2">AI模型</dt>
+                <dd class="flex items-start gap-x-2">
+                  <label>
+                    <select class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6" onchange="aiModelChange(event, {{.Wxid}})">
+                      {{$useModel := .AiModel}}
+                      {{ range $.aiModels }}
+                      <option value="{{.Model}}" {{ if eq $useModel .Model}}selected{{ end }}>
+                        {{.Name}}
+                      </option>
+                      {{ end }}
+                    </select>
+                  </label>
+                </dd>
+              </div>
               {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ template "command" . }}
-            </td>
-          </tr>
+
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">指令</dt>
+                <dd class="flex items-start gap-x-2">
+                  {{ template "command" . }}
+                </dd>
+              </div>
+
+            </dl>
+          </li>
           {{ end }}
-          </tbody>
-        </table>
+        </ul>
+
       </div>
     </div>
   </main>
diff --git a/views/index.html b/views/index.html
index 53988cc..d0bfbf7 100644
--- a/views/index.html
+++ b/views/index.html
@@ -24,11 +24,13 @@
         <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
           <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
             <dt class="truncate text-sm font-medium text-gray-500">好友数量</dt>
-            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ .friendCount }}</dd>
+            <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-900">{{ .friendCount }}/{{ .friendWithoutCount }}</dd>
+            <dd class="mt-1 text-xs font-semibold tracking-tight text-red-300">通讯录/已删除</dd>
           </div>
           <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
             <dt class="truncate text-sm font-medium text-gray-500">群组数量</dt>
-            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ .groupCount }}</dd>
+            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ .groupCount }}/{{ .groupWithoutCount }}</dd>
+            <dd class="mt-1 text-xs font-semibold tracking-tight text-red-300">在群聊/已退出</dd>
           </div>
           <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
             <dt class="truncate text-sm font-medium text-gray-500">是否配置VNC</dt>
diff --git a/views/static/img/status-fail.png b/views/static/img/status-fail.png
new file mode 100644
index 0000000..1576c01
Binary files /dev/null and b/views/static/img/status-fail.png differ
diff --git a/views/static/img/status-ok.png b/views/static/img/status-ok.png
new file mode 100644
index 0000000..5806d9a
Binary files /dev/null and b/views/static/img/status-ok.png differ