diff --git a/APP/src/app/app.routes.ts b/APP/src/app/app.routes.ts
index 1d0029a..b11a04f 100644
--- a/APP/src/app/app.routes.ts
+++ b/APP/src/app/app.routes.ts
@@ -23,6 +23,7 @@ import { AttendanceCounterPageComponent } from './features/meal-attendance/pages
 import { OfferingEntryMobilePageComponent } from './features/giving/pages/offering-entry-mobile-page/offering-entry-mobile-page.component';
 import { SystemLogsPageComponent } from './features/logging/pages/system-logs-page/system-logs-page.component';
 import { AuditLogsPageComponent } from './features/logging/pages/audit-logs-page/audit-logs-page.component';
+import { AccountSettingsPageComponent } from './features/account/pages/account-settings-page/account-settings-page.component';
 
 export const routes: Routes = [
     // Public routes
@@ -46,6 +47,11 @@ export const routes: Routes = [
                 component: DashboardComponent,
                 data: { title: 'Dashboard', titleZh: '首頁', section: 'Home' },
             },
+            {
+                path: 'account',
+                component: AccountSettingsPageComponent,
+                data: { title: 'Account Settings', titleZh: '帳戶設定', section: 'Account' },
+            },
             {
                 path: 'admin/members',
                 component: MembersPageComponent,
diff --git a/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.html b/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.html
new file mode 100644
index 0000000..cb05966
--- /dev/null
+++ b/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.html
@@ -0,0 +1,9 @@
+<div class="p-4 md:p-6">
+  <section class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6 max-w-xl">
+    <h2 class="text-lg font-semibold mb-1">Change Password</h2>
+    <p class="text-sm text-gray-500 mb-4">
+      Changing your password signs you out on your other devices.
+    </p>
+    <app-change-password-form></app-change-password-form>
+  </section>
+</div>
diff --git a/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.ts b/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.ts
new file mode 100644
index 0000000..062ae15
--- /dev/null
+++ b/APP/src/app/features/account/pages/account-settings-page/account-settings-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChangePasswordFormComponent } from '../../components/change-password-form/change-password-form.component';
+
+@Component({
+  selector: 'app-account-settings-page',
+  standalone: true,
+  imports: [CommonModule, ChangePasswordFormComponent],
+  templateUrl: './account-settings-page.component.html',
+})
+export class AccountSettingsPageComponent {}
diff --git a/APP/src/app/portals/user-portal/components/user-header/user-header.component.ts b/APP/src/app/portals/user-portal/components/user-header/user-header.component.ts
index 2d638b2..73a706a 100644
--- a/APP/src/app/portals/user-portal/components/user-header/user-header.component.ts
+++ b/APP/src/app/portals/user-portal/components/user-header/user-header.component.ts
@@ -100,7 +100,7 @@ export class UserHeaderComponent implements OnInit, OnDestroy {
         {
           text: 'Settings',
           icon: 'settings',
-          disabled: true
+          click: () => this.router.navigate(['/user-portal/account'])
         },
         { separator: true },
         {