diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index e4145236b0..341432616e 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -1,4 +1,5 @@
 import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion";
+import dynamic from "next/dynamic";
 import { useCallback, useEffect, useRef } from "react";
 import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
@@ -7,7 +8,7 @@ import classNames from "@calcom/lib/classNames";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
-import { Logo, ToggleGroup, useCalcomTheme } from "@calcom/ui";
+import { ToggleGroup, useCalcomTheme } from "@calcom/ui";
 import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
 
 import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
@@ -24,6 +25,8 @@ import { useBookerStore, useInitializeBookerStore } from "./store";
 import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
 
+const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
+
 const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
   const brandTheme = useGetBrandingColours({
     lightVal: brandColor,
@@ -205,8 +208,11 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
 
         <m.span
           key="logo"
-          className={classNames("mt-auto mb-6 pt-6", layout === "small_calendar" ? "block" : "hidden")}>
-          <Logo small />
+          className={classNames(
+            "mt-auto mb-6 pt-6 [&_img]:h-[15px]",
+            layout === "small_calendar" ? "block" : "hidden"
+          )}>
+          <PoweredBy logoOnly />
         </m.span>
       </div>
 
diff --git a/packages/features/ee/components/PoweredBy.tsx b/packages/features/ee/components/PoweredBy.tsx
index 6927a7baa2..f6eac895dc 100644
--- a/packages/features/ee/components/PoweredBy.tsx
+++ b/packages/features/ee/components/PoweredBy.tsx
@@ -5,7 +5,7 @@ import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { APP_NAME, POWERED_BY_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-const PoweredByCal = () => {
+const PoweredByCal = ({ logoOnly }: { logoOnly?: boolean }) => {
   const { t } = useLocale();
   const session = useSession();
   const isEmbed = useIsEmbed();
@@ -13,23 +13,18 @@ const PoweredByCal = () => {
 
   return (
     <div className={"p-2 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle opacity-50 hover:opacity-100">
-        {t("powered_by")}{" "}
+      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle">
+        {!logoOnly && <>{t("powered_by")} </>}
         {APP_NAME === "Cal.com" || !hasValidLicense ? (
           <>
             <img
-              className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-              src="/cal-logo-word.svg"
-              alt="Cal.com Logo"
-            />
-            <img
-              className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-              src="/cal-logo-word-dark.svg"
+              className="relative -mt-px inline h-[10px] w-auto dark:invert"
+              src="/api/logo"
               alt="Cal.com Logo"
             />
           </>
         ) : (
-          <span className="text-emphasis font-semibold">{APP_NAME}</span>
+          <span className="text-emphasis font-semibold opacity-50 hover:opacity-100">{APP_NAME}</span>
         )}
       </Link>
     </div>