diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 96b78c409..5dcd29e43 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -160,101 +160,104 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                   >
                     <div
                       id="container"
-                      className="block w-full space-y-2 sm:space-x-2 sm:space-y-0 sm:flex"
+                      className="block w-full lg:flex lg:justify-between"
                     >
-                      <div
-                        className={classNames(
-                          "sm:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
-                          item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                        )}
-                      >
-                        <label
-                          htmlFor="name"
-                          className="block text-xs font-medium text-gray-900"
+                      <div className="block space-y-2 md:space-x-2 md:space-y-0 md:flex">
+                        <div
+                          className={classNames(
+                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            item.sendStatus === "SENT" ? "bg-gray-100" : ""
+                          )}
                         >
-                          Email
-                        </label>
-                        <input
-                          type="email"
-                          {...register(`signers.${index}.email`, {
-                            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                          })}
-                          defaultValue={item.email}
-                          disabled={item.sendStatus === "SENT" || loading}
-                          onBlur={() => {
-                            if (!errors?.signers?.[index])
-                              createOrUpdateRecipient({
-                                ...formValues[index],
-                                documentId: props.document.id,
-                              });
-                          }}
-                          onKeyDown={(event: any) => {
-                            if (event.key === "Enter")
+                          <label
+                            htmlFor="name"
+                            className="block text-xs font-medium text-gray-900"
+                          >
+                            Email
+                          </label>
+                          <input
+                            type="email"
+                            {...register(`signers.${index}.email`, {
+                              pattern:
+                                /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                            })}
+                            defaultValue={item.email}
+                            disabled={item.sendStatus === "SENT" || loading}
+                            onBlur={() => {
                               if (!errors?.signers?.[index])
                                 createOrUpdateRecipient({
                                   ...formValues[index],
                                   documentId: props.document.id,
                                 });
-                          }}
-                          className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
-                          placeholder="john.dorian@loremipsum.com"
-                        />
-                        {errors?.signers?.[index] ? (
-                          <p
-                            className="mt-2 text-sm text-red-600"
-                            id="email-error"
-                          >
-                            <XMarkIcon className="inline h-5" /> Invalid Email
-                          </p>
-                        ) : (
-                          ""
-                        )}
-                      </div>
-                      <div
-                        className={classNames(
-                          "sm:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
-                          item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                        )}
-                      >
-                        <label
-                          htmlFor="name"
-                          className="block text-xs font-medium text-gray-900"
+                            }}
+                            onKeyDown={(event: any) => {
+                              if (event.key === "Enter")
+                                if (!errors?.signers?.[index])
+                                  createOrUpdateRecipient({
+                                    ...formValues[index],
+                                    documentId: props.document.id,
+                                  });
+                            }}
+                            className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
+                            placeholder="john.dorian@loremipsum.com"
+                          />
+                          {errors?.signers?.[index] ? (
+                            <p
+                              className="mt-2 text-sm text-red-600"
+                              id="email-error"
+                            >
+                              <XMarkIcon className="inline h-5" /> Invalid Email
+                            </p>
+                          ) : (
+                            ""
+                          )}
+                        </div>
+                        <div
+                          className={classNames(
+                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            item.sendStatus === "SENT" ? "bg-gray-100" : ""
+                          )}
                         >
-                          Name (optional)
-                        </label>
-                        <input
-                          type="text"
-                          {...register(`signers.${index}.name`)}
-                          defaultValue={item.name}
-                          disabled={item.sendStatus === "SENT" || loading}
-                          onBlur={() => {
-                            if (!errors?.signers?.[index])
-                              createOrUpdateRecipient({
-                                ...formValues[index],
-                                documentId: props.document.id,
-                              });
-                          }}
-                          onKeyDown={(event: any) => {
-                            if (
-                              event.key === "Enter" &&
-                              !errors?.signers?.[index]
-                            )
-                              createOrUpdateRecipient({
-                                ...formValues[index],
-                                documentId: props.document.id,
-                              });
-                          }}
-                          className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
-                          placeholder="John Dorian"
-                        />
+                          <label
+                            htmlFor="name"
+                            className="block text-xs font-medium text-gray-900"
+                          >
+                            Name (optional)
+                          </label>
+                          <input
+                            type="text"
+                            {...register(`signers.${index}.name`)}
+                            defaultValue={item.name}
+                            disabled={item.sendStatus === "SENT" || loading}
+                            onBlur={() => {
+                              if (!errors?.signers?.[index])
+                                createOrUpdateRecipient({
+                                  ...formValues[index],
+                                  documentId: props.document.id,
+                                });
+                            }}
+                            onKeyDown={(event: any) => {
+                              if (
+                                event.key === "Enter" &&
+                                !errors?.signers?.[index]
+                              )
+                                createOrUpdateRecipient({
+                                  ...formValues[index],
+                                  documentId: props.document.id,
+                                });
+                            }}
+                            className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
+                            placeholder="John Dorian"
+                          />
+                        </div>
                       </div>
-                      <div className="flex items-center space-x-2">
-                        <div className="flex mb-2 mr-2 sm:ml-auto sm:mr-0">
+                      <div className="flex items-center space-x-2 lg:ml-2">
+                        <div className="flex mb-2 mr-2 lg:mr-0">
                           <div key={item.id} className="space-x-2">
                             {item.sendStatus === "NOT_SENT" ? (
                               <span
                                 id="sent_icon"
-                                className="inline-block mt-3 flex-shrink-0 rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-800"
+                                className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
                               >
                                 Not Sent
                               </span>
@@ -266,7 +269,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                               <span id="sent_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
+                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800 "
                                 >
                                   <CheckIcon className="inline h-5 mr-1" /> Sent
                                 </span>
@@ -304,7 +307,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                             )}
                           </div>
                         </div>
-                        <div className="mr-1 ">
+                        <div className="flex mr-1">
                           <IconButton
                             icon={PaperAirplaneIcon}
                             disabled={