diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1176c85..09e9c1e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Login from "./pages/Login";
 import Tasks from "./pages/Tasks";
 import Profile from "./pages/Profile";
+import ChangePassword from "./pages/ChangePassword";
 
 const App = () => {
   return (
@@ -9,7 +10,8 @@ const App = () => {
       <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="/tasks" element={<Tasks />} />
-        <Route path="/profile" element={<Profile />} />        
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/profile/change-password" element={<ChangePassword />} />
       </Routes>
     </Router>
   );
diff --git a/frontend/src/pages/ChangePassword.tsx b/frontend/src/pages/ChangePassword.tsx
new file mode 100644
index 0000000..76631bb
--- /dev/null
+++ b/frontend/src/pages/ChangePassword.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "../api/api";
+import Cookies from "js-cookie"
+
+const ChangePassword = () => {
+  const id = Cookies.get("user_id")
+  const navigate = useNavigate();
+  if (!id) {
+    navigate("/login")
+  }
+  const [newPassword, setNewPassword] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setSuccess("");
+
+    try {
+      await api.patch(`/users/${id}`, {
+        password: newPassword,
+      });
+
+      setSuccess("Hasło zostało zmienione.");
+      setNewPassword("");
+
+      setTimeout(() => navigate("/profile"), 2000); // krótka pauza, żeby pokazać sukces
+    } catch (err: any) {
+      console.error(err);
+      setError(err.response?.data?.message || "Błąd zmiany hasła.");
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Zmień hasło</h1>
+
+      <form onSubmit={handleSubmit} className="bg-white shadow p-4 rounded flex flex-col gap-4">
+        <input
+          type="password"
+          placeholder="Nowe hasło"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          required
+          className="border p-2 rounded"
+        />
+
+        <button
+          type="submit"
+          className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+        >
+          💾 Zapisz hasło
+        </button>
+
+        {error && <p className="text-red-500">{error}</p>}
+        {success && <p className="text-green-600">{success}</p>}
+      </form>
+    </div>
+  );
+};
+
+export default ChangePassword;
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 50e2fa4..7b42f75 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -57,7 +57,7 @@ const Profile = () => {
 
       <div className="flex flex-col gap-2">
         <button
-          onClick={() => navigate(`/profile/${user.id}/change-password`)}
+          onClick={() => navigate("/profile/change-password")}
           className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
         >
           🔐 Zmień hasło