diff --git a/packages/app-store/zapier/pages/v2/setup/index.tsx b/packages/app-store/zapier/pages/v2/setup/index.tsx
index 8a838f62b6..953ef18e53 100644
--- a/packages/app-store/zapier/pages/v2/setup/index.tsx
+++ b/packages/app-store/zapier/pages/v2/setup/index.tsx
@@ -1,4 +1,3 @@
-import { ClipboardCopyIcon } from "@heroicons/react/solid";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useState } from "react";
@@ -6,6 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import { ClipboardCopyIcon } from "@calcom/ui/Icon";
 import { Button, Loader, showToast, Tooltip } from "@calcom/ui/v2";
 
 export interface IZapierSetupProps {
@@ -64,16 +64,18 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               ) : (
                 <>
                   <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
-                  <div className="my-2 mt-3 flex">
-                    <div className="w-full rounded bg-gray-100 py-2 pl-2 pr-5">{newApiKey}</div>
-                    <Tooltip side="top" content="copy">
+                  <div className="my-2 mt-3 flex-wrap sm:flex sm:flex-nowrap">
+                    <code className="h-full w-full whitespace-pre-wrap rounded-md bg-gray-100 py-2 pl-2 pr-2 sm:rounded-r-none sm:pr-5">
+                      {newApiKey}
+                    </code>
+                    <Tooltip side="top" content={t("copy_to_clipboard")}>
                       <Button
                         onClick={() => {
                           navigator.clipboard.writeText(newApiKey);
                           showToast(t("api_key_copied"), "success");
                         }}
                         type="button"
-                        className="rounded-l-none px-4 text-base">
+                        className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
                         <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
                         {t("copy")}
                       </Button>
diff --git a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
index ff571254cc..c58ef2da86 100644
--- a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
@@ -68,7 +68,7 @@ export default function ApiKeyDialogForm({
           </div>
           <div>
             <div className="flex">
-              <code className="my-2 mr-1 w-full truncate rounded-sm bg-gray-100 py-2 px-3 align-middle font-mono text-gray-800">
+              <code className="mb-2 w-full truncate rounded-md rounded-r-none bg-gray-100 px-3 py-2 align-middle font-mono text-gray-800">
                 {apiKey}
               </code>
               <Tooltip side="top" content={t("copy_to_clipboard")}>
@@ -78,7 +78,7 @@ export default function ApiKeyDialogForm({
                     showToast(t("api_key_copied"), "success");
                   }}
                   type="button"
-                  className=" my-2 px-4 text-base">
+                  className="rounded-l-none py-[19px] text-base ">
                   <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
                   {t("copy")}
                 </Button>
@@ -112,7 +112,7 @@ export default function ApiKeyDialogForm({
             }
           }}
           className="space-y-4">
-          <div className="mb-10 mt-1">
+          <div className="mt-1 mb-10">
             <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
             </h2>