diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 03fd0ff9..a5b60d65 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,6 +1,4 @@
-import { Link } from "react-router-dom";
 import LoginForm from "../../components/Form/LoginForm";
-import SubmitButton from "../../components/Form/SubmitButton";
 import MainLayout from "../../layouts/MainLayout";
 
 // Page
@@ -16,18 +14,6 @@ const Login = () => {
         </p>
       </div>
       <LoginForm />
-      <div className="flex flex-col items-center justify-center">
-        <SubmitButton text="เข้าสู่ระบบ" />
-        <div className="flex space-x-2 px-2.5 py-2">
-          <span className="text-base-johnjud-gray">ยังไม่มีบัญชี?</span>
-          <Link
-            to="/register"
-            className="text-base font-semibold text-black underline"
-          >
-            ลงทะเบียน
-          </Link>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 5e6d5d93..a5ea1975 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -1,6 +1,4 @@
-import { Link } from "react-router-dom";
 import RegisterForm from "../../components/Form/RegisterForm";
-import SubmitButton from "../../components/Form/SubmitButton";
 import MainLayout from "../../layouts/MainLayout";
 
 // Page
@@ -16,18 +14,6 @@ const Register = () => {
         </p>
       </div>
       <RegisterForm />
-      <div className="flex flex-col items-center justify-center">
-        <SubmitButton text="ลงทะเบียน" />
-        <div className="flex space-x-2 px-2.5 py-2">
-          <span className="text-base-johnjud-gray">มีบัญชีอยู่แล้ว?</span>
-          <Link
-            to="/login"
-            className="text-base font-semibold text-black underline"
-          >
-            คลิกเพื่อเข้าสู่ระบบ
-          </Link>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/src/components/Form/LoginForm.tsx b/src/components/Form/LoginForm.tsx
index 6fcd6250..596889c6 100644
--- a/src/components/Form/LoginForm.tsx
+++ b/src/components/Form/LoginForm.tsx
@@ -2,46 +2,61 @@ 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 (
-    <form className="flex w-full flex-col items-center justify-center space-y-4 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={userIcon} alt="Icon" className="mx-2" />
-        <input
-          type="text"
-          placeholder="ชื่อผู้ใช้"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
-      </div>
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={lockIcon} alt="Icon" className="mx-2" />
-        <input
-          type="password"
-          placeholder="รหัสผ่าน"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
-      </div>
-      <div className="flex w-full justify-between">
-        <label className="flex cursor-pointer items-center">
+    <form className="flex w-full flex-col items-center justify-center space-y-20 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+      <div className="flex w-full flex-col items-center justify-center space-y-4">
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={userIcon} alt="Icon" className="mx-2" />
           <input
-            type="checkbox"
-            className="peer sr-only"
-            id="custom-checkbox"
+            type="text"
+            placeholder="ชื่อผู้ใช้"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
           />
-          <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-johnjud-light-gray peer-checked:hidden" />
-          <div className="hidden h-5 w-5 items-center justify-center rounded-sm bg-primary peer-checked:flex">
-            <img src={checkIcon} alt="Icon" className="h-4 w-4" />
-          </div>
+        </div>
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={lockIcon} alt="Icon" className="mx-2" />
+          <input
+            type="password"
+            placeholder="รหัสผ่าน"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+          />
+        </div>
+        <div className="flex w-full justify-between">
+          <label className="flex cursor-pointer items-center">
+            <input
+              type="checkbox"
+              className="peer sr-only"
+              id="custom-checkbox"
+            />
+            <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-johnjud-light-gray peer-checked:hidden" />
+            <div className="hidden h-5 w-5 items-center justify-center rounded-sm bg-primary peer-checked:flex">
+              <img src={checkIcon} alt="Icon" className="h-4 w-4" />
+            </div>
 
-          <span className="ml-2 text-johnjud-gray">จดจำฉัน</span>
-        </label>
-        <Link
-          to="/forgot-password"
-          className="text-base font-medium text-johnjud-gray underline"
-        >
-          ลืมรหัสผ่าน?
-        </Link>
+            <span className="ml-2 text-black">จดจำฉัน</span>
+          </label>
+          <Link
+            to="/forgot-password"
+            className="text-base font-medium text-johnjud-gray underline"
+          >
+            ลืมรหัสผ่าน?
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center">
+        <SubmitButton text="เข้าสู่ระบบ" />
+        <div className="flex space-x-2 px-2.5 py-2">
+          <span className="text-base-johnjud-gray">ยังไม่มีบัญชี?</span>
+          <Link
+            to="/register"
+            className="text-base font-semibold text-black underline"
+          >
+            ลงทะเบียน
+          </Link>
+        </div>
       </div>
     </form>
   );
diff --git a/src/components/Form/RegisterForm.tsx b/src/components/Form/RegisterForm.tsx
index 666c6647..5b906c8d 100644
--- a/src/components/Form/RegisterForm.tsx
+++ b/src/components/Form/RegisterForm.tsx
@@ -1,40 +1,56 @@
+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 (
-    <form className="flex w-full flex-col items-center justify-center space-y-4 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={userIcon} alt="Icon" className="mx-2" />
-        <input
-          type="text"
-          placeholder="ชื่อ"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
+    <form className="flex w-full flex-col items-center justify-center space-y-12 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+      <div className="flex w-full flex-col items-center justify-center space-y-4">
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={userIcon} alt="Icon" className="mx-2" />
+          <input
+            type="text"
+            placeholder="ชื่อ"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+          />
+        </div>
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={userIcon} alt="Icon" className="mx-2" />
+          <input
+            type="text"
+            placeholder="นามสกุล"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+          />
+        </div>
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={userIcon} alt="Icon" className="mx-2" />
+          <input
+            type="email"
+            placeholder="อีเมล"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+          />
+        </div>
+        <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+          <img src={lockIcon} alt="Icon" className="mx-2" />
+          <input
+            type="password"
+            placeholder="รหัสผ่าน"
+            className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+          />
+        </div>
       </div>
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={userIcon} alt="Icon" className="mx-2" />
-        <input
-          type="text"
-          placeholder="นามสกุล"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
-      </div>
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={userIcon} alt="Icon" className="mx-2" />
-        <input
-          type="email"
-          placeholder="อีเมล"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
-      </div>
-      <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
-        <img src={lockIcon} alt="Icon" className="mx-2" />
-        <input
-          type="password"
-          placeholder="รหัสผ่าน"
-          className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
-        />
+      <div className="flex flex-col items-center justify-center">
+        <SubmitButton text="ลงทะเบียน" />
+        <div className="flex space-x-2 px-2.5 py-2">
+          <span className="text-base-johnjud-gray">มีบัญชีอยู่แล้ว?</span>
+          <Link
+            to="/login"
+            className="text-base font-semibold text-black underline"
+          >
+            คลิกเพื่อเข้าสู่ระบบ
+          </Link>
+        </div>
       </div>
     </form>
   );
diff --git a/src/components/Form/SubmitButton.tsx b/src/components/Form/SubmitButton.tsx
index 21124e08..c1222a5b 100644
--- a/src/components/Form/SubmitButton.tsx
+++ b/src/components/Form/SubmitButton.tsx
@@ -8,7 +8,10 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
   text,
 }: SubmitButtonProps) => {
   return (
-    <button className="w-full text-nowrap rounded-3xl bg-primary px-28 py-3 text-2xl font-semibold text-white focus:outline-none">
+    <button
+      type="submit"
+      className="w-full text-nowrap rounded-3xl bg-primary px-28 py-3 text-2xl font-semibold text-white focus:outline-none"
+    >
       {text}
     </button>
   );