diff --git a/src/components/HydrateFallback.tsx b/src/components/HydrateFallback.tsx
new file mode 100644
index 0000000..35124cd
--- /dev/null
+++ b/src/components/HydrateFallback.tsx
@@ -0,0 +1,9 @@
+import { Spin } from "antd";
+
+export function HydrateFallback() {
+  return (
+    <Spin spinning>
+      <div style={{ height: '100vh' }} />
+    </Spin>
+  );
+}
diff --git a/src/components/Layout/BaseLayout.tsx b/src/components/Layout/BaseLayout.tsx
new file mode 100644
index 0000000..1f797ea
--- /dev/null
+++ b/src/components/Layout/BaseLayout.tsx
@@ -0,0 +1,12 @@
+import { Outlet, useNavigation } from "react-router";
+import { HydrateFallback } from "../HydrateFallback";
+import { MenuButtons } from "../MenuButtons";
+
+export function Layout() {
+  const navigation = useNavigation();
+  const loading = navigation.state === 'loading';
+  return loading ? <HydrateFallback /> : (<>
+    <Outlet />
+    <MenuButtons />
+  </>);
+}
diff --git a/src/index.tsx b/src/index.tsx
index a0027e1..de4e010 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -61,7 +61,7 @@ const server = serve({
             lat: clubInfo.geo.lat,
             lon: clubInfo.geo.lng,
           } } : {}),
-          start: dayjs.tz(e.startDate, 'Asia/Tokyo').format('YYYY-MM-DD-HH-mm').split('-').map(v => Number(v)) as any,
+          start: ics.convertTimestampToArray(dayjs.tz(e.startDate, 'Asia/Tokyo').toDate().getTime(), 'local') ,
           duration: { hours: 6, minutes: 30 },
           title: e.title,
           // end: dayjs(event.startDate).add(6, 'h').add(30, 'minute').format('YYYY-MM-DD HH:mm'),
diff --git a/src/routes.tsx b/src/routes.tsx
index 9bcf1ec..f789c4d 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,6 +1,4 @@
-import { Spin } from "antd";
-import { createBrowserRouter, Outlet, useNavigation } from "react-router";
-import { MenuButtons } from "./components/MenuButtons";
+import { createBrowserRouter } from "react-router";
 import ProfilePage from "./page/ProfilePage";
 import EventPage from "./page/EventPage";
 import type { MatchInfo, XCXMember } from "./types";
@@ -10,23 +8,8 @@ import { UserCenter } from "./page/UserCenter";
 import { CallbackPage } from "./page/Logto/Callback";
 import App from "./App";
 import { ClubEventsPage } from "./page/ClubEvents";
-
-function HydrateFallback() {
-  return (
-    <Spin spinning>
-      <div style={{ height: '100vh' }} />
-    </Spin>
-  );
-}
-
-function Layout() {
-  const navigation = useNavigation();
-  const loading = navigation.state === 'loading';
-  return loading ? <HydrateFallback /> : (<>
-    <Outlet />
-    <MenuButtons />
-  </>);
-}
+import { HydrateFallback } from "./components/HydrateFallback";
+import { Layout } from "./components/Layout/BaseLayout";
 
 export const route = createBrowserRouter([
   {