diff --git a/app/src/components/Calendar/CalendarDetail.tsx b/app/src/components/Calendar/CalendarDetail.tsx
index 41a1639..4ef6273 100644
--- a/app/src/components/Calendar/CalendarDetail.tsx
+++ b/app/src/components/Calendar/CalendarDetail.tsx
@@ -470,7 +470,8 @@ function CurrentTimeIndicator() {
 
 // ── Main Component ──────────────────────────────────────────────────────
 export function CalendarDetail() {
-  const { calendarId } = useParams<{ calendarId: string }>();
+  const { calendarId: rawCalendarId } = useParams<{ calendarId: string }>();
+  const calendarId = rawCalendarId ? decodeURIComponent(rawCalendarId) : undefined;
   const navigate = useNavigate();
   const [calendar, setCalendar] = useState<Calendar | null>(null);
   const [events, setEvents] = useState<CalendarEvent[]>([]);
diff --git a/app/src/components/Calendar/CalendarList.tsx b/app/src/components/Calendar/CalendarList.tsx
index 7e6169b..809cb97 100644
--- a/app/src/components/Calendar/CalendarList.tsx
+++ b/app/src/components/Calendar/CalendarList.tsx
@@ -77,7 +77,7 @@ export function CalendarList() {
         {calendars.map((calendar) => (
           <div
             key={calendar.id}
-            onClick={() => navigate(`/calendar/${calendar.id}`)}
+            onClick={() => navigate(`/calendar/${encodeURIComponent(calendar.id)}`)}
             className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer border border-gray-200 overflow-hidden"
           >
             <div