diff --git a/apps/ai/tsconfig.json b/apps/ai/tsconfig.json
index 960106f688..aae1b4e758 100644
--- a/apps/ai/tsconfig.json
+++ b/apps/ai/tsconfig.json
@@ -13,6 +13,12 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../../packages/types/window.d.ts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 2b35584cef..7f31b48fd0 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -21,6 +21,7 @@ import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
@@ -35,7 +36,6 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import { Copy, Edit, Info } from "@calcom/ui/components/icon";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index a189b6d413..3b264d7bbc 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -2,8 +2,7 @@ import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
-
-import InfoBadge from "@components/ui/InfoBadge";
+import { InfoBadge } from "@calcom/ui";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
diff --git a/apps/web/constants.ts b/apps/web/constants.ts
deleted file mode 100644
index c19877c5ef..0000000000
--- a/apps/web/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);
diff --git a/apps/web/pages/api/auth/oauth/refreshToken.ts b/apps/web/pages/api/auth/oauth/refreshToken.ts
index c0c3d63815..309c2d5c72 100644
--- a/apps/web/pages/api/auth/oauth/refreshToken.ts
+++ b/apps/web/pages/api/auth/oauth/refreshToken.ts
@@ -1,9 +1,9 @@
 import jwt from "jsonwebtoken";
 import type { NextApiRequest, NextApiResponse } from "next";
-import type { OAuthTokenPayload } from "pages/api/auth/oauth/token";
 
 import prisma from "@calcom/prisma";
 import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
diff --git a/apps/web/pages/api/auth/oauth/token.ts b/apps/web/pages/api/auth/oauth/token.ts
index 6ad4d1e071..07b91fdc9d 100644
--- a/apps/web/pages/api/auth/oauth/token.ts
+++ b/apps/web/pages/api/auth/oauth/token.ts
@@ -3,14 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 
 import prisma from "@calcom/prisma";
 import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
-
-export type OAuthTokenPayload = {
-  userId?: number | null;
-  teamId?: number | null;
-  token_type: string;
-  scope: string[];
-  clientId: string;
-};
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index ce15cea75f..613bd23794 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -54,6 +54,7 @@ import {
   Switch,
   Tooltip,
   ArrowButton,
+  UserAvatarGroup,
 } from "@calcom/ui";
 import {
   Clipboard,
@@ -74,7 +75,6 @@ import useMeQuery from "@lib/hooks/useMeQuery";
 
 import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/eventtype/SkeletonLoader";
-import { UserAvatarGroup } from "@components/ui/avatar/UserAvatarGroup";
 
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 678303d029..a56772151d 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -19,7 +19,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
-import { Avatar, Button, HeadSeo, UnpublishedEntity } from "@calcom/ui";
+import { Avatar, Button, HeadSeo, UnpublishedEntity, UserAvatarGroup } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
@@ -28,7 +28,6 @@ import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import PageWrapper from "@components/PageWrapper";
 import Team from "@components/team/screens/Team";
-import { UserAvatarGroup } from "@components/ui/avatar/UserAvatarGroup";
 
 export { getServerSideProps };
 
diff --git a/packages/features/auth/lib/oAuthAuthorization.ts b/packages/features/auth/lib/oAuthAuthorization.ts
index 2346216285..eb38738729 100644
--- a/packages/features/auth/lib/oAuthAuthorization.ts
+++ b/packages/features/auth/lib/oAuthAuthorization.ts
@@ -2,7 +2,7 @@ import jwt from "jsonwebtoken";
 import type { NextApiRequest } from "next";
 
 import prisma from "@calcom/prisma";
-import type { OAuthTokenPayload } from "@calcom/web/pages/api/auth/oauth/token";
+import type { OAuthTokenPayload } from "@calcom/types/oauth";
 
 export default async function isAuthorized(req: NextApiRequest, requiredScopes: string[] = []) {
   const token = req.headers.authorization?.split(" ")[1] || "";
diff --git a/packages/features/bookings/Booker/components/InstantBooking.tsx b/packages/features/bookings/Booker/components/InstantBooking.tsx
index a811e25df8..3677993dcf 100644
--- a/packages/features/bookings/Booker/components/InstantBooking.tsx
+++ b/packages/features/bookings/Booker/components/InstantBooking.tsx
@@ -1,8 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { type RouterOutputs } from "@calcom/trpc";
-import { Button } from "@calcom/ui";
-import { UserAvatarGroupWithOrg } from "@calcom/web/components/ui/avatar/UserAvatarGroupWithOrg";
+import { Button, UserAvatarGroupWithOrg } from "@calcom/ui";
 
 interface IInstantBookingProps {
   onConnectNow: () => void;
diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx
index 4673560447..ffa0c8d9ac 100644
--- a/packages/features/bookings/components/event-meta/Members.tsx
+++ b/packages/features/bookings/components/event-meta/Members.tsx
@@ -1,6 +1,5 @@
 import { SchedulingType } from "@calcom/prisma/enums";
-import { UserAvatarGroup } from "@calcom/web/components/ui/avatar/UserAvatarGroup";
-import { UserAvatarGroupWithOrg } from "@calcom/web/components/ui/avatar/UserAvatarGroupWithOrg";
+import { UserAvatarGroup, UserAvatarGroupWithOrg } from "@calcom/ui";
 
 import type { PublicEvent } from "../../types";
 
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 51b06b62bb..adb2944d5c 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -19,8 +19,8 @@ import {
   InputField,
   CheckboxField,
 } from "@calcom/ui";
+import { InfoBadge } from "@calcom/ui";
 import { UserPlus, X } from "@calcom/ui/components/icon";
-import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { ComponentForField } from "./FormBuilderField";
 import { propsTypes } from "./propsTypes";
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index f0375b3c35..9328da26fa 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -5,9 +5,8 @@ import type { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label } from "@calcom/ui";
+import { Label, InfoBadge } from "@calcom/ui";
 import { Info } from "@calcom/ui/components/icon";
-import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "./fieldTypes";
diff --git a/packages/features/settings/TimezoneChangeDialog.tsx b/packages/features/settings/TimezoneChangeDialog.tsx
index cf3504c329..9b7038a664 100644
--- a/packages/features/settings/TimezoneChangeDialog.tsx
+++ b/packages/features/settings/TimezoneChangeDialog.tsx
@@ -2,10 +2,10 @@ import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@calcom/ui";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index e6d3049c7b..3ba40df61c 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -33,8 +33,15 @@ import VerifyEmailBanner, {
   type VerifyEmailBannerProps,
 } from "@calcom/features/users/components/VerifyEmailBanner";
 import classNames from "@calcom/lib/classNames";
-import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";
-import { APP_NAME, DESKTOP_APP_LINK, JOIN_DISCORD, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
+import {
+  APP_NAME,
+  DESKTOP_APP_LINK,
+  JOIN_DISCORD,
+  ROADMAP,
+  WEBAPP_URL,
+  IS_VISUAL_REGRESSION_TESTING,
+  TOP_BANNER_HEIGHT,
+} from "@calcom/lib/constants";
 import getBrandColours from "@calcom/lib/getBrandColours";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -88,7 +95,6 @@ import {
   Zap,
 } from "@calcom/ui/components/icon";
 import { Discord } from "@calcom/ui/components/icon/Discord";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index acf6e4ce8c..4e99d20fd0 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -126,3 +126,5 @@ export const IS_PREMIUM_USERNAME_ENABLED =
 export const MAX_NB_INVITES = 100;
 
 export const URL_PROTOCOL_REGEX = /(^\w+:|^)\/\//;
+
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);
diff --git a/packages/lib/tsconfig.json b/packages/lib/tsconfig.json
index c22deb9fb7..cbfc55aa67 100644
--- a/packages/lib/tsconfig.json
+++ b/packages/lib/tsconfig.json
@@ -5,6 +5,6 @@
     "jsx": "preserve",
     "resolveJsonModule": true
   },
-  "include": [".", "../types/next-auth.d.ts"],
+  "include": [".", "../types/next-auth.d.ts", "../types/window.d.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/types/oauth.d.ts b/packages/types/oauth.d.ts
new file mode 100644
index 0000000000..1de766f9f0
--- /dev/null
+++ b/packages/types/oauth.d.ts
@@ -0,0 +1,7 @@
+export type OAuthTokenPayload = {
+  userId?: number | null;
+  teamId?: number | null;
+  token_type: string;
+  scope: string[];
+  clientId: string;
+};
diff --git a/apps/web/components/ui/avatar/UserAvatarGroup.tsx b/packages/ui/components/avatar/UserAvatarGroup.tsx
similarity index 100%
rename from apps/web/components/ui/avatar/UserAvatarGroup.tsx
rename to packages/ui/components/avatar/UserAvatarGroup.tsx
diff --git a/apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx b/packages/ui/components/avatar/UserAvatarGroupWithOrg.tsx
similarity index 100%
rename from apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx
rename to packages/ui/components/avatar/UserAvatarGroupWithOrg.tsx
diff --git a/packages/ui/components/avatar/index.ts b/packages/ui/components/avatar/index.ts
index a24a507aae..85a87f8368 100644
--- a/packages/ui/components/avatar/index.ts
+++ b/packages/ui/components/avatar/index.ts
@@ -2,4 +2,6 @@ export { Avatar } from "./Avatar";
 export { UserAvatar } from "./UserAvatar";
 export type { AvatarProps } from "./Avatar";
 export { AvatarGroup } from "./AvatarGroup";
+export { UserAvatarGroup } from "./UserAvatarGroup";
+export { UserAvatarGroupWithOrg } from "./UserAvatarGroupWithOrg";
 export type { AvatarGroupProps } from "./AvatarGroup";
diff --git a/apps/web/components/ui/InfoBadge.tsx b/packages/ui/components/badge/InfoBadge.tsx
similarity index 59%
rename from apps/web/components/ui/InfoBadge.tsx
rename to packages/ui/components/badge/InfoBadge.tsx
index 3fa1dc5b03..b4ca794b98 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/packages/ui/components/badge/InfoBadge.tsx
@@ -1,7 +1,7 @@
-import { Tooltip } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
+import { Info } from "../icon";
+import { Tooltip } from "../tooltip/Tooltip";
 
-export default function InfoBadge({ content }: { content: string }) {
+export function InfoBadge({ content }: { content: string }) {
   return (
     <>
       <Tooltip side="top" content={content}>
diff --git a/packages/ui/components/badge/index.ts b/packages/ui/components/badge/index.ts
index ca37a575d3..ec420c85cb 100644
--- a/packages/ui/components/badge/index.ts
+++ b/packages/ui/components/badge/index.ts
@@ -1,5 +1,5 @@
 export { Badge } from "./Badge";
 export { UpgradeTeamsBadge } from "./UpgradeTeamsBadge";
 export { UpgradeOrgsBadge } from "./UpgradeOrgsBadge";
-
+export { InfoBadge } from "./InfoBadge";
 export type { BadgeProps } from "./Badge";
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 20251b7fc4..50a2ac3cd4 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,8 +1,14 @@
-export { Avatar, AvatarGroup, UserAvatar } from "./components/avatar";
+export {
+  Avatar,
+  AvatarGroup,
+  UserAvatar,
+  UserAvatarGroup,
+  UserAvatarGroupWithOrg,
+} from "./components/avatar";
 export type { AvatarProps, AvatarGroupProps } from "./components/avatar";
 export { ArrowButton } from "./components/arrow-button";
 export type { ArrowButtonProps } from "./components/arrow-button";
-export { Badge, UpgradeTeamsBadge } from "./components/badge";
+export { Badge, UpgradeTeamsBadge, InfoBadge } from "./components/badge";
 export type { BadgeProps } from "./components/badge";
 export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
 export { Button, LinkIconButton } from "./components/button";