diff --git a/astro.config.ts b/astro.config.ts
index fc36739..5b693b2 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -138,7 +138,6 @@ export default defineConfig({
         } satisfies RemarkVideoConfig,
       ],
       remarkFootnote,
-      remarkLineBreaks,
       [
         remarkEmbed,
         {
@@ -151,6 +150,7 @@ export default defineConfig({
         } satisfies RemarkEmbedOptions,
       ],
       remarkLinkCard,
+      remarkLineBreaks,
     ],
     rehypePlugins: [
       rehypeKatex,
diff --git a/src/content/blog/en/astro-website.mdx b/src/content/blog/en/astro-website.mdx
index 6804a5a..c1bad7c 100644
--- a/src/content/blog/en/astro-website.mdx
+++ b/src/content/blog/en/astro-website.mdx
@@ -2,7 +2,7 @@
 title: Build a Personal Website with Astro, Cloudflare Pages, D1, and Front Matter CMS
 description: A quick tour of my personal blog built with Astro, Cloudflare Pages, D1, and Front Matter CMS.
 publishedAt: 2024-07-13T00:34:54.000Z
-modifiedAt: 2024-11-12T05:06:41.400Z
+modifiedAt: 2024-11-12T05:52:59.352Z
 draft: published
 type: blog
 category:
@@ -459,4 +459,4 @@ Styling:
 
 https://nostalgic-css.github.io/NES.css/
 
-https://vanilla-extract.style/
+https://tailwindcss.com/
diff --git a/src/content/blog/ja/astro-website.mdx b/src/content/blog/ja/astro-website.mdx
index 39937c5..5d90b9a 100644
--- a/src/content/blog/ja/astro-website.mdx
+++ b/src/content/blog/ja/astro-website.mdx
@@ -2,7 +2,7 @@
 title: Astro + Cloudflare Pages + D1 + Front Matter CMS で個人ウェブサイトを作った
 description: Astro + Cloudflare Pages + D1 + Front Matter CMSの構成で作った個人ウェブサイトの開発体験を簡単に紹介する
 publishedAt: 2024-07-13T00:35:10.000Z
-modifiedAt: 2024-11-12T05:06:19.722Z
+modifiedAt: 2024-11-12T05:52:57.033Z
 draft: published
 type: blog
 category:
@@ -458,4 +458,4 @@ https://route360.dev/ja/post/frontmatter-cms/
 
 https://nostalgic-css.github.io/NES.css/
 
-https://vanilla-extract.style/
+https://tailwindcss.com/
diff --git a/src/content/page/en/work.mdx b/src/content/page/en/work.mdx
index b6d1ee5..fa53b81 100644
--- a/src/content/page/en/work.mdx
+++ b/src/content/page/en/work.mdx
@@ -1,7 +1,7 @@
 ---
 title: Work
 fmContentType: page
-modifiedAt: 2024-09-13T08:29:31.690Z
+modifiedAt: 2024-11-12T05:28:57.025Z
 ---
 
 ## Development
@@ -24,4 +24,9 @@ Nagi's Personal Knowledge Base built using Obsidian
 **remark-card**
 A remark plugin to parse card component(s) for Markdown content
 :::
+:::card
+[![ remark-video ](../../../assets/images/plugin-image.png)](https://github.com/brklntmhwk/remark-video)
+**remark-video**
+A remark plugin to parse HTML5 video component(s) for Markdown content
+:::
 ::::
diff --git a/src/content/page/ja/work.mdx b/src/content/page/ja/work.mdx
index 338a97b..de80dd2 100644
--- a/src/content/page/ja/work.mdx
+++ b/src/content/page/ja/work.mdx
@@ -1,7 +1,7 @@
 ---
 title: 作品
 fmContentType: page
-modifiedAt: 2024-09-13T08:28:07.458Z
+modifiedAt: 2024-11-12T05:29:53.724Z
 ---
 
 ## 開発
@@ -24,4 +24,9 @@ Obsidian で作った個人ナレッジベース
 **remark-card**
 マークダウンをカードコンポーネントに変換する Remark プラグイン
 :::
+:::card
+[![ remark-video ](../../../assets/images/plugin-image.png)](https://github.com/brklntmhwk/remark-video)
+**remark-video**
+マークダウンを HTML5 対応のビデオコンポーネントに変換する Remark プラグイン
+:::
 ::::
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 8123e22..ad03d51 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -84,7 +84,7 @@ const tags = await getBlogTags(blogTags);
           )
         } -->
         <h1 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
-        <div class="text-[0.825rem] sm:text-[1.045rem] pt-2.5 pb-3.5 flex flex-wrap justify-center items-center gap-y-4 gap-x-3">
+        <div class="text-[0.825rem] sm:text-[1.045rem] pt-2.5 pb-3.5 flex flex-wrap justify-center items-center gap-y-7 gap-x-3">
           {
             category && (
               <Taxonomy
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 25cff4e..7a027d4 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -39,7 +39,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
 >
   <main class="flex flex-col gap-5 xl:gap-9 xl:pt-10 xl:px-24 xl:pb-24" data-pagefind-ignore="all">
     <BulletinBoard newsList={latestNews} />
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.about_section.title}</h2>
       <span>{t.data.pages.home.about_section.description}</span>
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/about')}>
@@ -47,7 +47,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.blog_section.title}</h2>
       <BlogList taxonomies={{ show: true, shouldDisplay: ['category', 'tags'] }} entries={latestBlogEntries} />
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/blog')}>
@@ -55,7 +55,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.photo_section.title}</h2>
       <span>{t.data.pages.home.photo_section.description}</span>
       <PhotoGallery {photos} />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 13bdd56..d4eee31 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -33,7 +33,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
 >
   <main class="flex flex-col gap-5 xl:gap-9 xl:pt-10 xl:px-24 xl:pb-24" data-pagefind-ignore="all">
     <BulletinBoard newsList={latestNews} />
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.about_section.title}</h2>
       <span>{t.data.pages.home.about_section.description}</span>
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/about')}>
@@ -41,7 +41,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.blog_section.title}</h2>
       <BlogList taxonomies={{ show: true, shouldDisplay: ['category', 'tags'] }} entries={latestBlogEntries} />
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/blog')}>
@@ -49,7 +49,7 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
-    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-1.5 md:py-6 md:px-9">
+    <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
       <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.photo_section.title}</h2>
       <span>{t.data.pages.home.photo_section.description}</span>
       <PhotoGallery {photos} />