diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index 6a81e77cd8..0d296e66e9 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -99,95 +99,95 @@ const format = (date: Date, hour12: boolean) =>
     new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss"))
   );
 
-export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
+const EventTypeSchedule = () => {
+  const me = useMeQuery();
+  const timeFormat = me?.data?.timeFormat;
   const { t, i18n } = useLocale();
   const { watch } = useFormContext<FormValues>();
 
-  const EventTypeSchedule = () => {
-    const me = useMeQuery();
-    const timeFormat = me?.data?.timeFormat;
-    return (
-      <div className="space-y-4">
-        <div>
-          <div className="min-w-4 mb-2">
-            <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-gray-700">
-              {t("availability")}
-            </label>
-          </div>
-          <Controller
-            name="schedule"
-            render={({ field }) => (
-              <AvailabilitySelect
-                value={field.value}
-                onBlur={field.onBlur}
-                name={field.name}
-                onChange={(selected) => {
-                  field.onChange(selected?.value || null);
-                }}
-              />
-            )}
-          />
-        </div>
-        <div className="space-y-4 rounded border px-6 pb-4">
-          <ol className="table border-collapse text-sm">
-            {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-              const isAvailable = !!filterDays(index).length;
-              return (
-                <li key={day} className="my-6 flex border-transparent last:mb-2">
-                  <span
-                    className={classNames(
-                      "w-20 font-medium sm:w-32",
-                      !isAvailable && "text-gray-500 opacity-50"
-                    )}>
-                    {day}
-                  </span>
-                  {isLoading ? (
-                    <SkeletonText className="block h-5 w-60" />
-                  ) : isAvailable ? (
-                    <div className="space-y-3 text-right">
-                      {filterDays(index).map((dayRange, i) => (
-                        <div key={i} className="flex items-center leading-4">
-                          <span className="w-16 sm:w-28 sm:text-left">
-                            {format(dayRange.startTime, timeFormat === 12)}
-                          </span>
-                          <span className="ltr:ml-4 rtl:mr-4">-</span>
-                          <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
-                  )}
-                </li>
-              );
-            })}
-          </ol>
-          <hr />
-          <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-            <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
-              <FiGlobe className="ltr:mr-2 rtl:ml-2" />
-              {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
-            </span>
-            <Button
-              href={`/availability/${schedule?.schedule.id}`}
-              color="minimal"
-              EndIcon={FiExternalLink}
-              target="_blank"
-              rel="noopener noreferrer">
-              {t("edit_availability")}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   const scheduleId = watch("schedule");
   const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId });
 
   const filterDays = (dayNum: number) =>
     schedule?.schedule.availability.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="availability" className="mb-2 block text-sm font-medium leading-none text-gray-700">
+          {t("availability")}
+        </label>
+        <Controller
+          name="schedule"
+          render={({ field }) => (
+            <AvailabilitySelect
+              value={field.value}
+              onBlur={field.onBlur}
+              name={field.name}
+              onChange={(selected) => {
+                field.onChange(selected?.value || null);
+              }}
+            />
+          )}
+        />
+      </div>
+      <div className="space-y-4 rounded border px-6 pb-4">
+        <ol className="table border-collapse text-sm">
+          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+            const isAvailable = !!filterDays(index).length;
+            return (
+              <li key={day} className="my-6 flex border-transparent last:mb-2">
+                <span
+                  className={classNames(
+                    "w-20 font-medium sm:w-32",
+                    !isAvailable && "text-gray-500 opacity-50"
+                  )}>
+                  {day}
+                </span>
+                {isLoading ? (
+                  <SkeletonText className="block h-5 w-60" />
+                ) : isAvailable ? (
+                  <div className="space-y-3 text-right">
+                    {filterDays(index).map((dayRange, i) => (
+                      <div key={i} className="flex items-center leading-4">
+                        <span className="w-16 sm:w-28 sm:text-left">
+                          {format(dayRange.startTime, timeFormat === 12)}
+                        </span>
+                        <span className="ltr:ml-4 rtl:mr-4">-</span>
+                        <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+        <hr />
+        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+          <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
+            <FiGlobe className="ltr:mr-2 rtl:ml-2" />
+            {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
+          </span>
+          <Button
+            href={`/availability/${schedule?.schedule.id}`}
+            color="minimal"
+            EndIcon={FiExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
+  const { t } = useLocale();
+
   if (!isTeamEvent) {
     return <EventTypeSchedule />;
   }
diff --git a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
index 71fc7f0c19..54eeb2b8f8 100644
--- a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
+++ b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
@@ -100,7 +100,7 @@ export const EventTeamWebhooksTab = ({
               <>
                 {webhooks.length ? (
                   <>
-                    <div className="mt-4 mb-8 rounded-md border">
+                    <div className="mb-8 rounded-md border">
                       {webhooks.map((webhook, index) => {
                         return (
                           <WebhookListItem
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 330f759da5..0940dfc706 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -338,7 +338,7 @@ function EventTypeSingleLayout({
             <div
               className={classNames(
                 "mt-4 rounded-md  border-gray-200 bg-white sm:mx-0 xl:mt-0",
-                disableBorder ? "border-0 xl:-mt-4 " : "p-2 md:border md:p-6"
+                disableBorder ? "border-0 " : "p-2 md:border md:p-6"
               )}>
               {children}
             </div>
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index 21a3ef58f7..8641933e67 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -91,7 +91,7 @@ const WorkflowListItem = (props: ItemProps) => {
   });
 
   return (
-    <div className="mb-4 flex w-full items-center overflow-hidden rounded-md border border-gray-200 p-6 px-3 md:p-6">
+    <div className="flex w-full items-center overflow-hidden rounded-md border border-gray-200 p-6 px-3 md:p-6">
       <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-xs font-medium">
         {getActionIcon(
           workflow.steps,
@@ -197,7 +197,7 @@ function EventWorkflowsTab(props: Props) {
     <LicenseRequired>
       {!isLoading ? (
         data?.workflows && data?.workflows.length > 0 ? (
-          <div className="mt-4">
+          <div className="space-y-4">
             {sortedWorkflows.map((workflow) => {
               return <WorkflowListItem key={workflow.id} workflow={workflow} eventType={props.eventType} />;
             })}
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index 7740444dff..c488403c16 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
@@ -2,7 +2,7 @@ import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="mt-4 animate-pulse divide-neutral-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-neutral-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
     </ul>