diff --git a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
index c114a31..4aa529d 100644
--- a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
@@ -90,7 +90,7 @@ export default function FamilyTasks({
                                     <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                       {value.title}
                                     </h1>
-                                    <div className="flex gap-4 items-center">
+                                    <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                       <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">
diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx
index 09b3d73..ef35554 100644
--- a/src/components/MyActiveJobs/MyActiveJobTable.jsx
+++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx
@@ -24,7 +24,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-3 sm:p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >
@@ -71,7 +71,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                     {thePrice}
                                   </span>
                                 </span>
-                                <div className="flex gap-4 items-center">
+                                <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                   <span className="text-sm text-thin-light-gray">
                                     Duration:{" "}
                                     <span className="text-purple">
diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx
index 2c2bdf0..ac66111 100644
--- a/src/components/MyTasks/MyJobTable.jsx
+++ b/src/components/MyTasks/MyJobTable.jsx
@@ -96,7 +96,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>
-                        <div className="flex gap-4 items-center">
+                        <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                           <span className="text-sm text-thin-light-gray">
                             Duration:
                             <span className="text-purple ml-1">