diff --git a/src/pages/Home/components/Calendar/Calendar.jsx b/src/pages/Home/components/Calendar/Calendar.jsx
index 53ba22a..574b172 100644
--- a/src/pages/Home/components/Calendar/Calendar.jsx
+++ b/src/pages/Home/components/Calendar/Calendar.jsx
@@ -3,13 +3,12 @@ import styles from "./Calendar.module.css";
 import {formatDateLetterJS} from "../../../../utils/date/formatDateLetter.js";
 import Button from "../../../../components/ui/Button/Button";
 import {AuthContext} from "../../../../contexts/Auth/AuthContext.ts";
+import ExportBtn from "./ExportBtn.tsx";
 
 function
 Calendar() {
     const { user } = useContext(AuthContext);
 
-    const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user.id}`;
-
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
         "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
@@ -152,16 +151,7 @@ Calendar() {
                     </div>
                 )}
                 <div className={`${styles.exportbox} glassBorder`}>
-                    <p><b>votre lien d'agenda:</b> {calendarUrl}</p>
-                    <Button className={styles.exportbtn}
-                        onClick={() => {
-                            window.open(
-                                "https://calendar.google.com/calendar/u/0/r/settings/addbyurl"
-                            );
-                        }}
-                    >
-                        Exporter
-                    </Button>
+                    <ExportBtn />
                 </div>
             </div>
         </div>
diff --git a/src/pages/Home/components/Calendar/Calendar.module.css b/src/pages/Home/components/Calendar/Calendar.module.css
index b70ac34..c577ba6 100644
--- a/src/pages/Home/components/Calendar/Calendar.module.css
+++ b/src/pages/Home/components/Calendar/Calendar.module.css
@@ -156,6 +156,7 @@
     margin-top: 16px;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .exportbtn {
diff --git a/src/pages/Home/components/Calendar/ExportBtn.tsx b/src/pages/Home/components/Calendar/ExportBtn.tsx
new file mode 100644
index 0000000..61dd619
--- /dev/null
+++ b/src/pages/Home/components/Calendar/ExportBtn.tsx
@@ -0,0 +1,20 @@
+import Button from "../../../../components/ui/Button/Button";
+import styles from "../../HomePage.module.css"
+import { useContext } from "react";
+import {AuthContext, AuthContextType} from "../../../../contexts/Auth/AuthContext";
+
+export default function ExportBtn() {
+
+    const { user } = useContext(AuthContext) as AuthContextType;
+    const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user?.id}`;
+
+    return <Button className={styles.exportbtn}
+                   onClick={() => {
+                       window.open(
+                           `https://calendar.google.com/calendar/u/0/r/settings/addbyurl?cid=${calendarUrl}`
+                       );
+                   }}
+    >
+        Exporter
+    </Button>
+}
\ No newline at end of file