diff --git a/.gitignore b/.gitignore
index 3399f39..e96896b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,7 @@ package-lock.json
 .eslintcache
 
 logs
+!apps/web-ele/src/views/fengling/logs/
 *.log
 npm-debug.log*
 yarn-debug.log*
diff --git a/apps/web-ele/src/views/fengling/logs/index.vue b/apps/web-ele/src/views/fengling/logs/index.vue
new file mode 100644
index 0000000..9b9cef8
--- /dev/null
+++ b/apps/web-ele/src/views/fengling/logs/index.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+import {
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+  ElTabPane,
+  ElButton,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElDatePicker,
+  ElTag,
+} from 'element-plus';
+
+import { LogApi, type FenglingApi } from '#/api/fengling';
+
+const activeTab = ref('audit');
+const loading = ref(false);
+const auditTableData = ref<FenglingApi.Log.AuditLog[]>([]);
+const accessTableData = ref<FenglingApi.Log.AccessLog[]>([]);
+
+const searchParams = ref({
+  userId: undefined as number | undefined,
+  keyword: '',
+  action: '',
+  resourceType: '',
+  path: '',
+  statusCode: undefined as number | undefined,
+  startDate: '',
+  endDate: '',
+});
+
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const loadAuditLogs = async () => {
+  loading.value = true;
+  try {
+    const response = await LogApi.getAuditLogList({
+      page: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      userId: searchParams.value.userId,
+      action: searchParams.value.action || undefined,
+      resourceType: searchParams.value.resourceType || undefined,
+      startDate: searchParams.value.startDate || undefined,
+      endDate: searchParams.value.endDate || undefined,
+    });
+    auditTableData.value = response.items;
+    pagination.value.total = response.totalCount;
+  } catch (error) {
+    console.error('Failed to load audit logs', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadAccessLogs = async () => {
+  loading.value = true;
+  try {
+    const response = await LogApi.getAccessLogList({
+      page: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      userId: searchParams.value.userId,
+      path: searchParams.value.path || undefined,
+      statusCode: searchParams.value.statusCode,
+      startDate: searchParams.value.startDate || undefined,
+      endDate: searchParams.value.endDate || undefined,
+    });
+    accessTableData.value = response.items;
+    pagination.value.total = response.totalCount;
+  } catch (error) {
+    console.error('Failed to load access logs', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  if (activeTab.value === 'audit') {
+    loadAuditLogs();
+  } else {
+    loadAccessLogs();
+  }
+};
+
+onMounted(() => {
+  loadAuditLogs();
+});
+</script>
+
+<template>
+  <div class="p-5">
+    <h1 class="mb-5 text-2xl font-bold">Logs</h1>
+
+    <el-tabs v-model="activeTab" @tab-change="handleSearch">
+      <el-tab-pane label="Audit Logs" name="audit">
+        <div class="mb-4">
+          <div class="flex flex-wrap gap-2">
+            <el-input
+              v-model="searchParams.action"
+              placeholder="Action"
+              clearable
+              style="width: 200px"
+            />
+            <el-input
+              v-model="searchParams.resourceType"
+              placeholder="Resource Type"
+              clearable
+              style="width: 200px"
+            />
+            <el-date-picker
+              v-model="searchParams.startDate"
+              type="datetime"
+              placeholder="Start Date"
+              style="width: 250px"
+            />
+            <el-date-picker
+              v-model="searchParams.endDate"
+              type="datetime"
+              placeholder="End Date"
+              style="width: 250px"
+            />
+            <el-button type="primary" @click="handleSearch">Search</el-button>
+          </div>
+        </div>
+
+        <el-table :data="auditTableData" v-loading="loading" border stripe>
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="userId" label="User ID" width="100" />
+          <el-table-column prop="userName" label="Username" width="150" />
+          <el-table-column prop="action" label="Action" width="150" />
+          <el-table-column prop="resourceType" label="Resource Type" width="150" />
+          <el-table-column prop="resourceId" label="Resource ID" width="150" />
+          <el-table-column prop="details" label="Details" width="300" show-overflow-tooltip />
+          <el-table-column prop="ipAddress" label="IP Address" width="150" />
+          <el-table-column prop="createdAt" label="Created At" width="180" />
+        </el-table>
+
+        <div class="mt-4 flex justify-end">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @change="loadAuditLogs"
+          />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="Access Logs" name="access">
+        <div class="mb-4">
+          <div class="flex flex-wrap gap-2">
+            <el-input
+              v-model="searchParams.path"
+              placeholder="Path"
+              clearable
+              style="width: 250px"
+            />
+            <el-select v-model="searchParams.statusCode" placeholder="Status Code" clearable style="width: 150px">
+              <el-option label="200" :value="200" />
+              <el-option label="201" :value="201" />
+              <el-option label="400" :value="400" />
+              <el-option label="401" :value="401" />
+              <el-option label="403" :value="403" />
+              <el-option label="404" :value="404" />
+              <el-option label="500" :value="500" />
+            </el-select>
+            <el-date-picker
+              v-model="searchParams.startDate"
+              type="datetime"
+              placeholder="Start Date"
+              style="width: 250px"
+            />
+            <el-date-picker
+              v-model="searchParams.endDate"
+              type="datetime"
+              placeholder="End Date"
+              style="width: 250px"
+            />
+            <el-button type="primary" @click="handleSearch">Search</el-button>
+          </div>
+        </div>
+
+        <el-table :data="accessTableData" v-loading="loading" border stripe>
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="userId" label="User ID" width="100" />
+          <el-table-column prop="userName" label="Username" width="150" />
+          <el-table-column prop="path" label="Path" width="300" />
+          <el-table-column prop="method" label="Method" width="100">
+            <template #default="{ row }">
+              <el-tag :type="row.method === 'GET' ? 'success' : row.method === 'POST' ? 'primary' : 'warning'" size="small">
+                {{ row.method }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="statusCode" label="Status Code" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.statusCode < 300 ? 'success' : row.statusCode < 400 ? 'warning' : 'danger'" size="small">
+                {{ row.statusCode }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="duration" label="Duration (ms)" width="120" />
+          <el-table-column prop="ipAddress" label="IP Address" width="150" />
+          <el-table-column prop="createdAt" label="Created At" width="180" />
+        </el-table>
+
+        <div class="mt-4 flex justify-end">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @change="loadAccessLogs"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>