diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx
index 0e0bacc..bdc00fc 100644
--- a/src/components/jobPopout/OfferJobPopout.jsx
+++ b/src/components/jobPopout/OfferJobPopout.jsx
@@ -141,8 +141,8 @@ function OfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+        <div className="grid md:grid-cols-4 bg-white dark:bg-dark-white rounded-lg">
+          <div className="p-4 w-full md:col-span-3 md:border-r-2">
 
             {/* INPUT SECTION */}
             <div className='grid md:grid-cols-2'>
@@ -219,7 +219,7 @@ function OfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
+          <div className="p-4 w-full md:col-span-1 h-full flex flex-col justify-between">
             <div className="my-3 md:flex flex-col md:justify-center">
               <h1 className='mb-2 text-base font-semibold text-slate-900 dark:text-white tracking-wide'>I understand the task</h1>
               {requestStatus.loading && requestStatus.trigger == "offer" ? (