diff --git a/frontend/src/pages/system/logs/index.less b/frontend/src/pages/system/logs/index.less
new file mode 100644
index 0000000..e2f379d
--- /dev/null
+++ b/frontend/src/pages/system/logs/index.less
@@ -0,0 +1,55 @@
+.logs-tabs {
+  padding: 12px 24px 0;
+
+  .ant-tabs-nav {
+    margin: 0 0 16px;
+  }
+
+  .ant-tabs-nav::before,
+  .ant-tabs-ink-bar {
+    display: none;
+  }
+
+  .ant-tabs-nav-list {
+    gap: 10px;
+  }
+
+  .ant-tabs-tab {
+    padding: 0;
+  }
+
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0;
+  }
+
+  .logs-tab-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 86px;
+    height: 34px;
+    padding: 0 14px;
+    border: 1px solid #d9e6ff;
+    border-radius: 8px;
+    background: #fff;
+    color: rgba(0, 0, 0, 0.72);
+    font-weight: 500;
+    line-height: 1;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .ant-tabs-tab:hover .logs-tab-button {
+    color: var(--app-primary-color, #1677ff);
+    border-color: #91caff;
+    background: rgba(22, 119, 255, 0.04);
+  }
+
+  .ant-tabs-tab-active .logs-tab-button {
+    color: var(--app-primary-color, #1677ff);
+    border-color: var(--app-primary-color, #1677ff);
+    background: rgba(22, 119, 255, 0.08);
+    box-shadow: 0 6px 16px rgba(22, 119, 255, 0.14);
+  }
+}
diff --git a/frontend/src/pages/system/logs/index.tsx b/frontend/src/pages/system/logs/index.tsx
index 1b4555a..869d14d 100644
--- a/frontend/src/pages/system/logs/index.tsx
+++ b/frontend/src/pages/system/logs/index.tsx
@@ -9,6 +9,7 @@ import PageContainer from "@/components/shared/PageContainer";
 import ListTable from "@/components/shared/ListTable/ListTable";
 import AppPagination from "@/components/shared/AppPagination";
 import type { SysLog, UserProfile } from "@/types";
+import "./index.less";
 
 const { RangePicker } = DatePicker;
 const { Text } = Typography;
@@ -61,6 +62,13 @@ export default function Logs() {
     return activeTab === "OPERATION" ? t("logs.opLog") : t("logs.loginLog");
   }, [activeTab, logTypeDict, t]);
 
+  const renderLogTab = (type: string, label: string) => (
+    <span className="logs-tab-button">
+      {type === "OPERATION" ? <InfoCircleOutlined aria-hidden="true" /> : <UserOutlined aria-hidden="true" />}
+      <span>{label}</span>
+    </span>
+  );
+
   const loadData = async (currentParams = params) => {
     setLoading(true);
     try {
@@ -328,6 +336,7 @@ export default function Logs() {
     >
       <Card className="app-page__content-card" style={{ flex: 1, minHeight: 0 }} styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
       <Tabs
+        className="logs-tabs"
         activeKey={activeTab}
         onChange={(key) => { setActiveTab(key); setParams((prev) => ({ ...prev, current: 1, moduleName: "" })); }}
         size="large"
@@ -347,8 +356,8 @@ export default function Logs() {
         )}
       >
         {logTypeDict.length > 0
-          ? logTypeDict.map((item) => <Tabs.TabPane tab={<span>{item.itemValue === "OPERATION" ? <InfoCircleOutlined aria-hidden="true" /> : <UserOutlined aria-hidden="true" />}{item.itemLabel}</span>} key={item.itemValue} />)
-          : <><Tabs.TabPane tab={<span><InfoCircleOutlined aria-hidden="true" />{t("logs.opLog")}</span>} key="OPERATION" /><Tabs.TabPane tab={<span><UserOutlined aria-hidden="true" />{t("logs.loginLog")}</span>} key="LOGIN" /></>}
+          ? logTypeDict.map((item) => <Tabs.TabPane tab={renderLogTab(item.itemValue, item.itemLabel)} key={item.itemValue} />)
+          : <><Tabs.TabPane tab={renderLogTab("OPERATION", t("logs.opLog"))} key="OPERATION" /><Tabs.TabPane tab={renderLogTab("LOGIN", t("logs.loginLog"))} key="LOGIN" /></>}
       </Tabs>
 
         <div className="app-page__table-wrap" style={{flex: 1, minHeight: 0, overflow: "hidden", padding: "0 24px"}}>