diff --git a/apps/main/src/pages/planning.tsx b/apps/main/src/pages/planning.tsx
index f5d5cfc..94629f1 100644
--- a/apps/main/src/pages/planning.tsx
+++ b/apps/main/src/pages/planning.tsx
@@ -10,7 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@xtablo/ui/components/select";
-import { TypographyH3 } from "@xtablo/ui/components/typography";
+import { TypographyH3, TypographyH4 } from "@xtablo/ui/components/typography";
 import { Download, FolderInputIcon, PlusIcon, RefreshCcw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -303,15 +303,15 @@ export const PlanningPage = () => {
       endOfWeek.setDate(startOfWeek.getDate() + 6);
 
       if (startOfWeek.getMonth() === endOfWeek.getMonth()) {
-        return `${startOfWeek.getDate()} - ${endOfWeek.getDate()} ${
-          monthNames[startOfWeek.getMonth()]
-        } ${startOfWeek.getFullYear()}`;
+        return `${monthNames[startOfWeek.getMonth()]} ${startOfWeek.getFullYear()}`;
+      } else if (startOfWeek.getFullYear() !== endOfWeek.getFullYear()) {
+        const startMonth = monthNames[startOfWeek.getMonth()].slice(0, 3);
+        const endMonth = monthNames[endOfWeek.getMonth()].slice(0, 3);
+        return `${startMonth} ${startOfWeek.getFullYear()} - ${endMonth} ${endOfWeek.getFullYear()}`;
       } else {
-        return `${startOfWeek.getDate()} ${
-          monthNames[startOfWeek.getMonth()]
-        } - ${endOfWeek.getDate()} ${
-          monthNames[endOfWeek.getMonth()]
-        } ${startOfWeek.getFullYear()}`;
+        const startMonth = monthNames[startOfWeek.getMonth()].slice(0, 3);
+        const endMonth = monthNames[endOfWeek.getMonth()].slice(0, 3);
+        return `${startMonth} - ${endMonth} ${endOfWeek.getFullYear()}`;
       }
     } else {
       const dateString = currentDate.toLocaleDateString("fr-FR", {
@@ -872,6 +872,17 @@ export const PlanningPage = () => {
               <FolderInputIcon className="w-5 h-5 mr-2" />
               {t("planning:importPlanning")}
             </Button>
+
+            <Button
+              onClick={handleExportICS}
+              disabled={!tabloEvents || tabloEvents.length === 0}
+              variant="outline"
+              className="w-full mt-2"
+              title={t("planning:exportICS")}
+            >
+              <Download className="w-4 h-4 mr-2" />
+              {t("planning:export")}
+            </Button>
           </div>
 
           {/* Mini Calendar */}
@@ -942,20 +953,10 @@ export const PlanningPage = () => {
                     </svg>
                   </button>
                 </div>
-                <h3 className="text-lg font-medium text-foreground">{getViewTitle()}</h3>
+                <TypographyH4>{getViewTitle()}</TypographyH4>
               </div>
 
               <div className="flex items-center space-x-2">
-                <Button
-                  onClick={handleExportICS}
-                  disabled={!tabloEvents || tabloEvents.length === 0}
-                  variant="outline"
-                  size="sm"
-                  title={t("planning:exportICS")}
-                >
-                  <Download className="w-4 h-4 mr-1" />
-                  {t("planning:export")}
-                </Button>
                 <Button
                   onClick={() => setIsWebcalModalOpen(true)}
                   variant="outline"