diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 79f4fd9076..ea0ca5d7d3 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -156,11 +156,8 @@ const UserProfile = () => {
           {t("few_sentences_about_yourself")}
         </p>
       </fieldset>
-      <Button
-        type="submit"
-        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
+      <Button EndIcon={ArrowRight} type="submit" className="mt-8 w-full items-center justify-center">
         {t("finish")}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
     </form>
   );
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index 7ab1d29f7f..cfb49a89f8 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -9,7 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TimezoneSelect } from "@calcom/ui";
+import { Button, TimezoneSelect, Input } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -76,7 +76,7 @@ const UserSettings = (props: IUserSettingsProps) => {
           <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
             {t("full_name")}
           </label>
-          <input
+          <Input
             {...register("name", {
               required: true,
             })}
@@ -85,7 +85,6 @@ const UserSettings = (props: IUserSettingsProps) => {
             type="text"
             autoComplete="off"
             autoCorrect="off"
-            className="border-default w-full rounded-md border text-sm"
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
@@ -106,7 +105,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="mt-2 w-full rounded-md text-sm"
           />
 
-          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
+          <p className="text-subtle mt-3 flex flex-row font-sans text-xs leading-tight">
             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
           </p>
         </div>
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 7eb97c71f3..847023c440 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -5,7 +5,6 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
@@ -174,15 +173,7 @@ inferSSRProps<typeof _getServerSideProps> & WithNonceProps<{}>) {
     : isSAMLLoginEnabled && !isLoading && data?.connectionExists;
 
   return (
-    <div
-      style={
-        {
-          "--cal-brand": "#111827",
-          "--cal-brand-emphasis": "#101010",
-          "--cal-brand-text": "white",
-          "--cal-brand-subtle": "#9CA3AF",
-        } as CSSProperties
-      }>
+    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
       <AuthContainer
         title={t("login")}
         description={t("login")}
@@ -238,7 +229,7 @@ inferSSRProps<typeof _getServerSideProps> & WithNonceProps<{}>) {
                 type="submit"
                 color="primary"
                 disabled={formState.isSubmitting}
-                className="w-full justify-center dark:bg-white dark:text-black">
+                className="w-full justify-center">
                 {twoFactorRequired ? t("submit") : t("sign_in")}
               </Button>
             </div>
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index c973b25754..807ad4db68 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -2,7 +2,6 @@ import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
 import { Suspense } from "react";
 import { z } from "zod";
 
@@ -106,16 +105,8 @@ const OnboardingPage = () => {
 
   return (
     <div
-      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
+      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:9CA3AF] [--cal-brand:#111827] [--cal-brand-text:#FFFFFF] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand:white] dark:[--cal-brand-text:#000000]"
       data-testid="onboarding"
-      style={
-        {
-          "--cal-brand": "#111827",
-          "--cal-brand-emphasis": "#101010",
-          "--cal-brand-text": "white",
-          "--cal-brand-subtle": "#9CA3AF",
-        } as CSSProperties
-      }
       key={pathname}>
       <Head>
         <title>{`${APP_NAME} - ${t("getting_started")}`}</title>
@@ -231,7 +222,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   };
 };
 
-OnboardingPage.isThemeSupported = false;
 OnboardingPage.PageWrapper = PageWrapper;
 
 export default OnboardingPage;
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 278b039a15..f00c4b8a63 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -4,7 +4,6 @@ import type { GetServerSidePropsContext } from "next";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
 import { useState, useEffect } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm, useFormContext } from "react-hook-form";
@@ -238,18 +237,10 @@ export default function Signup({
   };
 
   return (
-    <div
-      className="light bg-muted 2xl:bg-default flex min-h-screen w-full flex-col items-center justify-center"
-      style={
-        {
-          "--cal-brand": "#111827",
-          "--cal-brand-emphasis": "#101010",
-          "--cal-brand-text": "white",
-          "--cal-brand-subtle": "#9CA3AF",
-        } as CSSProperties
-      }>
-      <div className="bg-muted 2xl:border-subtle grid w-full max-w-[1440px] grid-cols-1 grid-rows-1 lg:grid-cols-2 2xl:rounded-[20px] 2xl:border 2xl:py-6">
+    <div className="light bg-muted 2xl:bg-default flex min-h-screen w-full flex-col items-center justify-center [--cal-brand-emphasis:#101010] [--cal-brand:#111827] [--cal-brand-text:#FFFFFF] [--cal-brand-subtle:#9CA3AF] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand:white] dark:[--cal-brand-text:#000000]">
+      <div className="bg-muted 2xl:border-subtle grid w-full max-w-[1440px] grid-cols-1 grid-rows-1 overflow-hidden lg:grid-cols-2 2xl:rounded-[20px] 2xl:border 2xl:py-6">
         <HeadSeo title={t("sign_up")} description={t("sign_up")} />
+        {/* Left side */}
         <div className="flex w-full flex-col px-4 pt-6 sm:px-16 md:px-20 2xl:px-28">
           {/* Header */}
           {errors.apiError && (
@@ -354,7 +345,10 @@ export default function Signup({
                     StartIcon={() => (
                       <>
                         <img
-                          className={classNames("text-subtle  mr-2 h-4 w-4", premiumUsername && "opacity-50")}
+                          className={classNames(
+                            "text-subtle  mr-2 h-4 w-4 dark:invert",
+                            premiumUsername && "opacity-50"
+                          )}
                           src="/google-icon.svg"
                           alt=""
                         />
@@ -648,5 +642,4 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   };
 };
 
-Signup.isThemeSupported = false;
 Signup.PageWrapper = PageWrapper;
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 0bef9573c6..af700122e1 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Form, TextField } from "@calcom/ui";
+import { Alert, Button, Form, PasswordField, TextField } from "@calcom/ui";
 
 export default function AppleCalendarSetup() {
   const { t } = useLocale();
@@ -20,8 +20,8 @@ export default function AppleCalendarSetup() {
   const [errorMessage, setErrorMessage] = useState("");
 
   return (
-    <div className="bg-emphasis flex h-screen">
-      <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
+    <div className="bg-emphasis flex h-screen dark:bg-inherit">
+      <div className="bg-default dark:bg-muted border-subtle m-auto rounded p-5 dark:border md:w-[560px] md:p-10">
         <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
@@ -32,12 +32,14 @@ export default function AppleCalendarSetup() {
             />
           </div>
           <div>
-            <h1 className="text-default">{t("connect_apple_server")}</h1>
+            <h1 className="text-default dark:text-emphasis mb-3 font-semibold">
+              {t("connect_apple_server")}
+            </h1>
 
             <div className="mt-1 text-sm">
               {t("apple_server_generate_password", { appName: APP_NAME })}{" "}
               <a
-                className="text-indigo-400"
+                className="font-bold hover:underline"
                 href="https://appleid.apple.com/account/manage"
                 target="_blank"
                 rel="noopener noreferrer">
@@ -45,7 +47,7 @@ export default function AppleCalendarSetup() {
               </a>
               . {t("credentials_stored_encrypted")}
             </div>
-            <div className="my-2 mt-3">
+            <div className="my-2 mt-4">
               <Form
                 form={form}
                 handleSubmit={async (values) => {
@@ -65,7 +67,7 @@ export default function AppleCalendarSetup() {
                   }
                 }}>
                 <fieldset
-                  className="space-y-2"
+                  className="space-y-4"
                   disabled={form.formState.isSubmitting}
                   data-testid="apple-calendar-form">
                   <TextField
@@ -76,9 +78,8 @@ export default function AppleCalendarSetup() {
                     placeholder="appleid@domain.com"
                     data-testid="apple-calendar-email"
                   />
-                  <TextField
+                  <PasswordField
                     required
-                    type="password"
                     {...form.register("password")}
                     label={t("password")}
                     placeholder="•••••••••••••"
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 17f0d41642..5306f6e3ae 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -50,7 +50,7 @@ export const buttonClasses = cva(
         primary:
           "bg-brand-default hover:bg-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-default text-brand disabled:bg-brand-subtle disabled:text-brand-subtle disabled:opacity-40 disabled:hover:bg-brand-subtle disabled:hover:text-brand-default disabled:hover:opacity-40",
         secondary:
-          "text-emphasis border border-default  bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-opacity-30 disabled:hover:text-muted disabled:hover:border-subtle disabled:hover:bg-default",
+          "text-emphasis border border-default bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-opacity-30 disabled:hover:text-muted disabled:hover:border-subtle disabled:hover:bg-default",
         minimal:
           "text-emphasis hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-transparent disabled:hover:text-muted disabled:hover:border-subtle",
         destructive:
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 0b87432d60..a259c21769 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -31,35 +31,33 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
   const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
 
   return (
-    <div className="[&_.group:hover_.addon-wrapper]:border-emphasis relative [&_.group:focus-within_.addon-wrapper]:border-neutral-300">
-      <InputField
-        type={isPasswordVisible ? "text" : "password"}
-        placeholder={props.placeholder || "•••••••••••••"}
-        ref={ref}
-        {...props}
-        className={classNames(
-          "addon-wrapper mb-0 ltr:border-r-0 ltr:pr-10 rtl:border-l-0 rtl:pl-10",
-          props.className
-        )}
-        addOnFilled={false}
-        addOnSuffix={
-          <Tooltip content={textLabel}>
-            <button
-              className="text-emphasis h-9"
-              tabIndex={-1}
-              type="button"
-              onClick={() => toggleIsPasswordVisible()}>
-              {isPasswordVisible ? (
-                <EyeOff className="h-4 stroke-[2.5px]" />
-              ) : (
-                <Eye className="h-4 stroke-[2.5px]" />
-              )}
-              <span className="sr-only">{textLabel}</span>
-            </button>
-          </Tooltip>
-        }
-      />
-    </div>
+    <InputField
+      type={isPasswordVisible ? "text" : "password"}
+      placeholder={props.placeholder || "•••••••••••••"}
+      ref={ref}
+      {...props}
+      className={classNames(
+        "addon-wrapper mb-0 ltr:border-r-0 ltr:pr-10 rtl:border-l-0 rtl:pl-10",
+        props.className
+      )}
+      addOnFilled={false}
+      addOnSuffix={
+        <Tooltip content={textLabel}>
+          <button
+            className="text-emphasis h-9"
+            tabIndex={-1}
+            type="button"
+            onClick={() => toggleIsPasswordVisible()}>
+            {isPasswordVisible ? (
+              <EyeOff className="h-4 stroke-[2.5px]" />
+            ) : (
+              <Eye className="h-4 stroke-[2.5px]" />
+            )}
+            <span className="sr-only">{textLabel}</span>
+          </button>
+        </Tooltip>
+      }
+    />
   );
 });
 
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index 1fc0b36f1f..07b0a046cd 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -107,7 +107,9 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           dir="ltr"
           className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
           {addOnLeading && (
-            <Addon isFilled={addOnFilled} className={classNames("rounded-l-md border-r-0", addOnClassname)}>
+            <Addon
+              isFilled={addOnFilled}
+              className={classNames("ltr:rounded-l-md rtl:rounded-r-md", addOnClassname)}>
               {addOnLeading}
             </Addon>
           )}
diff --git a/packages/ui/components/form/switch/Switch.tsx b/packages/ui/components/form/switch/Switch.tsx
index b37305f9e6..6944f8349a 100644
--- a/packages/ui/components/form/switch/Switch.tsx
+++ b/packages/ui/components/form/switch/Switch.tsx
@@ -42,7 +42,7 @@ const Switch = (
         {LockedIcon && <div className="mr-2">{LockedIcon}</div>}
         <PrimitiveSwitch.Root
           className={cx(
-            isChecked ? "bg-brand-default" : "bg-emphasis",
+            isChecked ? "bg-brand-default dark:bg-emphasis" : "bg-emphasis",
             primitiveProps.disabled && "cursor-not-allowed",
             "focus:ring-brand-default h-5 w-[34px] rounded-full shadow-none focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
             props.className