diff --git a/.env.example b/.env.example
index 4e861f9..29326b9 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=
 NEXT_PUBLIC_APP_BASE_URL=
-NEXT_PUBLIC_SSO_BASE_URL=
\ No newline at end of file
+NEXT_PUBLIC_SSO_BASE_URL=
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..6e1c383
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode, MouseEvent } from 'react';
+
+interface ButtonProps {
+    content: ReactNode;
+    additionalStyle?: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+    content,
+    additionalStyle,
+    onClick,
+    disabled,
+}: ButtonProps) => {
+    return (
+        <button
+            className={`mx-auto w-40 max-w-full items-center py-2 text-white transition-all duration-500 hover:ring-8 disabled:cursor-not-allowed disabled:ring-0 ${additionalStyle}`}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {content}
+        </button>
+    );
+};
+
+export default Button;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 56c7c44..17240c3 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { Fragment, ReactNode } from 'react';
+import Button from './Button';
 import { ibmPlexSansThai } from './font';
 
 export interface ModalProps {
@@ -58,25 +59,19 @@ export const Modal = ({
                                         {children}
                                     </div>
                                     <div className="mt-6 flex flex-row justify-center gap-6">
-                                        <button
-                                            type="button"
-                                            className={` ${
-                                                `${answer1}` == ''
-                                                    ? 'aria-hidden hidden'
-                                                    : 'inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-pink-600 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-pink-600/20 hover:ring-offset-4 hover:ring-offset-pink-600/50'
-                                            } 
-                                            `}
+                                        {/* แก้ button */}
+                                        <Button
+                                            content={answer1}
+                                            additionalStyle="bg-pink-600 mx-0 shadow-sm rounded-3xl font-semibold text-lg hover:ring-2 hover:ring-pink-600/20 hover:ring-offset-4 hover:ring-offset-pink-600/50"
                                             onClick={() => onClose(1)}
-                                        >
-                                            {answer1}
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-purple-300 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-purple-300/20 hover:ring-offset-4 hover:ring-offset-purple-300/50"
+                                            disabled={false}
+                                        />
+                                        <Button
+                                            content={answer2}
+                                            additionalStyle="bg-purple-300 mx-0 shadow-sm rounded-3xl font-semibold text-lg hover:ring-2 hover:ring-purple-600/20 hover:ring-offset-4 hover:ring-offset-purple-600/50"
                                             onClick={() => onClose(2)}
-                                        >
-                                            {answer2}
-                                        </button>
+                                            disabled={false}
+                                        />
                                     </div>
                                 </Dialog.Panel>
                             </Transition.Child>
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
index 50f5747..a4b4204 100644
--- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import { useAuth } from '@/context/AuthContext';
 import { useMemo } from 'react';
 import { BaanSize, IShortBaan } from '@/types/baan';
+import Button from '@/components/Button';
 
 const profilePic = '/images/pfp-placeholder.svg';
 
@@ -81,15 +82,15 @@ export default function BaanPanel() {
                     <hr className="h-8" />
                 )}
 
-                <button
-                    className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:bg-pink-300"
+                {/* แก้ button */}
+                <Button
+                    additionalStyle="rounded-lg bg-pink-400 ring-pink-400/30 text-xl disabled:bg-pink-300 enabled:hover:ring-8 disabled:ring-4"
+                    content={<>เปลี่ยนอันดับ </>}
                     onClick={() => {
                         router.push('/baan-selection');
                     }}
                     disabled={isNotGroupOwner}
-                >
-                    เปลี่ยนอันดับ
-                </button>
+                />
             </div>
         </div>
     );
diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
index 270d79e..6899df1 100644
--- a/src/components/Profile/BaanSelection/components/GroupPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
@@ -6,6 +6,7 @@ import { httpDelete } from '@/utils/axios';
 import { Modal } from '@/components/Modal';
 import { useAppContext } from '@/context/ModalContext';
 import { StarIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import Button from '@/components/Button';
 
 const profilePic = '/images/pfp-placeholder.svg';
 
@@ -139,13 +140,13 @@ export default function GroupPanel() {
             </div>
             <div className="mt-6 flex flex-col place-items-center items-center justify-center gap-2 text-center text-sm">
                 <hr className="h-8" />
-                <button
-                    className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:cursor-not-allowed disabled:bg-pink-300"
+                {/* แก้ button */}
+                <Button
+                    additionalStyle="rounded-lg bg-pink-400 ring-pink-400/30 text-xl disabled:bg-pink-300"
+                    content={<>ออกจากกลุ่ม </>}
                     onClick={() => openModal('modal-leave-group')}
                     disabled={!isAuthenticated || group?.leaderID === user?.id}
-                >
-                    ออกจากกลุ่ม
-                </button>
+                />
             </div>
         </div>
     );
diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
index 77995c6..ab08867 100644
--- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
@@ -1,3 +1,4 @@
+import Button from '@/components/Button';
 import { useAuth } from '@/context/AuthContext';
 import { StarIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
 import Image from 'next/image';
@@ -25,16 +26,20 @@ export default function ProfileInfoPanel() {
                 <p className="select-none text-center text-3xl font-bold text-purple-400">
                     {user?.firstname} <br /> {user?.lastname}
                 </p>
-
-                <button
-                    className="mx-auto mt-8 flex w-40 max-w-full items-center justify-center rounded-lg bg-purple-400 px-4 py-2 text-base ring-4 ring-purple-400/30 transition-all duration-500 hover:ring-8"
+                {/* แก้ Button */}
+                <Button
+                    additionalStyle="rounded-lg bg-purple-400 ring-purple-400/30"
+                    content={
+                        <>
+                            แก้ไขข้อมูล{' '}
+                            <PencilSquareIcon className="ml-2 inline-block h-5" />
+                        </>
+                    }
                     onClick={() => {
                         router.push('/edit');
                     }}
-                >
-                    แก้ไขข้อมูล
-                    <PencilSquareIcon className="ml-2 inline-block h-5" />
-                </button>
+                    disabled={false}
+                />
             </div>
         </div>
     );
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 9fcd644..d1cf85a 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -46,6 +46,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
         const token = localStorage.getItem('token');
         if (token) {
             const userProfile = await getUserProfile();
+
             if (!userProfile) {
                 localStorage.clear();
                 window.location.href = '/';
diff --git a/src/pages/baan-selection/index.tsx b/src/pages/baan-selection/index.tsx
index 03ee9ee..8d759c5 100644
--- a/src/pages/baan-selection/index.tsx
+++ b/src/pages/baan-selection/index.tsx
@@ -11,6 +11,7 @@ import { transformBaanDTOtoIBaan } from '@/utils/baan';
 import { useRouter } from 'next/router';
 import { useAuth } from '@/context/AuthContext';
 import { useToast } from '@/components/Toast';
+import Button from '@/components/Button';
 
 function useAllBaans() {
     const [allBaans, setAllBaans] = useState<IBaan[]>([]);
@@ -164,8 +165,10 @@ const BaanChoosing = () => {
                         )}
                     </div>
 
-                    <button
-                        className="mx-auto mt-6 rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:cursor-not-allowed disabled:bg-pink-300"
+                    {/* แก้ button */}
+                    <Button
+                        additionalStyle="rounded-lg bg-pink-400 mt-6 ring-4 ring-pink-400/30 text-xl disabled:bg-pink-300 disabled:ring-4"
+                        content={<>บันทึกการเลือก </>}
                         onClick={async () => {
                             const { status } = await httpPut('/group/select', {
                                 baans: selectedBaan.map((e) => e.id),
@@ -176,9 +179,7 @@ const BaanChoosing = () => {
                             }
                         }}
                         disabled={selectedBaan.some((b) => b.id === '')}
-                    >
-                        บันทึกการเลือก
-                    </button>
+                    />
                 </div>
                 <div className="flex min-h-full w-full flex-col border bg-black/50 p-8 backdrop-blur-sm max-xl:rounded-b-3xl xl:w-3/5 xl:rounded-r-3xl">
                     <div className="flex items-center gap-2">