diff --git a/package.json b/package.json
index 727a286..7a2493c 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
     "ress": "^5.0.2",
     "sharp": "^0.32.1",
     "swr": "^2.1.5",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@stylelint/postcss-css-in-js": "^0.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d68257..1cc4f16 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
   uuid:
     specifier: ^9.0.0
     version: 9.0.0
+  zod:
+    specifier: ^3.21.4
+    version: 3.21.4
 
 devDependencies:
   '@stylelint/postcss-css-in-js':
diff --git a/src/components/DashBoard/MyAchieves.tsx b/src/components/DashBoard/MyAchieves.tsx
index 4e5a844..68d5a7a 100644
--- a/src/components/DashBoard/MyAchieves.tsx
+++ b/src/components/DashBoard/MyAchieves.tsx
@@ -1,20 +1,27 @@
-import { Flex, Loader } from '@mantine/core';
+import { Loader } from '@mantine/core';
 import type { FC } from 'react';
-import { MissionPanel } from '@/components/DashBoard/MissionPanel';
+import useSWR from 'swr';
+import { MissionList } from '@/components/MissionList';
 import { useUserInfo } from '@/hooks/useUserInfo';
+import { fetcher } from '@/lib/fetcher';
+import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
+import type { GetMissionsResponse } from '@/schema/schema';
 
 export const MyAchieves: FC = () => {
-  const { data, error } = useUserInfo();
+  const { data: user, error } = useUserInfo();
+  const { data: missions } = useSWR<GetMissionsResponse>(
+    `${getApiBaseUrl()}/missions`,
+    fetcher,
+  );
 
-  if (data == undefined) return <Loader variant="oval" />;
+  if (user == undefined || missions === undefined)
+    return <Loader variant="oval" />;
 
   if (error !== undefined) return <div>Something went wrong</div>;
 
-  return (
-    <Flex wrap="wrap" gap="xs" p="lg">
-      {data.achieves.map((missionId) => (
-        <MissionPanel key={missionId} missionId={missionId} />
-      ))}
-    </Flex>
-  );
+  const achieves = missions
+    ? missions.filter((mission) => user.achieves.includes(mission.id))
+    : undefined;
+
+  return <MissionList missions={achieves} />;
 };
diff --git a/src/components/DashBoard/index.tsx b/src/components/DashBoard/index.tsx
index c11c582..58c970a 100644
--- a/src/components/DashBoard/index.tsx
+++ b/src/components/DashBoard/index.tsx
@@ -70,9 +70,9 @@ export const DashBoard: FC = () => {
           <Center>
             <h2>Your recent achievement</h2>
           </Center>
-          <Center>
+          <div>
             <MyAchieves />
-          </Center>
+          </div>
         </div>
       </Layout>
     </>
diff --git a/src/components/MissionList.tsx b/src/components/MissionList.tsx
new file mode 100644
index 0000000..0c1e587
--- /dev/null
+++ b/src/components/MissionList.tsx
@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import { Card, Overlay, useMantineTheme, Text, Skeleton } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import type { GetMissionResponse, GetUserResponse } from '@/schema/schema';
+
+export type MissionListProps = {
+  missions?: GetMissionResponse[];
+  user?: GetUserResponse;
+};
+
+export const MissionList: FC<MissionListProps> = ({ missions, user }) => {
+  const theme = useMantineTheme();
+
+  return (
+    <div
+      css={css`
+        display: grid;
+        margin-top: ${theme.spacing.md};
+        gap: 16px;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      `}
+    >
+      {missions
+        ? missions.map((mission) => (
+            <Link
+              href={`/missions/${mission.id}`}
+              key={mission.id}
+              css={css`
+                color: inherit;
+                text-decoration: none;
+              `}
+            >
+              <Card
+                shadow="xs"
+                padding="lg"
+                css={css`
+                  transition: all 0.2s;
+
+                  &:hover {
+                    box-shadow: ${theme.shadows.sm};
+                    opacity: 0.8;
+                  }
+                `}
+              >
+                {user?.achieves.includes(mission.id) && (
+                  <Overlay
+                    css={css`
+                      display: grid;
+                      background-color: ${theme.fn.rgba(theme.white, 0.8)};
+                      color: ${theme.colors.lime[5]};
+                      place-items: center;
+                    `}
+                  >
+                    <IconCheck size="5rem" />
+                  </Overlay>
+                )}
+                <Text fw="500" lineClamp={1} className="mission-title">
+                  {mission.name}
+                </Text>
+                <Text
+                  color="dimmed"
+                  lineClamp={2}
+                  h="3rem"
+                  className="mission-description"
+                >
+                  {mission.description}
+                </Text>
+              </Card>
+            </Link>
+          ))
+        : new Array(3).fill(0).map((_, i) => <Skeleton h={90} key={i} />)}
+    </div>
+  );
+};
diff --git a/src/pages/missions.tsx b/src/pages/missions.tsx
index 385631b..0388917 100644
--- a/src/pages/missions.tsx
+++ b/src/pages/missions.tsx
@@ -1,18 +1,10 @@
 import { css } from '@emotion/react';
-import {
-  Card,
-  Overlay,
-  RingProgress,
-  Skeleton,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
-import { IconCheck } from '@tabler/icons-react';
+import { RingProgress, useMantineTheme } from '@mantine/core';
 import type { NextPage } from 'next';
-import Link from 'next/link';
 import useSWR from 'swr';
 import { Description } from '@/components/Description';
 import { Layout } from '@/components/Layout';
+import { MissionList } from '@/components/MissionList';
 import { useUserInfo } from '@/hooks/useUserInfo';
 import { fetcher } from '@/lib/fetcher';
 import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
@@ -63,67 +55,7 @@ const Missions: NextPage = () => {
               />
             )}
           </h1>
-          <div
-            css={css`
-              display: grid;
-              margin-top: ${theme.spacing.md};
-              gap: 16px;
-              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            `}
-          >
-            {missions
-              ? missions.map((mission) => (
-                  <Link
-                    href={`/missions/${mission.id}`}
-                    key={mission.id}
-                    css={css`
-                      color: inherit;
-                      text-decoration: none;
-                    `}
-                  >
-                    <Card
-                      shadow="xs"
-                      padding="lg"
-                      css={css`
-                        transition: all 0.2s;
-
-                        &:hover {
-                          box-shadow: ${theme.shadows.sm};
-                          opacity: 0.8;
-                        }
-                      `}
-                    >
-                      {user?.achieves.includes(mission.id) && (
-                        <Overlay
-                          css={css`
-                            display: grid;
-                            background-color: ${theme.fn.rgba(
-                              theme.white,
-                              0.8,
-                            )};
-                            color: ${theme.colors.lime[5]};
-                            place-items: center;
-                          `}
-                        >
-                          <IconCheck size="5rem" />
-                        </Overlay>
-                      )}
-                      <Text fw="500" lineClamp={1} className="mission-title">
-                        {mission.name}
-                      </Text>
-                      <Text
-                        color="dimmed"
-                        lineClamp={2}
-                        h="3rem"
-                        className="mission-description"
-                      >
-                        {mission.description}
-                      </Text>
-                    </Card>
-                  </Link>
-                ))
-              : new Array(3).fill(0).map((_, i) => <Skeleton h={90} key={i} />)}
-          </div>
+          <MissionList missions={missions} user={user} />
         </div>
       </Layout>
     </>
diff --git a/src/pages/missions/[missionId].tsx b/src/pages/missions/[missionId].tsx
index fa25ff1..574f1e5 100644
--- a/src/pages/missions/[missionId].tsx
+++ b/src/pages/missions/[missionId].tsx
@@ -10,9 +10,10 @@ import {
   Text,
   useMantineTheme,
 } from '@mantine/core';
-import type { NextPage } from 'next';
+import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
 import useSWR from 'swr';
+import { z } from 'zod';
 import { Description } from '@/components/Description';
 import { Layout } from '@/components/Layout';
 import { useNotification } from '@/components/Notification/useNotification';
@@ -26,10 +27,39 @@ import type {
   PatchUserMissionRequest,
 } from '@/schema/schema';
 
-const Mission: NextPage = () => {
+const updateMissionState = async (
+  missionId: string,
+  userId: string,
+  clear: boolean,
+) => {
+  const body: PatchUserMissionRequest = {
+    clear,
+    clearedAt: new Date().toISOString(),
+  };
+
+  await fetch(`${getApiBaseUrl()}/users/${userId}/missions/${missionId}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+
+  const newMission: GetMissionResponse = await fetch(
+    `${getApiBaseUrl()}/missions/${missionId}`,
+  ).then((res) => res.json());
+
+  return newMission;
+};
+
+type MissionPageProps = {
+  missionName: string;
+};
+
+const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
   const theme = useMantineTheme();
   const { missionId } = useRouter().query as { missionId: string };
-  const { data: missions } = useSWR<GetMissionResponse>(
+  const { data: mission, mutate } = useSWR<GetMissionResponse>(
     `${getApiBaseUrl()}/missions/${missionId}`,
     fetcher,
   );
@@ -38,40 +68,30 @@ const Mission: NextPage = () => {
   const { animate, Canvas } = useClearAnimation();
 
   const toggleClearHandler = async () => {
-    if (missions === undefined) return;
+    if (mission === undefined) return;
     if (user === undefined) return;
     if (userError !== undefined) return;
 
-    const clear = user.id ? !missions.achievers.includes(user.id) : false;
-
-    const body: PatchUserMissionRequest = {
-      clear,
-      clearedAt: new Date().toISOString(),
-    };
+    const clear = user.id ? !mission.achievers.includes(user.id) : false;
 
     try {
-      const res = await fetch(
-        `${getApiBaseUrl()}/users/${user.id}/missions/${missionId}`,
-        {
-          method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(body),
+      await mutate(updateMissionState(missionId, user.id, clear), {
+        populateCache: true,
+        revalidate: false,
+        rollbackOnError: true,
+        optimisticData: {
+          ...mission,
+          achievers: clear
+            ? mission.achievers.concat(user.id)
+            : mission.achievers.filter((achiever) => achiever !== user.id),
         },
-      );
-
-      if (!res.ok) {
-        return notify({
-          title: 'エラーが発生しました',
-          variant: 'error',
-        });
-      }
+      });
 
       if (clear) {
         animate();
       }
-    } catch (error) {
+    } catch (err) {
+      console.error(err);
       return notify({
         title: 'エラーが発生しました',
         variant: 'error',
@@ -82,7 +102,7 @@ const Mission: NextPage = () => {
   return (
     <>
       <Description
-        title={`Mission ${missionId} | traP Mission`}
+        title={`Mission ${missionName} | traP Mission`}
         description="数々のミッションをこなし、一流のtraPerになろう！"
       />
       <Layout>
@@ -96,8 +116,8 @@ const Mission: NextPage = () => {
               line-height: 2rem;
             `}
           >
-            {missions ? (
-              missions.name
+            {mission ? (
+              mission.name
             ) : (
               <Skeleton width="70%" height="2rem" radius="xl" />
             )}
@@ -108,14 +128,14 @@ const Mission: NextPage = () => {
               padding: 1rem;
             `}
           >
-            {missions ? (
+            {mission ? (
               <Text
                 color="dimmed"
                 css={css`
                   line-height: 1.15rem;
                 `}
               >
-                {missions.description}
+                {mission.description}
               </Text>
             ) : (
               <Skeleton width="100%" height="1.15rem" radius="xl" />
@@ -126,10 +146,10 @@ const Mission: NextPage = () => {
 
           <Center>
             <div>
-              {missions ? (
+              {mission ? (
                 user !== undefined &&
                 userError === undefined &&
-                missions.achievers.includes(user.id) ? (
+                mission.achievers.includes(user.id) ? (
                   <Stack>
                     <Button variant="filled" size="lg" disabled>
                       クリア済み
@@ -180,8 +200,8 @@ const Mission: NextPage = () => {
               達成した人
             </h2>
             <Flex p="1rem" gap="md">
-              {missions
-                ? missions.achievers.map((achiever) => (
+              {mission
+                ? mission.achievers.map((achiever) => (
                     <UserAvatar
                       userId={achiever}
                       key={achiever}
@@ -202,3 +222,53 @@ const Mission: NextPage = () => {
 };
 
 export default Mission;
+
+export const getStaticProps: GetStaticProps<MissionPageProps> = async ({
+  params,
+}) => {
+  const param = z.object({ missionId: z.string() }).safeParse(params);
+  if (!param.success) {
+    return {
+      props: {
+        missionName: '',
+      },
+      revalidate: 60,
+    };
+  }
+
+  const res = await fetch(
+    `${getApiBaseUrl()}/missions/${param.data.missionId}`,
+  );
+  // TODO: zodの型とTypeScriptの型をz.inferで同期させる
+  const missionResponse = z
+    .object({
+      id: z.string(),
+      name: z.string(),
+      description: z.string(),
+      achievers: z.array(z.string()),
+    })
+    .safeParse(await res.json());
+
+  if (!missionResponse.success) {
+    return {
+      props: {
+        missionName: 'Mission',
+      },
+      revalidate: 60,
+    };
+  }
+
+  return {
+    props: {
+      missionName: missionResponse.data.name,
+    },
+    revalidate: 60,
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+};