From 4f238f4a6f6b1824d7a47f1c3c210f31a8e7c683 Mon Sep 17 00:00:00 2001
From: JaiPandey425 <jai.p@hicglobalsolutions.com>
Date: Mon, 1 Sep 2025 14:05:38 +0530
Subject: [PATCH] respo mob

---
 .../process/processStepOne/ProcessStepOne.tsx |  88 +++---
 .../processStepOne/RecipientAddCard.tsx       | 217 ++++++-------
 .../process/processStepOne/RecipientCards.tsx | 147 +++++----
 .../processStepOne/SelectedDocuments.tsx      | 296 +++++++++---------
 4 files changed, 398 insertions(+), 350 deletions(-)

diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx
index 0b3dbe0..3a2bbbb 100644
--- a/src/components/process/processStepOne/ProcessStepOne.tsx
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@@ -193,7 +193,7 @@ const ProcessStepOne = () => {
       //     minRoutingOrder = recipient.routingOrder ?? 1;
       //   }
       // });
-      
+
       const recipientsData = selectedRecipients.map((recipient, index) => ({
         id: "id" in recipient ? recipient.id : null,
         routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
@@ -267,7 +267,7 @@ const ProcessStepOne = () => {
         }
 
       } else {
-        if(!accountId || !transactionId) return;
+        if (!accountId || !transactionId) return;
         dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
       dispatch(showLoader("Processing Message..."));
@@ -345,50 +345,60 @@ const ProcessStepOne = () => {
       <div className={`relative w-full h-screen bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none overflow-hidden' : ''}`}>
 
         {/* Top Navigation - Fixed */}
-        <div className='fixed top-0 left-0 right-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
-          <div className='flex items-center gap-2'>
-            <IoMdClose
-              onClick={handleClose}
-              className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
-            />
-            <p className="text-base font-normal text-gray-700 border-l pl-4 relative">
-              {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
-                <>
-                  <input
-                    value={templateName}
-                    onChange={handleChange}
-                    className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
-                  />
-                  {!isTyping && (
-                    <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
-                  )}
-                </> :
-                "Add Recipient and Message"
-              }
-            </p>
-          </div>
+        <div className='fixed top-0 left-0 right-0 w-full bg-white shadow z-50 px-4 py-1.5 lg:py-3'>
+          <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 flex-wrap'>
 
-          <div
-            id="add-tags-btn-step-one"
-            className='flex items-center gap-3'>
+            {/* Left Section */}
+            <div className='flex sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto'>
 
-            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
-              onClick={() => handleNextClick(true)}
-              className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
-            >
-              Save & Close
-            </button>}
+              <IoMdClose
+                onClick={handleClose}
+                className='text-2xl  text-slate-500 cursor-pointer hover:text-[var(--primary)] transition self-start sm:self-auto'
+              />
 
-            <button
-              onClick={() => handleNextClick(false)}
-              className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
-            >
-              {signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
-            </button>
+              <p className="text-base font-normal text-gray-700 border-l pl-4 relative w-full sm:w-auto">
+                {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? (
+                  <>
+                    <input
+                      value={templateName}
+                      onChange={handleChange}
+                      className="w-full sm:w-[250px] px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
+                    />
+                    {!isTyping && (
+                      <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
+                    )}
+                  </>
+                ) : (
+                  "Add Recipient and Message"
+                )}
+              </p>
+            </div>
 
+            {/* Right Section */}
+            <div
+              id="add-tags-btn-step-one"
+              className='flex sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto '>
+
+              {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+                <button
+                  onClick={() => handleNextClick(true)}
+                  className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
+                >
+                  Save & Close
+                </button>
+              )}
+
+              <button
+                onClick={() => handleNextClick(false)}
+                className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
+              >
+                {signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
+              </button>
+            </div>
           </div>
         </div>
 
+
         {/* Main Content - Scrollable */}
         <div className="h-screen pt-[80px] overflow-y-auto no-scrollbar">
           <div className="max-w-4xl rounded-xl shadow-md mx-auto px-6 pb-10 bg-[var(--documentUploadBg)] mb-5">
diff --git a/src/components/process/processStepOne/RecipientAddCard.tsx b/src/components/process/processStepOne/RecipientAddCard.tsx
index 4ce3cf0..3325f97 100644
--- a/src/components/process/processStepOne/RecipientAddCard.tsx
+++ b/src/components/process/processStepOne/RecipientAddCard.tsx
@@ -363,27 +363,26 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
 
-  return (
+ return (
     <div ref={containerRef}>
       <form
         ref={formRef}
         onSubmit={handleRecipientAdd}
         id="add-recipient-step-one"
-        className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-6 py-4 space-y-3 relative"
+        className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-3 sm:px-4 lg:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 relative"
       >
         {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
-          <div className="space-y-1">
-            {/* Top Row: Role Input + Settings */}
-            <div className="flex justify-between items-center">
+          <div className="space-y-2 sm:space-y-3">
+            {/* Role Name and Permissions Section - Responsive Layout */}
+            <div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3 lg:gap-4">
               {/* Role Name Input */}
-              {/* Role Name Input */}
-              <div className="w-64">
+              <div className="w-full lg:w-64 xl:w-80">
                 <input
                   type="text"
                   value={recipient.roleName}
                   placeholder="Role name"
                   className={`w-full px-3 py-2 border rounded-md text-sm focus:outline-none transition
-      ${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+                    ${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
                   onChange={(e) => {
                     setRecipients({ ...recipient, roleName: e.target.value });
                     setErrors(prev => ({ ...prev, roleName: false }));
@@ -394,95 +393,76 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
                 )}
               </div>
 
+              {/* Permissions Section */}
+              <div className="flex items-center justify-start lg:justify-end">
+                <div className="flex  sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
+                  {/* Edit Permission */}
+                  <div className="relative group">
+                    <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
+                      <input
+                        type="checkbox"
+                        checked={recipient.allowSenderToEdit}
+                        onChange={(e) =>
+                          setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
+                        }
+                        onFocus={() => setOpenContactModal(true)}
+                        onBlur={handleContactModalBlur}
+                        className='accent-blue-500 w-3 h-3 sm:w-4 sm:h-4'
+                      />
+                      <span className="whitespace-nowrap">Allow Edit</span>
+                    </label>
+                  </div>
 
-              {/* Settings + Permissions */}
-              <div className="flex items-center">
-                <div className="flex justify-between w-full">
-                  {/* Permission Status Text - Always Visible */}
-
-                  {/* Permission Controls - Always Visible */}
-                  <div className="max-w-80 opacity-100 overflow-visible">
-                    <div className="flex items-center space-x-3 pr-1.5">
-                      {/* Edit Permission */}
-                      <div className="relative group">
-                        <label className="flex items-center gap-1 text-sm text-gray-700">
-                          <input
-                            type="checkbox"
-                            checked={recipient.allowSenderToEdit}
-                            onChange={(e) =>
-                              setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
-                            }
-                            onFocus={() => setOpenContactModal(true)}
-                            onBlur={handleContactModalBlur}
-                            className='accent-blue-500'
-                          />
-                          Allow Edit
-                        </label>
-                        {/* Tooltip */}
-                        
-                      </div>
-
-                      {/* Delete Permission */}
-                      <div className="relative group">
-                         <label className="flex items-center gap-1 text-sm text-gray-700">
-                          <input
-                            type="checkbox"
-                            checked={recipient.allowSenderToDelete}
-                            onChange={(e) =>
-                              setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
-                            }
-                            onFocus={() => setOpenContactModal(true)}
-                            onBlur={handleContactModalBlur}
-                            className="accent-red-500"
-                          />
-                         Allow Delete
-                        </label>
-                        {/* Tooltip */}
-                        {/* <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                          <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                            Delete Permission
-                            <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
-                          </div>
-                        </div> */}
-                      </div>
-                    </div>
+                  {/* Delete Permission */}
+                  <div className="relative group">
+                    <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
+                      <input
+                        type="checkbox"
+                        checked={recipient.allowSenderToDelete}
+                        onChange={(e) =>
+                          setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
+                        }
+                        onFocus={() => setOpenContactModal(true)}
+                        onBlur={handleContactModalBlur}
+                        className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
+                      />
+                      <span className="whitespace-nowrap">Allow Delete</span>
+                    </label>
                   </div>
                 </div>
               </div>
-
             </div>
           </div>
         )}
 
-        {/* Name Inputs */}
-        <div className="grid grid-cols-12 gap-4 mt-3">
-          <div className="col-span-4">
+        {/* Name and Email Inputs - Responsive Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-3">
+          {/* First Name */}
+          <div className="w-full">
             <input
               type="text"
               onFocus={() => handleFocus("firstName")}
               onBlur={handleContactModalBlur}
               value={recipient.firstName}
               placeholder="First Name"
-              className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-            ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
+                ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
               onChange={(e) => {
                 setRecipients({ ...recipient, firstName: e.target.value });
-                // setErrors((prev) => ({ ...prev, firstName: false }));
               }}
             />
           </div>
-          {/* {errors.firstName && (
-            <p className="text-red-500 text-xs mt-1">First Name is required</p>
-          )} */}
-          <div className="col-span-4">
+
+          {/* Last Name */}
+          <div className="w-full">
             <input
               type="text"
               onFocus={() => handleFocus("lastName")}
               onBlur={handleContactModalBlur}
               value={recipient.lastName}
               placeholder="Last Name"
-              className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-            ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
+                ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
               onChange={(e) => {
                 setRecipients({ ...recipient, lastName: e.target.value });
                 setErrors((prev) => ({ ...prev, lastName: false }));
@@ -492,15 +472,17 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
               <p className="text-red-500 text-xs mt-1">Last Name is required</p>
             )}
           </div>
-          <div className="col-span-4">
+
+          {/* Email - Full width on small screens, shares row on larger */}
+          <div className="w-full sm:col-span-2 lg:col-span-1">
             <input
               type="email"
               onFocus={() => handleFocus("email")}
               onBlur={handleContactModalBlur}
               value={recipient.email}
               placeholder="Recipient Email"
-              className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-            ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
+                ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
               onChange={(e) => {
                 setRecipients({ ...recipient, email: e.target.value });
                 setErrors((prev) => ({ ...prev, email: false }));
@@ -512,33 +494,35 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
           </div>
         </div>
 
+        {/* Host Fields for In-Person Signers */}
+        {recipient.type === recipientType.INPERSONSIGNER && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+            <input
+              required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+              type="text"
+              onFocus={() => setOpenContactModal(true)}
+              onBlur={handleContactModalBlur}
+              value={recipient.hostName}
+              placeholder="Host Name"
+              className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+              onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
+            />
+            <input
+              required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+              type="email"
+              onFocus={() => setOpenContactModal(true)}
+              onBlur={handleContactModalBlur}
+              value={recipient.hostEmail}
+              placeholder="Host Email"
+              className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+              onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
+            />
+          </div>
+        )}
 
-        {recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <input
-            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-            type="text"
-            onFocus={() => setOpenContactModal(true)}
-            onBlur={handleContactModalBlur}
-            value={recipient.hostName}
-            placeholder="Host Name"
-            className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-            onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
-          />
-          <input
-            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-            type="email"
-            onFocus={() => setOpenContactModal(true)}
-            onBlur={handleContactModalBlur}
-            value={recipient.hostEmail}
-            placeholder="Host Email"
-            className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-            onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
-          />
-        </div>}
-
-        {/* Contact Modal */}
+        {/* Contact Modal - Responsive Positioning */}
         {openContactModal && contactData.contacts.length > 0 && (
-          <div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar">
+          <div className="absolute z-50 mt-1 w-full sm:w-2/3 lg:w-1/2 xl:w-2/3 max-h-[40vh] sm:max-h-[50vh] bg-white shadow-lg rounded-md p-2 sm:p-3 border border-gray-100 overflow-y-auto no-scrollbar">
             <ContactModal
               contactData={contactData}
               inpFirstName={recipient.firstName}
@@ -553,36 +537,41 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
           </div>
         )}
 
-
-
-        {/* Signing options + Add button in one line */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div className="flex flex-wrap gap-6">
+        {/* Signing Options and Add Button - Responsive Layout */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+          {/* Recipient Type Radio Options */}
+          <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2 sm:gap-4 lg:gap-6">
             {[
               { label: "Signer", value: recipientType.SIGNER },
               { label: "In Person Signer", value: recipientType.INPERSONSIGNER },
               { label: "CC", value: recipientType.CC },
             ].map((option) => (
-              <label key={option.value} className="flex items-center gap-2 text-gray-700 text-sm cursor-pointer">
+              <label key={option.value} className="flex items-center gap-2 text-gray-700 text-xs sm:text-sm cursor-pointer">
                 <input
                   type="radio"
                   name="recipient-type"
                   value={option.value}
                   checked={recipient.type === option.value}
                   onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
-                  className="accent-[var(--primary)] cursor-pointer"
+                  className="accent-[var(--primary)] cursor-pointer w-3 h-3 sm:w-4 sm:h-4"
                 />
-                {option.label}
+                <span className="whitespace-nowrap">{option.label}</span>
               </label>
             ))}
           </div>
 
-         {!showCard && <button
-            type="submit"
-            className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
-          >
-            <FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
-          </button>}
+          {/* Add/Edit Button */}
+          {!showCard && (
+            <button
+              type="submit"
+              className="inline-flex items-center justify-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-xs sm:text-sm font-semibold px-4 sm:px-5 py-2 rounded-md transition w-full sm:w-auto min-w-fit"
+            >
+              <FaPlus size={12} className="sm:w-3.5 sm:h-3.5" /> 
+              <span className="whitespace-nowrap">
+                {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
+              </span>
+            </button>
+          )}
         </div>
       </form>
     </div>
diff --git a/src/components/process/processStepOne/RecipientCards.tsx b/src/components/process/processStepOne/RecipientCards.tsx
index 608257e..aa0626b 100644
--- a/src/components/process/processStepOne/RecipientCards.tsx
+++ b/src/components/process/processStepOne/RecipientCards.tsx
@@ -121,7 +121,7 @@ const RecipientCards = ({
         return currentValue && currentValue.toString().trim() !== "";
     };
 
-    const renderEditableField = (
+     const renderEditableField = (
         recipient: any,
         fieldName: string,
         placeholder: string,
@@ -134,7 +134,7 @@ const RecipientCards = ({
         const editable = isEditable(recipient);
 
         return (
-            <div className="relative inline-block mx-3">
+            <div className="relative inline-block w-full sm:mx-1 lg:mx-3">
                 <input
                     type={type}
                     value={currentValue || ""}
@@ -148,7 +148,7 @@ const RecipientCards = ({
                         }
                     }}
                     disabled={!editable}
-                    className={`w-full px-4 py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-sm  ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`}
+                    className={`w-full px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 font-normal border focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"} rounded-lg text-xs sm:text-sm ${className} ${!editable ? "bg-gray-100 cursor-not-allowed" : ""}`}
                     title={editable ? "Edit field" : "Editing disabled"}
                 />
             </div>
@@ -215,17 +215,17 @@ const RecipientCards = ({
         setEditingField(null);
     };
 
-    return (
+   return (
         <div className="w-full bg-white rounded-md shadow-sm border border-gray-200">
             {recipients.length > 0 ? (
                 <>
                     {recipients.length > 1 && (
-                        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-300">
+                        <div className="flex  sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 border-b border-gray-300 gap-2">
                             <h3 className="text-sm font-semibold text-gray-700">
                                 Recipients ({recipients.length})
                             </h3>
                             <label
-                                className="flex items-center gap-2 cursor-pointer select-none"
+                                className="flex items-center gap-2 cursor-pointer select-none justify-center sm:justify-end"
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}
                             >
                                 <span className="text-xs font-medium text-gray-600">Signing Order</span>
@@ -238,14 +238,16 @@ const RecipientCards = ({
                         {recipients.map((recipient, idx) => (
                             <div
                                 key={recipient.email + idx}
-                                className={`flex items-center justify-between px-2  py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
+                                className={`flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 hover:bg-gray-50 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
                                     ? "bg-neutral-100 opacity-40"
                                     : ""
                                     }`}
                             >
-                                <div className="flex items-center gap-3 min-w-0">
+                                {/* Main Content Section */}
+                                <div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                                    {/* Order Number */}
                                     {recipients.length > 1 ? (
-                                        <div className="relative">
+                                        <div className="relative flex-shrink-0">
                                             <input
                                                 type="number"
                                                 value={recipient.routingOrder || 1}
@@ -256,7 +258,7 @@ const RecipientCards = ({
                                                         Number(e.target.value)
                                                     )
                                                 }
-                                                className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
+                                                className="w-8 sm:w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
                                             />
                                         </div>
                                     ) : (
@@ -271,25 +273,30 @@ const RecipientCards = ({
                                                     Number(e.target.value)
                                                 )
                                             }
-                                            className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
+                                            className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
                                         />
                                     )}
-                                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
+                                    
+                                    {/* Avatar */}
+                                    <div className="flex-shrink-0 w-7 h-7  sm:w-8 sm:h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
                                         {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
                                     </div>
-                                    <div className="min-w-0">
-                                        <div className="grid grid-cols-12 gap-2 mb-2">
-                                            <div className="col-span-6">
+
+                                    {/* Form Fields Section */}
+                                    <div className="min-w-0 flex-1">
+                                        {/* Role Name and Permissions Row */}
+                                        <div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
+                                            <div className="flex-1 lg:w-1/2">
                                                 <p className="font-semibold text-gray-800 text-xs">
                                                     {renderEditableField(recipient, "roleName", "Role name")}
                                                 </p>
                                             </div>
-                                            <div className="col-span-6 flex items-center justify-end ">
+                                            
+                                            {/* Permissions - Mobile: Below role, Desktop: Right side */}
+                                            <div className="lg:w-1/2 lg:flex lg:items-center lg:justify-end">
                                                 {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
-                                                    <div className="flex items-center gap-4">
-                                                        {/* <span className="text-sm text-gray-600">Permissions granted:</span> */}
-
-                                                        <label className="flex items-center gap-1 text-sm text-gray-700">
+                                                    <div className="flex ps-2.5 sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
+                                                        <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
                                                             <input
                                                                 type="checkbox"
                                                                 checked={recipient.allowSenderToEdit}
@@ -302,12 +309,12 @@ const RecipientCards = ({
                                                                         })
                                                                     )
                                                                 }
-                                                                className="accent-blue-500"
+                                                                className="accent-blue-500 w-3 h-3 sm:w-4 sm:h-4"
                                                             />
-                                                            Allow Edit
+                                                            <span className="whitespace-nowrap">Allow Edit</span>
                                                         </label>
 
-                                                        <label className="flex items-center gap-1 text-sm text-gray-700">
+                                                        <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
                                                             <input
                                                                 type="checkbox"
                                                                 checked={recipient.allowSenderToDelete}
@@ -320,35 +327,59 @@ const RecipientCards = ({
                                                                         })
                                                                     )
                                                                 }
-                                                                className="accent-red-500"
+                                                                className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
                                                             />
-                                                            Allow Delete
+                                                            <span className="whitespace-nowrap">Allow Delete</span>
                                                         </label>
                                                     </div>
                                                 )}
+                                            </div>
+                                        </div>
 
-                                            </div>
-                                        </div>
-                                        <div className="grid grid-cols-12 gap-2 mb-2">
-                                            <div className="col-span-12">
-                                                <p className="font-semibold text-gray-800 text-xs flex items-center gap-1">
-                                                    {renderEditableField(recipient, "firstName", "First Name")}
-                                                    {renderEditableField(recipient, "lastName", "Last Name")}
-                                                    {renderEditableField(recipient, "email", "Recipient Email", "", "email")}
-                                                </p>
-                                            </div>
-                                        </div>
-                                        {recipient.type === recipientType.INPERSONSIGNER && (
-                                            <div className="grid grid-cols-12 gap-2">
-                                                <div className="col-span-12">
-                                                    <p className="font-semibold text-gray-800 text-xs flex items-center gap-1">
-                                                        {renderEditableField(recipient, "hostName", "Host Name")}
-                                                        {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
+                                        {/* Name and Email Fields */}
+                                        <div className="mb-2">
+                                            {/* Mobile: Stack vertically, Tablet+: Side by side */}
+                                            <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
+                                                <div className="flex flex-col sm:flex-row gap-1 sm:gap-2 sm:flex-1">
+                                                    <div className="w-full sm:w-1/2">
+                                                        <p className="font-semibold text-gray-800 text-xs">
+                                                            {renderEditableField(recipient, "firstName", "First Name")}
+                                                        </p>
+                                                    </div>
+                                                    <div className="w-full sm:w-1/2">
+                                                        <p className="font-semibold text-gray-800 text-xs">
+                                                            {renderEditableField(recipient, "lastName", "Last Name")}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div className="w-full sm:flex-1">
+                                                    <p className="font-semibold text-gray-800 text-xs">
+                                                        {renderEditableField(recipient, "email", "Recipient Email", "", "email")}
                                                     </p>
                                                 </div>
                                             </div>
+                                        </div>
+
+                                        {/* Host Fields (for In-Person Signers) */}
+                                        {recipient.type === recipientType.INPERSONSIGNER && (
+                                            <div className="mb-2">
+                                                <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
+                                                    <div className="w-full sm:w-1/2">
+                                                        <p className="font-semibold text-gray-800 text-xs">
+                                                            {renderEditableField(recipient, "hostName", "Host Name")}
+                                                        </p>
+                                                    </div>
+                                                    <div className="w-full sm:w-1/2">
+                                                        <p className="font-semibold text-gray-800 text-xs">
+                                                            {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         )}
-                                        <div className="flex items-center gap-2 my-1.5 mx-2">
+
+                                        {/* Recipient Type Radio Buttons */}
+                                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 my-1.5 mx-1 sm:mx-2">
                                             <label className="flex items-center gap-1">
                                                 <input
                                                     type="radio"
@@ -360,7 +391,7 @@ const RecipientCards = ({
                                                     className="accent-[var(--primary)] w-3 h-3"
                                                     disabled={!isEditable(recipient)}
                                                 />
-                                                <span className="text-sm">Signer</span>
+                                                <span className="text-xs sm:text-sm">Signer</span>
                                             </label>
                                             <label className="flex items-center gap-1">
                                                 <input
@@ -373,7 +404,7 @@ const RecipientCards = ({
                                                     className="accent-[var(--primary)] w-3 h-3"
                                                     disabled={!isEditable(recipient)}
                                                 />
-                                                <span className="text-sm">In Person Signer</span>
+                                                <span className="text-xs sm:text-sm whitespace-nowrap">In Person Signer</span>
                                             </label>
                                             <label className="flex items-center gap-1">
                                                 <input
@@ -386,14 +417,15 @@ const RecipientCards = ({
                                                     className="accent-[var(--primary)] w-3 h-3"
                                                     disabled={!isEditable(recipient)}
                                                 />
-                                                <span className="text-sm">CC</span>
+                                                <span className="text-xs sm:text-sm">CC</span>
                                             </label>
                                         </div>
                                     </div>
                                 </div>
 
+                                {/* Action Buttons */}
                                 {signType !== "self-sign" && (
-                                    <div className="flex justify-end gap-2 items-center">
+                                    <div className="flex justify-end lg:justify-center gap-2 items-center lg:ml-2">
                                         <button
                                             type="button"
                                             title="Remove recipient"
@@ -404,9 +436,9 @@ const RecipientCards = ({
                                                     ? false
                                                     : !recipient.newOne && !recipient.allowSenderToDelete
                                             }
-                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
+                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50 p-1"
                                         >
-                                            <ImBin size={16} />
+                                            <ImBin size={14} className="sm:w-4 sm:h-4" />
                                         </button>
                                     </div>
                                 )}
@@ -415,24 +447,27 @@ const RecipientCards = ({
                     </div>
                 </>
             ) : (
-                <div className="p-6 text-center text-gray-500 font-medium text-sm">
+                <div className="p-4 sm:p-6 text-center text-gray-500 font-medium text-sm">
                     No Recipients Added
                 </div>
             )}
 
+            {/* Responsive Modal */}
             {signingOrderModal.open && (
-                <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
-                    <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
-                        <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
-                            <p className="font-semibold">Signing Order</p>
+                <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center p-4">
+                    <div className="flex-col relative justify-center items-center w-full max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl xl:max-w-4xl max-h-[80vh] sm:max-h-[70vh] lg:max-h-[60vh] h-full overflow-auto">
+                        <div className="p-3 sm:p-4 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
+                            <p className="font-semibold text-sm sm:text-base">Signing Order</p>
                             <div
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
-                                className="text-xl cursor-pointer hover:text-gray-200 transition-all"
+                                className="text-xl sm:text-2xl cursor-pointer hover:text-gray-200 transition-all p-1"
                             >
                                 <IoCloseOutline />
                             </div>
                         </div>
-                        <SigningOrderDiagram signers={recipients} />
+                        <div className="bg-white rounded-b-lg">
+                            <SigningOrderDiagram signers={recipients} />
+                        </div>
                     </div>
                 </div>
             )}
diff --git a/src/components/process/processStepOne/SelectedDocuments.tsx b/src/components/process/processStepOne/SelectedDocuments.tsx
index b479bb1..6dbf3b3 100644
--- a/src/components/process/processStepOne/SelectedDocuments.tsx
+++ b/src/components/process/processStepOne/SelectedDocuments.tsx
@@ -90,15 +90,26 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
 
     // Get proper Tailwind class names for upload card span
     const getUploadCardSpanClass = () => {
-        switch (docCount) {
-            case 0: return 'col-span-5'; // Full width when no docs
-            case 1: return 'col-span-4'; // 4 cols for upload, 1 for doc
-            case 2: return 'col-span-3'; // 3 cols for upload, 2 for docs
-            case 3: return 'col-span-2'; // 2 cols for upload, 3 for docs
-            case 4: return 'col-span-1'; // 1 col for upload, 4 for docs
-            default: return 'col-span-1'; // 1 col for upload, rest for docs
-        }
-    };
+  if (docCount === 0) {
+    // Upload card takes all columns only when no docs
+    return "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5";
+  }
+
+  switch (docCount) {
+    case 1:
+      return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4";
+    case 2:
+      return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3";
+    case 3:
+      return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2";
+    case 4:
+      return "col-span-1"; // balanced
+    default:
+      return "col-span-1";
+  }
+};
+
+
 
     // Calculate how many documents should be in the first row
     const getFirstRowDocCount = () => {
@@ -113,150 +124,153 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
     return (
         <>
             {/* Upload Card First */}
-            <div className='space-y-3'>
-            <div id='upload-doc-step-one' className="grid grid-cols-5 gap-2">
-                {/* Upload Document Card - Always First */}
+            <div className="space-y-3">
                 <div
-                    onClick={() => setModalOpen(true)}
-                    className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
+                    id="upload-doc-step-one"
+                    className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 gap-2"
                 >
-                    <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
-                    <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
+                    {/* Upload Document Card */}
+                    <div
+                        onClick={() => setModalOpen(true)}
+                        className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
+                    >
+                        <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
+                        <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
+                    </div>
+
+                    {/* First Row Documents */}
+                    <ReactSortable
+                        className="contents"
+                        list={documents.slice(0, firstRowDocCount).map((doc) => ({ ...doc }))}
+                        setList={(newState) => {
+                            const updatedDocs = [...newState, ...documents.slice(firstRowDocCount)];
+                            dispatch(setDocuments(updatedDocs));
+                        }}
+                        handle=".drag-handle"
+                        animation={200}
+                        ghostClass="sortable-ghost"
+                        disabled={false}
+                    >
+                        {documents.slice(0, firstRowDocCount).map((doc) => (
+                            <div key={doc.id} className="col-span-1 mx-auto">
+                                <DocumentCard
+                                    id={doc.id}
+                                    name={doc.name}
+                                    isCompleted={
+                                        "isCompleted" in doc ||
+                                            ("status" in doc && doc.status === "UPLOADED")
+                                            ? true
+                                            : false
+                                    }
+                                    transactionTemplateToggle={transactionTemplateToggle}
+                                />
+                            </div>
+                        ))}
+                    </ReactSortable>
                 </div>
 
-                {/* First Row Documents */}
-                <ReactSortable
-                    className="contents" // Use 'contents' to make children participate in parent grid
-                    list={documents.slice(0, firstRowDocCount).map(doc => ({ ...doc }))}
-                    setList={(newState) => {
-                        const updatedDocs = [
-                            ...newState,
-                            ...documents.slice(firstRowDocCount)
-                        ];
-                        dispatch(setDocuments(updatedDocs));
-                    }}
-                    handle=".drag-handle"
-                    animation={200}
-                    ghostClass="sortable-ghost"
-                    disabled={false}
-                >
-                    {documents.slice(0, firstRowDocCount).map((doc) => (
-                        <div key={doc.id} className="col-span-1">
-                            <DocumentCard 
-                                id={doc.id} 
-                                name={doc.name} 
-                                isCompleted={
-                                    ("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) 
-                                        ? true 
-                                        : false
-                                } 
-                                transactionTemplateToggle={transactionTemplateToggle} 
-                            />
-                        </div>
-                    ))}
-                </ReactSortable>
-            </div>
+                {/* Additional Rows */}
+                {remainingDocs > 0 && (
+                    <ReactSortable
+                        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-2"
+                        list={documents.slice(firstRowDocCount).map((doc) => ({ ...doc }))}
+                        setList={(newState) => {
+                            const updatedDocs = [
+                                ...documents.slice(0, firstRowDocCount),
+                                ...newState,
+                            ];
+                            dispatch(setDocuments(updatedDocs));
+                        }}
+                        handle=".drag-handle"
+                        animation={200}
+                        ghostClass="sortable-ghost"
+                        disabled={false}
+                    >
+                        {documents.slice(firstRowDocCount).map((doc) => (
+                            <div key={doc.id} className="col-span-1 mx-auto">
+                                <DocumentCard
+                                    id={doc.id}
+                                    name={doc.name}
+                                    isCompleted={
+                                        "isCompleted" in doc ||
+                                            ("status" in doc && doc.status === "UPLOADED")
+                                            ? true
+                                            : false
+                                    }
+                                    transactionTemplateToggle={transactionTemplateToggle}
+                                />
+                            </div>
+                        ))}
+                    </ReactSortable>
+                )}
 
-            {/* Additional Rows - Remaining Documents (5th, 6th, 7th, etc.) */}
-            {remainingDocs > 0 && (
-                <ReactSortable
-                    className="grid grid-cols-5 gap-2"
-                    list={documents.slice(firstRowDocCount).map(doc => ({ ...doc }))}
-                    setList={(newState) => {
-                        const updatedDocs = [
-                            ...documents.slice(0, firstRowDocCount),
-                            ...newState
-                        ];
-                        dispatch(setDocuments(updatedDocs));
-                    }}
-                    handle=".drag-handle"
-                    animation={200}
-                    ghostClass="sortable-ghost"
-                    disabled={false}
-                >
-                    {documents.slice(firstRowDocCount).map((doc) => (
-                        <div key={doc.id} className="col-span-1">
-                            <DocumentCard 
-                                id={doc.id} 
-                                name={doc.name} 
-                                isCompleted={
-                                    ("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) 
-                                        ? true 
-                                        : false
-                                } 
-                                transactionTemplateToggle={transactionTemplateToggle} 
-                            />
-                        </div>
-                    ))}
-                </ReactSortable>
-            )}
+                {/* Modal */}
+                {isModalOpen && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-2 sm:px-4">
+                        <div className="bg-white w-full h-full sm:max-w-5xl sm:h-[500px] rounded-xl shadow-lg flex flex-col sm:flex-row overflow-hidden relative">
+                            {/* Close Button */}
+                            <button
+                                className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
+                                onClick={() => setModalOpen(false)}
+                            >
+                                <IoMdClose />
+                            </button>
 
-            
-            {/* Modal */}
-            {isModalOpen && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-4">
-                    <div className="bg-white w-full max-w-5xl h-[500px] rounded-xl shadow-lg flex overflow-hidden relative">
-                        {/* Close Button */}
-                        <button
-                            className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
-                            onClick={() => setModalOpen(false)}
-                        >
-                            <IoMdClose />
-                        </button>
-
-                        {/* Sidebar Tabs */}
-                        <div className="w-1/4 bg-gray-100 p-4 flex flex-col gap-2 border-r border-gray-200">
-                            {tabs.map(tab => (
-                                <button
-                                    key={tab.name}
-                                    className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition ${activeTab === tab.name
-                                        ? 'bg-white shadow text-[var(--primary)]'
-                                        : 'hover:bg-gray-200 text-gray-600'
-                                        }`}
-                                    onClick={() => setActiveTab(tab.name)}
-                                >
-                                    {tab.icon} {tab.name}
-                                </button>
-                            ))}
-                        </div>
-
-                        {/* Modal Content */}
-                        <div className="w-3/4 p-6 overflow-y-auto">
-                            {activeTab === 'Upload' && (
-                                <div
-                                    onClick={() => fileInputRef.current?.click()}
-                                    onDragOver={(e) => e.preventDefault()}
-                                    onDrop={handleDrop}
-                                    className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
-                                >
-                                    <FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
-                                    <p className="text-sm text-gray-500 mb-2">Drag & drop files here or</p>
-                                    <button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
-                                        Browse Files
+                            {/* Sidebar Tabs */}
+                            <div className="w-full sm:w-1/4 bg-gray-100 p-4 flex flex-row sm:flex-col gap-2 border-b sm:border-b-0 sm:border-r border-gray-200 overflow-x-auto sm:overflow-hidden">
+                                {tabs.map((tab) => (
+                                    <button
+                                        key={tab.name}
+                                        className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition whitespace-nowrap ${activeTab === tab.name
+                                            ? "bg-white shadow text-[var(--primary)]"
+                                            : "hover:bg-gray-200 text-gray-600"
+                                            }`}
+                                        onClick={() => setActiveTab(tab.name)}
+                                    >
+                                        {tab.icon} {tab.name}
                                     </button>
-                                    <input
-                                        type="file"
-                                        ref={fileInputRef}
-                                        className="hidden"
-                                        onChange={handleFileChange}
-                                        accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
-                                        multiple
-                                    />
-                                </div>
-                            )}
-                            {activeTab !== 'Upload' && (
-                                <div className="flex items-center justify-center h-full text-gray-400 text-sm">
-                                    <p>{activeTab} integration coming soon...</p>
-                                </div>
-                            )}
+                                ))}
+                            </div>
+
+                            {/* Modal Content */}
+                            <div className="w-full sm:w-3/4 p-4 sm:p-6 overflow-y-auto">
+                                {activeTab === "Upload" && (
+                                    <div
+                                        onClick={() => fileInputRef.current?.click()}
+                                        onDragOver={(e) => e.preventDefault()}
+                                        onDrop={handleDrop}
+                                        className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
+                                    >
+                                        <FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
+                                        <p className="text-sm text-gray-500 mb-2">
+                                            Drag & drop files here or
+                                        </p>
+                                        <button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
+                                            Browse Files
+                                        </button>
+                                        <input
+                                            type="file"
+                                            ref={fileInputRef}
+                                            className="hidden"
+                                            onChange={handleFileChange}
+                                            accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
+                                            multiple
+                                        />
+                                    </div>
+                                )}
+                                {activeTab !== "Upload" && (
+                                    <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                                        <p>{activeTab} integration coming soon...</p>
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
-                </div>
-            )}
-
+                )}
             </div>
 
 
+
         </>
     );
 };