) : null}
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 94506cb885..69906ee67e 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -56,6 +56,8 @@
"a_refund_failed": "A refund failed",
"awaiting_payment_subject": "Awaiting Payment: {{title}} on {{date}}",
"meeting_awaiting_payment": "Your meeting is awaiting payment",
+ "dark_theme_contrast_error":"Dark Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible.",
+ "light_theme_contrast_error":"Light Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible.",
"payment_not_created_error": "Payment could not be created",
"couldnt_charge_card_error": "Could not charge card for Payment",
"no_available_users_found_error": "No available users found. Could you try another time slot?",
@@ -615,6 +617,7 @@
"hide_book_a_team_member_description": "Hide Book a Team Member Button from your public pages.",
"danger_zone": "Danger zone",
"account_deletion_cannot_be_undone":"Be Careful. Account deletion cannot be undone.",
+ "team_deletion_cannot_be_undone":"Be Careful. Team deletion cannot be undone",
"back": "Back",
"cancel": "Cancel",
"cancel_all_remaining": "Cancel all remaining",
@@ -1413,6 +1416,7 @@
"slot_length": "Slot length",
"booking_appearance": "Booking Appearance",
"appearance_team_description": "Manage settings for your team's booking appearance",
+ "appearance_org_description": "Manage settings for your organization's booking appearance",
"only_owner_change": "Only the owner of this team can make changes to the team's booking ",
"team_disable_cal_branding_description": "Removes any {{appName}} related brandings, i.e. 'Powered by {{appName}}'",
"invited_by_team": "{{teamName}} has invited you to join their team as a {{role}}",
diff --git a/packages/features/ee/components/BrandColorsForm.tsx b/packages/features/ee/components/BrandColorsForm.tsx
new file mode 100644
index 0000000000..a3181ac24d
--- /dev/null
+++ b/packages/features/ee/components/BrandColorsForm.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
+import { classNames } from "@calcom/lib";
+import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
+import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, ColorPicker, SettingsToggle, Alert } from "@calcom/ui";
+
+type BrandColorsFormValues = {
+ brandColor: string;
+ darkBrandColor: string;
+};
+
+const BrandColorsForm = ({
+ onSubmit,
+ brandColor,
+ darkBrandColor,
+}: {
+ onSubmit: (values: BrandColorsFormValues) => void;
+ brandColor: string | undefined;
+ darkBrandColor: string | undefined;
+}) => {
+ const { t } = useLocale();
+ const brandColorsFormMethods = useFormContext();
+ const {
+ formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
+ handleSubmit,
+ } = brandColorsFormMethods;
+
+ const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(
+ brandColor !== DEFAULT_LIGHT_BRAND_COLOR || darkBrandColor !== DEFAULT_DARK_BRAND_COLOR
+ );
+ const [darkModeError, setDarkModeError] = useState(false);
+ const [lightModeError, setLightModeError] = useState(false);
+ return (
+