diff --git a/src/pages/programs/Programs.tsx b/src/pages/programs/Programs.tsx
index dd7dfc646..650ac80f6 100644
--- a/src/pages/programs/Programs.tsx
+++ b/src/pages/programs/Programs.tsx
@@ -181,11 +181,11 @@ const Programs = (props: any) => {
     <>
       <ToastContainer />
       <div
-        className={`w-[63.5rem] h-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center overflow-y-hidden ${
+        className={`h-svh w-max z-20 bg-opacity-30 backdrop-blur-sm absolute flex  justify-center ${
           addNewProgramModal === true ? "block" : "hidden"
         }`}
       >
-        <div className="bg-white dark:bg-dark-bg w-full max-h-[900px]  overflow-auto md_:w-[65%] md-sm:w-[95%] rounded-lg p-4 pb-8">
+        <div className="bg-white dark:bg-dark-bg w-full max-h-[500px]  overflow-auto md_:w-[65%] md-sm:w-[95%] rounded-lg p-4 pb-8">
           <div className="card-title w-full flex flex-wrap justify-center items-center">
             <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
               <icons.AiOutlineClose
@@ -198,7 +198,7 @@ const Programs = (props: any) => {
             <div className="flex flex-col w-full mt-14 md_:mt-5">
               <form
                 onSubmit={handleSubmit}
-                className="flex flex-col md_:flex-row justify-center space-y-7 md_:space-x-7 md_:space-y-0"
+                className="flex flex-col md_:flex-row  space-y-7 md_:space-x-7 md_:space-y-0"
               >
                 <div className="flex flex-col w-full md_:w-[300px] space-y-3">
                   <div className="flex flex-col justify-center items-start space-y-2">
@@ -272,7 +272,10 @@ const Programs = (props: any) => {
                       </span>
                     )}
                   </div>
-                  <div className="flex flex-col items-start space-y-2">
+                  
+                </div>
+              <div className="flex flex-col md_:justify-start md_:items-center w-full md_:w-[500px] space-y-3">
+                <div className="flex flex-col items-start space-y-2 mr-11">
                     <label className="font-bold text-black-text dark:text-white text-left">
                       Duration
                     </label>
@@ -290,8 +293,6 @@ const Programs = (props: any) => {
                       </span>
                     )}
                   </div>
-                </div>
-                <div className="flex flex-col md_:justify-start md_:items-center w-full md_:w-[300px] space-y-3">
                   <div className="flex flex-col items-start space-y-2">
                     <label className="font-bold text-black-text dark:text-white text-left">
                       Entry requirements
@@ -336,7 +337,7 @@ const Programs = (props: any) => {
                               </label>
                               <button
                                 type="button"
-                                className="flex items-center justify-center bg-white text-dark-frame-bg rounded transition-colors border border-black dark:border-transparent hover:bg-dark-frame-bg hover:text-white hover:border hover:border-white font-extrabold px-2 h-4"
+                                className="bg-green-500 text-white px-4 py-2 rounded w-full md:w-auto self-start"
                                 onClick={() => removeEntry(item)}
                               >
                                 -