diff --git a/src/pages/Profile/EditProfileModal.tsx b/src/pages/Profile/EditProfileModal.tsx
index 4e8f3c3..4d51b83 100644
--- a/src/pages/Profile/EditProfileModal.tsx
+++ b/src/pages/Profile/EditProfileModal.tsx
@@ -41,7 +41,7 @@ function EditProfileModal({ userData, onUpdate }: Props) {
                 className="modal-toggle w-5xl"
             />
             <div className="modal" role="dialog">
-                <div className="modal-box w-full card">
+                <div className="modal-box md:w-full px-4 card">
                     <h3 className="font-bold text-center text-lg">
                         Edit Your Profile
                     </h3>
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index bd6e10c..d7b2764 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -71,18 +71,17 @@ function Profile() {
       <div className="w-full text-center">
         <Head h2={username!} />
       </div>
-      <Button text="Explore Products" color="mygreen" hover="myyellow" />
-
-      <div className="card flex w-full my-5 rounded-xl shadow-2xl">
-        {/* Button to open modal  */}
-        <div className="w-full card">
+      <div className="flex gap-5">
+        <div className="card">
           <label
             htmlFor="my_modal_1"
-            className="btn bg-mygreen hover:bg-myyellow"
+            className="btn bg-myyellow hover:bg-mygreen"
           >
             Edit Profile
           </label>
         </div>
+      </div>
+      <div className="card flex w-full mb-5 rounded-xl shadow-2xl">
         <EditProfileModal userData={userData} onUpdate={handleUpdate} />
 
         <div className="flex p-5 sm:p-0 flex-col sm:flex-row w-full md:items-center">
