diff --git a/src/frontend/apps/calendars/src/features/layouts/components/header/Header.tsx b/src/frontend/apps/calendars/src/features/layouts/components/header/Header.tsx
index c97baab..c09bec5 100644
--- a/src/frontend/apps/calendars/src/features/layouts/components/header/Header.tsx
+++ b/src/frontend/apps/calendars/src/features/layouts/components/header/Header.tsx
@@ -5,12 +5,13 @@ import { useTranslation } from "react-i18next";
 import { fetchAPI } from "@/features/api/fetchApi";
 import { Feedback } from "@/features/feedback/Feedback";
 import { Gaufre } from "@/features/ui/components/gaufre/Gaufre";
+import { DynamicCalendarLogo } from "@/features/ui/components/logo";
 import { UserProfile } from "@/features/ui/components/user/UserProfile";
 
 export const HeaderIcon = () => {
   return (
     <div className="calendars__header__left">
-      <div className="calendars__header__logo" />
+      <DynamicCalendarLogo variant="header" />
       <Feedback />
     </div>
   );
diff --git a/src/frontend/apps/calendars/src/pages/calendar.tsx b/src/frontend/apps/calendars/src/pages/calendar.tsx
index 42b5d84..02803cc 100644
--- a/src/frontend/apps/calendars/src/pages/calendar.tsx
+++ b/src/frontend/apps/calendars/src/pages/calendar.tsx
@@ -14,6 +14,7 @@ import { SpinnerPage } from "@/features/ui/components/spinner/SpinnerPage";
 import { Toaster } from "@/features/ui/components/toaster/Toaster";
 import { Scheduler } from "@/features/calendar/components/scheduler/Scheduler";
 import { CalendarContextProvider } from "@/features/calendar/contexts";
+import { DynamicCalendarLogo } from "@/features/ui/components/logo";
 
 export default function CalendarPage() {
   const { t } = useTranslation();
@@ -57,7 +58,7 @@ CalendarPage.getLayout = function getLayout(page: React.ReactElement) {
             leftPanelContent={<LeftPanel />}
             icon={
               <div className="calendars__header__left">
-                <div className="calendars__header__logo" />
+                <DynamicCalendarLogo variant="header" />
               </div>
             }
             rightHeaderContent={<HeaderRight />}
diff --git a/src/frontend/apps/calendars/src/pages/index.tsx b/src/frontend/apps/calendars/src/pages/index.tsx
index 1dad086..b78c17a 100644
--- a/src/frontend/apps/calendars/src/pages/index.tsx
+++ b/src/frontend/apps/calendars/src/pages/index.tsx
@@ -17,6 +17,7 @@ import { LeftPanelMobile } from "@/features/layouts/components/left-panel/LeftPa
 import { SESSION_STORAGE_REDIRECT_AFTER_LOGIN_URL } from "@/features/api/fetchApi";
 import { useThemeCustomization } from "@/hooks/useThemeCustomization";
 import { Feedback } from "@/features/feedback/Feedback";
+import { DynamicCalendarLogo } from "@/features/ui/components/logo";
 export default function HomePage() {
   const { t } = useTranslation();
   const { user } = useAuth();
@@ -76,7 +77,7 @@ export default function HomePage() {
 
       <HomeGutter>
         <Hero
-          logo={<div className="calendars__logo-icon" />}
+          logo={<DynamicCalendarLogo variant="icon" />}
           banner={banner.src}
           title={t("home.title")}
           subtitle={t("home.subtitle")}
@@ -117,7 +118,7 @@ HomePage.getLayout = function getLayout(page: React.ReactElement) {
           leftPanelContent={<LeftPanelMobile />}
           icon={
             <div className="calendars__header__left">
-              <div className="calendars__header__logo" />
+              <DynamicCalendarLogo variant="header" />
               <Feedback />
             </div>
           }