diff --git a/packages/features/eventtypes/components/AddMembersWithSwitch.tsx b/packages/features/eventtypes/components/AddMembersWithSwitch.tsx
index be1ac93c40..863ec394d2 100644
--- a/packages/features/eventtypes/components/AddMembersWithSwitch.tsx
+++ b/packages/features/eventtypes/components/AddMembersWithSwitch.tsx
@@ -9,14 +9,19 @@ import {
   AddMembersWithSwitchPlatformWrapper,
 } from "@calcom/atoms/monorepo";
 import { Segment } from "@calcom/features/Segment";
-import type { FormValues, Host, TeamMember } from "@calcom/features/eventtypes/lib/types";
+import type {
+  FormValues,
+  Host,
+  SettingsToggleClassNames,
+  TeamMember,
+} from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
 import { Label, SettingsToggle } from "@calcom/ui";
 
 import AssignAllTeamMembers from "./AssignAllTeamMembers";
 import CheckedTeamSelect from "./CheckedTeamSelect";
-import type { CheckedSelectOption } from "./CheckedTeamSelect";
+import type { CheckedSelectOption, CheckedTeamSelectCustomClassNames } from "./CheckedTeamSelect";
 
 interface IUserToValue {
   id: number | null;
@@ -57,6 +62,7 @@ const CheckedHostField = ({
   onChange,
   helperText,
   isRRWeightsEnabled,
+  customClassNames,
   ...rest
 }: {
   labelText?: string;
@@ -100,6 +106,7 @@ const CheckedHostField = ({
           options={options}
           placeholder={placeholder}
           isRRWeightsEnabled={isRRWeightsEnabled}
+          customClassNames={customClassNames}
           {...rest}
         />
       </div>
@@ -154,6 +161,11 @@ function MembersSegmentWithToggle({
   );
 }
 
+export type AddMembersWithSwitchCustomClassNames = {
+  assingAllTeamMembers?: SettingsToggleClassNames;
+  teamMemberSelect?: CheckedTeamSelectCustomClassNames;
+};
+
 export type AddMembersWithSwitchProps = {
   teamMembers: TeamMember[];
   value: Host[];
@@ -168,6 +180,7 @@ export type AddMembersWithSwitchProps = {
   teamId: number;
   isSegmentApplicable?: boolean;
   "data-testid"?: string;
+  customClassNames?: AddMembersWithSwitchCustomClassNames;
 };
 
 const enum AssignmentState {
@@ -232,6 +245,7 @@ export function AddMembersWithSwitch({
   isRRWeightsEnabled,
   teamId,
   isSegmentApplicable,
+  customClassNames,
   ...rest
 }: AddMembersWithSwitchProps) {
   const { t } = useLocale();
@@ -267,6 +281,7 @@ export function AddMembersWithSwitch({
               onActive();
             }}
             onInactive={onAssignAllTeamMembersInactive}
+            customClassNames={customClassNames?.assingAllTeamMembers}
           />
           {assignmentState !== AssignmentState.ALL_TEAM_MEMBERS_ENABLED_AND_SEGMENT_NOT_APPLICABLE && (
             <div className="mt-2">
@@ -293,6 +308,7 @@ export function AddMembersWithSwitch({
                 setAssignAllTeamMembers={setAssignAllTeamMembers}
                 onActive={onActive}
                 onInactive={onAssignAllTeamMembersInactive}
+                customClassNames={customClassNames?.assingAllTeamMembers}
               />
             )}
           </div>
@@ -306,6 +322,7 @@ export function AddMembersWithSwitch({
               options={teamMembers.sort(sortByLabel)}
               placeholder={placeholder ?? t("add_attendees")}
               isRRWeightsEnabled={isRRWeightsEnabled}
+              customClassNames={customClassNames?.teamMemberSelect}
             />
           </div>
         </>
diff --git a/packages/features/eventtypes/components/AssignAllTeamMembers.tsx b/packages/features/eventtypes/components/AssignAllTeamMembers.tsx
index cb9c214670..5d915ec60c 100644
--- a/packages/features/eventtypes/components/AssignAllTeamMembers.tsx
+++ b/packages/features/eventtypes/components/AssignAllTeamMembers.tsx
@@ -1,7 +1,8 @@
 import type { Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { FormValues, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SettingsToggle } from "@calcom/ui";
 
@@ -10,11 +11,13 @@ const AssignAllTeamMembers = ({
   setAssignAllTeamMembers,
   onActive,
   onInactive,
+  customClassNames,
 }: {
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
   onActive: () => void;
   onInactive?: () => void;
+  customClassNames?: SettingsToggleClassNames;
 }) => {
   const { t } = useLocale();
   const { setValue } = useFormContext<FormValues>();
@@ -26,7 +29,8 @@ const AssignAllTeamMembers = ({
         <SettingsToggle
           data-testid="assign-all-team-members-toggle"
           title={t("automatically_add_all_team_members")}
-          labelClassName="mt-0.5 font-normal"
+          labelClassName={classNames("mt-0.5 font-normal", customClassNames?.label)}
+          switchContainerClassName={customClassNames?.container}
           checked={assignAllTeamMembers}
           onCheckedChange={(active) => {
             setValue("assignAllTeamMembers", active, { shouldDirty: true });
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index 7ca4763c5a..35df4cdbf9 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -5,10 +5,12 @@ import { useState } from "react";
 import type { Props } from "react-select";
 
 import { useIsPlatform } from "@calcom/atoms/monorepo";
+import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar, Button, Icon, Select, Tooltip } from "@calcom/ui";
 
+import type { PriorityDialogCustomClassNames, WeightDialogCustomClassNames } from "./HostEditDialogs";
 import { PriorityDialog, WeightDialog } from "./HostEditDialogs";
 
 export type CheckedSelectOption = {
@@ -22,15 +24,33 @@ export type CheckedSelectOption = {
   defaultScheduleId?: number | null;
 };
 
+export type CheckedTeamSelectCustomClassNames = {
+  hostsSelect?: SelectClassNames;
+  selectedHostList?: {
+    container?: string;
+    listItem?: {
+      container?: string;
+      avatar?: string;
+      name?: string;
+      changePriorityButton?: string;
+      changeWeightButton?: string;
+      removeButton?: string;
+    };
+  };
+  priorityDialog?: PriorityDialogCustomClassNames;
+  weightDialog?: WeightDialogCustomClassNames;
+};
 export const CheckedTeamSelect = ({
   options = [],
   value = [],
   isRRWeightsEnabled,
+  customClassNames,
   ...props
 }: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
   value?: readonly CheckedSelectOption[];
   onChange: (value: readonly CheckedSelectOption[]) => void;
   isRRWeightsEnabled?: boolean;
+  customClassNames?: CheckedTeamSelectCustomClassNames;
 }) => {
   const isPlatform = useIsPlatform();
   const [priorityDialogOpen, setPriorityDialogOpen] = useState(false);
@@ -50,21 +70,44 @@ export const CheckedTeamSelect = ({
         options={options}
         value={value}
         isMulti
+        className={customClassNames?.hostsSelect?.select}
+        innerClassNames={customClassNames?.hostsSelect?.innerClassNames}
         {...props}
       />
       {/* This class name conditional looks a bit odd but it allows a seemless transition when using autoanimate
        - Slides down from the top instead of just teleporting in from nowhere*/}
       <ul
-        className={classNames("mb-4 mt-3 rounded-md", value.length >= 1 && "border-subtle border")}
+        className={classNames(
+          "mb-4 mt-3 rounded-md",
+          value.length >= 1 && "border-subtle border",
+          customClassNames?.selectedHostList?.container
+        )}
         ref={animationRef}>
         {value.map((option, index) => (
           <>
             <li
               key={option.value}
-              className={`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-subtle border-b"}`}>
+              className={classNames(
+                `flex px-3 py-2 ${index === value.length - 1 ? "" : "border-subtle border-b"}`,
+                customClassNames?.selectedHostList?.listItem?.container
+              )}>
               {!isPlatform && <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />}
-              {isPlatform && <Icon name="user" className="mt-0.5 h-4 w-4" />}
-              <p className="text-emphasis my-auto ms-3 text-sm">{option.label}</p>
+              {isPlatform && (
+                <Icon
+                  name="user"
+                  className={classNames(
+                    "mt-0.5 h-4 w-4",
+                    customClassNames?.selectedHostList?.listItem?.avatar
+                  )}
+                />
+              )}
+              <p
+                className={classNames(
+                  "text-emphasis my-auto ms-3 text-sm",
+                  customClassNames?.selectedHostList?.listItem?.name
+                )}>
+                {option.label}
+              </p>
               <div className="ml-auto flex items-center">
                 {option && !option.isFixed ? (
                   <>
@@ -77,7 +120,8 @@ export const CheckedTeamSelect = ({
                         }}
                         className={classNames(
                           "mr-6 h-2 p-0 text-sm hover:bg-transparent",
-                          getPriorityTextAndColor(option.priority).color
+                          getPriorityTextAndColor(option.priority).color,
+                          customClassNames?.selectedHostList?.listItem?.changePriorityButton
                         )}>
                         {t(getPriorityTextAndColor(option.priority).text)}
                       </Button>
@@ -85,7 +129,10 @@ export const CheckedTeamSelect = ({
                     {isRRWeightsEnabled ? (
                       <Button
                         color="minimal"
-                        className="mr-6 h-2 w-4 p-0 text-sm hover:bg-transparent"
+                        className={classNames(
+                          "mr-6 h-2 w-4 p-0 text-sm hover:bg-transparent",
+                          customClassNames?.selectedHostList?.listItem?.changeWeightButton
+                        )}
                         onClick={() => {
                           setWeightDialogOpen(true);
                           setCurrentOption(option);
@@ -103,7 +150,10 @@ export const CheckedTeamSelect = ({
                 <Icon
                   name="x"
                   onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-                  className="my-auto ml-2 h-4 w-4"
+                  className={classNames(
+                    "my-auto ml-2 h-4 w-4",
+                    customClassNames?.selectedHostList?.listItem?.removeButton
+                  )}
                 />
               </div>
             </li>
@@ -117,12 +167,14 @@ export const CheckedTeamSelect = ({
             setIsOpenDialog={setPriorityDialogOpen}
             option={currentOption}
             onChange={props.onChange}
+            customClassNames={customClassNames?.priorityDialog}
           />
           <WeightDialog
             isOpenDialog={weightDialogOpen}
             setIsOpenDialog={setWeightDialogOpen}
             option={currentOption}
             onChange={props.onChange}
+            customClassNames={customClassNames?.weightDialog}
           />
         </>
       ) : (
diff --git a/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx b/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
index be6fd104b3..d35a40699d 100644
--- a/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
+++ b/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
@@ -1,6 +1,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { Props } from "react-select";
 
+import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -26,14 +27,38 @@ export type ChildrenEventType = {
   hidden: boolean;
 };
 
+export type ChildrenEventTypeSelectCustomClassNames = {
+  assignToSelect?: SelectClassNames;
+  selectedChildrenList?: {
+    container?: string;
+    listItem?: {
+      container?: string;
+      avatar?: string;
+      name?: string;
+      ownerBadge?: string;
+      memberBadge?: string;
+      hiddenBadge?: string;
+      badgeContainer?: string;
+      eventLink?: string;
+      showOnProfileTooltip?: string;
+      previewEventTypeTooltip?: string;
+      previewEventTypeButton?: string;
+      deleteEventTypeTooltip?: string;
+      deleteEventTypeButton?: string;
+    };
+  };
+};
+
 // TODO: This isnt just a select... rename this component in the future took me ages to find the component i was looking for
 export const ChildrenEventTypeSelect = ({
   options = [],
   value = [],
+  customClassNames,
   ...props
 }: Omit<Props<ChildrenEventType, true>, "value" | "onChange"> & {
   value?: ChildrenEventType[];
   onChange: (value: readonly ChildrenEventType[]) => void;
+  customClassNames?: ChildrenEventTypeSelectCustomClassNames;
 }) => {
   const { t } = useLocale();
   const [animationRef] = useAutoAnimate<HTMLUListElement>();
@@ -44,6 +69,8 @@ export const ChildrenEventTypeSelect = ({
         name={props.name}
         placeholder={t("select")}
         options={options}
+        className={customClassNames?.assignToSelect?.select}
+        innerClassNames={customClassNames?.assignToSelect?.innerClassNames}
         value={value}
         isMulti
         {...props}
@@ -53,39 +80,75 @@ export const ChildrenEventTypeSelect = ({
       <ul
         className={classNames(
           "border-subtle divide-subtle mt-3 divide-y rounded-md",
-          value.length >= 1 && "border"
+          value.length >= 1 && "border",
+          customClassNames?.selectedChildrenList?.container
         )}
         ref={animationRef}>
         {value.map((children, index) => (
           <li key={index}>
-            <div className="flex flex-row items-center gap-3 p-3">
+            <div
+              className={classNames(
+                "flex flex-row items-center gap-3 p-3",
+                customClassNames?.selectedChildrenList?.listItem?.container
+              )}>
               <Avatar
                 size="mdLg"
-                className="overflow-visible"
+                className={classNames(
+                  "overflow-visible",
+                  customClassNames?.selectedChildrenList?.listItem?.avatar
+                )}
                 imageSrc={children.owner.avatar}
                 alt={children.owner.name || children.owner.email || ""}
               />
               <div className="flex w-full flex-row justify-between">
                 <div className="flex flex-col">
-                  <span className="text text-sm font-semibold leading-none">
+                  <span
+                    className={classNames(
+                      "text text-sm font-semibold leading-none",
+                      customClassNames?.selectedChildrenList?.listItem?.name
+                    )}>
                     {children.owner.name || children.owner.email}
-                    <div className="flex flex-row gap-1">
+                    <div
+                      className={classNames(
+                        "flex flex-row gap-1",
+                        customClassNames?.selectedChildrenList?.listItem?.badgeContainer
+                      )}>
                       {children.owner.membership === MembershipRole.OWNER ? (
-                        <Badge variant="gray">{t("owner")}</Badge>
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.ownerBadge}>
+                          {t("owner")}
+                        </Badge>
                       ) : (
-                        <Badge variant="gray">{t("member")}</Badge>
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.memberBadge}>
+                          {t("member")}
+                        </Badge>
+                      )}
+                      {children.hidden && (
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.hiddenBadge}>
+                          {t("hidden")}
+                        </Badge>
                       )}
-                      {children.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
                     </div>
                   </span>
                   {children.owner.username && (
-                    <small className="text-subtle font-normal leading-normal">
+                    <small
+                      className={classNames(
+                        "text-subtle font-normal leading-normal",
+                        customClassNames?.selectedChildrenList?.listItem?.eventLink
+                      )}>
                       {`/${children.owner.username}/${children.slug}`}
                     </small>
                   )}
                 </div>
-                <div className="flex flex-row items-center gap-2">
-                  <Tooltip content={t("show_eventtype_on_profile")}>
+                <div className={classNames("flex flex-row items-center gap-2")}>
+                  <Tooltip
+                    className={customClassNames?.selectedChildrenList?.listItem?.showOnProfileTooltip}
+                    content={t("show_eventtype_on_profile")}>
                     <div className="self-center rounded-md p-2">
                       <Switch
                         name="Hidden"
@@ -101,12 +164,15 @@ export const ChildrenEventTypeSelect = ({
                   </Tooltip>
                   <ButtonGroup combined>
                     {children.created && children.owner.username && (
-                      <Tooltip content={t("preview")}>
+                      <Tooltip
+                        className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeTooltip}
+                        content={t("preview")}>
                         <Button
                           data-testid="preview-button"
                           color="secondary"
                           target="_blank"
                           variant="icon"
+                          className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeButton}
                           href={`${getBookerBaseUrlSync(
                             children.owner.profile?.organization?.slug ?? null
                           )}/${children.owner?.username}/${children.slug}`}
@@ -114,11 +180,14 @@ export const ChildrenEventTypeSelect = ({
                         />
                       </Tooltip>
                     )}
-                    <Tooltip content={t("delete")}>
+                    <Tooltip
+                      className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeTooltip}
+                      content={t("delete")}>
                       <Button
                         color="secondary"
                         target="_blank"
                         variant="icon"
+                        className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeButton}
                         onClick={() =>
                           props.onChange(value.filter((item) => item.owner.id !== children.owner.id))
                         }
diff --git a/packages/features/eventtypes/components/HostEditDialogs.tsx b/packages/features/eventtypes/components/HostEditDialogs.tsx
index ca2b89b86d..f82c118122 100644
--- a/packages/features/eventtypes/components/HostEditDialogs.tsx
+++ b/packages/features/eventtypes/components/HostEditDialogs.tsx
@@ -4,7 +4,13 @@ import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
-import type { FormValues, Host } from "@calcom/features/eventtypes/lib/types";
+import type {
+  FormValues,
+  Host,
+  InputClassNames,
+  SelectClassNames,
+} from "@calcom/features/eventtypes/lib/types";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   Dialog,
@@ -26,9 +32,17 @@ interface IDialog {
   onChange: (value: readonly CheckedSelectOption[]) => void;
 }
 
-export const PriorityDialog = (props: IDialog) => {
+export type PriorityDialogCustomClassNames = SelectClassNames & {
+  confirmButton?: string;
+};
+
+export const PriorityDialog = (
+  props: IDialog & {
+    customClassNames?: PriorityDialogCustomClassNames;
+  }
+) => {
   const { t } = useLocale();
-  const { isOpenDialog, setIsOpenDialog, option, onChange } = props;
+  const { isOpenDialog, setIsOpenDialog, option, onChange, customClassNames } = props;
   const { getValues } = useFormContext<FormValues>();
 
   const priorityOptions = [
@@ -65,10 +79,14 @@ export const PriorityDialog = (props: IDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent title={t("set_priority")}>
-        <div className="mb-4">
-          <Label>{t("priority_for_user", { userName: option.label })}</Label>
+        <div className={classNames("mb-4", customClassNames?.container)}>
+          <Label className={customClassNames?.label}>
+            {t("priority_for_user", { userName: option.label })}
+          </Label>
           <Select
             defaultValue={priorityOptions[option.priority ?? 2]}
+            className={customClassNames?.select}
+            innerClassNames={customClassNames?.innerClassNames}
             value={newPriority}
             onChange={(value) => setNewPriority(value ?? priorityOptions[2])}
             options={priorityOptions}
@@ -77,7 +95,9 @@ export const PriorityDialog = (props: IDialog) => {
 
         <DialogFooter>
           <DialogClose onClick={() => setNewPriority(undefined)} />
-          <Button onClick={setPriority}>{t("confirm")}</Button>
+          <Button onClick={setPriority} className={customClassNames?.confirmButton}>
+            {t("confirm")}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -117,9 +137,15 @@ export function sortHosts(
   }
 }
 
-export const WeightDialog = (props: IDialog) => {
+export type WeightDialogCustomClassNames = {
+  container?: string;
+  label?: string;
+  confirmButton?: string;
+  weightInput?: InputClassNames;
+};
+export const WeightDialog = (props: IDialog & { customClassNames?: WeightDialogCustomClassNames }) => {
   const { t } = useLocale();
-  const { isOpenDialog, setIsOpenDialog, option, onChange } = props;
+  const { isOpenDialog, setIsOpenDialog, option, onChange, customClassNames } = props;
   const { getValues } = useFormContext<FormValues>();
   const [newWeight, setNewWeight] = useState<number | undefined>();
 
@@ -147,12 +173,17 @@ export const WeightDialog = (props: IDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent title={t("set_weight")} description={weightDescription}>
-        <div className="mb-4 mt-2">
-          <Label>{t("weight_for_user", { userName: option.label })}</Label>
-          <div className="w-36">
+        <div className={classNames("mb-4 mt-2", customClassNames?.container)}>
+          <Label className={customClassNames?.label}>
+            {t("weight_for_user", { userName: option.label })}
+          </Label>
+          <div className={classNames("w-36", customClassNames?.weightInput?.container)}>
             <TextField
               required
               min={0}
+              className={customClassNames?.weightInput?.input}
+              labelClassName={customClassNames?.weightInput?.label}
+              addOnClassname={customClassNames?.weightInput?.addOn}
               label={t("Weight")}
               value={newWeight}
               defaultValue={option.weight ?? 100}
@@ -164,7 +195,9 @@ export const WeightDialog = (props: IDialog) => {
         </div>
         <DialogFooter>
           <DialogClose onClick={() => setNewWeight(undefined)} />
-          <Button onClick={setWeight}>{t("confirm")}</Button>
+          <Button onClick={setWeight} className={customClassNames?.confirmButton}>
+            {t("confirm")}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
index f3f66c9adf..6d34eb1ec4 100644
--- a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
+++ b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
@@ -5,10 +5,12 @@ import type { ComponentProps, Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { Options } from "react-select";
 
+import type { AddMembersWithSwitchCustomClassNames } from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
 import AddMembersWithSwitch, {
   mapUserToValue,
 } from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
 import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
+import type { ChildrenEventTypeSelectCustomClassNames } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { sortHosts, weightDescription } from "@calcom/features/eventtypes/components/HostEditDialogs";
 import type {
@@ -16,15 +18,30 @@ import type {
   TeamMember,
   EventTypeSetupProps,
   Host,
+  SelectClassNames,
+  SettingsToggleClassNames,
 } from "@calcom/features/eventtypes/lib/types";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { Label, Select, SettingsToggle, RadioGroup as RadioArea } from "@calcom/ui";
 
+export type EventTeamAssignmentTabCustomClassNames = {
+  assignmentType?: {
+    container?: string;
+    label?: string;
+    description?: string;
+    schedulingTypeSelect?: SelectClassNames;
+  };
+  hosts?: HostsCustomClassNames;
+  childrenEventTypes?: ChildrenEventTypesCustomClassNames;
+};
+
 export type EventTeamAssignmentTabBaseProps = Pick<
   EventTypeSetupProps,
   "teamMembers" | "team" | "eventType"
 > & {
+  customClassNames?: EventTeamAssignmentTabCustomClassNames;
   orgId: number | null;
   isSegmentApplicable: boolean;
 };
@@ -57,17 +74,19 @@ const ChildrenEventTypesList = ({
   options = [],
   value,
   onChange,
+  customClassNames,
   ...rest
 }: {
   value: ReturnType<typeof mapMemberToChildrenOption>[];
   onChange?: (options: ReturnType<typeof mapMemberToChildrenOption>[]) => void;
   options?: Options<ReturnType<typeof mapMemberToChildrenOption>>;
+  customClassNames?: ChildrenEventTypeSelectCustomClassNames;
 } & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
   const { t } = useLocale();
   return (
-    <div className="flex flex-col space-y-5">
+    <div className={classNames("flex flex-col space-y-5", customClassNames?.assignToSelect?.container)}>
       <div>
-        <Label>{t("assign_to")}</Label>
+        <Label className={customClassNames?.assignToSelect?.label}>{t("assign_to")}</Label>
         <ChildrenEventTypeSelect
           aria-label="assignment-dropdown"
           data-testid="assignment-dropdown"
@@ -82,6 +101,7 @@ const ChildrenEventTypesList = ({
           value={value}
           options={options.filter((opt) => !value.find((val) => val.owner.id.toString() === opt.value))}
           controlShouldRenderValue={false}
+          customClassNames={customClassNames}
           {...rest}
         />
       </div>
@@ -101,6 +121,9 @@ const FixedHostHelper = (
   </Trans>
 );
 
+type FixedHostsCustomClassNames = SettingsToggleClassNames & {
+  addMembers?: AddMembersWithSwitchCustomClassNames;
+};
 const FixedHosts = ({
   teamId,
   teamMembers,
@@ -109,6 +132,7 @@ const FixedHosts = ({
   assignAllTeamMembers,
   setAssignAllTeamMembers,
   isRoundRobinEvent = false,
+  customClassNames,
 }: {
   teamId: number;
   value: Host[];
@@ -117,6 +141,7 @@ const FixedHosts = ({
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
   isRoundRobinEvent?: boolean;
+  customClassNames?: FixedHostsCustomClassNames;
 }) => {
   const { t } = useLocale();
   const { getValues, setValue } = useFormContext<FormValues>();
@@ -126,12 +151,24 @@ const FixedHosts = ({
   const [isDisabled, setIsDisabled] = useState(hasActiveFixedHosts);
 
   return (
-    <div className="mt-5 rounded-lg">
+    <div className={classNames("mt-5 rounded-lg", customClassNames?.container)}>
       {!isRoundRobinEvent ? (
         <>
-          <div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
-            <Label className="mb-1 text-sm font-semibold">{t("fixed_hosts")}</Label>
-            <p className="text-subtle max-w-full break-words text-sm leading-tight">{FixedHostHelper}</p>
+          <div
+            className={classNames(
+              "border-subtle mt-5 rounded-t-md border p-6 pb-5",
+              customClassNames?.container
+            )}>
+            <Label className={classNames("mb-1 text-sm font-semibold", customClassNames?.label)}>
+              {t("fixed_hosts")}
+            </Label>
+            <p
+              className={classNames(
+                "text-subtle max-w-full break-words text-sm leading-tight",
+                customClassNames?.description
+              )}>
+              {FixedHostHelper}
+            </p>
           </div>
           <div className="border-subtle rounded-b-md border border-t-0 px-6">
             <AddMembersWithSwitch
@@ -143,6 +180,7 @@ const FixedHosts = ({
               setAssignAllTeamMembers={setAssignAllTeamMembers}
               automaticAddAllEnabled={!isRoundRobinEvent}
               isFixed={true}
+              customClassNames={customClassNames?.addMembers}
               onActive={() => {
                 const currentHosts = getValues("hosts");
                 setValue(
@@ -171,8 +209,9 @@ const FixedHosts = ({
           title={t("fixed_hosts")}
           description={FixedHostHelper}
           checked={isDisabled}
-          labelClassName="text-sm"
-          descriptionClassName=" text-sm text-subtle"
+          labelClassName={classNames("text-sm", customClassNames?.label)}
+          descriptionClassName={classNames("text-sm text-subtle", customClassNames?.description)}
+          switchContainerClassName={customClassNames?.container}
           onCheckedChange={(checked) => {
             if (!checked) {
               const rrHosts = getValues("hosts")
@@ -182,12 +221,13 @@ const FixedHosts = ({
             }
             setIsDisabled(checked);
           }}
-          childrenClassName="lg:ml-0">
+          childrenClassName={classNames("lg:ml-0", customClassNames?.children)}>
           <div className="border-subtle flex flex-col gap-6 rounded-bl-md rounded-br-md border border-t-0 px-6">
             <AddMembersWithSwitch
               data-testid="fixed-hosts-select"
               teamId={teamId}
               teamMembers={teamMembers}
+              customClassNames={customClassNames?.addMembers}
               value={value}
               onChange={onChange}
               assignAllTeamMembers={assignAllTeamMembers}
@@ -220,6 +260,14 @@ const FixedHosts = ({
   );
 };
 
+type RoundRobinHostsCustomClassNames = {
+  container?: string;
+  label?: string;
+  description?: string;
+  enableWeights?: SettingsToggleClassNames;
+  addMembers?: AddMembersWithSwitchCustomClassNames;
+};
+
 const RoundRobinHosts = ({
   orgId,
   teamMembers,
@@ -227,6 +275,7 @@ const RoundRobinHosts = ({
   onChange,
   assignAllTeamMembers,
   setAssignAllTeamMembers,
+  customClassNames,
   teamId,
   isSegmentApplicable,
 }: {
@@ -236,6 +285,7 @@ const RoundRobinHosts = ({
   teamMembers: TeamMember[];
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  customClassNames?: RoundRobinHostsCustomClassNames;
   teamId: number;
   isSegmentApplicable: boolean;
 }) => {
@@ -249,10 +299,22 @@ const RoundRobinHosts = ({
   });
 
   return (
-    <div className="rounded-lg ">
-      <div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
-        <Label className="mb-1 text-sm font-semibold">{t("round_robin_hosts")}</Label>
-        <p className="text-subtle max-w-full break-words text-sm leading-tight">{t("round_robin_helper")}</p>
+    <div className={classNames("rounded-lg")}>
+      <div
+        className={classNames(
+          "border-subtle mt-5 rounded-t-md border p-6 pb-5",
+          customClassNames?.container
+        )}>
+        <Label className={classNames("mb-1 text-sm font-semibold", customClassNames?.label)}>
+          {t("round_robin_hosts")}
+        </Label>
+        <p
+          className={classNames(
+            "text-subtle max-w-full break-words text-sm leading-tight",
+            customClassNames?.description
+          )}>
+          {t("round_robin_helper")}
+        </p>
       </div>
       <div className="border-subtle rounded-b-md border border-t-0 px-6 pt-4">
         {!assignAllTeamMembers && !assignRRMembersUsingSegment && (
@@ -263,9 +325,11 @@ const RoundRobinHosts = ({
                 title={t("enable_weights")}
                 description={weightDescription}
                 checked={value}
+                switchContainerClassName={customClassNames?.enableWeights?.container}
+                labelClassName={customClassNames?.enableWeights?.label}
+                descriptionClassName={customClassNames?.enableWeights?.description}
                 onCheckedChange={(active) => {
                   onChange(active);
-
                   const rrHosts = getValues("hosts").filter((host) => !host.isFixed);
                   const sortedRRHosts = rrHosts.sort((a, b) => sortHosts(a, b, active));
                   setValue("hosts", sortedRRHosts);
@@ -305,35 +369,54 @@ const RoundRobinHosts = ({
             );
             setValue("isRRWeightsEnabled", false);
           }}
+          customClassNames={customClassNames?.addMembers}
         />
       </div>
     </div>
   );
 };
 
+type ChildrenEventTypesCustomClassNames = {
+  container?: string;
+  assignAllTeamMembers?: SettingsToggleClassNames;
+  childrenEventTypesList?: ChildrenEventTypeSelectCustomClassNames;
+};
+
 const ChildrenEventTypes = ({
   childrenEventTypeOptions,
   assignAllTeamMembers,
   setAssignAllTeamMembers,
+  customClassNames,
 }: {
   childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  customClassNames?: ChildrenEventTypesCustomClassNames;
 }) => {
   const { setValue } = useFormContext<FormValues>();
   return (
-    <div className="border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6">
+    <div
+      className={classNames(
+        "border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6",
+        customClassNames?.container
+      )}>
       <div className="flex flex-col gap-4">
         <AssignAllTeamMembers
           assignAllTeamMembers={assignAllTeamMembers}
           setAssignAllTeamMembers={setAssignAllTeamMembers}
+          customClassNames={customClassNames?.assignAllTeamMembers}
           onActive={() => setValue("children", childrenEventTypeOptions, { shouldDirty: true })}
         />
         {!assignAllTeamMembers ? (
           <Controller<FormValues>
             name="children"
             render={({ field: { onChange, value } }) => (
-              <ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
+              <ChildrenEventTypesList
+                value={value}
+                options={childrenEventTypeOptions}
+                onChange={onChange}
+                customClassNames={customClassNames?.childrenEventTypesList}
+              />
             )}
           />
         ) : (
@@ -344,12 +427,17 @@ const ChildrenEventTypes = ({
   );
 };
 
+type HostsCustomClassNames = {
+  fixedHosts?: FixedHostsCustomClassNames;
+  roundRobinHosts?: RoundRobinHostsCustomClassNames;
+};
 const Hosts = ({
   orgId,
   teamId,
   teamMembers,
   assignAllTeamMembers,
   setAssignAllTeamMembers,
+  customClassNames,
   isSegmentApplicable,
 }: {
   orgId: number | null;
@@ -357,6 +445,7 @@ const Hosts = ({
   teamMembers: TeamMember[];
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  customClassNames?: HostsCustomClassNames;
   isSegmentApplicable: boolean;
 }) => {
   const {
@@ -418,6 +507,7 @@ const Hosts = ({
               }}
               assignAllTeamMembers={assignAllTeamMembers}
               setAssignAllTeamMembers={setAssignAllTeamMembers}
+              customClassNames={customClassNames?.fixedHosts}
             />
           ),
           ROUND_ROBIN: (
@@ -432,6 +522,7 @@ const Hosts = ({
                 assignAllTeamMembers={assignAllTeamMembers}
                 setAssignAllTeamMembers={setAssignAllTeamMembers}
                 isRoundRobinEvent={true}
+                customClassNames={customClassNames?.fixedHosts}
               />
               <RoundRobinHosts
                 orgId={orgId}
@@ -444,6 +535,7 @@ const Hosts = ({
                 }}
                 assignAllTeamMembers={assignAllTeamMembers}
                 setAssignAllTeamMembers={setAssignAllTeamMembers}
+                customClassNames={customClassNames?.roundRobinHosts}
                 isSegmentApplicable={isSegmentApplicable}
               />
             </>
@@ -460,6 +552,7 @@ export const EventTeamAssignmentTab = ({
   team,
   teamMembers,
   eventType,
+  customClassNames,
   orgId,
   isSegmentApplicable,
 }: EventTeamAssignmentTabBaseProps) => {
@@ -514,22 +607,43 @@ export const EventTeamAssignmentTab = ({
     <div>
       {team && !isManagedEventType && (
         <>
-          <div className="border-subtle flex flex-col rounded-md">
+          <div
+            className={classNames(
+              "border-subtle flex flex-col rounded-md",
+              customClassNames?.assignmentType?.container
+            )}>
             <div className="border-subtle rounded-t-md border p-6 pb-5">
-              <Label className="mb-1 text-sm font-semibold">{t("assignment")}</Label>
-              <p className="text-subtle max-w-full break-words text-sm leading-tight">
+              <Label
+                className={classNames("mb-1 text-sm font-semibold", customClassNames?.assignmentType?.label)}>
+                {t("assignment")}
+              </Label>
+              <p
+                className={classNames(
+                  "text-subtle max-w-full break-words text-sm leading-tight",
+                  customClassNames?.assignmentType?.description
+                )}>
                 {t("assignment_description")}
               </p>
             </div>
-            <div className="border-subtle rounded-b-md border border-t-0 p-6">
-              <Label>{t("scheduling_type")}</Label>
+            <div
+              className={classNames(
+                "border-subtle rounded-b-md border border-t-0 p-6",
+                customClassNames?.assignmentType?.schedulingTypeSelect?.container
+              )}>
+              <Label className={customClassNames?.assignmentType?.schedulingTypeSelect?.label}>
+                {t("scheduling_type")}
+              </Label>
               <Controller<FormValues>
                 name="schedulingType"
                 render={({ field: { value, onChange } }) => (
                   <Select
                     options={schedulingTypeOptions}
                     value={schedulingTypeOptions.find((opt) => opt.value === value)}
-                    className="w-full"
+                    className={classNames(
+                      "w-full",
+                      customClassNames?.assignmentType?.schedulingTypeSelect?.select
+                    )}
+                    innerClassNames={customClassNames?.assignmentType?.schedulingTypeSelect?.innerClassNames}
                     onChange={(val) => {
                       onChange(val?.value);
                       resetRROptions();
@@ -584,6 +698,7 @@ export const EventTeamAssignmentTab = ({
             assignAllTeamMembers={assignAllTeamMembers}
             setAssignAllTeamMembers={setAssignAllTeamMembers}
             teamMembers={teamMembersOptions}
+            customClassNames={customClassNames?.hosts}
           />
         </>
       )}
@@ -592,6 +707,7 @@ export const EventTeamAssignmentTab = ({
           assignAllTeamMembers={assignAllTeamMembers}
           setAssignAllTeamMembers={setAssignAllTeamMembers}
           childrenEventTypeOptions={childrenEventTypeOptions}
+          customClassNames={customClassNames?.childrenEventTypes}
         />
       )}
     </div>
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index 02e3fe7aac..43b68b070d 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -191,4 +191,3 @@ export const RECORDING_DEFAULT_ICON = IS_PRODUCTION
 export const RECORDING_IN_PROGRESS_ICON = IS_PRODUCTION
   ? `${WEBAPP_URL}/stop-recording.svg`
   : `https://app.cal.com/stop-recording.svg`;
-
diff --git a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
index 783f3381eb..5d1c03807f 100644
--- a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
+++ b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
@@ -6,6 +6,7 @@ import { useRef, useState, useEffect } from "react";
 import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { EventType as EventTypeComponent } from "@calcom/features/eventtypes/components/EventType";
 import ManagedEventTypeDialog from "@calcom/features/eventtypes/components/dialogs/ManagedEventDialog";
+import type { EventTeamAssignmentTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab";
 import type { EventAvailabilityTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/availability/EventAvailabilityTab";
 import type { EventRecurringTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/recurring/RecurringEventController";
 import type { EventTypeSetupProps, FormValues, TabMap } from "@calcom/features/eventtypes/lib/types";
@@ -31,14 +32,12 @@ import SetupTab from "./EventSetupTabPlatformWrapper";
 import EventTeamAssignmentTabPlatformWrapper from "./EventTeamAssignmentTabPlatformWrapper";
 
 export type PlatformTabs = keyof Omit<TabMap, "workflows" | "webhooks" | "instant" | "ai" | "apps">;
-export type eventTypeCustomClassNames = {
-  atomsWrapper?: string;
-  eventAvailabilityTab?: EventAvailabilityTabCustomClassNames;
-};
 
 export type EventTypeCustomClassNames = {
   atomsWrapper?: string;
+  eventAssignmentTab?: EventTeamAssignmentTabCustomClassNames;
   eventRecurringTab?: EventRecurringTabCustomClassNames;
+  eventAvailabilityTab?: EventAvailabilityTabCustomClassNames;
 };
 
 export type EventTypePlatformWrapperProps = {
@@ -50,7 +49,6 @@ export type EventTypePlatformWrapperProps = {
   onDeleteError?: (msg: string) => void;
   allowDelete: boolean;
   customClassNames?: eventTypeCustomClassNames;
-  customClassNames?: EventTypeCustomClassNames;
   disableToasts?: boolean;
 };
 
@@ -170,7 +168,12 @@ const EventType = ({
       <></>
     ),
     team: tabs.includes("team") ? (
-      <EventTeamAssignmentTabPlatformWrapper team={team} eventType={eventType} teamMembers={teamMembers} />
+      <EventTeamAssignmentTabPlatformWrapper
+        team={team}
+        eventType={eventType}
+        teamMembers={teamMembers}
+        customClassNames={customClassNames?.eventAssignmentTab}
+      />
     ) : (
       <></>
     ),
diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx
index c9261d2e4f..0ed539e0b4 100644
--- a/packages/platform/examples/base/src/pages/event-types.tsx
+++ b/packages/platform/examples/base/src/pages/event-types.tsx
@@ -97,6 +97,159 @@ export default function Bookings(props: { calUsername: string; calEmail: string
             <EventTypeSettings
               customClassNames={{
                 atomsWrapper: "!w-[50vw] !m-auto",
+                eventAssignmentTab: {
+                  assignmentType: {
+                    container: "border border-purple-200 bg-white rounded-lg p-6",
+                    label: "text-purple-700 font-semibold",
+                    description: "text-gray-600 text-sm",
+                    schedulingTypeSelect: {
+                      container: "mt-2",
+                      label: "text-purple-700",
+                      select: "border border-purple-300 rounded-md bg-white",
+                      innerClassNames: {
+                        control: "border-purple-300",
+                        input: "text-purple-900",
+                        option: "hover:bg-purple-100",
+                        menu: "border border-purple-200 rounded-md",
+                        singleValue: "text-purple-700",
+                      },
+                    },
+                  },
+                  hosts: {
+                    fixedHosts: {
+                      container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
+                      label: "text-purple-700 font-semibold",
+                      description: "text-purple-600 text-sm",
+                      addMembers: {
+                        assingAllTeamMembers: {
+                          container: "border border-purple-200 bg-white rounded-md",
+                          label: "text-purple-700",
+                          description: "text-gray-600",
+                        },
+                        teamMemberSelect: {
+                          hostsSelect: {
+                            container: "mt-2",
+                            select: "border border-purple-300 rounded-md bg-white",
+                            label: "text-purple-700",
+                            innerClassNames: {
+                              input: "text-purple-900",
+                              option: "hover:bg-purple-100",
+                              control: "border-purple-300",
+                              singleValue: "text-purple-700",
+                            },
+                          },
+                          selectedHostList: {
+                            container: "mt-4 border border-purple-200 rounded-md bg-white",
+                            listItem: {
+                              container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
+                              avatar: "rounded-full border border-purple-300",
+                              name: "text-purple-800 font-semibold",
+                              changePriorityButton: "text-purple-700 hover:bg-purple-100",
+                              changeWeightButton: "text-purple-700 hover:bg-purple-100",
+                              removeButton: "text-purple-600 hover:bg-purple-100",
+                            },
+                          },
+                          priorityDialog: {
+                            confirmButton: "bg-purple-700 text-white rounded-md px-4 py-2",
+                            label: "text-purple-700",
+                            select: "border border-purple-300 rounded-md bg-white",
+                          },
+                          weightDialog: {
+                            container: "w-full bg-white p-4 rounded-md border border-purple-300",
+                            label: "text-purple-700 font-semibold",
+                            confirmButton: "bg-purple-700 text-white rounded-md px-4 py-2",
+                            weightInput: {
+                              container: "w-24",
+                              label: "text-purple-700",
+                              input: "border border-purple-300 rounded-md bg-white text-purple-900",
+                              addOn: "text-purple-500",
+                            },
+                          },
+                        },
+                      },
+                    },
+                    roundRobinHosts: {
+                      container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
+                      label: "text-purple-700 font-semibold",
+                      description: "text-purple-600 text-sm",
+                      enableWeights: {
+                        container: "border border-purple-200 bg-white rounded-md",
+                        label: "text-purple-700",
+                        description: "text-gray-600",
+                      },
+                      addMembers: {
+                        assingAllTeamMembers: {
+                          container: "border border-purple-200 bg-white rounded-md",
+                          label: "text-purple-700",
+                          description: "text-gray-600",
+                        },
+                        teamMemberSelect: {
+                          hostsSelect: {
+                            container: "mt-2",
+                            select: "border border-purple-300 rounded-md bg-white",
+                            label: "text-purple-700",
+                            innerClassNames: {
+                              input: "text-purple-900",
+                              option: "hover:bg-purple-100",
+                              control: "border-purple-300",
+                              singleValue: "text-purple-700",
+                            },
+                          },
+                          selectedHostList: {
+                            container: "mt-4 border border-purple-200 rounded-md bg-white",
+                            listItem: {
+                              container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
+                              avatar: "rounded-full border border-purple-300",
+                              name: "text-purple-800 font-semibold",
+                              changePriorityButton: "text-purple-700 hover:bg-purple-100",
+                              changeWeightButton: "text-purple-700 hover:bg-purple-100",
+                              removeButton: "text-purple-600 hover:bg-purple-100",
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  childrenEventTypes: {
+                    container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
+                    assignAllTeamMembers: {
+                      container: "border border-purple-200 bg-white rounded-md",
+                      label: "text-purple-700",
+                      description: "text-gray-600",
+                    },
+                    childrenEventTypesList: {
+                      assignToSelect: {
+                        container: "mt-2",
+                        select: "border border-purple-300 rounded-md bg-white",
+                        label: "text-purple-700",
+                        innerClassNames: {
+                          input: "text-purple-900",
+                          option: "hover:bg-purple-100",
+                          control: "border-purple-300",
+                          singleValue: "text-purple-700",
+                        },
+                      },
+                      selectedChildrenList: {
+                        container: "mt-4 border border-purple-200 rounded-md bg-white",
+                        listItem: {
+                          container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
+                          avatar: "rounded-full border border-purple-300",
+                          name: "text-purple-800 font-semibold",
+                          ownerBadge: "text-purple-600 bg-purple-100 rounded-md px-2",
+                          memberBadge: "text-purple-600 bg-purple-100 rounded-md px-2",
+                          hiddenBadge: "text-gray-400 bg-gray-100 rounded-md px-2",
+                          badgeContainer: "flex gap-1",
+                          eventLink: "text-purple-700",
+                          showOnProfileTooltip: "text-purple-600",
+                          previewEventTypeTooltip: "text-purple-600",
+                          previewEventTypeButton: "text-purple-700 hover:bg-purple-100",
+                          deleteEventTypeTooltip: "text-red-500",
+                          deleteEventTypeButton: "text-red-600 hover:bg-red-100",
+                        },
+                      },
+                    },
+                  },
+                },
                 eventAvailabilityTab: {
                   teamAvailability: {
                     chooseHostSchedulesLabelContainer: "border border-purple-200 bg-purple-50 rounded-md p-4",