diff --git a/apps/web/components/apps/SkeletonLoader.tsx b/apps/web/components/apps/SkeletonLoader.tsx
index 8dc31defc0..a4ee7d04fa 100644
--- a/apps/web/components/apps/SkeletonLoader.tsx
+++ b/apps/web/components/apps/SkeletonLoader.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
+
 import { ShellSubHeading } from "@components/Shell";
 
 function SkeletonLoader() {
@@ -22,16 +24,16 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between p-3">
       <div className="flex-grow truncate text-sm">
         <div className="flex justify-start space-x-2">
-          <div className="h-10 w-10 rounded-lg bg-gray-100"></div>
+          <SkeletonText width="10" height="10"></SkeletonText>
           <div className="space-y-2">
-            <div className="h-4 w-32 rounded-md bg-gray-100"></div>
-            <div className="h-4 w-16 rounded-md bg-gray-100"></div>
+            <SkeletonText height="4" width="32"></SkeletonText>
+            <SkeletonText height="4" width="16"></SkeletonText>
           </div>
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <div className="h-11 w-32 rounded-md bg-gray-100"></div>
+          <SkeletonText width="32" height="11"></SkeletonText>
         </div>
       </div>
     </li>
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 2ba945b859..2c12aa37c4 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { SkeletonText } from "@calcom/ui";
+
 function SkeletonLoader() {
   return (
     <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -17,13 +19,13 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div className="flex flex-col space-y-2">
-          <div className="h-4 w-32 rounded-md bg-gray-100"></div>
-          <div className="h-2 w-32 rounded-md bg-gray-100"></div>
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="32" height="2"></SkeletonText>
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <div className="h-6 w-12 rounded-md bg-gray-100"></div>
+          <SkeletonText width="12" height="6"></SkeletonText>
         </div>
       </div>
     </li>
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index e152b4d1a5..2e50ad0ef9 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { SkeletonText } from "@calcom/ui";
+
 import BookingsShell from "@components/BookingsShell";
 
 function SkeletonLoader() {
@@ -20,16 +22,16 @@ function SkeletonItem() {
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">
-            <div className="h-5 w-32 rounded-md bg-gray-100"></div>
-            <div className="h-4 w-16 rounded-md bg-gray-100"></div>
+            <SkeletonText width="32" height="5" />
+            <SkeletonText width="16" height="4" />
           </div>
-          <div className="ml-4 h-5 w-24 rounded-md bg-gray-100"></div>
+          <SkeletonText width="24" height="5" className="ml-4" />
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <div className="h-6 w-16 rounded-md bg-gray-100"></div>
-          <div className="h-6 w-32 rounded-md bg-gray-100"></div>
+          <SkeletonText width="16" height="6" />
+          <SkeletonText width="32" height="6" />
         </div>
       </div>
     </li>
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 8960352bcc..2397c69865 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -2,22 +2,24 @@ import { LinkIcon } from "@heroicons/react/outline";
 import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, UserIcon } from "@heroicons/react/solid";
 import React from "react";
 
+import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
+
 function SkeletonLoader() {
   return (
-    <div className="animate-pulse">
+    <SkeletonContainer>
       <div className="mb-4 flex items-center">
-        <div className="mt-1 h-8 w-8 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2" />
+        <SkeletonAvatar width="8" height="8"></SkeletonAvatar>
         <div className="space-y-1">
-          <div className="h-4 w-16 rounded-md bg-gray-200"></div>
-          <div className="h-4 w-24 rounded-md bg-gray-200"></div>
+          <SkeletonText height="4" width="16"></SkeletonText>
+          <SkeletonText height="4" width="24"></SkeletonText>
         </div>
       </div>
-      <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
       </ul>
-    </div>
+    </SkeletonContainer>
   );
 }
 
@@ -28,17 +30,17 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div>
-          <div className="h-5 w-32 rounded-md bg-gray-100"></div>
+          <SkeletonText width="32" height="5"></SkeletonText>
         </div>
-        <div className="text-neutral-500 dark:text-white">
+        <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
               <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200"></ClockIcon>
-              <div className="h-4 w-12 rounded-md bg-gray-100"></div>
+              <SkeletonText width="12" height="4"></SkeletonText>
             </li>
             <li className="flex items-center whitespace-nowrap">
               <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200"></UserIcon>
-              <div className="h-4 w-16 rounded-md bg-gray-100"></div>
+              <SkeletonText width="16" height="4"></SkeletonText>
             </li>
           </ul>
         </div>
diff --git a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
index 3bb8febe54..1b29a7e884 100644
--- a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
+++ b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
@@ -33,7 +33,7 @@ async function handlePaymentSuccess(event: Stripe.Event) {
     },
   });
   if (!payment?.bookingId) {
-    console.log(JSON.stringify(payment));
+    console.log(JSON.stringify(paymentIntent), JSON.stringify(payment));
   }
   if (!payment?.bookingId) throw new Error("Payment not found");
 
diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts
index 00013fc755..2b01636b0b 100644
--- a/apps/web/pages/api/book/event.ts
+++ b/apps/web/pages/api/book/event.ts
@@ -674,7 +674,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         }
       }
 
-      await sendRescheduledEmails({ ...evt, additionInformation: metadata });
+      await sendRescheduledEmails({
+        ...evt,
+        additionInformation: metadata,
+        additionalNotes, // Resets back to the addtionalNote input and not the overriden value
+      });
     }
     // If it's not a reschedule, doesn't require confirmation and there's no price,
     // Create a booking
@@ -704,13 +708,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         metadata.conferenceData = results[0].createdEvent?.conferenceData;
         metadata.entryPoints = results[0].createdEvent?.entryPoints;
       }
-      await sendScheduledEmails({ ...evt, additionInformation: metadata });
+      await sendScheduledEmails({
+        ...evt,
+        additionInformation: metadata,
+        additionalNotes,
+      });
     }
   }
 
   if (eventType.requiresConfirmation && !rescheduleUid) {
-    await sendOrganizerRequestEmail(evt);
-    await sendAttendeeRequestEmail(evt, attendeesList[0]);
+    await sendOrganizerRequestEmail({ ...evt, additionalNotes });
+    await sendAttendeeRequestEmail({ ...evt, additionalNotes }, attendeesList[0]);
   }
 
   if (typeof eventType.price === "number" && eventType.price > 0 && !originalRescheduledBooking?.paid) {
diff --git a/packages/app-store/wipemycalother/lib/eventManager.ts b/packages/app-store/wipemycalother/lib/eventManager.ts
index 224a02d190..e971249c4e 100644
--- a/packages/app-store/wipemycalother/lib/eventManager.ts
+++ b/packages/app-store/wipemycalother/lib/eventManager.ts
@@ -323,7 +323,9 @@ export default class EventManager {
     if (credential) {
       return createMeeting(credential, event);
     } else {
-      return Promise.reject("No suitable credentials given for the requested integration name.");
+      return Promise.reject(
+        `No suitable credentials given for the requested integration name:${event.location}`
+      );
     }
   }
 
@@ -364,7 +366,9 @@ export default class EventManager {
       const bookingRef = booking ? booking.references.filter((ref) => ref.type === credential.type)[0] : null;
       return updateMeeting(credential, event, bookingRef);
     } else {
-      return Promise.reject("No suitable credentials given for the requested integration name.");
+      return Promise.reject(
+        `No suitable credentials given for the requested integration name:${event.location}`
+      );
     }
   }
 
diff --git a/packages/core/EventManager.ts b/packages/core/EventManager.ts
index 899edb1c5c..c8e30a692b 100644
--- a/packages/core/EventManager.ts
+++ b/packages/core/EventManager.ts
@@ -323,7 +323,9 @@ export default class EventManager {
     if (credential) {
       return createMeeting(credential, event);
     } else {
-      return Promise.reject("No suitable credentials given for the requested integration name.");
+      return Promise.reject(
+        `No suitable credentials given for the requested integration name:${event.location}`
+      );
     }
   }
 
@@ -364,7 +366,9 @@ export default class EventManager {
       const bookingRef = booking ? booking.references.filter((ref) => ref.type === credential.type)[0] : null;
       return updateMeeting(credential, event, bookingRef);
     } else {
-      return Promise.reject("No suitable credentials given for the requested integration name.");
+      return Promise.reject(
+        `No suitable credentials given for the requested integration name:${event.location}`
+      );
     }
   }
 
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 30b1364da1..3290c411f9 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,3 +1,4 @@
 export { default as Button } from "./Button";
 export { default as EmptyScreen } from "./EmptyScreen";
 export { default as Switch } from "./Switch";
+export * from "./skeleton";
diff --git a/packages/ui/skeleton/index.tsx b/packages/ui/skeleton/index.tsx
new file mode 100644
index 0000000000..ddc48712b9
--- /dev/null
+++ b/packages/ui/skeleton/index.tsx
@@ -0,0 +1,34 @@
+import classNames from "@calcom/lib/classNames";
+
+type SkeletonBaseProps = {
+  width: string;
+  height: string;
+  className?: string;
+};
+
+interface AvatarProps extends SkeletonBaseProps {
+  // Limit this cause we don't use avatars bigger than thi
+  width: "2" | "3" | "4" | "5" | "6" | "8";
+  height: "2" | "3" | "4" | "5" | "6" | "8";
+}
+
+interface SkeletonContainer {
+  as?: keyof JSX.IntrinsicElements;
+}
+
+const SkeletonAvatar: React.FC<AvatarProps> = ({ width, height }) => {
+  return (
+    <div className={`mt-1 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2 w-${width} h-${height} ${classNames}`} />
+  );
+};
+
+const SkeletonText: React.FC<SkeletonBaseProps> = ({ width, height }) => {
+  return <div className={`rounded-md bg-gray-200  w-${width} h-${height} ${classNames}`} />;
+};
+
+const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as }) => {
+  const Component = as || "div";
+  return <Component className="animate-pulse">{children}</Component>;
+};
+
+export { SkeletonAvatar, SkeletonText, SkeletonContainer };