diff --git a/packages/app/constants/settings/security/components/changePassword/index.jsx b/packages/app/constants/settings/security/components/changePassword/index.jsx
index ac2b250a..8d0a98ab 100755
--- a/packages/app/constants/settings/security/components/changePassword/index.jsx
+++ b/packages/app/constants/settings/security/components/changePassword/index.jsx
@@ -1,10 +1,26 @@
 import React from "react"
 import * as antd from "antd"
 
-export default (props) => {
-    return <div>
-        <antd.Button>
-            Change password
-        </antd.Button>
+const ChangePasswordComponent = (props) => {
+    const [loading, setLoading] = React.useState(false)
+
+    return <div className="changePasswordPrompt">
+        <div className="title">
+            <h1>Change Password</h1>
+        </div>
+
+        <div className="form">
+            
+        </div>
     </div>
+}
+
+export default (props) => {
+    const onClick = () => {
+        app.SidedrawerController.open("passwordChange", ChangePasswordComponent)
+    }
+
+    return <antd.Button onClick={onClick}>
+        Change password
+    </antd.Button>
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/security/change-password/index.jsx b/packages/app/src/pages/security/change-password/index.jsx
new file mode 100644
index 00000000..b2a55698
--- /dev/null
+++ b/packages/app/src/pages/security/change-password/index.jsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+export default (props) => {
+    return <div>
+        <h1>Change Password</h1>
+    </div>
+}
\ No newline at end of file