diff --git a/app/javascript/components/Account/ForgotPasswordPage/index.tsx b/app/javascript/components/Account/ForgotPasswordPage/index.tsx
new file mode 100644
index 0000000000..08b7658863
--- /dev/null
+++ b/app/javascript/components/Account/ForgotPasswordPage/index.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import Container from "../../Container";
+
+const ForgotPasswordPage = () => (
+  <Container>
+    <h2 className="font-medium text-center text-3xl lg:text-4xl text-miru-1000 mb-5">
+        Miru
+    </h2>
+    <div className="p-5 2xl:p-10 shadow-xl rounded-lg">
+      <h2 className="text-miru-1000 lg:mb-3 text-base font-medium">
+          Forgot Password
+      </h2>
+
+      <form>
+        <div className="field">
+          <label htmlFor="email" className="text-xs text-miru-1000">
+              Email
+          </label>
+          <br />
+          <input
+            type="email"
+            className="h-8 w-full focus:outline-none bg-miru-200 text-sm"
+            id="email"
+          />
+        </div>
+
+        <div className="actions">
+          <button
+            type="submit"
+            className="mt-5 h-8 w-full bg-miru-400 font-bold text-white text-base hover:bg-miru-1000"
+          >
+              RESET PASSWORD
+          </button>
+        </div>
+      </form>
+      <div className="text-center m-2">
+        <p className="text-center text-miru-400 text-xs hover:text-miru-1000">
+          <a href="/login">Sign In</a>
+        </p>
+      </div>
+    </div>
+  </Container>
+);
+
+export default ForgotPasswordPage;
diff --git a/app/javascript/components/App.tsx b/app/javascript/components/App.tsx
index 21b8d920ec..710fc10709 100644
--- a/app/javascript/components/App.tsx
+++ b/app/javascript/components/App.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { Routes, Route, BrowserRouter as Router } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
+import ForgotPasswordPage from "./Account/ForgotPasswordPage";
 import LoginPage from "./Account/LoginPage";
 import SignupPage from "./Account/SignupPage";
 
@@ -22,6 +23,7 @@ const App = () => {
       <Routes>
         <Route path="login" element={<LoginPage />} />
         <Route path="signup" element={<SignupPage />} />
+        <Route path="users/password/reset" element={<ForgotPasswordPage />} />
       </Routes>
     </Router>
   );
diff --git a/app/javascript/components/Container.tsx b/app/javascript/components/Container.tsx
new file mode 100644
index 0000000000..0840ff220d
--- /dev/null
+++ b/app/javascript/components/Container.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+
+const Container = ({ children }) => (
+  <div className="pt-10/100 px-10 xsm:px-20/100 sm:px-26/100 md:px-30/100 lg:px-32/100 xl:px-36/100">
+    <div className="font-jakartasans">{children}</div>
+  </div>
+);
+
+export default Container;