diff --git a/content b/content
index 5df0cb5c..2bcdab4e 160000
--- a/content
+++ b/content
@@ -1 +1 @@
-Subproject commit 5df0cb5cf0b958f771238b377ae748ec0269ffab
+Subproject commit 2bcdab4e7b1ada619990fb9fc0b805646d0fa0b9
diff --git a/content-sample/logos/CSMLogo.png b/content-sample/logos/CsmIcon.png
similarity index 100%
rename from content-sample/logos/CSMLogo.png
rename to content-sample/logos/CsmIcon.png
diff --git a/content-sample/logos/FindyLogo.svg b/content-sample/logos/FindyLogo.svg
new file mode 100644
index 00000000..6d4f87da
--- /dev/null
+++ b/content-sample/logos/FindyLogo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
diff --git a/content-sample/logos/LaprasLogo.svg b/content-sample/logos/LaprasLogo.svg
new file mode 100644
index 00000000..6d4f87da
--- /dev/null
+++ b/content-sample/logos/LaprasLogo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
diff --git a/content-sample/logos/RISSLogo.png b/content-sample/logos/RissIcon.png
similarity index 100%
rename from content-sample/logos/RISSLogo.png
rename to content-sample/logos/RissIcon.png
diff --git a/gatsby-config.ts b/gatsby-config.ts
index 2451e3f4..05431c5b 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -40,14 +40,14 @@ const config: GatsbyConfig = {
   jsxImportSource: "@emotion/react",
 
   plugins: [
-    `gatsby-plugin-emotion`,
     {
-      resolve: `gatsby-plugin-fix-fouc`,
+      resolve: `gatsby-plugin-anchor-links`,
       options: {
-        attributeName: "is-loading",
-        timeout: 0,
+        offset: 0,
+        duration: 0,
       },
     },
+    `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-plugin-google-tagmanager`,
       options: {
@@ -188,7 +188,7 @@ const config: GatsbyConfig = {
             path: `/me`,
             lastmod: site.buildTime,
             changefreq: `daily`,
-            priority: 0.9,
+            priority: 1.0,
           };
 
           const posts = allMdx.nodes.map(({ frontmatter }) => {
@@ -204,7 +204,7 @@ const config: GatsbyConfig = {
             path: `/${page}`,
             lastmod: site.buildTime,
             changefreq: `daily`,
-            priority: 0.1,
+            priority: 0.6,
           }));
 
           return [home, me, ...posts, ...pages];
diff --git a/gatsby-node.ts b/gatsby-node.ts
index 5ecb7a0a..7df92ff3 100644
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -37,6 +37,37 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
   });
 };
 
+/**
+ * Copy assets to public
+ * Create Zenn articles json
+ * Create Speaker Deck Slides json
+ */
+export const onPreBootstrap: GatsbyNode["onPreBootstrap"] = async ({
+  reporter,
+}) => {
+  /**
+   *  Copy assets to public
+   */
+  const sourcePath = path.resolve(process.cwd(), "content", "assets");
+  const destPath = path.resolve(process.cwd(), "public", "assets");
+
+  fs.cpSync(sourcePath, destPath, { recursive: true, force: true });
+
+  reporter.success(
+    `onPreBootstrap: Copied assets from ${sourcePath} to ${destPath}`
+  );
+
+  /**
+   * Create Zenn articles json
+   * Create Speaker Deck Slides json
+   */
+  await fetchLaprasActivity();
+
+  reporter.success(
+    `onPreBootstrap: Created Zenn articles and Speaker Deck Slides json`
+  );
+};
+
 /**
  * Create blog post pages
  */
@@ -94,26 +125,12 @@ export const createPages: GatsbyNode["createPages"] = async ({
 };
 
 /**
- * Copy assets to public
  * Add Search nodes
  * Create OGP images
- * Create Zenn articles json
- * Create Speaker Deck Slides json
  */
 export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
   async ({ graphql, reporter, actions, createNodeId, createContentDigest }) => {
     const { createNode } = actions;
-    /**
-     *  Copy assets to public
-     */
-    const sourcePath = path.resolve(process.cwd(), "content", "assets");
-    const destPath = path.resolve(process.cwd(), "public", "assets");
-
-    fs.cpSync(sourcePath, destPath, { recursive: true, force: true });
-
-    reporter.success(
-      `onCreatePagesStatefully: Copied assets from ${sourcePath} to ${destPath}`
-    );
 
     /**
      * Add Search nodes
@@ -252,16 +269,6 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
     reporter.success(
       `onCreatePagesStatefully: Created ${blogPostList.length} blog ogp images`
     );
-
-    /**
-     * Create Zenn articles json
-     * Create Speaker Deck Slides json
-     */
-    await fetchLaprasActivity();
-
-    reporter.success(
-      `onCreatePagesStatefully: Created Zenn articles and Speaker Deck Slides json`
-    );
   };
 
 /**
diff --git a/package.json b/package.json
index a8f6ebee..535b499d 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "date-fns-tz": "2.0.0",
     "fuse.js": "6.6.2",
     "gatsby": "5.10.0",
+    "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-emotion": "8.10.0",
     "gatsby-plugin-feed": "5.10.0",
     "gatsby-plugin-fix-fouc": "1.0.3",
@@ -66,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "5.59.11",
     "@typescript-eslint/parser": "5.59.11",
     "canvas": "2.11.2",
-    "dotenv": "16.1.4",
+    "dotenv": "16.2.0",
     "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-standard-with-typescript": "35.0.0",
diff --git a/src/components/Spacer.tsx b/src/components/Spacer.tsx
new file mode 100644
index 00000000..33dfdef4
--- /dev/null
+++ b/src/components/Spacer.tsx
@@ -0,0 +1,34 @@
+import isPropValid from "@emotion/is-prop-valid";
+import styled from "@emotion/styled";
+
+export type SpacerProps =
+  | {
+      x: number;
+      y?: null;
+    }
+  | {
+      x?: null;
+      y: number;
+    };
+
+export const SpacerBase = styled("span", {
+  shouldForwardProp: (prop) =>
+    isPropValid(prop) && prop !== "x" && prop !== "y",
+})<SpacerProps>(({ x, y, theme }) => {
+  const width = x ?? 1;
+  const height = y ?? 1;
+  return {
+    display: "block",
+    visibility: "hidden",
+    width: theme.spacing(width),
+    minWidth: theme.spacing(width),
+    height: theme.spacing(height),
+    minHeight: theme.spacing(height),
+  };
+});
+
+export const Spacer = (
+  props: SpacerProps & React.HTMLAttributes<HTMLSpanElement>
+): JSX.Element => {
+  return <SpacerBase {...props} aria-hidden="true" />;
+};
diff --git a/src/components/logos/CsmIcon.tsx b/src/components/logos/CsmIcon.tsx
new file mode 100644
index 00000000..2a5706db
--- /dev/null
+++ b/src/components/logos/CsmIcon.tsx
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/CsmIcon.png";
+
+export const CsmIcon = styled(LogoBase)(({ theme }) => ({
+  backgroundImage: `url(${logo})`,
+  width: theme.spacing(12),
+  height: theme.spacing(12),
+}));
diff --git a/src/components/logos/FindyLogo.tsx b/src/components/logos/FindyLogo.tsx
new file mode 100644
index 00000000..8d6ee1b6
--- /dev/null
+++ b/src/components/logos/FindyLogo.tsx
@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/FindyLogo.svg";
+
+export const FindyLogo = styled(LogoBase)({
+  backgroundImage: `url(${logo})`,
+});
diff --git a/src/components/logos/LaprasLogo.tsx b/src/components/logos/LaprasLogo.tsx
new file mode 100644
index 00000000..18202bcc
--- /dev/null
+++ b/src/components/logos/LaprasLogo.tsx
@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/LaprasLogo.svg";
+
+export const LaprasLogo = styled(LogoBase)({
+  backgroundImage: `url(${logo})`,
+});
diff --git a/src/components/logos/RissIcon.tsx b/src/components/logos/RissIcon.tsx
new file mode 100644
index 00000000..b19e3192
--- /dev/null
+++ b/src/components/logos/RissIcon.tsx
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/RissIcon.png";
+
+export const RissIcon = styled(LogoBase)(({ theme }) => ({
+  backgroundImage: `url(${logo})`,
+  width: theme.spacing(12),
+  height: theme.spacing(12),
+}));
diff --git a/src/constants/SITE_METADATA.ts b/src/constants/SITE_METADATA.ts
index e62cf7da..fab6d302 100644
--- a/src/constants/SITE_METADATA.ts
+++ b/src/constants/SITE_METADATA.ts
@@ -1,9 +1,9 @@
 export const SITE_METADATA = {
-  title: "Oishi Takanori Portfolio",
+  title: "bicstone.me",
   shortTitle: "bicstone",
   siteUrl: process.env.GATSBY_SITE_URL ?? "https://bicstone.me",
   description:
-    "Webディベロッパー/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
+    "Webエンジニア/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
   author: "bicstone",
   image: "/android-chrome-512x512.png",
   image192: "/android-chrome-192x192.png",
diff --git a/src/constants/TRANSLATION.ts b/src/constants/TRANSLATION.ts
index df4e1281..bb245368 100644
--- a/src/constants/TRANSLATION.ts
+++ b/src/constants/TRANSLATION.ts
@@ -22,15 +22,6 @@ export const TRANSLATION = {
   footer: {
     copyright: "Oishi Takanori",
   },
-  header: {
-    avatar: "ニコニコした Oishi Takanori の似顔絵",
-    goToPortfolio: "ポートフォリオに移動",
-    changeLanguageTitle: "言語切替",
-    githubTitle: "GitHub",
-    githubUrl: "https://github.com/bicstone/",
-    titleHome: "Oishi Takanori",
-    toggleDarkThemeTitle: "ダークモード切替",
-  },
   hello: {
     description:
       "Webエンジニア / Certified ScrumMaster® / 情報処理安全確保支援士(017758) / 電気工事士 / 機械エンジニアです。様々な分野の知見を活かしジェネラリストとしてプロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。",
@@ -65,12 +56,12 @@ export const TRANSLATION = {
   },
   notFound: {
     backToHome: "ポートフォリオに移動",
-    backToBlog: "ブログ記事一覧に移動",
+    backToTimeline: "タイムラインに移動",
     description: "ページが見つかりませんでした。",
     title: "Not Found",
   },
   privacy: {
-    title: "プライバシーポリシー お問い合わせ",
+    title: "プライバシーポリシー",
   },
   scrollToTop: {
     title: "最上部に移動",
diff --git a/src/features/Bio/BioCardList.tsx b/src/features/Bio/BioCardList.tsx
index b471a7aa..facd79b8 100644
--- a/src/features/Bio/BioCardList.tsx
+++ b/src/features/Bio/BioCardList.tsx
@@ -1,12 +1,16 @@
 import { withPrefix } from "gatsby";
 
+import { BioCsmCard } from "./BioCsmCard";
 import { BioHelloCard } from "./BioHelloCard";
 import { BioIcon } from "./BioIconCard";
+import { BioRissCard } from "./BioRissCard";
 import { BioSocialLinkCard } from "./BioSocialLinkCard";
 
 import { ConnpassLogo } from "@/components/logos/ConnpassLogo";
 import { FeedLogo } from "@/components/logos/FeedLogo";
+import { FindyLogo } from "@/components/logos/FindyLogo";
 import { GitHubLogo } from "@/components/logos/GitHubLogo";
+import { LaprasLogo } from "@/components/logos/LaprasLogo";
 import { LinkedInLogo } from "@/components/logos/LinkedInLogo";
 import { PaycareerLogo } from "@/components/logos/PaycareerLogo";
 import { SpeakerDeckLogo } from "@/components/logos/SpeakerDeckLogo";
@@ -53,14 +57,9 @@ export const BioCardList = (): JSX.Element => {
         actionTitle="つながる"
         url="https://www.linkedin.com/in/bicstone"
       />
-      <BioHelloCard
-        css={(theme) => ({
-          gridColumn: "1 / 3",
-          [theme.breakpoints.down("sm")]: {
-            gridColumn: "1 / 3",
-          },
-        })}
-      />
+      <BioHelloCard css={{ gridColumn: "1 / 3" }} />
+      <BioRissCard />
+      <BioCsmCard />
       <BioSocialLinkCard
         avatar={<GitHubLogo aria-hidden="true" />}
         title="GitHub"
@@ -89,6 +88,20 @@ export const BioCardList = (): JSX.Element => {
         actionTitle="交流する"
         url="https://connpass.com/user/bicstone"
       />
+      <BioSocialLinkCard
+        avatar={<FindyLogo aria-hidden="true" />}
+        title="Findy"
+        subTitle="AKvsozgldUI4i"
+        actionTitle="スキル偏差値を見る"
+        url="https://findy-code.io/share_profiles/AKvsozgldUI4i"
+      />
+      <BioSocialLinkCard
+        avatar={<LaprasLogo aria-hidden="true" />}
+        title="Lapras"
+        subTitle="@bicstone"
+        actionTitle="LAPRAS SCOREを見る"
+        url="https://lapras.com/public/bicstone"
+      />
       <BioSocialLinkCard
         avatar={<PaycareerLogo aria-hidden="true" />}
         title="PayCareer"
diff --git a/src/features/Bio/BioCsmCard.tsx b/src/features/Bio/BioCsmCard.tsx
new file mode 100644
index 00000000..9b537e4e
--- /dev/null
+++ b/src/features/Bio/BioCsmCard.tsx
@@ -0,0 +1,49 @@
+import styled from "@emotion/styled";
+import Card, { type CardProps } from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+
+import { ExternalLink } from "@/components/ExternalLink";
+import { CsmIcon } from "@/components/logos/CsmIcon";
+
+const StyledCard = styled(Card)({
+  paddingBottom: "100%",
+  position: "relative",
+}) as typeof Card;
+
+const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
+  padding: theme.spacing(2),
+
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+})) as typeof CardActionArea;
+
+export const BioCsmCard = (props: CardProps): JSX.Element => {
+  return (
+    <StyledCard {...props} title="認証情報の表示" component="article">
+      <StyledCardActionArea
+        href="https://certification.scrumalliance.org/accounts/1448098-takanori-oishi/certifications/1691057-csm"
+        rel="external noopener"
+        title="認証情報の表示"
+      >
+        <ExternalLink>
+          <CsmIcon aria-hidden="true" />
+        </ExternalLink>
+        <span css={{ ...visuallyHidden }}>Certified ScrumMaster®</span>
+        <span css={{ ...visuallyHidden }}>
+          Certified ScrumMaster® is a certification mark of Scrum Alliance, Inc.
+          Any unauthorized use is strictly prohibited.
+        </span>
+      </StyledCardActionArea>
+    </StyledCard>
+  );
+};
diff --git a/src/features/Bio/BioHelloCard.tsx b/src/features/Bio/BioHelloCard.tsx
index 150eb451..a4d321f2 100644
--- a/src/features/Bio/BioHelloCard.tsx
+++ b/src/features/Bio/BioHelloCard.tsx
@@ -18,7 +18,7 @@ export const BioHelloCard = (props: CardProps): JSX.Element => {
         <CardHeader
           disableTypography
           title={
-            <Typography component="p" variant="h6" gutterBottom>
+            <Typography component="h2" variant="h6" gutterBottom>
               {TRANSLATION.hello.title}
             </Typography>
           }
diff --git a/src/features/Bio/BioRissCard.tsx b/src/features/Bio/BioRissCard.tsx
new file mode 100644
index 00000000..e2d0bc88
--- /dev/null
+++ b/src/features/Bio/BioRissCard.tsx
@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+import Card, { type CardProps } from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+
+import { ExternalLink } from "@/components/ExternalLink";
+import { RissIcon } from "@/components/logos/RissIcon";
+
+const StyledCard = styled(Card)({
+  paddingBottom: "100%",
+  position: "relative",
+}) as typeof Card;
+
+const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
+  padding: theme.spacing(2),
+
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+})) as typeof CardActionArea;
+
+export const BioRissCard = (props: CardProps): JSX.Element => {
+  return (
+    <StyledCard {...props} title="認証情報の表示" component="article">
+      <StyledCardActionArea
+        href="https://riss.ipa.go.jp/r?r=017758"
+        rel="external noopener"
+        title="認証情報の表示"
+      >
+        <ExternalLink>
+          <RissIcon aria-hidden="true" />
+        </ExternalLink>
+        <span css={{ ...visuallyHidden }}>
+          情報処理安全確保支援士 (第017758号)
+        </span>
+      </StyledCardActionArea>
+    </StyledCard>
+  );
+};
diff --git a/src/features/PortfolioHello/HelloContent.tsx b/src/features/PortfolioHello/HelloContent.tsx
index 62217606..0683bd86 100644
--- a/src/features/PortfolioHello/HelloContent.tsx
+++ b/src/features/PortfolioHello/HelloContent.tsx
@@ -1,14 +1,27 @@
 import Card from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
 import CardHeader from "@mui/material/CardHeader";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { Link as RouterLink } from "gatsby";
 
 import { BicstoneLogo } from "@/components/logos/BicstoneLogo";
-import { TRANSLATION } from "@/constants/TRANSLATION";
 
-export const HelloContent = (): JSX.Element => {
+export const HelloContent = ({
+  linkToHome = false,
+}: {
+  linkToHome?: boolean;
+}): JSX.Element => {
   return (
     <Grid container spacing={2} justifyContent="center" alignItems="center">
-      <Grid item xs={12} sm={3} md={2} css={{ textAlign: "center" }}>
+      <Grid
+        item
+        xs={12}
+        sm={3}
+        md={2}
+        component="aside"
+        css={{ textAlign: "center" }}
+      >
         <BicstoneLogo
           aria-hidden="true"
           css={(theme) => ({
@@ -20,19 +33,40 @@ export const HelloContent = (): JSX.Element => {
       </Grid>
       <Grid item xs={12} sm={9} md={10}>
         <Card variant="elevation">
-          <CardHeader
-            titleTypographyProps={{
-              component: "p",
-              variant: "h6",
-              gutterBottom: true,
-            }}
-            title={TRANSLATION.hello.title}
-            subheaderTypographyProps={{
-              variant: "body2",
-              gutterBottom: true,
-            }}
-            subheader={TRANSLATION.hello.description}
-          />
+          <CardActionArea
+            component={RouterLink}
+            to={linkToHome ? "/" : "/me"}
+            css={{ height: "100%" }}
+            title={linkToHome ? "ホームに戻る" : "もっと詳しく"}
+          >
+            <CardHeader
+              disableTypography
+              title={
+                <Typography component="h2" variant="h6" gutterBottom>
+                  おおいし (@bicstone)
+                </Typography>
+              }
+              subheader={
+                <>
+                  <Typography
+                    variant="body2"
+                    component="h2"
+                    color="text.secondary"
+                    gutterBottom
+                  >
+                    Webエンジニア / Certified ScrumMaster® /
+                    情報処理安全確保支援士 (017758号) / 電気工事士 /
+                    機械エンジニアです。
+                    様々な分野の知見を活かしジェネラリストとしてプロダクトに幅広く携わり、
+                    相互成長し続けられるエンジニアを目指しています。
+                  </Typography>
+                  <Typography variant="body2" color="secondary">
+                    {linkToHome ? "ホームに戻る" : "もっと詳しく"}
+                  </Typography>
+                </>
+              }
+            />
+          </CardActionArea>
         </Card>
       </Grid>
     </Grid>
diff --git a/src/features/Timeline/TimelineCardBase.tsx b/src/features/Timeline/TimelineCardBase.tsx
index da3563a8..c4ac61da 100644
--- a/src/features/Timeline/TimelineCardBase.tsx
+++ b/src/features/Timeline/TimelineCardBase.tsx
@@ -19,9 +19,9 @@ const StyledCardActionArea = styled(CardActionArea)({
 const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
   [`& .${cardHeaderClasses.title}`]: {
     display: "-webkit-box",
-    maxHeight: "3rem",
-    overflow: "hidden",
+    height: "3rem",
     marginBottom: theme.spacing(1),
+    overflow: "hidden",
     textOverflow: "ellipsis",
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 2,
diff --git a/src/features/Timeline/TimelineList.tsx b/src/features/Timeline/TimelineList.tsx
index 4f11c182..67bce9f0 100644
--- a/src/features/Timeline/TimelineList.tsx
+++ b/src/features/Timeline/TimelineList.tsx
@@ -1,5 +1,8 @@
+import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 import { graphql } from "gatsby";
+import { type ComponentProps, forwardRef, Fragment } from "react";
+import { VirtuosoGrid } from "react-virtuoso";
 
 import { TimelineArticleCard } from "./TimelineArticleCard";
 import { TimelineCertificationCard } from "./TimelineCertificationCard";
@@ -9,6 +12,7 @@ import { TimelineOssCard } from "./TimelineOssCard";
 import { TimelineProjectCard } from "./TimelineProjectCard";
 import { TimelineSlideCard } from "./TimelineSlideCard";
 
+import { Spacer } from "@/components/Spacer";
 import {
   type TimelineListOutputFragment,
   type TimelineListHistoryFragment,
@@ -103,73 +107,110 @@ export const query = graphql`
   }
 `;
 
-export const TimelineList = (props: {
+interface TimelineItemProps {
+  item: TimelineListProps["groups"]["group"][number]["nodes"][number];
+}
+
+const TimelineItem = ({ item }: TimelineItemProps): JSX.Element | null => {
+  switch (item.__typename) {
+    case "ArticlesYaml":
+      return <TimelineArticleCard key={item.id} item={item} />;
+
+    case "CertificationsYaml":
+      return <TimelineCertificationCard key={item.id} item={item} />;
+
+    case "HistoriesYaml":
+      return <TimelineHistoryCard key={item.id} item={item} />;
+
+    case "OssesYaml":
+      return <TimelineOssCard key={item.id} item={item} />;
+
+    case "ProjectsYaml":
+      return <TimelineProjectCard key={item.id} item={item} />;
+
+    case "SlidesYaml":
+      return <TimelineSlideCard key={item.id} item={item} />;
+
+    case "Mdx":
+      return <TimelineMdxCard key={item.id} item={item} />;
+
+    default:
+      return null;
+  }
+};
+
+const ContainerBase = styled("div")(({ theme }) => ({
+  display: "grid",
+  gap: theme.spacing(3),
+  gridTemplateColumns: "repeat(2, 1fr)",
+  width: "100%",
+  [theme.breakpoints.down("md")]: {
+    gridTemplateColumns: "repeat(1, 1fr)",
+  },
+}));
+
+const Container = forwardRef<
+  HTMLDivElement,
+  ComponentProps<typeof ContainerBase>
+>((props, ref) => <ContainerBase {...props} ref={ref} />);
+
+Container.displayName = "Container";
+
+export interface TimelineListProps {
   groups:
     | TimelineListTimelineFragment
     | TimelineListHistoryFragment
     | TimelineListOutputFragment
     | TimelineListProjectFragment;
-}): JSX.Element => {
-  const { groups } = props;
+  virtualized?: boolean;
+}
+
+export const TimelineList = ({
+  groups,
+  virtualized = false,
+}: TimelineListProps): JSX.Element => {
   const sortedGroups = Array.from(groups.group).sort(
     (a, b) => Number(b.dateYear) - Number(a.dateYear)
   );
+  const flatNodes = sortedGroups.flatMap((group) => group.nodes);
+
+  if (virtualized) {
+    return (
+      <VirtuosoGrid
+        data={flatNodes}
+        components={{
+          List: Container,
+        }}
+        itemContent={(index, item) => <TimelineItem key={index} item={item} />}
+        overscan={10}
+        style={{
+          height: "100%",
+          // prevent flickering caused by virtual scrolling
+          minHeight: "100vh",
+        }}
+        useWindowScroll
+      />
+    );
+  }
 
   return (
     <>
       {sortedGroups.map(({ dateYear, nodes }) => (
-        <section
-          key={dateYear}
-          id={dateYear}
-          css={(theme) => ({
-            display: "grid",
-            gap: theme.spacing(3),
-            // marginTop = (AppBar height) 6 + (div margin) 6 = 12
-            // negative top margin for anchor link
-            marginTop: theme.spacing(-6),
-            paddingTop: theme.spacing(12),
-            gridTemplateColumns: "repeat(2, 1fr)",
-            width: "100%",
-            [theme.breakpoints.down("md")]: {
-              gridTemplateColumns: "repeat(1, 1fr)",
-            },
-          })}
-        >
-          <Typography
-            variant="h6"
-            component="h2"
-            css={{ gridColumn: "1 / -1" }}
-          >
-            {dateYear}
-          </Typography>
-          {nodes.map((item) => {
-            switch (item.__typename) {
-              case "ArticlesYaml":
-                return <TimelineArticleCard key={item.id} item={item} />;
-
-              case "CertificationsYaml":
-                return <TimelineCertificationCard key={item.id} item={item} />;
-
-              case "HistoriesYaml":
-                return <TimelineHistoryCard key={item.id} item={item} />;
-
-              case "OssesYaml":
-                return <TimelineOssCard key={item.id} item={item} />;
-
-              case "ProjectsYaml":
-                return <TimelineProjectCard key={item.id} item={item} />;
-
-              case "SlidesYaml":
-                return <TimelineSlideCard key={item.id} item={item} />;
-
-              case "Mdx":
-                return <TimelineMdxCard key={item.id} item={item} />;
-
-              default:
-                return null;
-            }
-          })}
-        </section>
+        <Fragment key={dateYear}>
+          <Spacer y={6} />
+          <Container as="section">
+            <Typography
+              variant="h6"
+              component="h2"
+              css={{ gridColumn: "1 / -1" }}
+            >
+              {dateYear}
+            </Typography>
+            {nodes.map((item) => (
+              <TimelineItem key={item.id} item={item} />
+            ))}
+          </Container>
+        </Fragment>
       ))}
     </>
   );
diff --git a/src/features/TimelineSearch/TimelineSearchButton.tsx b/src/features/TimelineSearch/TimelineSearchButton.tsx
index 58fb1723..7612c921 100644
--- a/src/features/TimelineSearch/TimelineSearchButton.tsx
+++ b/src/features/TimelineSearch/TimelineSearchButton.tsx
@@ -64,7 +64,7 @@ export const TimelineSearchButton = (): JSX.Element => {
                     color: theme.vars.palette.common.white,
                     zIndex: theme.zIndex.modal,
                   })}
-                  aria-busy
+                  aria-busy="true"
                   onClick={handleClose}
                 >
                   <CircularProgress color="inherit" />
diff --git a/src/features/TimelineSearch/TimelineSearchModal.tsx b/src/features/TimelineSearch/TimelineSearchModal.tsx
index 52629b3c..dbb0d7fb 100644
--- a/src/features/TimelineSearch/TimelineSearchModal.tsx
+++ b/src/features/TimelineSearch/TimelineSearchModal.tsx
@@ -137,6 +137,7 @@ export const TimelineSearchModal = (props: {
                 </ListItemButton>
               </ListItem>
             )}
+            tabIndex={-1}
             style={{ height: "100%" }}
           />
         ) : (
diff --git a/src/features/TimelineTab/TimelineTabList.tsx b/src/features/TimelineTab/TimelineTabList.tsx
index db63b06b..14edb6af 100644
--- a/src/features/TimelineTab/TimelineTabList.tsx
+++ b/src/features/TimelineTab/TimelineTabList.tsx
@@ -1,53 +1,73 @@
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import { Link, withPrefix } from "gatsby";
+import styled, { type CSSObject } from "@emotion/styled";
+import { Link } from "gatsby";
+import { type HTMLAttributes } from "react";
 
-export interface TimelineTabListProps {
-  path: string;
-}
+const activeClassName = "active";
 
-export const TimelineTabList = ({
-  path,
-}: TimelineTabListProps): JSX.Element => {
+const StyledAnchorLinkGroup = styled("nav")(({ theme }) => ({
+  display: "flex",
+  borderRadius: theme.shape.borderRadius,
+  width: "100%",
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  alignItems: "center",
+  border: `1px solid ${theme.vars.palette.divider}`,
+  borderRadius: theme.spacing(10),
+  color: theme.vars.palette.text.secondary,
+  cursor: "pointer",
+  display: "inline-flex",
+  justifyContent: "center",
+  padding: theme.spacing(2),
+  width: "100%",
+
+  ...(theme.typography.button as CSSObject),
+  fontWeight: "bold",
+  textTransform: "none",
+  textDecoration: "none",
+
+  "&:not(:last-of-type)": {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  "&:not(:first-of-type)": {
+    marginLeft: -1,
+    borderLeft: "1px solid transparent",
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  "&:hover": {
+    background: theme.vars.palette.action.hover,
+  },
+
+  [`&.${activeClassName}`]: {
+    color: theme.vars.palette.text.primary,
+    background: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`,
+
+    "&:hover": {
+      background: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`,
+    },
+  },
+}));
+
+export const TimelineTabList = (
+  props: HTMLAttributes<HTMLElement>
+): JSX.Element => {
   return (
-    <ToggleButtonGroup
-      id="timeline"
-      size="large"
-      value={path}
-      color="secondary"
-      exclusive
-      fullWidth
-      css={(theme) => ({
-        // negative top margin for anchor link
-        // AppBar height = 6 + 2
-        marginTop: theme.spacing(-8),
-        paddingTop: theme.spacing(8),
-      })}
-    >
-      <ToggleButton component={Link} value={withPrefix("/")} to="/#timeline">
+    <StyledAnchorLinkGroup {...props}>
+      <StyledLink to="/" activeClassName={activeClassName}>
         All
-      </ToggleButton>
-      <ToggleButton
-        component={Link}
-        value={withPrefix("/outputs")}
-        to="/outputs#timeline"
-      >
+      </StyledLink>
+      <StyledLink to="/outputs" activeClassName={activeClassName}>
         Outputs
-      </ToggleButton>
-      <ToggleButton
-        component={Link}
-        value={withPrefix("/projects")}
-        to="/projects#timeline"
-      >
+      </StyledLink>
+      <StyledLink to="/projects" activeClassName={activeClassName}>
         Projects
-      </ToggleButton>
-      <ToggleButton
-        component={Link}
-        value={withPrefix("/histories")}
-        to="/histories#timeline"
-      >
+      </StyledLink>
+      <StyledLink to="/histories" activeClassName={activeClassName}>
         Histories
-      </ToggleButton>
-    </ToggleButtonGroup>
+      </StyledLink>
+    </StyledAnchorLinkGroup>
   );
 };
diff --git a/src/layouts/BackToTop.tsx b/src/layouts/BackToTop.tsx
index 4a8d2015..2bd70cef 100644
--- a/src/layouts/BackToTop.tsx
+++ b/src/layouts/BackToTop.tsx
@@ -1,71 +1,54 @@
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUpRounded";
 import Fab from "@mui/material/Fab";
 import Fade from "@mui/material/Fade";
-import Tooltip from "@mui/material/Tooltip";
 import useScrollTrigger from "@mui/material/useScrollTrigger";
-import { useCallback, useState } from "react";
 
 import { TRANSLATION } from "@/constants/TRANSLATION";
 
 export const BackToTop = (): JSX.Element => {
-  const [isOpen, setOpen] = useState(false);
-
   const isShow = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
   });
 
-  const handleClose = useCallback((): void => {
-    setOpen(false);
-  }, []);
-
-  const handleOpen = useCallback((): void => {
-    setOpen(true);
-  }, []);
-
-  const handleClick = useCallback((): void => {
+  const handleClick = (): void => {
     window.scrollTo({ top: 0 });
-    setOpen(false);
-  }, []);
+  };
 
   return (
     <Fade in={isShow}>
-      <Tooltip
+      <Fab
+        size="medium"
+        variant="circular"
         title={TRANSLATION.scrollToTop.title}
-        open={isOpen}
-        onClose={handleClose}
-        onOpen={handleOpen}
-      >
-        <Fab
-          size="medium"
-          variant="circular"
-          aria-label={TRANSLATION.scrollToTop.title}
-          onClick={handleClick}
-          css={(theme) => ({
-            position: "fixed",
-            bottom: theme.spacing(3),
-            marginBottom: `env(safe-area-inset-bottom, 0px)`,
-            right: theme.spacing(3),
-            zIndex: theme.zIndex.tooltip,
-            border: `1px solid ${
-              theme.palette.mode === "dark"
-                ? theme.vars.palette.common.white
-                : theme.vars.palette.divider
-            }`,
-            borderRadius: theme.spacing(2),
-            color:
-              theme.palette.mode === "dark"
-                ? theme.vars.palette.text.primary
-                : theme.vars.palette.text.secondary,
+        aria-label={TRANSLATION.scrollToTop.title}
+        onClick={handleClick}
+        css={(theme) => ({
+          position: "fixed",
+          bottom: theme.spacing(3),
+          marginBottom: `env(safe-area-inset-bottom, 0px)`,
+          right: theme.spacing(3),
+          zIndex: theme.zIndex.tooltip,
+          border: `1px solid ${
+            theme.palette.mode === "dark"
+              ? theme.vars.palette.common.white
+              : theme.vars.palette.divider
+          }`,
+          borderRadius: theme.spacing(2),
+          color:
+            theme.palette.mode === "dark"
+              ? theme.vars.palette.text.primary
+              : theme.vars.palette.text.secondary,
+          backgroundColor: theme.vars.palette.background.paper,
+          "&:hover": {
             backgroundColor: theme.vars.palette.background.paper,
-            "&:hover": {
-              backgroundColor: theme.vars.palette.background.paper,
-            },
-          })}
-        >
-          <KeyboardArrowUpIcon color="inherit" fontSize="medium" />
-        </Fab>
-      </Tooltip>
+          },
+        })}
+      >
+        <KeyboardArrowUpIcon color="inherit" fontSize="medium" />
+      </Fab>
     </Fade>
   );
 };
+
+export default BackToTop;
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index f0d1f57d..0b873e73 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -4,8 +4,6 @@ import { Link as RouterLink } from "gatsby";
 
 import { BackToTop } from "./BackToTop";
 
-import { TRANSLATION } from "@/constants/TRANSLATION";
-
 /**
  * Footer Layout
  */
@@ -14,28 +12,43 @@ export const Footer = (): JSX.Element => {
   return (
     <footer
       css={(theme) => ({
-        marginTop: "auto",
-        padding: theme.spacing(3),
+        alignItems: "center",
         borderTop: `1px solid ${theme.vars.palette.divider}`,
+        display: "flex",
+        flexDirection: "column",
         marginBottom: `env(safe-area-inset-bottom, 0px)`,
+        marginTop: "auto",
+        padding: theme.spacing(3),
       })}
-      role="contentinfo"
     >
       <Typography
         variant="body2"
         color="textSecondary"
         align="center"
         paragraph
+        css={(theme) => ({ display: "inline-flex", gap: theme.spacing(1) })}
       >
+        <Link component={RouterLink} color="inherit" to="/">
+          ホーム
+        </Link>
+        <Link component={RouterLink} color="inherit" to="/me">
+          プロフィール
+        </Link>
         <Link component={RouterLink} color="inherit" to="/privacy">
-          {TRANSLATION.privacy.title}
+          プライバシーポリシー
         </Link>
       </Typography>
-      <Typography variant="body2" color="textSecondary" align="center">
-        {`© ${nowDate.getFullYear()} ${TRANSLATION.footer.copyright}`}
-        {` / Made with Gatsby.js`}
+      <Typography
+        variant="caption"
+        color="textSecondary"
+        align="center"
+        component="p"
+      >
+        {`© ${nowDate.getFullYear()} Oishi Takanori / Made with Gatsby.js`}
       </Typography>
       <BackToTop />
     </footer>
   );
 };
+
+export default Footer;
diff --git a/src/layouts/HeadTemplate.tsx b/src/layouts/HeadTemplate.tsx
index 4169a1e7..2d404f10 100644
--- a/src/layouts/HeadTemplate.tsx
+++ b/src/layouts/HeadTemplate.tsx
@@ -75,6 +75,7 @@ export const HeadTemplate = (props: {
       />
       <meta name="application-name" content={SITE_METADATA.shortTitle} />
       <meta name="msapplication-TileColor" content={SITE_METADATA.tileColor} />
+      <meta name="theme-color" content="#fcfdf7" />
       {/* others */}
       <meta
         name="viewport"
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index b3283fe4..801e1a58 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -10,7 +10,6 @@ import useScrollTrigger from "@mui/material/useScrollTrigger";
 import { Link as RouterLink } from "gatsby";
 
 import { BicstoneLogo } from "@/components/logos/BicstoneLogo";
-import { TRANSLATION } from "@/constants/TRANSLATION";
 import { TimelineSearchButton } from "@/features/TimelineSearch";
 
 /**
@@ -38,7 +37,8 @@ export const Header = (): JSX.Element => {
         <Link
           component={RouterLink}
           to="/"
-          title={TRANSLATION.header.goToPortfolio}
+          title="ホームに移動"
+          underline="hover"
         >
           <div
             css={(theme) => ({
@@ -57,7 +57,7 @@ export const Header = (): JSX.Element => {
               })}
             />
             <Typography color="textPrimary" variant="h6" component="h1">
-              {TRANSLATION.header.titleHome}
+              おおいし （@bicstone）
             </Typography>
           </div>
         </Link>
@@ -69,7 +69,7 @@ export const Header = (): JSX.Element => {
             onClick={() => {
               setPaletteMode(paletteMode === "light" ? "dark" : "light");
             }}
-            title={TRANSLATION.header.toggleDarkThemeTitle}
+            title="ダークモード切り替え"
           >
             {paletteMode === "light" ? <LightModeIcon /> : <DarkModeIcon />}
           </IconButton>
@@ -78,3 +78,5 @@ export const Header = (): JSX.Element => {
     </AppBar>
   );
 };
+
+export default Header;
diff --git a/src/layouts/WrapPageElement.tsx b/src/layouts/WrapPageElement.tsx
index 0937881c..80a09582 100644
--- a/src/layouts/WrapPageElement.tsx
+++ b/src/layouts/WrapPageElement.tsx
@@ -1,7 +1,14 @@
+import styled from "@emotion/styled";
+
+import Footer from "./Footer";
+import Header from "./Header";
+
 import type { ReactNode } from "react";
 
-import { Footer } from "@/layouts/Footer";
-import { Header } from "@/layouts/Header";
+const StyledMain = styled("main")(({ theme }) => ({
+  marginTop: theme.spacing(8),
+  flexGrow: 1,
+}));
 
 /**
  * WrapPageElement
@@ -15,12 +22,7 @@ export const WrapPageElement = (props: {
   return (
     <>
       <Header />
-      <main
-        role="main"
-        css={(theme) => ({ marginTop: theme.spacing(8), flexGrow: 1 })}
-      >
-        {children}
-      </main>
+      <StyledMain>{children}</StyledMain>
       <Footer />
     </>
   );
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 046b98a7..583ecf22 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -44,8 +44,14 @@ const NotFound = (): JSX.Element => {
           color="secondary"
           css={(theme) => ({ marginRight: theme.spacing(2) })}
         >
-          {TRANSLATION.notFound.backToHome}
+          {TRANSLATION.notFound.backToTimeline}
         </Button>
+        <Button
+          component={RouterLink}
+          variant="outlined"
+          to="/"
+          color="secondary"
+        ></Button>
       </div>
     </Container>
   );
diff --git a/src/pages/histories.tsx b/src/pages/histories.tsx
index dc6337b0..3483d178 100644
--- a/src/pages/histories.tsx
+++ b/src/pages/histories.tsx
@@ -1,13 +1,13 @@
 import Container from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
 import { graphql } from "gatsby";
 
 import type { HistoryPageQuery } from "@/generated/graphqlTypes";
 import type { PageProps, HeadFC } from "gatsby";
 
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { Spacer } from "@/components/Spacer";
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
 import { TRANSLATION } from "@/constants/TRANSLATION";
-import { BioCardList } from "@/features/Bio";
 import { TimelineList } from "@/features/Timeline";
 import { TimelineTabList } from "@/features/TimelineTab";
 import { HeadTemplate } from "@/layouts/HeadTemplate";
@@ -35,27 +35,23 @@ export const Head: HeadFC<HistoryPageQuery> = ({ location }) => {
   );
 };
 
-const HistoryPage = ({
-  data,
-  location,
-}: PageProps<HistoryPageQuery>): JSX.Element => {
+const HistoryPage = ({ data }: PageProps<HistoryPageQuery>): JSX.Element => {
+  const title = TRANSLATION.histories.title;
   const projectGroups = data.histories;
-  const path = location.pathname;
 
   return (
     <Container
       maxWidth="md"
       fixed
-      css={(theme) => ({
-        marginTop: theme.spacing(4),
-        marginBottom: theme.spacing(4),
-      })}
+      css={(theme) => ({ margin: theme.spacing(4, "auto") })}
     >
-      <BioCardList />
-      <Divider css={(theme) => ({ margin: theme.spacing(6, 0) })} />
-      <TimelineTabList path={path} />
-      <div css={(theme) => ({ height: theme.spacing(3) })} />
+      <Breadcrumbs title={title} />
+      <Spacer y={4} />
+      <TimelineTabList />
+      <Spacer y={2} />
       <TimelineList groups={projectGroups} />
+      <Spacer y={4} />
+      <Breadcrumbs title={title} />
     </Container>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7f345ae2..98eaa3f6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,10 +1,10 @@
-import { Divider } from "@mui/material";
 import Container from "@mui/material/Container";
 import { graphql } from "gatsby";
 
 import type { IndexPageQuery } from "@/generated/graphqlTypes";
 import type { PageProps, HeadFC } from "gatsby";
 
+import { Spacer } from "@/components/Spacer";
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
 import { BioCardList } from "@/features/Bio";
 import { TimelineList } from "@/features/Timeline";
@@ -22,45 +22,19 @@ export const query = graphql`
 
 export const Head: HeadFC<IndexPageQuery> = ({ location, data }) => {
   const title = SITE_METADATA.title;
-
-  return (
-    <HeadTemplate
-      location={location}
-      title={title}
-      description={SITE_METADATA.description}
-      image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
-      imageAlt={title}
-      type="blog"
-    />
-  );
-};
-
-const IndexPage = ({
-  data,
-  location,
-}: PageProps<IndexPageQuery>): JSX.Element => {
-  const timelineGroups = data.timelineGroups;
-  const timelineItems = timelineGroups.group.flatMap(({ nodes }) => nodes);
-  const path = location.pathname;
+  const timelineItems = data.timelineGroups.group.flatMap(({ nodes }) => nodes);
   const buildTime = useBuildTime();
 
   return (
     <>
-      <Container
-        maxWidth="md"
-        fixed
-        css={(theme) => ({
-          marginTop: theme.spacing(4),
-          marginBottom: theme.spacing(4),
-        })}
-      >
-        <BioCardList />
-        <Divider css={(theme) => ({ margin: theme.spacing(6, 0) })} />
-        <TimelineTabList path={path} />
-        <div css={(theme) => ({ height: theme.spacing(3) })} />
-        <TimelineList groups={timelineGroups} />
-      </Container>
-
+      <HeadTemplate
+        location={location}
+        title={title}
+        description={SITE_METADATA.description}
+        image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
+        imageAlt={title}
+        type="blog"
+      />
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
@@ -108,4 +82,26 @@ const IndexPage = ({
   );
 };
 
+const IndexPage = ({ data }: PageProps<IndexPageQuery>): JSX.Element => {
+  const timelineGroups = data.timelineGroups;
+
+  return (
+    <>
+      <Container
+        maxWidth="md"
+        fixed
+        css={(theme) => ({ margin: theme.spacing(4, "auto") })}
+      >
+        <BioCardList />
+        <Spacer y={6} />
+        <TimelineTabList />
+        <Spacer y={6} />
+        <TimelineList groups={timelineGroups} virtualized />
+        <Spacer y={6} />
+        <TimelineTabList />
+      </Container>
+    </>
+  );
+};
+
 export default IndexPage;
diff --git a/src/pages/me.tsx b/src/pages/me.tsx
index 2967e1c1..681f5dbe 100644
--- a/src/pages/me.tsx
+++ b/src/pages/me.tsx
@@ -1,18 +1,13 @@
-import HelpOutlineIcon from "@mui/icons-material/HelpOutlineRounded";
 import Container from "@mui/material/Container";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import styled from "@mui/material/styles/styled";
 import { graphql } from "gatsby";
-import { useState } from "react";
 
 import type { MePageQuery } from "@/generated/graphqlTypes";
 import type { PageProps, HeadFC } from "gatsby";
-import type { ReactNode } from "react";
 
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { Spacer } from "@/components/Spacer";
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
-import { TRANSLATION } from "@/constants/TRANSLATION";
 import { CertificationList } from "@/features/PortfolioCertification";
 import { HelloContent } from "@/features/PortfolioHello";
 import { HistoryList } from "@/features/PortfolioHistory";
@@ -20,12 +15,8 @@ import { OssList } from "@/features/PortfolioOss";
 import { ProjectList } from "@/features/PortfolioProject";
 import { WhatICanDoList } from "@/features/PortfolioWhatICanDo";
 import { HeadTemplate } from "@/layouts/HeadTemplate";
-import { isDefined } from "@/utils/typeguard";
 
-const PaddingContainer = styled(Container)(({ theme }) => ({
-  marginTop: theme.spacing(5),
-  marginBottom: theme.spacing(5),
-}));
+const title = "Profile";
 
 export const query = graphql`
   query MePage {
@@ -48,7 +39,7 @@ export const Head: HeadFC = ({ location }) => {
   return (
     <HeadTemplate
       location={location}
-      title={SITE_METADATA.title}
+      title={`${title} - ${SITE_METADATA.title}`}
       description={SITE_METADATA.description}
       image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
       imageAlt={SITE_METADATA.title}
@@ -57,101 +48,52 @@ export const Head: HeadFC = ({ location }) => {
   );
 };
 
-interface SectionProps {
-  title: string;
-  help?: string;
-  children: ReactNode;
-}
-
-const Section = ({ title, help, children }: SectionProps): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const openTooltip = (): void => {
-    setIsOpen(true);
-  };
-
-  const closeTooltip = (): void => {
-    setIsOpen(false);
-  };
-
-  const toggleTooltip = (): void => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <section>
-      <PaddingContainer maxWidth="lg">
-        <div
-          css={(theme) => ({
-            display: "flex",
-            alignItems: "flex-end",
-            justifyContent: "center",
-            marginBottom: theme.spacing(2),
-            gap: theme.spacing(0.5),
-          })}
-        >
-          <Typography component="h2" variant="h4">
-            {title}
-          </Typography>
-          {isDefined(help) && (
-            <Tooltip
-              title={help}
-              open={isOpen}
-              onOpen={openTooltip}
-              onClose={closeTooltip}
-              disableTouchListener
-            >
-              <IconButton
-                size="small"
-                color="secondary"
-                css={{ cursor: "help" }}
-                onClick={toggleTooltip}
-              >
-                <HelpOutlineIcon />
-              </IconButton>
-            </Tooltip>
-          )}
-        </div>
-        {children}
-      </PaddingContainer>
-    </section>
-  );
-};
-
 const MePage = ({ data }: PageProps<MePageQuery>): JSX.Element => {
   return (
-    <>
-      <PaddingContainer maxWidth="lg">
-        <HelloContent />
-      </PaddingContainer>
-      <PaddingContainer maxWidth="lg">
+    <Container
+      maxWidth="lg"
+      css={(theme) => ({ margin: theme.spacing(4, "auto") })}
+    >
+      <Breadcrumbs title={title} />
+      <Spacer y={8} />
+      <section>
+        <HelloContent linkToHome />
+      </section>
+      <Spacer y={8} />
+      <section>
         <WhatICanDoList />
-      </PaddingContainer>
-      <Section
-        title={TRANSLATION.home.projectsTitle}
-        help={TRANSLATION.home.projectsHelp}
-      >
+      </section>
+      <Spacer y={8} />
+      <section>
+        <Typography component="h2" variant="h4" paragraph>
+          プロジェクト
+        </Typography>
         <ProjectList projects={data.projects} />
-      </Section>
-      <Section
-        title={TRANSLATION.home.historiesTitle}
-        help={TRANSLATION.home.historiesHelp}
-      >
+      </section>
+      <Spacer y={8} />
+      <section>
+        <Typography component="h2" variant="h4" paragraph>
+          経歴
+        </Typography>
         <HistoryList histories={data.histories} />
-      </Section>
-      <Section
-        title={TRANSLATION.home.ossesTitle}
-        help={TRANSLATION.home.ossesHelp}
-      >
+      </section>
+      <Spacer y={8} />
+      <section>
+        <Typography component="h2" variant="h4" paragraph>
+          OSS
+        </Typography>
         <OssList osses={data.osses} />
-      </Section>
-      <Section
-        title={TRANSLATION.home.qualificationsTitle}
-        help={TRANSLATION.home.qualificationsHelp}
-      >
+      </section>
+      <Spacer y={8} />
+      <section>
+        <Typography component="h2" variant="h4" paragraph>
+          資格
+        </Typography>
         <CertificationList certifications={data.certifications} />
-      </Section>
-    </>
+      </section>
+      <Spacer y={8} />
+      <Breadcrumbs title={title} />
+    </Container>
   );
 };
 
diff --git a/src/pages/outputs.tsx b/src/pages/outputs.tsx
index 682d4a60..250010fd 100644
--- a/src/pages/outputs.tsx
+++ b/src/pages/outputs.tsx
@@ -1,15 +1,16 @@
 import Container from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
 import { graphql } from "gatsby";
 
 import type { OutputsPageQuery } from "@/generated/graphqlTypes";
 import type { HeadFC, PageProps } from "gatsby";
 
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { Spacer } from "@/components/Spacer";
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
 import { TRANSLATION } from "@/constants/TRANSLATION";
-import { BioCardList } from "@/features/Bio";
 import { TimelineList } from "@/features/Timeline";
 import { TimelineTabList } from "@/features/TimelineTab";
+import { useBuildTime } from "@/hooks/useBuildTime";
 import { HeadTemplate } from "@/layouts/HeadTemplate";
 
 export const query = graphql`
@@ -20,42 +21,85 @@ export const query = graphql`
   }
 `;
 
-export const Head: HeadFC<OutputsPageQuery> = ({ location }) => {
+export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
   const title = `${TRANSLATION.outputs.title} - ${SITE_METADATA.title}`;
+  const outputsItems = data.outputs.group.flatMap(({ nodes }) => nodes);
+  const buildTime = useBuildTime();
 
   return (
-    <HeadTemplate
-      location={location}
-      title={title}
-      description={SITE_METADATA.description}
-      image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
-      imageAlt={title}
-      type="blog"
-    />
+    <>
+      <HeadTemplate
+        location={location}
+        title={title}
+        description={SITE_METADATA.description}
+        image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
+        imageAlt={title}
+        type="blog"
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Blog",
+            headline: SITE_METADATA.title,
+            image: [`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`],
+            datePublished: buildTime,
+            dateModified: buildTime,
+            description: SITE_METADATA.description,
+            author: {
+              "@type": "Person",
+              name: `${SITE_METADATA.lastName} ${SITE_METADATA.firstName}`,
+              url: SITE_METADATA.siteUrl,
+            },
+            publisher: {
+              "@type": "Organization",
+              name: SITE_METADATA.title,
+              logo: {
+                "@type": "ImageObject",
+                url: `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+              },
+            },
+            blogPost: [
+              ...outputsItems.map((item) => ({
+                "@type": "BlogPosting",
+                headline: item.title,
+                image:
+                  item.__typename === "Mdx"
+                    ? `${SITE_METADATA.siteUrl}/ogp/${item.slug}.png`
+                    : `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+                datePublished: item.date,
+                author: {
+                  "@type": "Person",
+                  name: `${SITE_METADATA.lastName} ${SITE_METADATA.firstName}`,
+                  url: SITE_METADATA.siteUrl,
+                },
+              })),
+            ],
+          }),
+        }}
+      />
+    </>
   );
 };
 
-const OutputsPage = ({
-  data,
-  location,
-}: PageProps<OutputsPageQuery>): JSX.Element => {
+const OutputsPage = ({ data }: PageProps<OutputsPageQuery>): JSX.Element => {
+  const title = TRANSLATION.outputs.title;
   const outputGroups = data.outputs;
-  const path = location.pathname;
 
   return (
     <Container
       maxWidth="md"
       fixed
-      css={(theme) => ({
-        marginTop: theme.spacing(4),
-        marginBottom: theme.spacing(4),
-      })}
+      css={(theme) => ({ margin: theme.spacing(4, "auto") })}
     >
-      <BioCardList />
-      <Divider css={(theme) => ({ margin: theme.spacing(6, 0) })} />
-      <TimelineTabList path={path} />
-      <div css={(theme) => ({ height: theme.spacing(3) })} />
+      <Breadcrumbs title={title} />
+      <Spacer y={4} />
+      <TimelineTabList />
+      <Spacer y={2} />
       <TimelineList groups={outputGroups} />
+      <Spacer y={4} />
+      <Breadcrumbs title={title} />
     </Container>
   );
 };
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index 5c7c119d..40302c00 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -1,13 +1,13 @@
 import Container from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
 import { graphql } from "gatsby";
 
 import type { ProjectsPageQuery } from "@/generated/graphqlTypes";
 import type { PageProps, HeadFC } from "gatsby";
 
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { Spacer } from "@/components/Spacer";
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
 import { TRANSLATION } from "@/constants/TRANSLATION";
-import { BioCardList } from "@/features/Bio";
 import { TimelineList } from "@/features/Timeline";
 import { TimelineTabList } from "@/features/TimelineTab";
 import { HeadTemplate } from "@/layouts/HeadTemplate";
@@ -20,7 +20,7 @@ export const query = graphql`
   }
 `;
 
-export const Head: HeadFC<ProjectsPageQuery> = ({ location, data }) => {
+export const Head: HeadFC<ProjectsPageQuery> = ({ location }) => {
   const title = `${TRANSLATION.projects.title} - ${SITE_METADATA.title}`;
 
   return (
@@ -35,27 +35,23 @@ export const Head: HeadFC<ProjectsPageQuery> = ({ location, data }) => {
   );
 };
 
-const ProjectsPage = ({
-  data,
-  location,
-}: PageProps<ProjectsPageQuery>): JSX.Element => {
+const ProjectsPage = ({ data }: PageProps<ProjectsPageQuery>): JSX.Element => {
+  const title = TRANSLATION.projects.title;
   const projectGroups = data.projects;
-  const path = location.pathname;
 
   return (
     <Container
       maxWidth="md"
       fixed
-      css={(theme) => ({
-        marginTop: theme.spacing(4),
-        marginBottom: theme.spacing(4),
-      })}
+      css={(theme) => ({ margin: theme.spacing(4, "auto") })}
     >
-      <BioCardList />
-      <Divider css={(theme) => ({ margin: theme.spacing(6, 0) })} />
-      <TimelineTabList path={path} />
-      <div css={(theme) => ({ height: theme.spacing(3) })} />
+      <Breadcrumbs title={title} />
+      <Spacer y={4} />
+      <TimelineTabList />
+      <Spacer y={2} />
       <TimelineList groups={projectGroups} />
+      <Spacer y={4} />
+      <Breadcrumbs title={title} />
     </Container>
   );
 };
diff --git a/static b/static
index 80dc0385..ad9c0394 160000
--- a/static
+++ b/static
@@ -1 +1 @@
-Subproject commit 80dc0385049a34a7a96435bd5caaff8c7d71414a
+Subproject commit ad9c0394f7771f2bb117244870bf3005bce58c06
diff --git a/yarn.lock b/yarn.lock
index 9c50290e..479eaae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5811,7 +5811,7 @@ __metadata:
     canvas: "npm:2.11.2"
     date-fns: "npm:2.30.0"
     date-fns-tz: "npm:2.0.0"
-    dotenv: "npm:16.1.4"
+    dotenv: "npm:16.2.0"
     eslint: "npm:8.42.0"
     eslint-config-prettier: "npm:8.8.0"
     eslint-config-standard-with-typescript: "npm:35.0.0"
@@ -5824,6 +5824,7 @@ __metadata:
     eslint-plugin-regexp: "npm:1.15.0"
     fuse.js: "npm:6.6.2"
     gatsby: "npm:5.10.0"
+    gatsby-plugin-anchor-links: "npm:1.2.1"
     gatsby-plugin-emotion: "npm:8.10.0"
     gatsby-plugin-feed: "npm:5.10.0"
     gatsby-plugin-fix-fouc: "npm:1.0.3"
@@ -7723,7 +7724,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:16.1.4, dotenv@npm:^16.0.0":
+"dotenv@npm:16.2.0":
+  version: 16.2.0
+  resolution: "dotenv@npm:16.2.0"
+  checksum: a5a723114ef4e52fc06846560af5fb8cae09709441af944bf3e69566bece6c638ec5fc0e13bf8896b2123d01146a1228d720fc14f0180507a66571f8d3b5eb5b
+  languageName: node
+  linkType: hard
+
+"dotenv@npm:^16.0.0":
   version: 16.1.4
   resolution: "dotenv@npm:16.1.4"
   checksum: c8eb9665ee670f2d3aa36b6f3dc43a9108a02da9efaa86cb9890d6873cbc025b047e30ce23f852195be8e4a2601b7684c23173d937d754443c4fbc957e1da512
@@ -9584,6 +9592,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gatsby-plugin-anchor-links@npm:1.2.1":
+  version: 1.2.1
+  resolution: "gatsby-plugin-anchor-links@npm:1.2.1"
+  dependencies:
+    scroll-to-element: "npm:^2.0.3"
+  checksum: c6776ac153f4785cf0811beee780be362a49f64799a6c7a3cba0d0e122c56560054302b2fb1f022e1ef56725ddc8fbbcf0c81030927633452571e9064ee562f1
+  languageName: node
+  linkType: hard
+
 "gatsby-plugin-emotion@npm:8.10.0":
   version: 8.10.0
   resolution: "gatsby-plugin-emotion@npm:8.10.0"
@@ -15625,6 +15642,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raf@npm:^3.4.0":
+  version: 3.4.1
+  resolution: "raf@npm:3.4.1"
+  dependencies:
+    performance-now: "npm:^2.1.0"
+  checksum: edeeb83c7727fba43430c954452e1b4706ce6c4d52fdc6743b1e34e5ba3e8e08bc9e85b237a558441ef10e17e6de53ba19949d92c2b3bbd0561d861fe3282ea8
+  languageName: node
+  linkType: hard
+
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -16517,6 +16543,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scroll-to-element@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "scroll-to-element@npm:2.0.3"
+  dependencies:
+    raf: "npm:^3.4.0"
+  checksum: 0862a5b21a58fdf26316f6b1cfa4d1d4b5de22ad4a5f9e7b82b491a8dcc89f69e118b51f2d044947d280438ef0810afbf72f900e20294beb4f32d9f59260cee7
+  languageName: node
+  linkType: hard
+
 "scslre@npm:^0.2.0":
   version: 0.2.0
   resolution: "scslre@npm:0.2.0"