diff --git a/README.md b/README.md
index 03da92c0..8033a710 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # Sekai Viewer
+![alt text](public/images/thumbnail.jpg)
 
 ![GitHub Repo stars](https://img.shields.io/github/stars/Sekai-World/sekai-viewer?style=social)
 ![GitHub forks](https://img.shields.io/github/forks/Sekai-World/sekai-viewer?style=social)
@@ -11,6 +12,12 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Available Scripts
 
+To get started, use
+
+### `pnpm i`
+
+to install packages
+
 In the project directory, you can run:
 
 ### `npm start`
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index ba7d9f49..39a3e92e 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -103,6 +103,9 @@ const HomeView = lazy(() => import("./Home"));
 const MusicList = lazy(() => import("./music/MusicList"));
 const GachaList = lazy(() => import("./gacha/GachaList"));
 const EventList = lazy(() => import("./event/EventList"));
+const FutureGachaList = lazy(() => import("./future/FutureGachaList"));
+const FutureEventList = lazy(() => import("./future/FutureEventList"));
+const FutureEventDetail = lazy(() => import("./future/FutureEventDetail"));
 const GachaDetail = lazy(() => import("./gacha/GachaDetail"));
 const CardDetail = lazy(() => import("./card/CardDetail"));
 const MusicDetail = lazy(() => import("./music/MusicDetail"));
@@ -391,7 +394,9 @@ const DrawerContent: React.FC<{
   onFoldButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({ open, onFoldButtonClick }) => {
   const { t } = useTranslation();
-
+  const {
+    settings: { isShowSpoiler },
+  } = useRootStore();
   const leftBtns: IListItemLinkProps[][] = React.useMemo(
     () => [
       [
@@ -441,6 +446,24 @@ const DrawerContent: React.FC<{
           text: t("common:gacha"),
           to: "/gacha",
         },
+        {
+          children: [
+            {
+              disabled: false,
+              text: t("common:futureevent"),
+              to: "/futureevent",
+            },
+            {
+              disabled: false,
+              text: t("common:futuregacha"),
+              to: "/futuregacha",
+            },
+          ],
+          disabled: !isShowSpoiler,
+          icon: <CalendarText></CalendarText>,
+          text: t("common:futures"),
+          to: "/futureevent",
+        },
         {
           disabled: false,
           icon: <CalendarText></CalendarText>,
@@ -1140,6 +1163,15 @@ const AppInner = observer((props: { theme: Theme }) => {
               <Route path="/gacha/:gachaId">
                 <GachaDetail />
               </Route>
+              <Route path="/futuregacha" exact>
+                <FutureGachaList />
+              </Route>
+              <Route path="/futureevent" exact>
+                <FutureEventList />
+              </Route>
+              <Route path="/futureevent/:eventId">
+                <FutureEventDetail />
+              </Route>
               <Route path="/event" exact>
                 <EventList />
               </Route>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 352109da..2b6dded1 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -336,6 +336,19 @@ const Home: React.FC = () => {
                 </Grid>
               </LinkNoDecoration>
             </Grid>
+            <Grid item>
+              <LinkNoDecoration
+                to="/futuregacha"
+                style={{ color: theme.palette.primary.main }}
+              >
+                <Grid container direction="row" alignContent="center">
+                  <Grid item>
+                    <MoveToInbox fontSize="small"></MoveToInbox>
+                  </Grid>
+                  <Grid item>{t("common:futuregacha")}</Grid>
+                </Grid>
+              </LinkNoDecoration>
+            </Grid>
             <Grid item>
               <LinkNoDecoration
                 to="/gacha"
@@ -349,6 +362,19 @@ const Home: React.FC = () => {
                 </Grid>
               </LinkNoDecoration>
             </Grid>
+            <Grid item>
+              <LinkNoDecoration
+                to="/futureevent"
+                style={{ color: theme.palette.primary.main }}
+              >
+                <Grid container direction="row" alignContent="center">
+                  <Grid item>
+                    <MoveToInbox fontSize="small"></MoveToInbox>
+                  </Grid>
+                  <Grid item>{t("common:futureevent")}</Grid>
+                </Grid>
+              </LinkNoDecoration>
+            </Grid>
             <Grid item>
               <LinkNoDecoration
                 to="/event"
diff --git a/src/pages/future/FutureEventDetail.tsx b/src/pages/future/FutureEventDetail.tsx
new file mode 100644
index 00000000..07bcf701
--- /dev/null
+++ b/src/pages/future/FutureEventDetail.tsx
@@ -0,0 +1,1082 @@
+import {
+  Divider,
+  Grid,
+  LinearProgress,
+  Paper,
+  Tab,
+  Tabs,
+  Typography,
+  Box,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Button,
+} from "@mui/material";
+import { TabContext } from "@mui/lab";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import Viewer from "react-viewer";
+import { ImageDecorator } from "react-viewer/lib/ViewerProps";
+import {
+  ICardInfo,
+  ICheerfulCarnivalSummary,
+  ICheerfulCarnivalTeam,
+  IEventCard,
+  IEventDeckBonus,
+  IEventInfo,
+  IEventMusic,
+  IGameCharaUnit,
+  IVirtualLiveInfo,
+  ServerRegion,
+} from "../../types";
+import { getRemoteAssetURL, useCachedData } from "../../utils";
+import { attrIconMap, charaIcons } from "../../utils/resources";
+import { useAssetI18n } from "../../utils/i18n";
+import { useDurationI18n } from "../../utils/i18nDuration";
+import { ContentTrans } from "../../components/helpers/ContentTrans";
+import { CardThumb } from "../../components/widgets/CardThumb";
+// import DegreeImage from "../../components/widgets/DegreeImage";
+import ResourceBox from "../../components/widgets/ResourceBox";
+import { OpenInNew } from "@mui/icons-material";
+import AudioPlayer from "../music/AudioPlayer";
+import AgendaView from "../virtual_live/AgendaView";
+// import AdSense from "../../components/blocks/AdSense";
+import Image from "mui-image";
+import { useStrapi } from "../../utils/apiClient";
+import CommentTextMultiple from "~icons/mdi/comment-text-multiple";
+import Comment from "../comment/Comment";
+import CheerfulCarnivalTeamIcon from "../../components/widgets/CheerfulCarnivalTeamIcon";
+import { observer } from "mobx-react-lite";
+import { useRootStore } from "../../stores/root";
+import TypographyHeader from "../../components/styled/TypographyHeader";
+import ContainerContent from "../../components/styled/ContainerContent";
+import TabPanelPadding from "../../components/styled/TabPanelPadding";
+import GridOut from "../../components/styled/GridOut";
+import LinkNoDecoration from "../../components/styled/LinkNoDecoration";
+
+const EventDetail: React.FC<unknown> = observer(() => {
+  const { t } = useTranslation();
+  const { eventId } = useParams<{ eventId: string }>();
+  const { getTranslated } = useAssetI18n();
+  const {
+    settings: { contentTransMode },
+    region,
+  } = useRootStore();
+  const [humanizeDuration] = useDurationI18n();
+  const { getEvent } = useStrapi();
+  const [events] = useCachedData<IEventInfo>("events", "jp" as ServerRegion);
+  const [eventDeckBonuses] = useCachedData<IEventDeckBonus>("eventDeckBonuses");
+  const [gameCharacterUnits] =
+    useCachedData<IGameCharaUnit>("gameCharacterUnits");
+  const [eventCardsCache] = useCachedData<IEventCard>("eventCards");
+  const [cards] = useCachedData<ICardInfo>("cards");
+  const [virtualLives] = useCachedData<IVirtualLiveInfo>("virtualLives");
+  const [cheerfulCarnivalSummaries] = useCachedData<ICheerfulCarnivalSummary>(
+    "cheerfulCarnivalSummaries"
+  );
+  const [cheerfulCarnivalTeams] = useCachedData<ICheerfulCarnivalTeam>(
+    "cheerfulCarnivalTeams"
+  );
+  const [eventMusics] = useCachedData<IEventMusic>("eventMusics");
+
+  const [event, setEvent] = useState<IEventInfo>();
+  const [eventCards, setEventCards] = useState<IEventCard[]>([]);
+  const [boostCards, setBoostCards] = useState<
+    { card: ICardInfo; minBonus: number; maxBonus: number }[]
+  >([]);
+  const [eventDeckBonus, setEventDeckBonus] = useState<IEventDeckBonus[]>([]);
+  const [eventAttrBonus, setEventAttrBonus] = useState<IEventDeckBonus>();
+  const [eventBonusCharas, setEventBonusCharas] = useState<IGameCharaUnit[]>(
+    []
+  );
+  const [imgTabVal, setImgTabVal] = useState<string>("0");
+  // const [intervalId, setIntervalId] = useState<number>();
+  // const [nextRefreshTime, setNextRefreshTime] = useState<moment.Moment>();
+  const [remainingTime, setRemainingTime] = useState<string>("");
+  const [pastTimePercent, setPastTimePercent] = useState<number>(0);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [activeIdx, setActiveIdx] = useState<number>(0);
+  const [eventBgm, setEventBgm] = useState<string>("");
+  const [linkedVirtualLive, setLinkedVirtualLive] =
+    useState<IVirtualLiveInfo>();
+  const [ccTeams, setCcTeams] = useState<ICheerfulCarnivalTeam[]>([]);
+  const [ccSummary, setCcSummary] = useState<ICheerfulCarnivalSummary>();
+  const [eventCommentId, setEventCommentId] = useState<number>(0);
+  const [eventMusic, setEventMusic] = useState<IEventMusic>();
+  const [isCardsDialog, setIsCardsDialog] = useState(false);
+
+  useEffect(() => {
+    if (event) {
+      const name = getTranslated(`event_name:${eventId}`, event.name);
+      document.title = t("title:eventDetail", {
+        name,
+      });
+      getRemoteAssetURL(
+        `${event.bgmAssetbundleName.replace("bgm", "bgm_rip")}.mp3`,
+        setEventBgm
+      );
+    }
+  }, [event, eventId, contentTransMode, getTranslated, t]);
+
+  useEffect(() => {
+    if (
+      events &&
+      eventDeckBonuses &&
+      eventCardsCache &&
+      cards &&
+      gameCharacterUnits &&
+      virtualLives
+    ) {
+      const ev = events.find((elem) => elem.id === Number(eventId));
+      setEvent(ev);
+      const edb = eventDeckBonuses.filter(
+        (elem) => elem.eventId === Number(eventId)
+      );
+      setEventDeckBonus(edb);
+      const eab = edb.find((it) => it.gameCharacterUnitId === undefined);
+      setEventAttrBonus(eab);
+      const ec = eventCardsCache.filter(
+        (elem) => elem.eventId === Number(eventId)
+      );
+      setEventCards(ec);
+      const ebc = edb
+        .filter((it) =>
+          ev?.eventType !== "world_bloom"
+            ? it.cardAttr !== undefined && it.gameCharacterUnitId !== undefined
+            : it.gameCharacterUnitId !== undefined
+        )
+        .map(
+          (elem) =>
+            gameCharacterUnits.find(
+              (gcu) => gcu.id === elem.gameCharacterUnitId
+            )!
+        );
+      setEventBonusCharas(ebc);
+      const masterRankBonus = {
+        rarity_1: [0, 0.5, 0.5],
+        rarity_2: [0, 1, 1],
+        rarity_3: [0, 5, 5],
+        rarity_4: [0, 10, 15],
+        rarity_birthday: [0, 7.5, 10],
+      } as Record<string, number[]>;
+      const masterRankBonusIndex =
+        Number(eventId) >= 36 ? (Number(eventId) >= 54 ? 2 : 1) : 0;
+      setBoostCards(() => {
+        let result = cards
+          .filter(
+            (elem) =>
+              (elem.releaseAt ?? elem.archivePublishedAt ?? 0) <=
+              ev!.aggregateAt
+          )
+          .map((card) => {
+            const eventCard = ec.find(
+              (it) => it.cardId === card.id && it.bonusRate !== undefined
+            );
+            let finalEventBonus =
+              eventCard === undefined ? 0 : eventCard.bonusRate!;
+
+            finalEventBonus += edb.reduce((v, deckBonus) => {
+              if (
+                deckBonus.cardAttr !== undefined &&
+                deckBonus.cardAttr !== card.attr
+              ) {
+                return v;
+              }
+
+              if (deckBonus.gameCharacterUnitId !== undefined) {
+                const gameCharacterUnit = gameCharacterUnits.find(
+                  (it) => it.id === deckBonus.gameCharacterUnitId
+                )!;
+                if (gameCharacterUnit.gameCharacterId !== card.characterId) {
+                  return v;
+                }
+                if (
+                  gameCharacterUnit.gameCharacterId >= 21 &&
+                  gameCharacterUnit.unit !== card.supportUnit
+                ) {
+                  if (card.supportUnit !== "none") {
+                    return v;
+                  }
+                  return Math.max(
+                    v,
+                    gameCharacterUnit.unit === "piapro"
+                      ? deckBonus.bonusRate
+                      : deckBonus.bonusRate - 10
+                  );
+                }
+              }
+              return Math.max(v, deckBonus.bonusRate);
+            }, 0);
+
+            let maxBonus = finalEventBonus;
+            if (card.cardRarityType !== undefined) {
+              maxBonus +=
+                masterRankBonus[card.cardRarityType][masterRankBonusIndex];
+            }
+
+            return {
+              card: card,
+              maxBonus: maxBonus,
+              minBonus: finalEventBonus,
+            };
+          })
+          .filter((it) => it.minBonus >= 40);
+
+        if (result.length) {
+          const sortKey = "cardRarityType";
+          result = result.sort((a, b) => {
+            if (a.minBonus > b.minBonus) return -1;
+            if (a.minBonus < b.minBonus) return 1;
+
+            if (a.maxBonus > b.maxBonus) return -1;
+            if (a.maxBonus < b.maxBonus) return 1;
+
+            if (a.card[sortKey]! > b.card[sortKey]!) return -1;
+            if (a.card[sortKey]! < b.card[sortKey]!) return 1;
+
+            return 0;
+          });
+        }
+        return result;
+      });
+      setLinkedVirtualLive(
+        virtualLives.find((elem) => elem.id === ev?.virtualLiveId)
+      );
+    }
+  }, [
+    events,
+    eventId,
+    eventDeckBonuses,
+    eventCardsCache,
+    cards,
+    gameCharacterUnits,
+    virtualLives,
+  ]);
+
+  useEffect(() => {
+    if (event && eventMusics) {
+      setEventMusic(eventMusics.find((em) => em.eventId === event.id));
+    }
+  }, [event, eventMusics]);
+
+  useEffect(() => {
+    if (event) {
+      const job = async () => {
+        const eventStrapi = await getEvent(event.id);
+        if (eventStrapi) {
+          setEventCommentId(eventStrapi.id);
+        }
+      };
+
+      job();
+    }
+  }, [event, getEvent]);
+
+  useEffect(() => {
+    if (
+      event &&
+      event.eventType === "cheerful_carnival" &&
+      cheerfulCarnivalSummaries &&
+      cheerfulCarnivalTeams
+    ) {
+      setCcTeams(
+        cheerfulCarnivalTeams.filter((cct) => cct.eventId === event.id)
+      );
+      setCcSummary(
+        cheerfulCarnivalSummaries.find((ccs) => ccs.eventId === event.id)
+      );
+    }
+  }, [cheerfulCarnivalSummaries, cheerfulCarnivalTeams, event]);
+
+  useEffect(() => {
+    if (!event) {
+      return;
+    }
+
+    let interval: number | undefined;
+
+    const update = () => {
+      if (Date.now() > event.aggregateAt) {
+        // event already ended
+        if (interval) {
+          window.clearInterval(interval);
+          interval = undefined;
+        }
+        setRemainingTime(t("event:alreadyEnded"));
+        setPastTimePercent(100);
+        return false;
+      } else if (Date.now() < event.startAt) {
+        if (interval) {
+          window.clearInterval(interval);
+          interval = undefined;
+        }
+        setRemainingTime(t("event:notStarted"));
+        setPastTimePercent(0);
+        return false;
+      }
+
+      const progressPercent =
+        ((Date.now() - event.startAt) / (event.aggregateAt - event.startAt)) *
+        100;
+
+      setRemainingTime(
+        `${humanizeDuration(event.aggregateAt - Date.now(), {
+          round: true,
+          units: ["d", "h", "m"],
+        })} (${progressPercent.toFixed(1)}%)`
+      );
+
+      setPastTimePercent(progressPercent);
+      return true;
+    };
+
+    if (!update()) {
+      // event already ended
+      return;
+    }
+
+    interval = window.setInterval(update, 60000);
+
+    return () => {
+      if (interval) {
+        window.clearInterval(interval);
+        interval = undefined;
+      }
+    };
+  }, [event, t, humanizeDuration]);
+
+  const [eventLogo, setEventLogo] = useState<string>("");
+  const [eventBanner, setEventBanner] = useState<string>("");
+  const [eventBackground, setEventBackground] = useState<string>("");
+  const [eventCharacter, setEventCharacter] = useState<string>("");
+  // const [ccTeam1Logo, setCcTeam1Logo] = useState<string>("");
+  // const [ccTeam2Logo, setCcTeam2Logo] = useState<string>("");
+
+  useEffect(() => {
+    if (event) {
+      getRemoteAssetURL(
+        `event/${event.assetbundleName}/logo_rip/logo.webp`,
+        setEventLogo,
+        "minio",
+        region
+      );
+      getRemoteAssetURL(
+        `home/banner/${event.assetbundleName}_rip/${event.assetbundleName}.webp`,
+        setEventBanner,
+        "minio",
+        region
+      );
+      getRemoteAssetURL(
+        `event/${event.assetbundleName}/screen_rip/bg.webp`,
+        setEventBackground,
+        "minio",
+        region
+      );
+      getRemoteAssetURL(
+        `event/${event.assetbundleName}/screen_rip/character.webp`,
+        setEventCharacter,
+        "minio",
+        region
+      );
+    }
+  }, [event, region]);
+
+  // useEffect(() => {
+  //   if (event && ccTeams.length) {
+  //     getRemoteAssetURL(
+  //       `event/${event.assetbundleName}/team_image_rip/${ccTeams[0].assetbundleName}.webp`,
+  //       setCcTeam1Logo,
+  //       window.isChinaMainland
+  //     );
+  //     getRemoteAssetURL(
+  //       `event/${event.assetbundleName}/team_image_rip/${ccTeams[1].assetbundleName}.webp`,
+  //       setCcTeam2Logo,
+  //       window.isChinaMainland
+  //     );
+  //   }
+  // }, [ccTeams, cheerfulCarnivalSummaries, cheerfulCarnivalTeams, event]);
+
+  const getEventImages: () => ImageDecorator[] = useCallback(
+    () =>
+      eventBackground && eventCharacter
+        ? [
+            {
+              alt: "event background",
+              downloadUrl: eventBackground.replace(".webp", ".png"),
+              src: eventBackground,
+            },
+            {
+              alt: "event character",
+              downloadUrl: eventCharacter.replace(".webp", ".png"),
+              src: eventCharacter,
+            },
+          ]
+        : [],
+    [eventBackground, eventCharacter]
+  );
+
+  return event &&
+    eventDeckBonus.length &&
+    gameCharacterUnits &&
+    gameCharacterUnits.length &&
+    eventCards.length ? (
+    <Fragment>
+      <TypographyHeader>
+        {getTranslated(`event_name:${eventId}`, event.name)}
+      </TypographyHeader>
+      <ContainerContent maxWidth="md">
+        <TabContext value={imgTabVal}>
+          <Paper>
+            <Tabs
+              value={imgTabVal}
+              onChange={(_, v) => setImgTabVal(v)}
+              variant="scrollable"
+              scrollButtons
+            >
+              <Tab value="0" label={t("event:tab.title[0]")}></Tab>
+              <Tab value="1" label={t("event:tab.title[1]")}></Tab>
+              <Tab value="2" label={t("event:tab.title[2]")}></Tab>
+            </Tabs>
+            <TabPanelPadding value="0">
+              <Grid container direction="row">
+                <Grid item xs={12} md={6}>
+                  <Image
+                    // className={classes.bannerImg}
+                    src={eventLogo}
+                    alt="logo"
+                    // aspectRatio={16 / 7}
+                    bgColor=""
+                    fit="contain"
+                  />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                  <Image
+                    // className={classes.bannerImg}
+                    src={eventBanner}
+                    alt="banner"
+                    // aspectRatio={16 / 7}
+                    bgColor=""
+                    fit="contain"
+                  ></Image>
+                </Grid>
+              </Grid>
+            </TabPanelPadding>
+            <TabPanelPadding value="1">
+              <div
+                onClick={() => {
+                  setActiveIdx(0);
+                  setVisible(true);
+                }}
+              >
+                <Box
+                  component={Image}
+                  sx={{ cursor: "pointer" }}
+                  src={eventBackground}
+                  // aspectRatio={1.625}
+                  alt="background"
+                  bgColor=""
+                />
+              </div>
+            </TabPanelPadding>
+            <TabPanelPadding value="2">
+              <div
+                onClick={() => {
+                  setActiveIdx(1);
+                  setVisible(true);
+                }}
+              >
+                <Box
+                  component={Image}
+                  sx={{ cursor: "pointer" }}
+                  src={eventCharacter}
+                  // aspectRatio={1.625}
+                  alt="character"
+                  bgColor=""
+                />
+              </div>
+            </TabPanelPadding>
+          </Paper>
+        </TabContext>
+        <AudioPlayer
+          style={{ margin: "1% 0", width: "100%" }}
+          src={eventBgm}
+        ></AudioPlayer>
+        <GridOut container direction="column">
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:remainingTime")} ({t("event:progress")})
+            </Typography>
+            <Typography>{remainingTime}</Typography>
+          </Grid>
+          <LinearProgress variant="determinate" value={pastTimePercent} />
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("common:id")}
+            </Typography>
+            <Typography>{event.id}</Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item>
+              <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                {t("common:title")}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Grid container direction="column" spacing={1}>
+                <ContentTrans
+                  contentKey={`event_name:${eventId}`}
+                  original={event.name}
+                  originalProps={{ align: "right" }}
+                  translatedProps={{ align: "right" }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("common:type")}
+            </Typography>
+            <Typography>{t(`event:type.${event.eventType}`)}</Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          {Date.now() >= event.startAt && (
+            <Fragment>
+              <Grid
+                item
+                container
+                direction="row"
+                wrap="nowrap"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Grid item xs={8}>
+                  <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                    {t("common:eventTracker")}
+                  </Typography>
+                </Grid>
+                <Grid item container justifyContent="flex-end">
+                  <LinkNoDecoration to={`/eventtracker?id=${eventId}`}>
+                    <Grid container alignItems="center">
+                      <OpenInNew />
+                    </Grid>
+                  </LinkNoDecoration>
+                </Grid>
+              </Grid>
+              <Divider style={{ margin: "1% 0" }} />
+            </Fragment>
+          )}
+          <Grid
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item xs={8}>
+              <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                {t("common:storyReader")}
+              </Typography>
+            </Grid>
+            <Grid item container justifyContent="flex-end">
+              <LinkNoDecoration to={`/storyreader/eventStory/${event.id}`}>
+                <Grid container alignItems="center">
+                  <OpenInNew />
+                </Grid>
+              </LinkNoDecoration>
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          {!!eventMusic && (
+            <Fragment>
+              <Grid
+                container
+                direction="row"
+                wrap="nowrap"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Grid item xs={8}>
+                  <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                    {t("event:newlyWrittenSong")}
+                  </Typography>
+                </Grid>
+                <Grid item container justifyContent="flex-end">
+                  <LinkNoDecoration to={`/music/${eventMusic.musicId}`}>
+                    <Grid container alignItems="center">
+                      <OpenInNew />
+                    </Grid>
+                  </LinkNoDecoration>
+                </Grid>
+              </Grid>
+              <Divider style={{ margin: "1% 0" }} />
+            </Fragment>
+          )}
+        </GridOut>
+      </ContainerContent>
+      <TypographyHeader>{t("event:title.boost")}</TypographyHeader>
+      <ContainerContent maxWidth="md">
+        <GridOut container direction="column">
+          {!!eventAttrBonus && (
+            <Grid
+              item
+              container
+              direction="row"
+              wrap="nowrap"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Grid item xs={5}>
+                <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                  {t("event:boostAttribute")}
+                </Typography>
+              </Grid>
+              <Grid item xs={5} sm={6}>
+                <Grid
+                  spacing={1}
+                  container
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <Grid item xs={6} sm={10}>
+                    <Grid container spacing={1} justifyContent="flex-end">
+                      <Grid item>
+                        <img
+                          style={{ maxHeight: "36px" }}
+                          src={attrIconMap[eventAttrBonus.cardAttr]}
+                          alt={eventAttrBonus.cardAttr}
+                        ></img>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  <Grid item xs={5} sm={2}>
+                    <Typography>+{eventAttrBonus.bonusRate}%</Typography>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          )}
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item xs={5}>
+              <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                {t("event:boostCharacters")}
+              </Typography>
+            </Grid>
+            <Grid item xs={5} sm={6}>
+              <Grid
+                container
+                spacing={1}
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <Grid item xs={6} sm={10}>
+                  <Grid container spacing={1} justifyContent="flex-end">
+                    {eventBonusCharas.map((chara, idx) => (
+                      <Grid key={`chara-${idx}`} item>
+                        <img
+                          style={{ maxHeight: "36px" }}
+                          src={charaIcons[`CharaIcon${chara.gameCharacterId}`]}
+                          alt={`character ${chara.gameCharacterId}`}
+                        ></img>
+                      </Grid>
+                    ))}
+                  </Grid>
+                </Grid>
+                <Grid item xs={5} sm={2}>
+                  <Typography>
+                    +
+                    {eventDeckBonus
+                      .filter(
+                        (it) =>
+                          it.cardAttr === undefined &&
+                          it.gameCharacterUnitId !== undefined
+                      )
+                      .reduce((v, it) => Math.max(v, it.bonusRate), 0)}
+                    %
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item xs={3}>
+              <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                {t("event:boostCards")}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Button
+                onClick={() => {
+                  setIsCardsDialog(true);
+                }}
+                variant="contained"
+              >
+                {t("common:show")}
+              </Button>
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+        </GridOut>
+      </ContainerContent>
+      <TypographyHeader>{t("common:card")}</TypographyHeader>
+      <ContainerContent maxWidth="md">
+        <GridOut container direction="column">
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Grid item xs={3}>
+              <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                {t("event:eventCards")}
+              </Typography>
+            </Grid>
+            <Grid
+              item
+              xs={8}
+              sm={7}
+              md={6}
+              container
+              justifyContent="flex-end"
+              spacing={2}
+            >
+              {eventCards.map((card) => (
+                <Grid key={card.cardId} item xs={5} md={4} lg={3}>
+                  <Link to={`/card/${card.cardId}`}>
+                    <CardThumb cardId={card.cardId} />
+                  </Link>
+                </Grid>
+              ))}
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+        </GridOut>
+      </ContainerContent>
+      {event.eventType === "cheerful_carnival" &&
+        !!ccTeams.length &&
+        ccSummary && (
+          <Fragment>
+            <TypographyHeader>
+              {t("event:title.cheerful_carnival")}
+            </TypographyHeader>
+            <ContainerContent maxWidth="md">
+              <ContentTrans
+                contentKey={`cheerful_carnival_themes:${ccSummary.id}`}
+                original={ccSummary.theme}
+                originalProps={{ align: "center", variant: "h6" }}
+                translatedProps={{ align: "center", variant: "h6" }}
+              />
+              <GridOut container spacing={1} justifyContent="space-around">
+                <Grid item xs={5} md={3} lg={2}>
+                  <CheerfulCarnivalTeamIcon
+                    eventId={event.id}
+                    teamId={ccTeams[0].id}
+                  />
+                  <ContentTrans
+                    contentKey={`cheerful_carnival_teams:${ccTeams[0].id}`}
+                    original={ccTeams[0].teamName}
+                    originalProps={{ align: "center" }}
+                    translatedProps={{ align: "center" }}
+                  />
+                </Grid>
+                <Grid item xs={5} md={3} lg={2}>
+                  <CheerfulCarnivalTeamIcon
+                    eventId={event.id}
+                    teamId={ccTeams[1].id}
+                  />
+                  <ContentTrans
+                    contentKey={`cheerful_carnival_teams:${ccTeams[1].id}`}
+                    original={ccTeams[1].teamName}
+                    originalProps={{ align: "center" }}
+                    translatedProps={{ align: "center" }}
+                  />
+                </Grid>
+              </GridOut>
+              <GridOut container direction="column">
+                <Grid
+                  item
+                  container
+                  direction="row"
+                  wrap="nowrap"
+                  justifyContent="space-between"
+                  alignItems="center"
+                >
+                  <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                    {t("event:cheerful_carnival_midterm_1")}
+                  </Typography>
+                  <Typography align="right">
+                    {new Date(ccSummary.midtermAnnounce1At).toLocaleString()}
+                  </Typography>
+                </Grid>
+                <Divider style={{ margin: "1% 0" }} />
+                <Grid
+                  item
+                  container
+                  direction="row"
+                  wrap="nowrap"
+                  justifyContent="space-between"
+                  alignItems="center"
+                >
+                  <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+                    {t("event:cheerful_carnival_midterm_2")}
+                  </Typography>
+                  <Typography align="right">
+                    {new Date(ccSummary.midtermAnnounce2At).toLocaleString()}
+                  </Typography>
+                </Grid>
+                <Divider style={{ margin: "1% 0" }} />
+              </GridOut>
+            </ContainerContent>
+          </Fragment>
+        )}
+      <TypographyHeader>{t("event:title.timepoint")}</TypographyHeader>
+      <ContainerContent maxWidth="md">
+        <GridOut container direction="column">
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:startAt")}
+            </Typography>
+            <Typography align="right">
+              {new Date(event.startAt).toLocaleString()}
+            </Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:closeAt")}
+            </Typography>
+            <Typography align="right">
+              {new Date(event.aggregateAt).toLocaleString()}
+            </Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:endAt")}
+            </Typography>
+            <Typography align="right">
+              {new Date(event.closedAt).toLocaleString()}
+            </Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:rankingAnnounceAt")}
+            </Typography>
+            <Typography align="right">
+              {new Date(event.rankingAnnounceAt).toLocaleString()}
+            </Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1" style={{ fontWeight: 600 }}>
+              {t("event:distributionStartAt")}
+            </Typography>
+            <Typography align="right">
+              {new Date(event.distributionStartAt).toLocaleString()}
+            </Typography>
+          </Grid>
+          <Divider style={{ margin: "1% 0" }} />
+        </GridOut>
+      </ContainerContent>
+      {/* <AdSense
+        client="ca-pub-7767752375383260"
+        slot="8221864477"
+        format="auto"
+        responsive="true"
+      /> */}
+      {!!linkedVirtualLive && (
+        <Fragment>
+          <TypographyHeader>{t("common:virtualLive")}</TypographyHeader>
+          <ContainerContent maxWidth="md">
+            <AgendaView data={linkedVirtualLive} />
+          </ContainerContent>
+        </Fragment>
+      )}
+      <TypographyHeader>{t("event:title.rankingRewards")}</TypographyHeader>
+      <ContainerContent
+        maxWidth="md"
+        style={{ maxHeight: 400, overflow: "auto" }}
+      >
+        <GridOut container direction="column">
+          {event.eventRankingRewardRanges.map((rankingReward) => (
+            <Fragment key={rankingReward.id}>
+              <Grid
+                item
+                container
+                direction="row"
+                wrap="nowrap"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Grid item xs={4}>
+                  <Typography>
+                    {t("event:rankingReward.start")}: {rankingReward.fromRank}
+                  </Typography>
+                  <Typography>
+                    {t("event:rankingReward.end")}: {rankingReward.toRank}
+                  </Typography>
+                </Grid>
+                <Grid item xs={8} container spacing={1} alignItems="center">
+                  <Grid item xs={12}>
+                    <ResourceBox
+                      resourceBoxId={
+                        rankingReward.eventRankingRewards[0].resourceBoxId
+                      }
+                      resourceBoxPurpose="event_ranking_reward"
+                      justifyContent="center"
+                    />
+                  </Grid>
+                </Grid>
+              </Grid>
+              <Divider style={{ margin: "1% 0" }} />
+            </Fragment>
+          ))}
+        </GridOut>
+      </ContainerContent>
+      {!!eventCommentId && (
+        <Fragment>
+          <TypographyHeader>
+            {t("common:comment")} <CommentTextMultiple />
+          </TypographyHeader>
+          <ContainerContent maxWidth="md">
+            <Comment contentType="event" contentId={eventCommentId} />
+          </ContainerContent>
+        </Fragment>
+      )}
+      <Viewer
+        visible={visible}
+        onClose={() => setVisible(false)}
+        images={getEventImages()}
+        zIndex={2000}
+        activeIndex={activeIdx}
+        downloadable
+        downloadInNewWindow
+        onMaskClick={() => setVisible(false)}
+        zoomSpeed={0.25}
+        onChange={(_, idx) => setActiveIdx(idx)}
+      />
+      <Dialog
+        open={isCardsDialog}
+        onClose={() => {
+          setIsCardsDialog(false);
+        }}
+        fullWidth
+      >
+        <DialogTitle>{t("event:boostCards")}</DialogTitle>
+        <DialogContent>
+          <Grid container spacing={1}>
+            {boostCards.map((card) => (
+              <Grid key={card.card.id} item xs={4} md={2}>
+                <LinkNoDecoration to={"/card/" + card.card.id} target="_blank">
+                  <Grid container direction="column">
+                    <CardThumb cardId={card.card.id} />
+                    <Typography
+                      align="center"
+                      style={{ whiteSpace: "pre-line" }}
+                    >
+                      +{card.minBonus}
+                      {card.maxBonus > card.minBonus ? `~${card.maxBonus}` : ""}
+                      %
+                    </Typography>
+                  </Grid>
+                </LinkNoDecoration>
+              </Grid>
+            ))}
+          </Grid>
+        </DialogContent>
+      </Dialog>
+    </Fragment>
+  ) : (
+    <div>
+      Loading... If you saw this for a while, event {eventId} does not exist.
+    </div>
+  );
+});
+
+export default EventDetail;
diff --git a/src/pages/future/FutureEventGridView.tsx b/src/pages/future/FutureEventGridView.tsx
new file mode 100644
index 00000000..59b5e46d
--- /dev/null
+++ b/src/pages/future/FutureEventGridView.tsx
@@ -0,0 +1,101 @@
+import { Card, CardContent, Typography, Grid } from "@mui/material";
+import { Skeleton } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useRouteMatch } from "react-router-dom";
+import { IEventInfo, ServerRegion } from "../../types";
+import { getRemoteAssetURL } from "../../utils";
+import { useAssetI18n } from "../../utils/i18n";
+import { ContentTrans } from "../../components/helpers/ContentTrans";
+import SpoilerTag from "../../components/widgets/SpoilerTag";
+import { observer } from "mobx-react-lite";
+import CardMediaCardImg from "../../components/styled/CardMediaCardImg";
+
+const GridView: React.FC<{ data?: IEventInfo }> = observer(({ data }) => {
+  const { t } = useTranslation();
+  const { getTranslated } = useAssetI18n();
+  const { path } = useRouteMatch();
+
+  const [eventLogo, setEventLogo] = useState<string>("");
+
+  useEffect(() => {
+    if (data) {
+      getRemoteAssetURL(
+        `event/${data.assetbundleName}/logo_rip/logo.webp`,
+        setEventLogo,
+        "minio",
+        "jp" as ServerRegion
+      );
+    }
+  }, [data]);
+
+  if (!data) {
+    // loading
+    return (
+      <Card>
+        <Skeleton
+          variant="rectangular"
+          sx={{
+            backgroundSize: "contain",
+            paddingTop: "56.25%",
+            position: "relative",
+          }}
+        ></Skeleton>
+        <CardContent>
+          <Typography variant="subtitle1">
+            <Skeleton variant="text" width="90%"></Skeleton>
+          </Typography>
+          <Typography variant="body2">
+            <Skeleton variant="text" width="40%"></Skeleton>
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+  return (
+    <Link to={path + "/" + data.id} style={{ textDecoration: "none" }}>
+      <Card sx={{ cursor: "pointer" }}>
+        <CardMediaCardImg
+          sx={{ backgroundSize: "contain" }}
+          image={eventLogo}
+          title={getTranslated(`event_name:${data.id}`, data.name)}
+        >
+          <SpoilerTag
+            style={{
+              left: "1%",
+              position: "absolute",
+              top: "1%",
+            }}
+            releaseTime={new Date(data.startAt)}
+          />
+        </CardMediaCardImg>
+        <CardContent style={{ paddingBottom: "16px" }}>
+          <Grid container direction="column" spacing={1}>
+            <Grid item>
+              <ContentTrans
+                contentKey={`event_name:${data.id}`}
+                original={data.name}
+                originalProps={{
+                  variant: "subtitle1",
+                }}
+              />
+            </Grid>
+            <Grid item>
+              <Typography variant="body2" color="textSecondary">
+                {t(`event:type.${data.eventType}`)}
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                {new Date(data.startAt).toLocaleString()} ~
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                {new Date(data.aggregateAt).toLocaleString()}
+              </Typography>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+});
+
+export default GridView;
diff --git a/src/pages/future/FutureEventList.tsx b/src/pages/future/FutureEventList.tsx
new file mode 100644
index 00000000..450d2a48
--- /dev/null
+++ b/src/pages/future/FutureEventList.tsx
@@ -0,0 +1,274 @@
+import React, { Fragment, useEffect, useState, useCallback } from "react";
+import { IEventInfo } from "../../types";
+import { useLocalStorage, useToggle } from "../../utils";
+import InfiniteScroll from "../../components/helpers/InfiniteScroll";
+
+import { useTranslation } from "react-i18next";
+import GridView from "./FutureEventGridView";
+import { ServerRegion } from "../../types";
+import {
+  GetApp,
+  GetAppOutlined,
+  Publish,
+  PublishOutlined,
+  Update,
+  FilterAlt as Filter,
+  FilterAltOutlined as FilterOutlined,
+} from "@mui/icons-material";
+import {
+  Badge,
+  Collapse,
+  FormControl,
+  Grid,
+  TextField,
+  ToggleButtonGroup,
+  ToggleButton,
+} from "@mui/material";
+import Pound from "~icons/mdi/pound";
+import { useRootStore } from "../../stores/root";
+import { observer } from "mobx-react-lite";
+import TypographyHeader from "../../components/styled/TypographyHeader";
+import ContainerContent from "../../components/styled/ContainerContent";
+import { useDebounce } from "use-debounce";
+import PaperContainer from "../../components/styled/PaperContainer";
+import TypographyCaption from "../../components/styled/TypographyCaption";
+import { useCachedData } from "../../utils/index";
+
+type ViewGridType = "grid" | "agenda" | "comfy";
+
+function getPaginatedEvents(events: IEventInfo[], page: number, limit: number) {
+  return events.slice(limit * (page - 1), limit * page);
+}
+
+const ListCard: { [key: string]: React.FC<{ data?: IEventInfo }> } = {
+  grid: GridView,
+};
+
+const EventList: React.FC<unknown> = observer(() => {
+  const { t } = useTranslation();
+  const {
+    settings: { isShowSpoiler },
+  } = useRootStore();
+
+  const [events, setEvents] = useState<IEventInfo[]>([]);
+  const [eventsCache] = useCachedData<IEventInfo>(
+    "events",
+    "jp" as ServerRegion
+  );
+  const [viewGridType] = useState<ViewGridType>(
+    (localStorage.getItem("event-list-grid-view-type") ||
+      "grid") as ViewGridType
+  );
+  const [page, setPage] = useState<number>(1);
+  const [limit] = useState<number>(12);
+  const [lastQueryFin, setLastQueryFin] = useState<boolean>(true);
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [sortType, setSortType] = useLocalStorage<string>(
+    "event-list-update-sort",
+    "asc"
+  );
+  const [sortBy, setSortBy] = useLocalStorage<string>(
+    "event-list-filter-sort-by",
+    "startAt"
+  );
+  const [sortedCache, setSortedCache] = useState<IEventInfo[]>([]);
+  const [filterOpened, toggleFilterOpened] = useToggle(false);
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [debouncedSearchTitle] = useDebounce(searchTitle, 500);
+
+  useEffect(() => {
+    document.title = t("title:eventList");
+  }, [t]);
+
+  useEffect(() => {
+    setEvents((events) => [
+      ...events,
+      ...getPaginatedEvents(sortedCache, page, limit),
+    ]);
+    setLastQueryFin(true);
+  }, [page, limit, setLastQueryFin, sortedCache]);
+
+  useEffect(() => {
+    if (!eventsCache || !eventsCache.length) return;
+    let sortedCache = [...eventsCache];
+    if (isShowSpoiler) {
+      sortedCache = sortedCache.filter(
+        // gets the events starting a year prior, in milliseconds
+        (e) => e.startAt >= new Date().getTime() - 31556952000
+      );
+    }
+    if (sortType === "desc") {
+      sortedCache = sortedCache.sort(
+        (a, b) => b[sortBy as "startAt"] - a[sortBy as "startAt"]
+      );
+    } else if (sortType === "asc") {
+      sortedCache = sortedCache.sort(
+        (a, b) => a[sortBy as "startAt"] - b[sortBy as "startAt"]
+      );
+    }
+    if (debouncedSearchTitle) {
+      sortedCache = sortedCache.filter((e) =>
+        e.name.toLowerCase().includes(debouncedSearchTitle.toLowerCase())
+      );
+    }
+    setSortedCache(sortedCache);
+    setEvents([]);
+    setPage(0);
+  }, [
+    eventsCache,
+    setPage,
+    sortType,
+    sortBy,
+    isShowSpoiler,
+    debouncedSearchTitle,
+  ]);
+
+  useEffect(() => {
+    setIsReady(!!eventsCache?.length);
+  }, [eventsCache?.length]);
+
+  const callback = useCallback(
+    (
+      entries: readonly IntersectionObserverEntry[],
+      setHasMore: React.Dispatch<React.SetStateAction<boolean>>
+    ) => {
+      if (!isReady) return;
+      if (
+        entries[0].isIntersecting &&
+        lastQueryFin &&
+        (!sortedCache.length || sortedCache.length > page * limit)
+      ) {
+        setPage((page) => page + 1);
+        setLastQueryFin(false);
+      } else if (sortedCache.length && sortedCache.length <= page * limit) {
+        setHasMore(false);
+      }
+    },
+    [isReady, lastQueryFin, limit, page, sortedCache.length]
+  );
+
+  const handleUpdateSortType = useCallback(
+    (_: unknown, sort: string) => {
+      setSortType(sort || "asc");
+    },
+    [setSortType]
+  );
+
+  const handleUpdateSortBy = useCallback(
+    (_: unknown, sort: string) => {
+      setSortBy(sort || "id");
+    },
+    [setSortBy]
+  );
+
+  return (
+    <Fragment>
+      <TypographyHeader>{t("common: futureevent")}</TypographyHeader>
+      <ContainerContent>
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Grid container spacing={1} style={{ marginBottom: "0.5rem" }}>
+              <Grid item>
+                <ToggleButtonGroup
+                  value={sortType}
+                  color="primary"
+                  exclusive
+                  onChange={handleUpdateSortType}
+                >
+                  <ToggleButton value="asc">
+                    {sortType === "asc" ? <Publish /> : <PublishOutlined />}
+                  </ToggleButton>
+                  <ToggleButton value="desc">
+                    {sortType === "desc" ? <GetApp /> : <GetAppOutlined />}
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              </Grid>
+              <Grid item>
+                <ToggleButtonGroup
+                  size="medium"
+                  value={sortBy}
+                  color="primary"
+                  exclusive
+                  onChange={handleUpdateSortBy}
+                >
+                  <ToggleButton value="id">
+                    <Pound />
+                  </ToggleButton>
+                  <ToggleButton value="startAt">
+                    <Update />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Badge color="secondary" variant="dot" invisible={!searchTitle}>
+              <ToggleButton
+                value=""
+                color="primary"
+                selected={filterOpened}
+                onClick={() => toggleFilterOpened()}
+              >
+                {filterOpened ? <Filter /> : <FilterOutlined />}
+              </ToggleButton>
+            </Badge>
+          </Grid>
+        </Grid>
+        <Collapse in={filterOpened}>
+          <PaperContainer>
+            <Grid container direction="column" spacing={2}>
+              <Grid
+                item
+                container
+                xs={12}
+                alignItems="center"
+                justifyContent="space-between"
+                spacing={1}
+              >
+                <Grid item xs={12} md={1}>
+                  <TypographyCaption>{t("common:title")}</TypographyCaption>
+                </Grid>
+                <Grid item xs={12} md={11}>
+                  <FormControl size="small">
+                    <TextField
+                      size="small"
+                      fullWidth
+                      value={searchTitle}
+                      onChange={(e) => setSearchTitle(e.target.value)}
+                      sx={{ minWidth: "200px" }}
+                    />
+                  </FormControl>
+                </Grid>
+              </Grid>
+            </Grid>
+          </PaperContainer>
+        </Collapse>
+        <InfiniteScroll<IEventInfo>
+          ViewComponent={ListCard[viewGridType]}
+          callback={callback}
+          data={events}
+          gridSize={
+            (
+              {
+                grid: {
+                  xs: 12,
+                  sm: 6,
+                  md: 4,
+                  lg: 3,
+                },
+                agenda: {
+                  xs: 12,
+                },
+                comfy: {
+                  xs: 12,
+                },
+              } as const
+            )[viewGridType]
+          }
+        />
+      </ContainerContent>
+    </Fragment>
+  );
+});
+
+export default EventList;
diff --git a/src/pages/future/FutureGachaGridView.tsx b/src/pages/future/FutureGachaGridView.tsx
new file mode 100644
index 00000000..14004cfa
--- /dev/null
+++ b/src/pages/future/FutureGachaGridView.tsx
@@ -0,0 +1,100 @@
+import { Card, CardContent, Typography } from "@mui/material";
+import { Skeleton } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { IGachaInfo, ServerRegion } from "../../types";
+import { getRemoteAssetURL } from "../../utils";
+import { ContentTrans } from "../../components/helpers/ContentTrans";
+import SpoilerTag from "../../components/widgets/SpoilerTag";
+import { observer } from "mobx-react-lite";
+import CardMediaCardImg from "../../components/styled/CardMediaCardImg";
+
+const GridView: React.FC<{ data?: IGachaInfo }> = observer(({ data }) => {
+  const [url, setUrl] = useState<string>("");
+
+  useEffect(() => {
+    if (data) {
+      getRemoteAssetURL(
+        `gacha/${data.assetbundleName}/logo_rip/logo.webp`,
+        setUrl,
+        "minio",
+        "jp" as ServerRegion
+      );
+    }
+  }, [data]);
+
+  if (!data) {
+    // loading
+    return (
+      <Card>
+        <Skeleton
+          variant="rectangular"
+          sx={{
+            backgroundSize: "contain",
+            paddingTop: "56.25%",
+            position: "relative",
+          }}
+        ></Skeleton>
+        <CardContent>
+          <Typography variant="subtitle1">
+            <Skeleton variant="text" width="90%"></Skeleton>
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    // kinda a brute forced way of doing it tbh, but I just removed the path and set it to send to gacha
+    <Link to={"gacha/" + data.id} style={{ textDecoration: "none" }}>
+      <Card sx={{ cursor: "pointer" }}>
+        <CardMediaCardImg
+          image={url}
+          title={data.name}
+          sx={{ backgroundSize: "contain" }}
+        >
+          <SpoilerTag
+            style={{
+              left: "1%",
+              position: "absolute",
+              top: "1%",
+            }}
+            releaseTime={new Date(data.startAt)}
+          />
+        </CardMediaCardImg>
+        <CardContent style={{ paddingBottom: "16px" }}>
+          <ContentTrans
+            contentKey={`gacha_name:${data.id}`}
+            original={data.name}
+            originalProps={{
+              sx: {
+                maxWidth: "260px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              },
+              variant: "subtitle1",
+            }}
+            translatedProps={{
+              sx: {
+                maxWidth: "260px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              },
+              variant: "subtitle1",
+            }}
+          />
+          <Typography variant="body2" color="textSecondary">
+            {new Date(data.startAt).toLocaleString()} ~
+          </Typography>
+          <Typography variant="body2" color="textSecondary">
+            {new Date(data.endAt).toLocaleString()}
+          </Typography>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+});
+
+export default GridView;
diff --git a/src/pages/future/FutureGachaList.tsx b/src/pages/future/FutureGachaList.tsx
new file mode 100644
index 00000000..9e955c2d
--- /dev/null
+++ b/src/pages/future/FutureGachaList.tsx
@@ -0,0 +1,251 @@
+import React, { Fragment, useCallback, useEffect, useState } from "react";
+import { useLocalStorage, useToggle } from "../../utils";
+import InfiniteScroll from "../../components/helpers/InfiniteScroll";
+
+import { useTranslation } from "react-i18next";
+import { IGachaInfo } from "../../types";
+import GridView from "./FutureGachaGridView";
+import { ServerRegion } from "../../types";
+import {
+  Update,
+  Publish,
+  PublishOutlined,
+  GetApp,
+  GetAppOutlined,
+  FilterAlt as Filter,
+  FilterAltOutlined as FilterOutlined,
+} from "@mui/icons-material";
+import {
+  Badge,
+  Collapse,
+  FormControl,
+  Grid,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@mui/material";
+import Pound from "~icons/mdi/pound";
+import { useRootStore } from "../../stores/root";
+import { observer } from "mobx-react-lite";
+import TypographyHeader from "../../components/styled/TypographyHeader";
+import ContainerContent from "../../components/styled/ContainerContent";
+import PaperContainer from "../../components/styled/PaperContainer";
+import TypographyCaption from "../../components/styled/TypographyCaption";
+import { useDebounce } from "use-debounce";
+import { useCachedData } from "../../utils/index";
+
+function getPaginatedGachas(gachas: IGachaInfo[], page: number, limit: number) {
+  return gachas.slice(limit * (page - 1), limit * page);
+}
+
+const ListCard: React.FC<{ data?: IGachaInfo }> = GridView;
+
+const GachaList: React.FC<unknown> = observer(() => {
+  const { t } = useTranslation();
+  const {
+    settings: { isShowSpoiler },
+  } = useRootStore();
+
+  const [gachas, setGachas] = useState<IGachaInfo[]>([]);
+  const [gachasCache] = useCachedData<IGachaInfo>(
+    "gachas",
+    "jp" as ServerRegion
+  );
+
+  const [page, setPage] = useState<number>(1);
+  const [limit] = useState<number>(12);
+  const [lastQueryFin, setLastQueryFin] = useState<boolean>(true);
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [sortType, setSortType] = useLocalStorage<string>(
+    "gacha-list-update-sort",
+    "asc"
+  );
+  const [sortBy, setSortBy] = useLocalStorage<string>(
+    "gacha-list-filter-sort-by",
+    "startAt"
+  );
+  const [sortedCache, setSortedCache] = useState<IGachaInfo[]>([]);
+  const [filterOpened, toggleFilterOpened] = useToggle(false);
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [debouncedSearchTitle] = useDebounce(searchTitle, 500);
+
+  useEffect(() => {
+    document.title = t("title:gachaList");
+  }, [t]);
+
+  useEffect(() => {
+    setGachas((gachas) => [
+      ...gachas,
+      ...getPaginatedGachas(sortedCache, page, limit),
+    ]);
+    setLastQueryFin(true);
+  }, [page, limit, setLastQueryFin, sortedCache]);
+
+  useEffect(() => {
+    if (!gachasCache?.length) return;
+    let sortedCache = [...gachasCache];
+    if (isShowSpoiler) {
+      sortedCache = sortedCache.filter(
+        // gets the events starting a year prior, in milliseconds
+        (g) => g.startAt >= new Date().getTime() - 31556952000
+      );
+    }
+    if (!isShowSpoiler) {
+      sortedCache = [];
+    }
+    if (sortType === "desc") {
+      sortedCache = sortedCache.sort(
+        (a, b) => b[sortBy as "startAt"] - a[sortBy as "startAt"]
+      );
+    } else if (sortType === "asc") {
+      sortedCache = sortedCache.sort(
+        (a, b) => a[sortBy as "startAt"] - b[sortBy as "startAt"]
+      );
+    }
+    if (debouncedSearchTitle) {
+      sortedCache = sortedCache.filter((g) =>
+        g.name.toLowerCase().includes(debouncedSearchTitle.toLowerCase())
+      );
+    }
+    setSortedCache(sortedCache);
+    setGachas([]);
+    setPage(0);
+  }, [debouncedSearchTitle, gachasCache, isShowSpoiler, sortBy, sortType]);
+
+  useEffect(() => {
+    setIsReady(!!gachasCache?.length);
+  }, [gachasCache?.length]);
+
+  const callback = useCallback(
+    (
+      entries: readonly IntersectionObserverEntry[],
+      setHasMore: React.Dispatch<React.SetStateAction<boolean>>
+    ) => {
+      if (!isReady) return;
+      if (
+        entries[0].isIntersecting &&
+        lastQueryFin &&
+        (!sortedCache.length || sortedCache.length > page * limit)
+      ) {
+        setPage((page) => page + 1);
+        setLastQueryFin(false);
+      } else if (sortedCache.length && sortedCache.length <= page * limit) {
+        setHasMore(false);
+      }
+    },
+    [isReady, lastQueryFin, limit, page, sortedCache.length]
+  );
+
+  const handleUpdateSortType = useCallback(
+    (_: unknown, sort: string) => {
+      setSortType(sort || "asc");
+    },
+    [setSortType]
+  );
+
+  const handleUpdateSortBy = useCallback(
+    (_: unknown, sort: string) => {
+      setSortBy(sort || "id");
+    },
+    [setSortBy]
+  );
+
+  return (
+    <Fragment>
+      <TypographyHeader>{t("common:futuregacha")}</TypographyHeader>
+      <ContainerContent>
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Grid container spacing={1} style={{ marginBottom: "0.5rem" }}>
+              <Grid item>
+                <ToggleButtonGroup
+                  value={sortType}
+                  color="primary"
+                  exclusive
+                  onChange={handleUpdateSortType}
+                >
+                  <ToggleButton value="asc">
+                    {sortType === "asc" ? <Publish /> : <PublishOutlined />}
+                  </ToggleButton>
+                  <ToggleButton value="desc">
+                    {sortType === "desc" ? <GetApp /> : <GetAppOutlined />}
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              </Grid>
+              <Grid item>
+                <ToggleButtonGroup
+                  size="medium"
+                  value={sortBy}
+                  color="primary"
+                  exclusive
+                  onChange={handleUpdateSortBy}
+                >
+                  <ToggleButton value="id">
+                    <Pound />
+                  </ToggleButton>
+                  <ToggleButton value="startAt">
+                    <Update />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Badge color="secondary" variant="dot" invisible={!searchTitle}>
+              <ToggleButton
+                value=""
+                color="primary"
+                selected={filterOpened}
+                onClick={() => toggleFilterOpened()}
+              >
+                {filterOpened ? <Filter /> : <FilterOutlined />}
+              </ToggleButton>
+            </Badge>
+          </Grid>
+        </Grid>
+        <Collapse in={filterOpened}>
+          <PaperContainer>
+            <Grid container direction="column" spacing={2}>
+              <Grid
+                item
+                container
+                xs={12}
+                alignItems="center"
+                justifyContent="space-between"
+                spacing={1}
+              >
+                <Grid item xs={12} md={1}>
+                  <TypographyCaption>{t("common:title")}</TypographyCaption>
+                </Grid>
+                <Grid item xs={12} md={11}>
+                  <FormControl size="small">
+                    <TextField
+                      size="small"
+                      fullWidth
+                      value={searchTitle}
+                      onChange={(e) => setSearchTitle(e.target.value)}
+                      sx={{ minWidth: "200px" }}
+                    />
+                  </FormControl>
+                </Grid>
+              </Grid>
+            </Grid>
+          </PaperContainer>
+        </Collapse>
+        <InfiniteScroll<IGachaInfo>
+          ViewComponent={ListCard}
+          callback={callback}
+          data={gachas}
+          gridSize={{
+            xs: 12,
+            sm: 6,
+            md: 4,
+            lg: 3,
+          }}
+        />
+      </ContainerContent>
+    </Fragment>
+  );
+});
+
+export default GachaList;
diff --git a/src/types.d.ts b/src/types.d.ts
index 6bbeea5c..857b6222 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1595,7 +1595,6 @@ export interface IMusicOriginal {
   musicId: number;
   videoLink: string;
 }
-
 export interface IIngameCutinCharacters {
   id: number;
   ingameCutinCharacterType: string;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b60f02ae..88fcad37 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -101,6 +101,10 @@ export function useRefState<S>(
   return [state, stateRef, setState];
 }
 
+export function useCachedData<T extends IEventInfo | IGachaInfo>(
+  name: string,
+  paramRegion: ServerRegion
+): [T[] | undefined, boolean, any];
 export function useCachedData<
   T extends
     | IGachaInfo
@@ -158,10 +162,68 @@ export function useCachedData<
     | IGachaTicket
     | IMusicOriginal
     | IIngameCutinCharacters,
->(name: string): [T[] | undefined, boolean, any] {
-  // const [cached, cachedRef, setCached] = useRefState<T[]>([]);
-  const { region } = useRootStore();
-
+>
+(name: string): [T[] | undefined, boolean, any];
+export function useCachedData<
+  T extends
+    | IGachaInfo
+    | ICardInfo
+    | IGameChara
+    | IMusicInfo
+    | ISkillInfo
+    | ICardRarity
+    | ICharacterRank
+    | IMusicVocalInfo
+    | IOutCharaProfile
+    | IUserInformationInfo
+    | IMusicDifficultyInfo
+    | IMusicTagInfo
+    | IReleaseCondition
+    | IMusicDanceMembers
+    | IEventInfo
+    | IEventDeckBonus
+    | IGameCharaUnit
+    | IResourceBoxInfo
+    | IHonorInfo
+    | ICardEpisode
+    | ITipInfo
+    | ICharaProfile
+    | IUnitProfile
+    | IUnitStory
+    | IMobCharacter
+    | ICharacter2D
+    | IEventStory
+    | IHonorMission
+    | INormalMission
+    | IBeginnerMission
+    | IHonorGroup
+    | ICharacterMission
+    | IEventCard
+    | IMusicAchievement
+    | IGachaCeilItem
+    | ICharacter3D
+    | ICostume3DModel
+    | IAreaItemLevel
+    | IAreaItem
+    | ICheerfulCarnivalSummary
+    | ICheerfulCarnivalTeam
+    | IArea
+    | IActionSet
+    | ISpecialStory
+    | IBondsHonor
+    | IBondsHonorWord
+    | IBond
+    | IBondsReward
+    | IEventRarityBonusRate
+    | IMasterLesson
+    | IMasterLessonReward
+    | IEventMusic
+    | IGachaTicket
+    | IMusicOriginal
+    | IIngameCutinCharacters,
+>(name: string, paramRegion?: ServerRegion): [T[] | undefined, boolean, any] {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const region = paramRegion ? paramRegion : useRootStore().region;
   const fetchCached = useCallback(async (name: string) => {
     const [region, filename] = name.split("|");
     const urlBase = masterUrl["ww"][region as ServerRegion];
@@ -868,7 +930,6 @@ export async function getGachaRemoteImages(
     img: filenames.filter((name) => name.includes("img_gacha")),
   };
 }
-
 export async function getRemoteImageSize(
   url: string
 ): Promise<{ width: number; height: number }> {