diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 12f50bceb9..0896e2093d 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -11,7 +11,6 @@ import Button from "@calcom/ui/Button";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Avatar from "@components/ui/Avatar";
-import Text from "@components/ui/Text";
 
 type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
@@ -56,10 +55,10 @@ const Team = ({ team }: TeamPageProps) => {
               className="-mt-4 h-12 w-12"
             />
             <section className="line-clamp-4 mt-2 w-full space-y-1">
-              <Text variant="title">{member.name}</Text>
-              <Text variant="subtitle" className="">
+              <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
+              <p className="text-sm font-normal text-neutral-500 dark:text-white">
                 {member.bio || t("user_from_team", { user: member.name, team: team.name })}
-              </Text>
+              </p>
             </section>
           </div>
         </div>
diff --git a/apps/web/components/ui/Text/Body/Body.tsx b/apps/web/components/ui/Text/Body/Body.tsx
deleted file mode 100644
index edc91c7cf7..0000000000
--- a/apps/web/components/ui/Text/Body/Body.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Body;
diff --git a/apps/web/components/ui/Text/Body/index.ts b/apps/web/components/ui/Text/Body/index.ts
deleted file mode 100644
index 3c34192400..0000000000
--- a/apps/web/components/ui/Text/Body/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Body from "./Body";
-
-export default Body;
diff --git a/apps/web/components/ui/Text/Caption/Caption.tsx b/apps/web/components/ui/Text/Caption/Caption.tsx
deleted file mode 100644
index 7bd21801f6..0000000000
--- a/apps/web/components/ui/Text/Caption/Caption.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Caption;
diff --git a/apps/web/components/ui/Text/Caption/index.ts b/apps/web/components/ui/Text/Caption/index.ts
deleted file mode 100644
index 2617efad6b..0000000000
--- a/apps/web/components/ui/Text/Caption/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Caption from "./Caption";
-
-export default Caption;
diff --git a/apps/web/components/ui/Text/Caption2/Caption2.tsx b/apps/web/components/ui/Text/Caption2/Caption2.tsx
deleted file mode 100644
index 08eae0098c..0000000000
--- a/apps/web/components/ui/Text/Caption2/Caption2.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Caption2;
diff --git a/apps/web/components/ui/Text/Caption2/index.ts b/apps/web/components/ui/Text/Caption2/index.ts
deleted file mode 100644
index 2e5aa15b64..0000000000
--- a/apps/web/components/ui/Text/Caption2/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Caption2 from "./Caption2";
-
-export default Caption2;
diff --git a/apps/web/components/ui/Text/Footnote/Footnote.tsx b/apps/web/components/ui/Text/Footnote/Footnote.tsx
deleted file mode 100644
index b587faa4b2..0000000000
--- a/apps/web/components/ui/Text/Footnote/Footnote.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs font-medium text-gray-500 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Footnote;
diff --git a/apps/web/components/ui/Text/Footnote/index.ts b/apps/web/components/ui/Text/Footnote/index.ts
deleted file mode 100644
index ba90f2adb0..0000000000
--- a/apps/web/components/ui/Text/Footnote/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Footnote from "./Footnote";
-
-export default Footnote;
diff --git a/apps/web/components/ui/Text/Headline/Headline.tsx b/apps/web/components/ui/Text/Headline/Headline.tsx
deleted file mode 100644
index 0f860c82bf..0000000000
--- a/apps/web/components/ui/Text/Headline/Headline.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-cal text-xl text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Headline;
diff --git a/apps/web/components/ui/Text/Headline/index.ts b/apps/web/components/ui/Text/Headline/index.ts
deleted file mode 100644
index 6f05924138..0000000000
--- a/apps/web/components/ui/Text/Headline/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Headline from "./Headline";
-
-export default Headline;
diff --git a/apps/web/components/ui/Text/Largetitle/Largetitle.tsx b/apps/web/components/ui/Text/Largetitle/Largetitle.tsx
deleted file mode 100644
index ec3416144b..0000000000
--- a/apps/web/components/ui/Text/Largetitle/Largetitle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-cal tracking-wider text-3xl mb-2", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Largetitle;
diff --git a/apps/web/components/ui/Text/Largetitle/index.ts b/apps/web/components/ui/Text/Largetitle/index.ts
deleted file mode 100644
index 66a43d4b96..0000000000
--- a/apps/web/components/ui/Text/Largetitle/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Largetitle from "./Largetitle";
-
-export default Largetitle;
diff --git a/apps/web/components/ui/Text/Overline/Overline.tsx b/apps/web/components/ui/Text/Overline/Overline.tsx
deleted file mode 100644
index 55eeac358d..0000000000
--- a/apps/web/components/ui/Text/Overline/Overline.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(
-    "text-sm capitalize font-medium text-gray-900 dark:text-white",
-    props?.className
-  );
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Overline;
diff --git a/apps/web/components/ui/Text/Overline/index.ts b/apps/web/components/ui/Text/Overline/index.ts
deleted file mode 100644
index 6f3af48dec..0000000000
--- a/apps/web/components/ui/Text/Overline/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Overline from "./Overline";
-
-export default Overline;
diff --git a/apps/web/components/ui/Text/Subheadline/Subheadline.tsx b/apps/web/components/ui/Text/Subheadline/Subheadline.tsx
deleted file mode 100644
index 1c3761d711..0000000000
--- a/apps/web/components/ui/Text/Subheadline/Subheadline.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Subheadline;
diff --git a/apps/web/components/ui/Text/Subheadline/index.ts b/apps/web/components/ui/Text/Subheadline/index.ts
deleted file mode 100644
index f906e255ca..0000000000
--- a/apps/web/components/ui/Text/Subheadline/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Subheadline from "./Subheadline";
-
-export default Subheadline;
diff --git a/apps/web/components/ui/Text/Subtitle/Subtitle.tsx b/apps/web/components/ui/Text/Subtitle/Subtitle.tsx
deleted file mode 100644
index 40c6fefddf..0000000000
--- a/apps/web/components/ui/Text/Subtitle/Subtitle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-sm font-normal text-neutral-500 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Subtitle;
diff --git a/apps/web/components/ui/Text/Subtitle/index.ts b/apps/web/components/ui/Text/Subtitle/index.ts
deleted file mode 100644
index 34629fe9b0..0000000000
--- a/apps/web/components/ui/Text/Subtitle/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Subtitle from "./Subtitle";
-
-export default Subtitle;
diff --git a/apps/web/components/ui/Text/Text.tsx b/apps/web/components/ui/Text/Text.tsx
deleted file mode 100644
index 07debdf719..0000000000
--- a/apps/web/components/ui/Text/Text.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * @deprecated create new a new set of components, waiting for designs
- */
-import React from "react";
-
-import Body from "./Body";
-import Caption from "./Caption";
-import Caption2 from "./Caption2";
-import Footnote from "./Footnote";
-import Headline from "./Headline";
-import Largetitle from "./Largetitle";
-import Overline from "./Overline";
-import Subheadline from "./Subheadline";
-import Subtitle from "./Subtitle";
-import Title from "./Title";
-import Title2 from "./Title2";
-import Title3 from "./Title3";
-
-type Props = {
-  variant?:
-    | "overline"
-    | "caption"
-    | "body"
-    | "caption2"
-    | "footnote"
-    | "headline"
-    | "largetitle"
-    | "subheadline"
-    | "subtitle"
-    | "title"
-    | "title2"
-    | "title3";
-  children: any;
-  text?: string;
-  tx?: string;
-  className?: string;
-};
-
-export type TextProps = {
-  children: any;
-  text?: string;
-  tx?: string;
-  className?: string;
-};
-
-/**
- * static let largeTitle: Font
- * A font with the large title text style.
- *
- * static let title: Font
- * A font with the title text style.
- *
- * static let title2: Font
- * Create a font for second level hierarchical headings.
- *
- * static let title3: Font
- * Create a font for third level hierarchical headings.
- *
- * static let headline: Font
- * A font with the headline text style.
- *
- * static let subheadline: Font
- * A font with the subheadline text style.
- *
- * static let body: Font
- * A font with the body text style.
- *
- * static let callout: Font
- * A font with the callout text style.
- *
- * static let caption: Font
- * A font with the caption text style.
- *
- * static let caption2: Font
- * Create a font with the alternate caption text style.
- *
- * static let footnote: Font
- * A font with the footnote text style.
- */
-
-const Text: React.FunctionComponent<Props> = (props: Props) => {
-  switch (props?.variant) {
-    case "overline":
-      return (
-        <Overline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Overline>
-      );
-    case "body":
-      return (
-        <Body text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Body>
-      );
-    case "caption":
-      return (
-        <Caption text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Caption>
-      );
-    case "caption2":
-      return (
-        <Caption2 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Caption2>
-      );
-    case "footnote":
-      return (
-        <Footnote text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Footnote>
-      );
-    case "headline":
-      return (
-        <Headline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Headline>
-      );
-    case "largetitle":
-      return (
-        <Largetitle text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Largetitle>
-      );
-    case "subheadline":
-      return (
-        <Subheadline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Subheadline>
-      );
-    case "subtitle":
-      return (
-        <Subtitle text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Subtitle>
-      );
-    case "title":
-      return (
-        <Title text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title>
-      );
-    case "title2":
-      return (
-        <Title2 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title2>
-      );
-    case "title3":
-      return (
-        <Title3 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title3>
-      );
-    default:
-      return (
-        <Body text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Body>
-      );
-  }
-};
-
-export default Text;
diff --git a/apps/web/components/ui/Text/Title/Title.tsx b/apps/web/components/ui/Text/Title/Title.tsx
deleted file mode 100644
index 6631e30c71..0000000000
--- a/apps/web/components/ui/Text/Title/Title.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-medium text-neutral-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title;
diff --git a/apps/web/components/ui/Text/Title/index.ts b/apps/web/components/ui/Text/Title/index.ts
deleted file mode 100644
index 17d11b0c04..0000000000
--- a/apps/web/components/ui/Text/Title/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Title from "./Title";
-
-export default Title;
diff --git a/apps/web/components/ui/Text/Title2/Title2.tsx b/apps/web/components/ui/Text/Title2/Title2.tsx
deleted file mode 100644
index 70c41de859..0000000000
--- a/apps/web/components/ui/Text/Title2/Title2.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-base font-normal text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title2;
diff --git a/apps/web/components/ui/Text/Title2/index.ts b/apps/web/components/ui/Text/Title2/index.ts
deleted file mode 100644
index 71b8b9e490..0000000000
--- a/apps/web/components/ui/Text/Title2/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Title2 from "./Title2";
-
-export default Title2;
diff --git a/apps/web/components/ui/Text/Title3/Title3.tsx b/apps/web/components/ui/Text/Title3/Title3.tsx
deleted file mode 100644
index ffe213c570..0000000000
--- a/apps/web/components/ui/Text/Title3/Title3.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(
-    "text-xs font-semibold leading-tight text-gray-900 dark:text-white",
-    props?.className
-  );
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title3;
diff --git a/apps/web/components/ui/Text/Title3/index.ts b/apps/web/components/ui/Text/Title3/index.ts
deleted file mode 100644
index cbfc1b4d05..0000000000
--- a/apps/web/components/ui/Text/Title3/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Title3 from "./Title3";
-
-export default Title3;
diff --git a/apps/web/components/ui/Text/index.ts b/apps/web/components/ui/Text/index.ts
deleted file mode 100644
index 5c61cdf3b0..0000000000
--- a/apps/web/components/ui/Text/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import Body from "./Body";
-import Caption from "./Caption";
-import Caption2 from "./Caption2";
-import Footnote from "./Footnote";
-import Headline from "./Headline";
-import Largetitle from "./Largetitle";
-import Overline from "./Overline";
-import Subheadline from "./Subheadline";
-import Subtitle from "./Subtitle";
-import Text from "./Text";
-import Title from "./Title";
-import Title2 from "./Title2";
-import Title3 from "./Title3";
-
-export { Text };
-export default Text;
-
-export { Title };
-
-export { Title2 };
-
-export { Title3 };
-
-export { Largetitle };
-
-export { Subtitle };
-
-export { Headline };
-
-export { Subheadline };
-
-export { Caption };
-
-export { Caption2 };
-
-export { Footnote };
-
-export { Overline };
-
-export { Body };
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index a5acb3ae49..f6b36b101d 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -36,7 +36,6 @@ import { ClientSuspense } from "@components/ClientSuspense";
 import Loader from "@components/Loader";
 import Schedule from "@components/availability/Schedule";
 import { CalendarListContainer } from "@components/integrations/CalendarListContainer";
-import Text from "@components/ui/Text";
 import TimezoneSelect from "@components/ui/form/TimezoneSelect";
 
 import getEventTypes from "../lib/queries/event-types/get-event-types";
@@ -398,10 +397,10 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
                     {t("timezone")}
                   </label>
-                  <Text variant="caption">
+                  <p className="text-sm leading-tight text-gray-500 dark:text-white">
                     {t("current_time")}:&nbsp;
                     <span className="text-black">{dayjs().tz(selectedTimeZone).format("LT")}</span>
-                  </Text>
+                  </p>
                 </section>
                 <TimezoneSelect
                   id="timeZone"
@@ -529,9 +528,9 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 defaultValue={props.user.bio || undefined}
               />
-              <Text variant="caption" className="mt-2">
+              <p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">
                 {t("few_sentences_about_yourself")}
-              </Text>
+              </p>
             </fieldset>
           </section>
         </form>
@@ -582,17 +581,13 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
         <article className="relative">
           <section className="space-y-4 sm:mx-auto sm:w-full sm:max-w-lg">
             <header>
-              <Text className="text-white" variant="largetitle">
-                {steps[currentStep].title}
-              </Text>
-              <Text className="text-white" variant="subtitle">
-                {steps[currentStep].description}
-              </Text>
+              <p className="font-cal mb-2 text-3xl tracking-wider text-white">{steps[currentStep].title}</p>
+              <p className="text-sm font-normal text-white">{steps[currentStep].description}</p>
             </header>
             <section className="space-y-2 pt-4">
-              <Text variant="footnote">
+              <p className="text-xs font-medium text-gray-500 dark:text-white">
                 Step {currentStep + 1} of {steps.length}
-              </Text>
+              </p>
 
               {error && <Alert severity="error" message={error?.message} />}
 
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index aedf79df67..2fb6d62576 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -23,7 +23,6 @@ import { HeadSeo } from "@components/seo/head-seo";
 import Team from "@components/team/screens/Team";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
-import Text from "@components/ui/Text";
 
 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
 function TeamPage({ team }: TeamPageProps) {
@@ -93,12 +92,8 @@ function TeamPage({ team }: TeamPageProps) {
               imageSrc={getPlaceholderAvatar(team.logo, team.name)}
               className="mx-auto mb-4 h-20 w-20 rounded-full"
             />
-            <Text variant="largetitle" className="text-gray-900 dark:text-white">
-              {teamName}
-            </Text>
-            <Text variant="subtitle" className="mt-2">
-              {team.bio}
-            </Text>
+            <p className="font-cal mb-2 text-3xl tracking-wider text-gray-900 dark:text-white">{teamName}</p>
+            <p className="mt-2 text-sm font-normal text-neutral-500 dark:text-white">{team.bio}</p>
           </div>
           {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
           {!showMembers.isOn && team.eventTypes.length > 0 && (