diff --git a/packages/atoms/EventTypeList/components/controls/Dialog.tsx b/packages/atoms/EventTypeList/components/controls/Dialog.tsx
new file mode 100644
index 0000000000..eb60b3140e
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/controls/Dialog.tsx
@@ -0,0 +1,30 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import type { ReactNode } from "react";
+
+export function EventTypeDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  content,
+}: {
+  open: boolean;
+  onOpenChange: () => void;
+  title: string;
+  description: string;
+  content?: ReactNode;
+}) {
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          {!!content && content}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/packages/atoms/EventTypeList/components/controls/Dropdown.tsx b/packages/atoms/EventTypeList/components/controls/Dropdown.tsx
new file mode 100644
index 0000000000..22a5744f45
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/controls/Dropdown.tsx
@@ -0,0 +1,100 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Copy, Code, Trash } from "lucide-react";
+
+import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed";
+
+export function EventTypeDropdown({
+  group,
+  isReadOnly,
+  id,
+  isManagedEventType,
+  isChildrenManagedEventType,
+  embedLink,
+  onEdit,
+  onDuplicate,
+}: {
+  group: any;
+  isReadOnly: boolean;
+  isManagedEventType: boolean;
+  isChildrenManagedEventType: boolean;
+  id: any;
+  embedLink: string;
+  onEdit: (id: string) => void;
+  onDuplicate: (id: string) => void;
+}) {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            className="bg-secondary text-secondary ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md">
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {!isReadOnly && (
+            <DropdownMenuItem>
+              <Button
+                type="button"
+                data-testid={`event-type-edit-${id}`}
+                onClick={() => {
+                  onEdit(id);
+                }}>
+                Edit
+              </Button>
+            </DropdownMenuItem>
+          )}
+          {!isManagedEventType && !isChildrenManagedEventType && (
+            <DropdownMenuItem className="outline-none">
+              <Button
+                type="button"
+                data-testid={`event-type-duplicate-${id}`}
+                onClick={() => {
+                  onDuplicate(id);
+                }}>
+                <Copy />
+                Duplicate
+              </Button>
+            </DropdownMenuItem>
+          )}
+          {!isManagedEventType && (
+            <DropdownMenuItem>
+              <EventTypeEmbedButton
+                className="w-full rounded-none"
+                eventId={id}
+                type="button"
+                StartIcon={Code}
+                embedUrl={encodeURIComponent(embedLink)}>
+                Embed
+              </EventTypeEmbedButton>
+            </DropdownMenuItem>
+          )}
+          {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
+            !isChildrenManagedEventType && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Button
+                    variant="destructive"
+                    onClick={() => {
+                      // Add appropriate handler for destruction
+                    }}
+                    className="w-full rounded-none">
+                    <Trash /> Delete
+                  </Button>
+                </DropdownMenuItem>
+              </>
+            )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}
diff --git a/packages/atoms/EventTypeList/components/controls/Tooltip.tsx b/packages/atoms/EventTypeList/components/controls/Tooltip.tsx
new file mode 100644
index 0000000000..27bbe90ff5
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/controls/Tooltip.tsx
@@ -0,0 +1,21 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import type { ReactNode } from "react";
+
+export function EventTypeTooltip({
+  trigger,
+  content,
+}: {
+  trigger: ReactNode | string;
+  content: ReactNode | string;
+}) {
+  return (
+    <>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+          <TooltipContent>{content}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </>
+  );
+}
diff --git a/packages/atoms/EventTypeList/components/empty-screen/createFirstEventType.tsx b/packages/atoms/EventTypeList/components/empty-screen/createFirstEventType.tsx
new file mode 100644
index 0000000000..b07156d51d
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/empty-screen/createFirstEventType.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { EmptyScreen } from "EventTypeList/components/empty-screen";
+import { LinkIcon } from "lucide-react";
+
+export function CreateFirstEventTypeView({ slug }: { slug: string }) {
+  return (
+    <>
+      <EmptyScreen
+        Icon={LinkIcon}
+        className="mb-16"
+        headline="Create your first event type"
+        description="Event types enable you to share links that show available times on your calendar and allow people to make bookings with you."
+        buttonRaw={
+          <Button>
+            <a href={`?dialog=new&eventPage=${slug}`}>Create</a>
+          </Button>
+        }
+      />
+    </>
+  );
+}
diff --git a/packages/atoms/EventTypeList/components/empty-screen/emptyEventTypeList.tsx b/packages/atoms/EventTypeList/components/empty-screen/emptyEventTypeList.tsx
new file mode 100644
index 0000000000..dc3a17b914
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/empty-screen/emptyEventTypeList.tsx
@@ -0,0 +1,17 @@
+import { Button } from "@/components/ui/button";
+import { EmptyScreen } from "EventTypeList/components/empty-screen";
+
+export function EmptyEventTypeList({ group }: { group: any }) {
+  return (
+    <>
+      <EmptyScreen
+        headline="This team has no event types"
+        buttonRaw={
+          <Button type="button" className="mt-5">
+            <a href={`?dialog=new&eventPage=${group.profile.slug}&teamId=${group.teamId}`}>Create</a>
+          </Button>
+        }
+      />
+    </>
+  );
+}
diff --git a/packages/atoms/EventTypeList/components/empty-screen/index.tsx b/packages/atoms/EventTypeList/components/empty-screen/index.tsx
new file mode 100644
index 0000000000..17ab3e80da
--- /dev/null
+++ b/packages/atoms/EventTypeList/components/empty-screen/index.tsx
@@ -0,0 +1,66 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { LucideIcon as IconType } from "lucide-react";
+import type { ReactNode } from "react";
+import React from "react";
+
+import type { SVGComponent } from "@calcom/types/SVGComponent";
+
+type EmptyScreenProps = {
+  Icon?: SVGComponent | IconType;
+  avatar?: React.ReactElement;
+  headline: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  buttonText?: string;
+  buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  buttonRaw?: ReactNode; // Used incase you want to provide your own button.
+  border?: boolean;
+  dashedBorder?: boolean;
+};
+
+export function EmptyScreen({
+  Icon,
+  avatar,
+  headline,
+  description,
+  buttonText,
+  buttonOnClick,
+  buttonRaw,
+  border = true,
+  dashedBorder = true,
+  className,
+}: EmptyScreenProps & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <>
+      <div
+        data-testid="empty-screen"
+        className={cn(
+          "flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
+          border && "border-subtle border",
+          dashedBorder && "border-dashed",
+          className
+        )}>
+        {!avatar ? null : (
+          <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
+        )}
+        {!Icon ? null : (
+          <div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ">
+            <Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
+          </div>
+        )}
+        <div className="flex max-w-[420px] flex-col items-center">
+          <h2 className={cn("text-semibold font-cal text-emphasis text-center text-xl", !!Icon && "mt-6")}>
+            {headline}
+          </h2>
+          {!!description && (
+            <div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
+              {description}
+            </div>
+          )}
+          {!!buttonOnClick && !!buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
+          {buttonRaw}
+        </div>
+      </div>
+    </>
+  );
+}