diff --git a/apps/astro/src/components/lib/Markdown.tsx b/apps/astro/src/components/lib/Markdown.tsx
index 25e420b..80e8ee0 100644
--- a/apps/astro/src/components/lib/Markdown.tsx
+++ b/apps/astro/src/components/lib/Markdown.tsx
@@ -28,16 +28,18 @@ export const Markdown = ({
       <ReactMarkdown
         remarkPlugins={[remarkTextr, remarkGfm]}
         components={{
-          h1: ({ node: _, ...props }) => (
+          h1: ({ ref: __, node: _, ...props }) => (
             <Heading as="h1" size="3xl" fontWeight="bold" {...props} />
           ),
-          h2: ({ node: _, ...props }) => <Heading as="h2" size="3xl" {...props} />,
-          h3: ({ node: _, ...props }) => (
+          h2: ({ ref: __, node: _, ...props }) => <Heading as="h2" size="3xl" {...props} />,
+          h3: ({ ref: __, node: _, ...props }) => (
             <Heading as="h3" size="2xl" fontWeight="bold" {...props} />
           ),
-          h4: ({ node: _, ...props }) => <Heading as="h4" size="2xl" {...props} />,
-          h5: ({ node: _, ...props }) => <Heading as="h5" size="xl" fontWeight="bold" {...props} />,
-          h6: ({ node: _, ...props }) => <Heading as="h6" size="xl" {...props} />,
+          h4: ({ ref: __, node: _, ...props }) => <Heading as="h4" size="2xl" {...props} />,
+          h5: ({ ref: __, node: _, ...props }) => (
+            <Heading as="h5" size="xl" fontWeight="bold" {...props} />
+          ),
+          h6: ({ ref: __, node: _, ...props }) => <Heading as="h6" size="xl" {...props} />,
           p: ({ ref: _ref, node: _, ...props }) => <Text as="p" {...props} />,
           strong: ({ ref: _, node: __, ...props }) => (
             <Text as="span" fontWeight="bold" {...props} />
diff --git a/apps/astro/src/i18n/utils.ts b/apps/astro/src/i18n/utils.ts
index 1379289..f4a4418 100644
--- a/apps/astro/src/i18n/utils.ts
+++ b/apps/astro/src/i18n/utils.ts
@@ -14,10 +14,12 @@ export function useTranslations<Lang extends keyof typeof ui = typeof defaultLan
   return function t<
     Collection extends keyof (typeof ui)[Lang],
     Key extends keyof (typeof ui)[Lang][Collection]
-  >(key: `${string & Collection}.${string & Key}`): (typeof ui)[Lang][Collection][Key] {
+  >(key: `${string & Collection}.${string & Key}`): (typeof ui)[Lang][Collection][Key] | Key {
     const [collection, translationKey] = key.split('.') as [Collection, Key];
-    return (
-      ui[lang][collection][translationKey] || ui[defaultLang as Lang][collection][translationKey]
-    );
+    const res =
+      ui[lang][collection]?.[translationKey] ??
+      ui[defaultLang as Lang][collection]?.[translationKey] ??
+      translationKey;
+    return res;
   };
 }
diff --git a/apps/astro/src/pages/[locale]/about/index.astro b/apps/astro/src/pages/[locale]/about/index.astro
index eedb326..ca60ae0 100644
--- a/apps/astro/src/pages/[locale]/about/index.astro
+++ b/apps/astro/src/pages/[locale]/about/index.astro
@@ -9,6 +9,7 @@ import { toKebabCase } from 'utils/kebab-case';
 import { Markdown } from '~/components/lib/Markdown';
 import { TagBadge } from '~/components/tags/TagBadge';
 import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
 import { Text } from '~/components/ui/text';
 import { graphQLSdk } from '~/graphql';
 import { useTranslations, validateLocale } from '~/i18n/utils';
@@ -66,9 +67,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
                           .map(
                             (s) =>
                               s.attributes && (
-                                <a href={`/tags/${s.attributes.slug}`}>
+                                <Link href={`/tags/${s.attributes.slug}`}>
                                   <TagBadge tag={s.attributes} showCount />
-                                </a>
+                                </Link>
                               )
                           )}
                       </Wrap>
@@ -111,9 +112,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
                       {sortTags(tags?.data).map(
                         (s) =>
                           s.attributes && (
-                            <a href={`/tags/${s.attributes.slug}`}>
+                            <Link href={`/tags/${s.attributes.slug}`}>
                               <TagBadge tag={s.attributes} showCount size="sm" />
-                            </a>
+                            </Link>
                           )
                       )}
                     </Wrap>
diff --git a/apps/astro/src/pages/[locale]/hobbies/[id]/index.astro b/apps/astro/src/pages/[locale]/hobbies/[id]/index.astro
new file mode 100644
index 0000000..09b5f70
--- /dev/null
+++ b/apps/astro/src/pages/[locale]/hobbies/[id]/index.astro
@@ -0,0 +1,66 @@
+---
+//TODO:
+import { FaArrowLeft } from 'react-icons/fa';
+import { Container, Divider, Stack, Wrap } from 'styled-system/jsx';
+import { Markdown } from '~/components/lib/Markdown';
+import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
+import { Text } from '~/components/ui/text';
+import { useTranslations } from '~/i18n/utils';
+import MainLayout from '~/layouts/MainLayout.astro';
+import { outlineClient } from '~/utils/outline-api';
+import { getOutlineSettings } from '~/utils/outline-settings';
+
+export const prerender = false;
+
+const { locale, id } = Astro.params;
+
+const t = useTranslations(locale as 'en');
+
+const settings = await getOutlineSettings();
+
+if (!settings?.['hobbies-collection']) {
+  return Astro.redirect('/404');
+}
+
+const data = (
+  await outlineClient.POST('/documents.info', {
+    body: { collectionId: settings['hobbies-collection'], id: id }
+  })
+).data?.data;
+
+if (!data) {
+  return Astro.redirect('/404');
+}
+
+const { title, text } = data;
+Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-revalidate');
+---
+
+<MainLayout>
+  <Container maxW="breakpoint-xl" py="8" w="full">
+    <Stack gap="4">
+      <Link href={`/${locale}/hobbies`}>
+        <Wrap fontSize="sm" alignItems="center">
+          <FaArrowLeft />
+          <Text>{t('hobbies.back-to-hobbies')}</Text>
+        </Wrap>
+      </Link>
+      <Stack gap="2">
+        <Stack gap="1">
+          <Heading
+            as="h1"
+            size="2xl"
+            fontWeight="bold"
+            style={{
+              viewTransitionName: `project-title-${id}`
+            }}>{title}</Heading
+          >
+        </Stack>
+      </Stack>
+
+      <Divider />
+      {text && <Markdown content={text} assetsPrefix={import.meta.env.PUBLIC_API_URL} />}
+    </Stack>
+  </Container>
+</MainLayout>
diff --git a/apps/astro/src/pages/[locale]/hobbies/index.astro b/apps/astro/src/pages/[locale]/hobbies/index.astro
index b021dce..87c58e8 100644
--- a/apps/astro/src/pages/[locale]/hobbies/index.astro
+++ b/apps/astro/src/pages/[locale]/hobbies/index.astro
@@ -5,6 +5,7 @@ import MainLayout from '~/layouts/MainLayout.astro';
 
 import { Center, Container, Grid, GridItem, Stack } from 'styled-system/jsx';
 import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
 import { Text } from '~/components/ui/text';
 import { useTranslations } from '~/i18n/utils';
 import { outlineClient } from '~/utils/outline-api';
@@ -27,7 +28,7 @@ const hobbiesList = (
   await outlineClient.POST('/documents.list', {
     body: { collectionId: settings['hobbies-collection'] }
   })
-).data;
+).data?.data?.filter((d) => !d.parentDocumentId);
 
 if (!hobbiesList) {
   return Astro.redirect(404);
@@ -40,17 +41,20 @@ if (!hobbiesList) {
       <Heading as="h1" fontSize="2xl">{t('common.hobbies')}</Heading>
       <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))">
         {
-          hobbiesList.data?.map((hobby) => {
-            const { title } = hobby;
+          hobbiesList.map((hobby) => {
+            console.log(hobby);
+            const { title, id } = hobby;
             return (
               <GridItem>
-                <Center bgColor="bg.muted" p={4} rounded="l1">
-                  <Stack>
-                    <Text fontWeight="bold" fontSize="xl">
-                      {title}
-                    </Text>
-                  </Stack>
-                </Center>
+                <Link w="full" href={`/${locale}/hobbies/${id}`}>
+                  <Center w="full" bgColor="bg.muted" p={4} rounded="l1">
+                    <Stack>
+                      <Text fontWeight="bold" fontSize="xl">
+                        {title}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Link>
               </GridItem>
             );
           })
diff --git a/apps/astro/src/pages/[locale]/projects/[slug]/index.astro b/apps/astro/src/pages/[locale]/projects/[slug]/index.astro
index a601423..23fb7b2 100644
--- a/apps/astro/src/pages/[locale]/projects/[slug]/index.astro
+++ b/apps/astro/src/pages/[locale]/projects/[slug]/index.astro
@@ -99,7 +99,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-rev
                 {tags.data
                   .filter((t) => !!t)
                   .map((t) => (
-                    <TagBadge tag={t.attributes as Tag} />
+                    <Link href={`/tags/${t.attributes?.slug}`}>
+                      <TagBadge tag={t.attributes as Tag} showCount size="sm" />
+                    </Link>
                   ))}
               </Wrap>
             </HStack>
diff --git a/apps/astro/src/pages/[locale]/tags/[id]/index.astro b/apps/astro/src/pages/[locale]/tags/[id]/index.astro
deleted file mode 100644
index d6615ae..0000000
--- a/apps/astro/src/pages/[locale]/tags/[id]/index.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-export const prerender = false;
-
-//TODO:
----
diff --git a/apps/astro/src/pages/[locale]/tags/[slug]/index.astro b/apps/astro/src/pages/[locale]/tags/[slug]/index.astro
new file mode 100644
index 0000000..ad8adf1
--- /dev/null
+++ b/apps/astro/src/pages/[locale]/tags/[slug]/index.astro
@@ -0,0 +1,176 @@
+---
+import { formatDistance } from 'date-fns';
+import { enUS, ja } from 'date-fns/locale';
+import { FaArrowLeft, FaGithub, FaGlobe } from 'react-icons/fa';
+import { Box, Container, Divider, Grid, GridItem, Stack, styled, Wrap } from 'styled-system/jsx';
+import { formatMonthYear, parseDate } from 'utils/date';
+import { getMediaUrl } from 'utils/media';
+import { Markdown } from '~/components/lib/Markdown';
+import { TagBadge } from '~/components/tags/TagBadge';
+import { Heading } from '~/components/ui/heading';
+import { IconButton } from '~/components/ui/icon-button';
+import { Link } from '~/components/ui/link';
+import { Text } from '~/components/ui/text';
+import { graphQLSdk } from '~/graphql';
+import { Enum_Componentutilslink_Type } from '~/graphql/generated/client';
+import { useTranslations, validateLocale } from '~/i18n/utils';
+import MainLayout from '~/layouts/MainLayout.astro';
+import { sortTags } from '~/utils/tags';
+
+export const prerender = false;
+
+const { locale, slug } = Astro.params;
+
+const data = await graphQLSdk.getTagBySlug({
+  slug
+});
+
+if (!validateLocale(locale)) {
+  return Astro.redirect(404);
+}
+
+const { projects, experiences, title, type } = data?.tags?.data[0].attributes ?? {};
+const t = useTranslations(locale);
+
+Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-revalidate');
+---
+
+<MainLayout>
+  <Container maxW="breakpoint-xl" py="8" w="full">
+    <Stack gap="4">
+      <Link href={`/${locale}/projects`}>
+        <Wrap fontSize="sm" alignItems="center">
+          <FaArrowLeft />
+          <Text>{t('project.back-to-projects')}</Text>
+        </Wrap>
+      </Link>
+      <Stack gap="2">
+        <Stack gap="1">
+          <Heading
+            as="h1"
+            size="2xl"
+            fontWeight="bold"
+            style={{
+              viewTransitionName: `project-title-${slug}`
+            }}>{title}</Heading
+          >
+          <Wrap fontSize="md" color="fg.subtle">
+            <Text>{type}</Text>
+            <Text>|</Text>
+            <Text>{type}</Text>
+          </Wrap>
+        </Stack>
+      </Stack>
+
+      {
+        experiences &&
+          experiences.data?.map((d) => {
+            if (!d.attributes) return null;
+            const { title, content, position, tags } = d.attributes;
+            const start = d.attributes.start as string;
+            const end = d.attributes.end as string;
+            return (
+              <Stack>
+                <Heading as="h2" size="xl" fontWeight="bold">
+                  {title}
+                </Heading>
+                <Wrap fontSize="sm">
+                  <Text>{position}</Text> <Text>|</Text>
+                  <Text>
+                    {formatMonthYear(parseDate(start), locale)} -{' '}
+                    {end ? formatMonthYear(parseDate(end), locale) : t('common.present')} (
+                    {formatDistance(parseDate(start), end ? parseDate(end) : new Date(), {
+                      locale: locale === 'ja' ? ja : enUS
+                    })}
+                    )
+                  </Text>
+                </Wrap>
+                {tags && (
+                  <Wrap fontSize="sm" gap="1">
+                    <Text>{t('common.tags')}</Text>
+                    {sortTags(tags?.data).map(
+                      (s) =>
+                        s.attributes && (
+                          <Link href={`/tags/${s.attributes.slug}`}>
+                            <TagBadge tag={s.attributes} showCount size="sm" />
+                          </Link>
+                        )
+                    )}
+                  </Wrap>
+                )}
+                {content && <Markdown content={content} />}
+              </Stack>
+            );
+          })
+      }
+      <Divider />
+      <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))">
+        {
+          projects?.data?.map((p) => {
+            const { title, description, slug, banner, media, date, category, links } =
+              p.attributes ?? {};
+            const image = banner?.data?.attributes ?? media?.data?.[0]?.attributes;
+            const link = links?.find((l) => l?.type === Enum_Componentutilslink_Type.Web);
+            const ghLink = links?.find((l) => l?.type === Enum_Componentutilslink_Type.Github);
+
+            return (
+              <GridItem>
+                <Stack h="full">
+                  <Link flex={1} href={`/${locale}/projects/${slug}`} data-astro-prefetch="hover">
+                    <Stack h="full" gap="0.5">
+                      {image && (
+                        <Box borderRadius="l2" overflow="hidden">
+                          <styled.img
+                            src={getMediaUrl(image.url, {}, import.meta.env.PUBLIC_API_URL) ?? ''}
+                            alt={image.name}
+                            objectFit="contain"
+                            objectPosition="center"
+                            backgroundColor="bg.muted"
+                            width="full"
+                            aspectRatio="4 / 3"
+                            style={{
+                              viewTransitionName: `project-image-${slug}`
+                            }}
+                          />
+                        </Box>
+                      )}
+                      <Text
+                        fontWeight="bold"
+                        style={{
+                          viewTransitionName: `project-title-${slug}`
+                        }}
+                      >
+                        {title}
+                      </Text>
+                      <Wrap fontSize="sm" gap="1" rowGap="0.5" color="fg.subtle">
+                        <Text>{category?.data?.attributes?.name}</Text> <Text>|</Text>
+                        <Text>{formatMonthYear(parseDate(date), locale)}</Text>
+                      </Wrap>
+                      <Text fontSize="sm">{description}</Text>
+                    </Stack>
+                  </Link>
+                  <Wrap w="full">
+                    {link?.url && (
+                      <Link href={link?.url} target="_blank">
+                        <IconButton size="xs" variant="subtle">
+                          <FaGlobe />
+                        </IconButton>
+                      </Link>
+                    )}
+                    {ghLink?.url && (
+                      <Link href={ghLink.url} target="_blank">
+                        <IconButton size="xs" variant="subtle">
+                          <FaGithub />
+                        </IconButton>
+                      </Link>
+                    )}
+                  </Wrap>
+                </Stack>
+              </GridItem>
+            );
+          })
+        }
+      </Grid>
+    </Stack>
+  </Container>
+</MainLayout>
diff --git a/libs/i18n/en/hobbies.json b/libs/i18n/en/hobbies.json
new file mode 100644
index 0000000..4906215
--- /dev/null
+++ b/libs/i18n/en/hobbies.json
@@ -0,0 +1,3 @@
+{
+  "back-to-hobbies": "Back to hobbies"
+}
diff --git a/libs/i18n/en/index.ts b/libs/i18n/en/index.ts
index a87ad0a..d8d891d 100644
--- a/libs/i18n/en/index.ts
+++ b/libs/i18n/en/index.ts
@@ -2,6 +2,7 @@ import aboutMe from './about-me.json';
 import blog from './blog.json';
 import common from './common.json';
 import contact from './contact.json';
+import hobbies from './hobbies.json';
 import home from './home.json';
 import nameCard from './name-card.json';
 import note from './note.json';
@@ -9,11 +10,12 @@ import project from './project.json';
 
 export default {
   'about-me': aboutMe,
-  blog: blog,
-  common: common,
-  contact: contact,
-  home: home,
+  blog,
+  common,
+  contact,
+  home,
   'name-card': nameCard,
-  note: note,
-  project: project
-} as const;
+  note,
+  project,
+  hobbies
+};
diff --git a/libs/i18n/ja/hobbies.json b/libs/i18n/ja/hobbies.json
new file mode 100644
index 0000000..3918bbb
--- /dev/null
+++ b/libs/i18n/ja/hobbies.json
@@ -0,0 +1,3 @@
+{
+  "back-to-hobbies": "趣味一覧へ"
+}
diff --git a/libs/i18n/ja/index.ts b/libs/i18n/ja/index.ts
index a87ad0a..d8d891d 100644
--- a/libs/i18n/ja/index.ts
+++ b/libs/i18n/ja/index.ts
@@ -2,6 +2,7 @@ import aboutMe from './about-me.json';
 import blog from './blog.json';
 import common from './common.json';
 import contact from './contact.json';
+import hobbies from './hobbies.json';
 import home from './home.json';
 import nameCard from './name-card.json';
 import note from './note.json';
@@ -9,11 +10,12 @@ import project from './project.json';
 
 export default {
   'about-me': aboutMe,
-  blog: blog,
-  common: common,
-  contact: contact,
-  home: home,
+  blog,
+  common,
+  contact,
+  home,
   'name-card': nameCard,
-  note: note,
-  project: project
-} as const;
+  note,
+  project,
+  hobbies
+};