diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 00000000..a5b60d65
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,24 @@
+import LoginForm from "../../components/Form/LoginForm";
+import MainLayout from "../../layouts/MainLayout";
+
+// Page
+const Login = () => {
+ return (
+
+
+
+ เข้าสู่ระบบ
+
+
+ เข้าสู่ระบบของคุณ
+
+
+
+
+ );
+};
+
+export default Login;
+
+// Layout
+export const Layout = MainLayout;
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 00000000..a5ea1975
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,24 @@
+import RegisterForm from "../../components/Form/RegisterForm";
+import MainLayout from "../../layouts/MainLayout";
+
+// Page
+const Register = () => {
+ return (
+
+
+
+ ลงทะเบียน
+
+
+ ลงทะเบียนบัญชีของคุณ
+
+
+
+
+ );
+};
+
+export default Register;
+
+// Layout
+export const Layout = MainLayout;
diff --git a/src/assets/formIcon/check.svg b/src/assets/formIcon/check.svg
new file mode 100644
index 00000000..42954eb6
--- /dev/null
+++ b/src/assets/formIcon/check.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/formIcon/lock.svg b/src/assets/formIcon/lock.svg
new file mode 100644
index 00000000..67d0870a
--- /dev/null
+++ b/src/assets/formIcon/lock.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/formIcon/user.svg b/src/assets/formIcon/user.svg
new file mode 100644
index 00000000..b981b975
--- /dev/null
+++ b/src/assets/formIcon/user.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/components/Form/LoginForm.tsx b/src/components/Form/LoginForm.tsx
new file mode 100644
index 00000000..596889c6
--- /dev/null
+++ b/src/components/Form/LoginForm.tsx
@@ -0,0 +1,65 @@
+import { Link } from "react-router-dom";
+import checkIcon from "../../assets/formIcon/check.svg";
+import lockIcon from "../../assets/formIcon/lock.svg";
+import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
+
+const LoginForm = () => {
+ return (
+
+ );
+};
+
+export default LoginForm;
diff --git a/src/components/Form/RegisterForm.tsx b/src/components/Form/RegisterForm.tsx
new file mode 100644
index 00000000..5b906c8d
--- /dev/null
+++ b/src/components/Form/RegisterForm.tsx
@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+import lockIcon from "../../assets/formIcon/lock.svg";
+import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
+
+const RegisterForm = () => {
+ return (
+
+ );
+};
+
+export default RegisterForm;
diff --git a/src/components/Form/SubmitButton.tsx b/src/components/Form/SubmitButton.tsx
new file mode 100644
index 00000000..c1222a5b
--- /dev/null
+++ b/src/components/Form/SubmitButton.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+interface SubmitButtonProps {
+ text: ReactNode;
+}
+
+const SubmitButton: React.FC = ({
+ text,
+}: SubmitButtonProps) => {
+ return (
+
+ );
+};
+
+export default SubmitButton;
diff --git a/tailwind.config.js b/tailwind.config.js
index b9d39c6b..fa6439d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,7 @@ export default {
"johnjud-purple": "#3D0D40",
"johnjud-gray": "#808086",
"johnjud-yellow": "#FFFF31",
+ "johnjud-light-gray": "#D9D9D9",
},
},
},