diff --git a/package.json b/package.json
index 47f3c414..b5239719 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "2.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
diff --git a/src/api/types.ts b/src/api/types.ts
index 7a0dacb6..5b26e2a1 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -115,3 +115,40 @@ export interface MediaInfo {
   // 二级分类
   category?: string
 }
+
+
+// 站点
+export interface Site {
+  // ID
+    id: number
+    // 站点名称
+    name: string
+    // 站点主域名Key
+    domain: string
+    // 站点地址
+    url: string
+    // 站点优先级
+    pri?:number
+    // RSS地址
+    rss?: string
+    // Cookie
+    cookie?: string
+    // User-Agent
+    ua?: string
+    // 是否使用代理
+    proxy?:number
+    // 过滤规则
+    filter?: string
+    // 是否演染
+    render?:number
+    // 备注
+    note?: string
+    // 流控单位周期
+    limit_interval?:number
+    // 流控次数
+    limit_count?:number
+    // 流控间隔
+    limit_seconds?:number
+    // 是否启用
+    is_active: boolean
+}
diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
new file mode 100644
index 00000000..cbc8910f
--- /dev/null
+++ b/src/components/cards/SiteCard.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import api from "@/api";
+import { Site } from "@/api/types";
+// 输入参数
+const props = defineProps({
+  site: Object as PropType<Site>,
+  width: String,
+  height: String,
+});
+
+// 图标
+const siteIcon = ref<string>("");
+
+// 查询站点图标
+const getSiteIcon = async (siteid: number) => {
+  try {
+    siteIcon.value = (await api.get("site/icon/" + siteid)).data.icon;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+onMounted(() => {
+  getSiteIcon(props.site?.id ?? 0);
+});
+</script>
+
+<template>
+  <VCard :height="props.height" :width="props.width">
+    <VCardItem>
+      <VCardTitle>{{ props.site?.name }}</VCardTitle>
+      <VCardSubtitle>{{ props.site?.url }}</VCardSubtitle>
+    </VCardItem>
+
+    <VIcon
+      v-if="props.site?.is_active"
+      icon="mdi-check-circle-outline"
+      color="success"
+      size="32"
+      class="absolute right-2 top-2 bg-opacity-80 text-white font-bold"
+    >
+    </VIcon>
+
+    <VAvatar class="absolute right-5 bottom-5">
+      <VImg :src="siteIcon"></VImg>
+    </VAvatar>
+
+    <VCardText class="py-2">
+      <VTooltip text="浏览器仿真">
+        <template #activator="{ props }">
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
+        </template>
+      </VTooltip>
+
+      <VTooltip text="代理">
+        <template #activator="{ props }">
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
+        </template>
+      </VTooltip>
+
+      <VTooltip text="流控">
+        <template #activator="{ props }">
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
+        </template>
+      </VTooltip>
+
+      <VTooltip text="过滤">
+        <template #activator="{ props }">
+          <VIcon
+            color="primary"
+            class="me-2"
+            v-bind="props"
+            icon="mdi-filter-cog-outline"
+          />
+        </template>
+      </VTooltip>
+    </VCardText>
+
+    <VCardActions>
+      <VBtn>更新</VBtn>
+      <VBtn>编辑</VBtn>
+    </VCardActions>
+  </VCard>
+</template>
diff --git a/src/pages/site.vue b/src/pages/site.vue
index 326e87e5..3ccc108d 100644
--- a/src/pages/site.vue
+++ b/src/pages/site.vue
@@ -1,66 +1,9 @@
 <script setup lang="ts">
-import DemoFormLayoutHorizontalForm from '@/views/pages/form-layouts/DemoFormLayoutHorizontalForm.vue'
-import DemoFormLayoutHorizontalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutHorizontalFormWithIcons.vue'
-import DemoFormLayoutMultipleColumn from '@/views/pages/form-layouts/DemoFormLayoutMultipleColumn.vue'
-import DemoFormLayoutVerticalForm from '@/views/pages/form-layouts/DemoFormLayoutVerticalForm.vue'
-import DemoFormLayoutVerticalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutVerticalFormWithIcons.vue'
+import SiteListView from "@/views/site/SiteCardListView.vue";
 </script>
 
 <template>
   <div>
-    <VRow>
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <!-- 👉 Horizontal Form -->
-        <VCard title="Horizontal Form">
-          <VCardText>
-            <DemoFormLayoutHorizontalForm />
-          </VCardText>
-        </VCard>
-      </VCol>
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <!-- 👉 Horizontal Form with Icons -->
-        <VCard title="Horizontal Form with Icons">
-          <VCardText>
-            <DemoFormLayoutHorizontalFormWithIcons />
-          </VCardText>
-        </VCard>
-      </VCol>
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <!-- 👉 Vertical Form -->
-        <VCard title="Vertical Form">
-          <VCardText>
-            <DemoFormLayoutVerticalForm />
-          </VCardText>
-        </VCard>
-      </VCol>
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <!-- 👉 Vertical Form with Icons -->
-        <VCard title="Vertical Form with Icons">
-          <VCardText>
-            <DemoFormLayoutVerticalFormWithIcons />
-          </VCardText>
-        </VCard>
-      </VCol>
-      <VCol cols="12">
-        <!-- 👉 Multiple Column -->
-        <VCard title="Multiple Column">
-          <VCardText>
-            <DemoFormLayoutMultipleColumn />
-          </VCardText>
-        </VCard>
-      </VCol>
-    </VRow>
+    <SiteListView />
   </div>
 </template>
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
new file mode 100644
index 00000000..d0f21867
--- /dev/null
+++ b/src/views/site/SiteCardListView.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import api from "@/api";
+import { Site } from "@/api/types";
+import SiteCard from "@/components/cards/SiteCard.vue";
+
+// 数据列表
+const dataList = ref<Site[]>([]);
+
+// 获取订阅列表数据
+const fetchData = async () => {
+  try {
+    dataList.value = await api.get("site");
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 加载时获取数据
+onMounted(fetchData);
+</script>
+
+<template>
+  <div class="grid gap-3 grid-site-card">
+    <SiteCard v-for="data in dataList" :key="data.id" :site="data" />
+  </div>
+</template>
+
+<style type="scss">
+.grid-site-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+</style>