diff --git a/src/components/WebsiteCard/index.vue b/src/components/WebsiteCard/index.vue
new file mode 100644
index 0000000..0e4f6ff
--- /dev/null
+++ b/src/components/WebsiteCard/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-card class="cursor-pointer" shadow="hover" @click="handleClick">
+    <div class="flex flex-col gap-3">
+      <div class="flex gap-1 items-center">
+        <el-avatar shape="square" :size="40" fit="cover" :src="websiteInfo.logo" />
+        <div class="flex flex-col gap-0.5">
+          <div class="text-lg">{{ websiteInfo.name }}</div>
+          <div class="flex gap-1 items-center text-xs text-slate-400 font-thin">
+            <template v-for="(tag, index) in websiteInfo.tags" :key="index">
+              <span>
+                {{ tag }}
+              </span>
+              <template v-if="index !== websiteInfo.tags.length - 1">
+                <el-divider direction="vertical" />
+              </template>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="text-sm text-slate-600 font-medium line-clamp-2">{{ websiteInfo.desc }}</div>
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import type { WebsiteList } from '~/types'
+// 父组件传递参数
+const props = defineProps<{
+  websiteInfo: WebsiteList
+}>()
+
+// 点击卡片回调
+const handleClick = () => {
+  window.open(props.websiteInfo.url)
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-avatar) {
+  background-color: transparent;
+}
+</style>
diff --git a/src/pages/admin/_components/categorys/index.vue b/src/pages/admin/_components/categorys/index.vue
index f7fa5cc..b1dd7a2 100644
--- a/src/pages/admin/_components/categorys/index.vue
+++ b/src/pages/admin/_components/categorys/index.vue
@@ -2,12 +2,14 @@
   <div class="flex flex-col gap-4">
     <el-space wrap>
       <el-input v-model="name" style="width: 240px" placeholder="输入分类名称搜索" />
-      <el-button type="primary" :loading="pending" @click="handleSearch"> 查询 </el-button>
+      <el-button type="primary" :loading="status === 'pending'" @click="handleSearch">
+        查询
+      </el-button>
       <el-button type="primary" @click="handleAdd"> 新增 </el-button>
     </el-space>
     <!-- 表格列表 -->
     <table-template
-      :pending="pending"
+      :pending="status === 'pending'"
       :data-source="data?.data?.list || []"
       @handle-edit="handleEdit"
       @handle-delete="handleDelete"
@@ -43,7 +45,7 @@ const name = ref('') // 分类名称
 const modalRef = ref<InstanceType<typeof EditModal>>()
 
 // 请求列表
-const { data, pending, refresh } = await useFetch<Response<PageResponse<CategoryList>>>(
+const { data, refresh, status } = await useFetch<Response<PageResponse<CategoryList>>>(
   '/api/categorys',
   {
     query: { current, pageSize, name },
diff --git a/src/pages/admin/_components/websites/index.vue b/src/pages/admin/_components/websites/index.vue
index b8b75c3..d6c8dbb 100644
--- a/src/pages/admin/_components/websites/index.vue
+++ b/src/pages/admin/_components/websites/index.vue
@@ -10,7 +10,7 @@
             v-model="form.category_id"
             clearable
             filterable
-            :loading="categoryLoading"
+            :loading="categoryLoading === 'pending'"
             placeholder="请选择所属分类"
             style="width: 240px"
           >
@@ -23,12 +23,14 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <el-button type="primary" :loading="pending" @click="handleSearch"> 查询 </el-button>
+      <el-button type="primary" :loading="status === 'pending'" @click="handleSearch">
+        查询
+      </el-button>
       <el-button type="primary" @click="handleAdd"> 新增 </el-button>
     </el-space>
     <!-- 表格列表 -->
     <table-template
-      :pending="pending"
+      :pending="status === 'pending'"
       :data-source="data?.data?.list || []"
       @handle-edit="handleEdit"
       @handle-delete="handleDelete"
@@ -69,14 +71,14 @@ const form = reactive({
 const modalRef = ref<InstanceType<typeof EditModal>>()
 
 // 请求分类列表
-const { data: categoryData, pending: categoryLoading } = await useFetch<
+const { data: categoryData, status: categoryLoading } = await useFetch<
   Response<PageResponse<CategoryList>>
 >('/api/categorys', {
   query: { current: 1, pageSize: 9999 } // 这里请求全部分类
 })
 
 // 请求站点列表
-const { data, pending, refresh } = await useFetch<Response<PageResponse<WebsiteList>>>(
+const { data, status, refresh } = await useFetch<Response<PageResponse<WebsiteList>>>(
   '/api/websites',
   {
     query: Object.assign(form, {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9352acc..f04f298 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,20 +1,54 @@
 <template>
   <div
-    class="flex justify-center items-center font-black text-5xl flex-col"
-    style="height: calc(100vh - 10rem)"
+    class="flex justify-center items-center font-black text-5xl flex-col gap-2"
+    style="min-height: calc(100vh - 10rem)"
   >
     Hello World!
-    <div class="flex gap-4 mt-4">
-      <el-button v-for="item in data" :key="item.id">
-        {{ item.name }}
-      </el-button>
-    </div>
+    <ClientOnly>
+      <el-button-group v-loading="categoryStatus === 'pending'">
+        <el-button text :bg="!category_id" @click="category_id = ''">全部</el-button>
+        <el-button
+          v-for="item in categoryList?.data?.list || []"
+          :key="item.id"
+          text
+          :bg="category_id === item.id"
+          @click="category_id = item.id"
+        >{{ item.name }}</el-button>
+      </el-button-group>
+      <div
+        v-loading="websiteStatus === 'pending'"
+        class="grid gap-5 w-full px-4 justify-center"
+        style="grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr))"
+      >
+        <template v-if="websiteList?.data?.list?.length">
+          <WebsiteCard
+            v-for="item in websiteList?.data?.list || []"
+            :key="item.id"
+            :website-info="item"
+          />
+        </template>
+        <el-empty v-else description="此分类暂无站点，请前往后台添加数据!" />
+      </div>
+    </ClientOnly>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { CategoryList } from '~/types'
-const supabase = useSupabaseClient<CategoryList>()
+import type { PageResponse, CategoryList, Response, WebsiteList } from '~/types'
 
-const { data } = await supabase.from('ds_categorys').select()
+const category_id = ref('')
+
+// 请求站点列表
+const { data: websiteList, status: websiteStatus } = await useFetch<
+  Response<PageResponse<WebsiteList>>
+>('/api/websites', {
+  query: { current: 1, pageSize: 999, category_id }
+})
+
+// 请求分类列表
+const { data: categoryList, status: categoryStatus } = await useFetch<
+  Response<PageResponse<CategoryList>>
+>('/api/categorys', {
+  query: { current: 1, pageSize: 999 }
+})
 </script>
diff --git a/Tailwind .config.cjs b/tailwind.config.cjs
similarity index 100%
rename from Tailwind .config.cjs
rename to tailwind.config.cjs