diff --git a/apps/api/lib/validations/user.ts b/apps/api/lib/validations/user.ts
index 98e876c4fe..2bccf2f961 100644
--- a/apps/api/lib/validations/user.ts
+++ b/apps/api/lib/validations/user.ts
@@ -74,6 +74,7 @@ export const schemaUserBaseBodyParams = User.pick({
   timeZone: true,
   weekStart: true,
   theme: true,
+  appTheme: true,
   defaultScheduleId: true,
   locale: true,
   hideBranding: true,
@@ -100,6 +101,7 @@ const schemaUserEditParams = z.object({
   hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
+  appTheme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
   defaultScheduleId: z
     .number()
@@ -122,6 +124,7 @@ const schemaUserCreateParams = z.object({
   hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
+  appTheme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
   defaultScheduleId: z
     .number()
@@ -159,6 +162,7 @@ export const schemaUserReadPublic = User.pick({
   weekStart: true,
   endTime: true,
   bufferTime: true,
+  appTheme: true,
   theme: true,
   defaultScheduleId: true,
   locale: true,
diff --git a/apps/web/lib/app-providers-app-dir.tsx b/apps/web/lib/app-providers-app-dir.tsx
index 006145761a..029fed2c0a 100644
--- a/apps/web/lib/app-providers-app-dir.tsx
+++ b/apps/web/lib/app-providers-app-dir.tsx
@@ -113,7 +113,7 @@ const enum ThemeSupport {
   // e.g. Login Page
   None = "none",
   // Entire App except Booking Pages
-  App = "systemOnly",
+  App = "userConfigured",
   // Booking Pages(including Routing Forms)
   Booking = "userConfigured",
 }
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index 2e3e8c1086..1a478cff52 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -127,9 +127,9 @@ const enum ThemeSupport {
   // e.g. Login Page
   None = "none",
   // Entire App except Booking Pages
-  App = "systemOnly",
+  App = "appConfigured",
   // Booking Pages(including Routing Forms)
-  Booking = "userConfigured",
+  Booking = "bookingConfigured",
 }
 
 type CalcomThemeProps = PropsWithChildren<
@@ -144,8 +144,10 @@ const CalcomThemeProvider = (props: CalcomThemeProps) => {
   const embedNamespace = getEmbedNamespace(props.router.query);
   const isEmbedMode = typeof embedNamespace === "string";
 
+  const themeProviderProps = getThemeProviderProps({ props, isEmbedMode, embedNamespace });
+
   return (
-    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace })}>
+    <ThemeProvider {...themeProviderProps}>
       {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
       {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
       {typeof window !== "undefined" && !isEmbedMode && (
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 2bc76c2126..5a3965eaf8 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -11,8 +11,10 @@ import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME } from "@calcom/lib/constants";
 import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
 import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useTheme from "@calcom/lib/hooks/useTheme";
 import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
 import type { userMetadata } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
@@ -29,6 +31,7 @@ import {
   SkeletonText,
   SettingsToggle,
   UpgradeTeamsBadge,
+  useCalcomTheme,
 } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
@@ -41,10 +44,10 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
         <SkeletonText className="h-8 w-1/3" />
       </div>
       <div className="border-subtle space-y-6 border-x px-4 py-6 sm:px-6">
-        <div className="flex items-center justify-center">
-          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
-          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
-          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
+        <div className="[&>*]:bg-emphasis flex w-full items-center justify-center gap-x-2 [&>*]:animate-pulse">
+          <div className="h-32 flex-1 rounded-md p-5" />
+          <div className="h-32 flex-1 rounded-md p-5" />
+          <div className="h-32 flex-1 rounded-md p-5" />
         </div>
         <div className="flex justify-between">
           <SkeletonText className="h-8 w-1/3" />
@@ -62,6 +65,26 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   );
 };
 
+const useBrandColors = (
+  currentTheme: string | null,
+  {
+    brandColor,
+    darkBrandColor,
+  }: {
+    brandColor?: string | null;
+    darkBrandColor?: string | null;
+  }
+): void => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  const selectedTheme = currentTheme ? brandTheme[currentTheme as "light" | "dark"] : {};
+  useCalcomTheme({
+    root: selectedTheme,
+  });
+};
+
 const AppearanceView = ({
   user,
   hasPaidPlan,
@@ -77,6 +100,22 @@ const AppearanceView = ({
     user?.brandColor !== DEFAULT_LIGHT_BRAND_COLOR || user?.darkBrandColor !== DEFAULT_DARK_BRAND_COLOR
   );
   const [hideBrandingValue, setHideBrandingValue] = useState(user?.hideBranding ?? false);
+  useTheme(user?.appTheme);
+  useBrandColors(user?.appTheme ?? null, {
+    brandColor: user?.brandColor,
+    darkBrandColor: user?.darkBrandColor,
+  });
+
+  const userAppThemeFormMethods = useForm({
+    defaultValues: {
+      appTheme: user.appTheme,
+    },
+  });
+
+  const {
+    formState: { isSubmitting: isUserAppThemeSubmitting, isDirty: isUserAppThemeDirty },
+    reset: resetUserAppThemeReset,
+  } = userAppThemeFormMethods;
 
   const userThemeFormMethods = useForm({
     defaultValues: {
@@ -131,6 +170,7 @@ const AppearanceView = ({
       resetBrandColorsThemeReset({ brandColor: data.brandColor, darkBrandColor: data.darkBrandColor });
       resetBookerLayoutThemeReset({ metadata: data.metadata });
       resetUserThemeReset({ theme: data.theme });
+      resetUserAppThemeReset({ appTheme: data.appTheme });
     },
     onError: (error) => {
       if (error.message) {
@@ -147,6 +187,56 @@ const AppearanceView = ({
   return (
     <div>
       <Meta title={t("appearance")} description={t("appearance_description")} borderInShellHeader={false} />
+      <div className="border-subtle mt-6 flex items-center rounded-t-lg border p-6 text-sm">
+        <div>
+          <p className="text-default text-base font-semibold">{t("app_theme")}</p>
+          <p className="text-default">{t("app_theme_applies_note")}</p>
+        </div>
+      </div>
+      <Form
+        form={userAppThemeFormMethods}
+        handleSubmit={(values) => {
+          mutation.mutate({
+            appTheme: values.appTheme ?? null,
+          });
+        }}>
+        <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">
+          <ThemeLabel
+            variant="system"
+            value={undefined}
+            label={t("theme_system")}
+            defaultChecked={user.appTheme === null}
+            register={userAppThemeFormMethods.register}
+            fieldName="appTheme"
+          />
+          <ThemeLabel
+            variant="light"
+            value="light"
+            label={t("light")}
+            defaultChecked={user.appTheme === "light"}
+            register={userAppThemeFormMethods.register}
+            fieldName="appTheme"
+          />
+          <ThemeLabel
+            variant="dark"
+            value="dark"
+            label={t("dark")}
+            defaultChecked={user.appTheme === "dark"}
+            register={userAppThemeFormMethods.register}
+            fieldName="appTheme"
+          />
+        </div>
+        <SectionBottomActions className="mb-6" align="end">
+          <Button
+            disabled={isUserAppThemeSubmitting || !isUserAppThemeDirty}
+            type="submit"
+            data-testid="update-app-theme-btn"
+            color="primary">
+            {t("update")}
+          </Button>
+        </SectionBottomActions>
+      </Form>
+
       <div className="border-subtle mt-6 flex items-center rounded-t-lg border p-6 text-sm">
         <div>
           <p className="text-default text-base font-semibold">{t("theme")}</p>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index b8cbed57df..5018faf54f 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1473,8 +1473,10 @@
   "route_to_the_right_person": "Route to the right person based on the answers to your form",
   "form_description": "Create your form to route a booker",
   "copy_link_to_form": "Copy link to form",
-  "theme": "Theme",
+  "theme": "Booking Page Theme",
   "theme_applies_note": "This only applies to your public booking pages",
+  "app_theme": "Dashboard Theme",
+  "app_theme_applies_note": "This only applies to your logged in dashboard",
   "theme_system": "System default",
   "add_a_team": "Add a team",
   "add_webhook_description": "Receive meeting data in real-time when something happens in {{appName}}",
diff --git a/apps/web/test/utils/bookingScenario/getSampleUserInSession.ts b/apps/web/test/utils/bookingScenario/getSampleUserInSession.ts
index 1dc6580b2d..5057c206d2 100644
--- a/apps/web/test/utils/bookingScenario/getSampleUserInSession.ts
+++ b/apps/web/test/utils/bookingScenario/getSampleUserInSession.ts
@@ -37,6 +37,7 @@ export const getSampleUserInSession = function () {
     disableImpersonation: false,
     organizationId: null,
     theme: "",
+    appTheme: "",
     createdDate: new Date(),
     trialEndsAt: new Date(),
     completedOnboarding: false,
diff --git a/packages/features/settings/ThemeLabel.tsx b/packages/features/settings/ThemeLabel.tsx
index 3793b77e0b..7d5bafa02b 100644
--- a/packages/features/settings/ThemeLabel.tsx
+++ b/packages/features/settings/ThemeLabel.tsx
@@ -4,23 +4,24 @@ interface ThemeLabelProps {
   label: string;
   defaultChecked?: boolean;
   register: any;
+  fieldName?: string;
 }
 
 export default function ThemeLabel(props: ThemeLabelProps) {
-  const { variant, label, value, defaultChecked, register } = props;
+  const { variant, label, value, defaultChecked, register, fieldName = "theme" } = props;
 
   return (
     <label
       className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mb-0 sm:mr-4"
-      htmlFor={`theme-${variant}`}
-      data-testid={`theme-${variant}`}>
+      htmlFor={`${fieldName}-${variant}`}
+      data-testid={`${fieldName}-${variant}`}>
       <input
         className="peer absolute left-8 top-8"
         type="radio"
         value={value}
-        id={`theme-${variant}`}
+        id={`${fieldName}-${variant}`}
         defaultChecked={defaultChecked}
-        {...register("theme")}
+        {...register(fieldName)}
       />
       <div className="ring-inverted relative z-10 rounded-lg ring-offset-2 transition-all peer-checked:ring-2">
         <img
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 310d0dbae9..20f5e5988a 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -48,6 +48,7 @@ import { useFormbricks } from "@calcom/lib/formbricks-client";
 import getBrandColours from "@calcom/lib/getBrandColours";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import type { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
@@ -329,13 +330,14 @@ type LayoutProps = {
   hideHeadingOnMobile?: boolean;
 };
 
-const useBrandColors = () => {
+const useAppTheme = () => {
   const { data: user } = useMeQuery();
   const brandTheme = getBrandColours({
     lightVal: user?.brandColor,
     darkVal: user?.darkBrandColor,
   });
   useCalcomTheme(brandTheme);
+  useTheme(user?.appTheme);
 };
 
 const KBarWrapper = ({ children, withKBar = false }: { withKBar: boolean; children: React.ReactNode }) =>
@@ -361,9 +363,7 @@ export default function Shell(props: LayoutProps) {
   // if a page is unauthed and isPublic is true, the redirect does not happen.
   useRedirectToLoginIfUnauthenticated(props.isPublic);
   useRedirectToOnboardingIfNeeded();
-  // System Theme is automatically supported using ThemeProvider. If we intend to use user theme throughout the app we need to uncomment this.
-  // useTheme(profile.theme);
-  useBrandColors();
+  useAppTheme();
 
   return !props.isPublic ? (
     <KBarWrapper withKBar>
diff --git a/packages/lib/test/builder.ts b/packages/lib/test/builder.ts
index dd6df48196..ee412e9f48 100644
--- a/packages/lib/test/builder.ts
+++ b/packages/lib/test/builder.ts
@@ -234,6 +234,7 @@ export const buildUser = <T extends Partial<UserPayload>>(
     selectedCalendars: [],
     startTime: 0,
     theme: null,
+    appTheme: null,
     timeFormat: null,
     trialEndsAt: null,
     twoFactorEnabled: false,
diff --git a/packages/prisma/migrations/20231201233433_add_new_user_field_app_theme/migration.sql b/packages/prisma/migrations/20231201233433_add_new_user_field_app_theme/migration.sql
new file mode 100644
index 0000000000..97f638413b
--- /dev/null
+++ b/packages/prisma/migrations/20231201233433_add_new_user_field_app_theme/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "appTheme" TEXT;
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index b1921a1922..368258a027 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -221,7 +221,9 @@ model User {
   // </DEPRECATED>
   bufferTime          Int                  @default(0)
   hideBranding        Boolean              @default(false)
+  // TODO: should be renamed since it only affects the booking page
   theme               String?
+  appTheme            String?
   createdDate         DateTime             @default(now()) @map(name: "created")
   trialEndsAt         DateTime?
   eventTypes          EventType[]          @relation("user_eventtype")
diff --git a/packages/trpc/server/middlewares/sessionMiddleware.ts b/packages/trpc/server/middlewares/sessionMiddleware.ts
index c1ea86eed4..c694332f3e 100644
--- a/packages/trpc/server/middlewares/sessionMiddleware.ts
+++ b/packages/trpc/server/middlewares/sessionMiddleware.ts
@@ -45,6 +45,7 @@ export async function getUserFromSession(ctx: TRPCContextInner, session: Maybe<S
       defaultScheduleId: true,
       bufferTime: true,
       theme: true,
+      appTheme: true,
       createdDate: true,
       hideBranding: true,
       twoFactorEnabled: true,
diff --git a/packages/trpc/server/routers/loggedInViewer/me.handler.ts b/packages/trpc/server/routers/loggedInViewer/me.handler.ts
index 1123cd7372..184b11134b 100644
--- a/packages/trpc/server/routers/loggedInViewer/me.handler.ts
+++ b/packages/trpc/server/routers/loggedInViewer/me.handler.ts
@@ -54,6 +54,7 @@ export const meHandler = async ({ ctx }: MeOptions) => {
     bio: user.bio,
     weekStart: user.weekStart,
     theme: user.theme,
+    appTheme: user.appTheme,
     hideBranding: user.hideBranding,
     metadata: user.metadata,
     defaultBookerLayouts: user.defaultBookerLayouts,
diff --git a/packages/trpc/server/routers/loggedInViewer/updateProfile.schema.ts b/packages/trpc/server/routers/loggedInViewer/updateProfile.schema.ts
index afada0b000..1c685b34f7 100644
--- a/packages/trpc/server/routers/loggedInViewer/updateProfile.schema.ts
+++ b/packages/trpc/server/routers/loggedInViewer/updateProfile.schema.ts
@@ -23,6 +23,7 @@ export const ZUpdateProfileInputSchema = z.object({
   brandColor: z.string().optional(),
   darkBrandColor: z.string().optional(),
   theme: z.string().optional().nullable(),
+  appTheme: z.string().optional().nullable(),
   completedOnboarding: z.boolean().optional(),
   locale: z.string().optional(),
   timeFormat: z.number().optional(),