diff --git a/client/src/pages/userAccount/userSettings.tsx b/client/src/pages/userAccount/userSettings.tsx
index eb279097..96de9074 100644
--- a/client/src/pages/userAccount/userSettings.tsx
+++ b/client/src/pages/userAccount/userSettings.tsx
@@ -34,32 +34,30 @@ const SettingPage: PageComponent = (props) => {
 
   return (
     <div {...props} className="mx-auto mb-7 mt-3 w-full">
-      <div className="flex-col">
-        <h1 className=" text-center text-2xl font-bold">My Account</h1>
-        <div className="mx-auto my-7 block size-full rounded-md bg-primary-dark p-10 text-lg dark:text-text-light">
-          <div className="box-content flex grid-cols-1 justify-between md:grid-cols-2">
+      <div className="flex flex-col items-center">
+        <h1 className="text-center text-2xl font-bold">My Account</h1>
+        <div className="mx-auto my-7 block w-3/5 md:w-4/5 rounded-md bg-primary-dark p-10 text-lg dark:text-text-light">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="text-left">
-              <h4 className="mb-3 font-semibold underline">
-                Personal Particulars
-              </h4>
-              <div className="grid-cols-2">
-                <p className="mb-3 text-right">
+              <h4 className="mb-3 font-semibold underline">Personal Particulars</h4>
+              <div className="mb-3">
+                <p className="text-left">
                   Username:{' '}
-                  <span className="inline-block w-1/2 rounded-md bg-gray-50 px-2 py-1 text-left text-sm">
+                  <span className="inline-block w-3/5 md:w-1/2 rounded-md bg-gray-50 px-5 py-1 text-left text-md">
                     {user?.username}
                   </span>
                 </p>
               </div>
-              <div className="grid-cols-2">
-                <p className="text-right">
+              <div className="mb-3">
+                <p className="text-left">
                   Email:{' '}
-                  <span className="inline-block w-1/2 rounded-md bg-gray-50 px-5 py-1 text-left text-sm">
+                  <span className="inline-block w-4/5 md:w-1/2 rounded-md bg-gray-50 px-5 py-1 text-left text-md">
                     {user?.email}
                   </span>
                 </p>
               </div>
             </div>
-            <div className="text-left">
+            <div className="text-left text-md md:ml-14">
               <h4 className="font-semibold underline">Security</h4>
               <p>
                 Password:{' '}
@@ -67,17 +65,21 @@ const SettingPage: PageComponent = (props) => {
                   *********
                 </span>
               </p>
+            </div>
+          </div>
+          <div className='grid grid-cols-subgrid gap-4 col-span-3'>
+            <div className='col-end-3 md:col-end-7'>
               <Button
                 variant="secondary"
                 size="default"
-                className="mt-5 px-2 py-1 text-right"
+                className="mt-5 px-5 py-1"
               >
                 Edit
               </Button>
             </div>
           </div>
         </div>
-        <div className="mx-auto my-7 block w-4/5 rounded-md bg-primary-dark p-4">
+        <div className="mx-auto my-7 block w-3/5 md:w-4/5 rounded-md bg-primary-dark p-4">
           <a href="/" className="flex justify-center">
             <Button
               type="submit"