diff --git a/src/pages/settings/index.vue b/src/pages/settings/index.vue
new file mode 100644
index 0000000..4408192
--- /dev/null
+++ b/src/pages/settings/index.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+
+
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+import {useUserStore} from "@/store";
+
+const {theme} = storeToRefs(useUserStore());
+const lightTheme = computed(() => theme.value === 'light');
+
+/*
+名字
+借阅证号
+已借图书数量
+欠费金额
+*/
+</script>
+
+<template>
+    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
+        <t-typography-title level="h2">个人信息</t-typography-title>
+        <div class="info">
+            <div class="true-info">
+                <t-typography-title level="h5">姓名:</t-typography-title>
+                <t-typography-title level="h5">AlexJR</t-typography-title>
+                <t-typography-title level="h5">借阅证号:</t-typography-title>
+                <t-typography-title level="h5">123456789</t-typography-title>
+                <t-typography-title level="h5">已借图书数量:</t-typography-title>
+                <t-typography-title level="h5">5</t-typography-title>
+                <t-typography-title level="h5">欠费金额:</t-typography-title>
+                <t-typography-title level="h5">20</t-typography-title>
+            </div>
+                    <t-button class="button">修改信息</t-button>
+        </div>
+
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/index.less';
+
+@basic-color: var(--basic-color);
+.search {
+    background-color: @basic-color;
+}
+
+.info {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+}
+
+.true-info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 50%;
+}
+
+.true-info > * {
+    margin: 16px 13px;
+}
+
+.true-info :nth-child(odd) {
+    text-align: right;
+}
+
+.button{
+    margin-left: calc(25% - 43px);
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7687110..8b743b8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,7 @@ import type {RouteRecordRaw} from "vue-router";
 const defaultRouterList: Array<RouteRecordRaw> = [
     {
         path: '/',
-        redirect: '/base/homepage'
+        redirect: '/login'
     },
     {
         path: '/login',
@@ -30,6 +30,11 @@ const defaultRouterList: Array<RouteRecordRaw> = [
                 name: 'record',
                 component: () => import('@/pages/record/index.vue'),
             },
+            {
+                path: 'settings',
+                name: 'settings',
+                component: () => import('@/pages/settings/index.vue'),
+            }
         ]
     }