diff --git a/.frontmatter/database/mediaDb.json b/.frontmatter/database/mediaDb.json
index 3e6e7f94..8df1a728 100644
--- a/.frontmatter/database/mediaDb.json
+++ b/.frontmatter/database/mediaDb.json
@@ -1 +1 @@
-{"assets":{"images":{}},"src":{"assets":{"images":{}}}}
\ No newline at end of file
+{"assets":{"images":{}},"src":{"assets":{"images":{}},"components":{"card":{}},"content":{"page":{"en":{}}}}}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 20f83b36..949aa657 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,5 @@
   "files.associations": {
     "*.mdx": "markdown"
   },
-  "frontMatter.content.autoUpdateDate": true
+  "frontMatter.content.autoUpdateDate": true,
 }
diff --git a/astro.config.ts b/astro.config.ts
index e2120b99..9624a15c 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -37,6 +37,7 @@ import {
   oEmbedTransformer,
   youTubeTransformer,
 } from './src/plugins/transformers';
+import remarkCard from './src/plugins/remark-card';
 
 // https://astro.build/config
 export default defineConfig({
@@ -111,6 +112,7 @@ export default defineConfig({
       remarkGfm,
       remarkAstroImageAssets,
       remarkCallout,
+      remarkCard,
       remarkFootnote,
       remarkLineBreaks,
       [
diff --git a/src/assets/images/anki-icon.webp b/src/assets/images/anki-icon.webp
new file mode 100644
index 00000000..6c5575ec
Binary files /dev/null and b/src/assets/images/anki-icon.webp differ
diff --git a/src/assets/images/asrock-b650e-pg-itx-wifi.webp b/src/assets/images/asrock-b650e-pg-itx-wifi.webp
new file mode 100644
index 00000000..0a384af1
Binary files /dev/null and b/src/assets/images/asrock-b650e-pg-itx-wifi.webp differ
diff --git a/src/assets/images/audio-technica-ath-r70x.webp b/src/assets/images/audio-technica-ath-r70x.webp
new file mode 100644
index 00000000..060a55d6
Binary files /dev/null and b/src/assets/images/audio-technica-ath-r70x.webp differ
diff --git a/src/assets/images/cloudflare-logo.webp b/src/assets/images/cloudflare-logo.webp
new file mode 100644
index 00000000..9d80f342
Binary files /dev/null and b/src/assets/images/cloudflare-logo.webp differ
diff --git a/src/assets/images/corsair-sf750.avif b/src/assets/images/corsair-sf750.avif
new file mode 100644
index 00000000..c143fde7
Binary files /dev/null and b/src/assets/images/corsair-sf750.avif differ
diff --git a/src/assets/images/crucial-ddr5-pro_.jpg b/src/assets/images/crucial-ddr5-pro_.jpg
new file mode 100644
index 00000000..acf68c93
Binary files /dev/null and b/src/assets/images/crucial-ddr5-pro_.jpg differ
diff --git a/src/assets/images/davinci-resolve-icon.webp b/src/assets/images/davinci-resolve-icon.webp
new file mode 100644
index 00000000..04a54a2a
Binary files /dev/null and b/src/assets/images/davinci-resolve-icon.webp differ
diff --git a/src/assets/images/docker-logo-blue.webp b/src/assets/images/docker-logo-blue.webp
new file mode 100644
index 00000000..44e974a5
Binary files /dev/null and b/src/assets/images/docker-logo-blue.webp differ
diff --git a/src/assets/images/dr-10l_pro.jpg b/src/assets/images/dr-10l_pro.jpg
new file mode 100644
index 00000000..37c3b01e
Binary files /dev/null and b/src/assets/images/dr-10l_pro.jpg differ
diff --git a/src/assets/images/drafts-icon.webp b/src/assets/images/drafts-icon.webp
new file mode 100644
index 00000000..d61570c4
Binary files /dev/null and b/src/assets/images/drafts-icon.webp differ
diff --git a/src/assets/images/garakuro-geforce-rtx-4060ti.webp b/src/assets/images/garakuro-geforce-rtx-4060ti.webp
new file mode 100644
index 00000000..46fa9077
Binary files /dev/null and b/src/assets/images/garakuro-geforce-rtx-4060ti.webp differ
diff --git a/src/assets/images/goodnotes-icon.webp b/src/assets/images/goodnotes-icon.webp
new file mode 100644
index 00000000..5036ed67
Binary files /dev/null and b/src/assets/images/goodnotes-icon.webp differ
diff --git a/src/assets/images/ipad-pro-13inch-spaceblack.webp b/src/assets/images/ipad-pro-13inch-spaceblack.webp
new file mode 100644
index 00000000..d8f81be5
Binary files /dev/null and b/src/assets/images/ipad-pro-13inch-spaceblack.webp differ
diff --git a/src/assets/images/iphone-15-black.webp b/src/assets/images/iphone-15-black.webp
new file mode 100644
index 00000000..daf2d515
Binary files /dev/null and b/src/assets/images/iphone-15-black.webp differ
diff --git a/src/assets/images/kindle-icon.webp b/src/assets/images/kindle-icon.webp
new file mode 100644
index 00000000..f936f169
Binary files /dev/null and b/src/assets/images/kindle-icon.webp differ
diff --git a/src/assets/images/kioxia-ssd-exceria-plus-g3.jpg b/src/assets/images/kioxia-ssd-exceria-plus-g3.jpg
new file mode 100644
index 00000000..55913b66
Binary files /dev/null and b/src/assets/images/kioxia-ssd-exceria-plus-g3.jpg differ
diff --git a/src/assets/images/lian-li-a4-h2o.jpg b/src/assets/images/lian-li-a4-h2o.jpg
new file mode 100644
index 00000000..f8b120ab
Binary files /dev/null and b/src/assets/images/lian-li-a4-h2o.jpg differ
diff --git a/src/assets/images/mac-studio-m2.webp b/src/assets/images/mac-studio-m2.webp
new file mode 100644
index 00000000..4a5aee87
Binary files /dev/null and b/src/assets/images/mac-studio-m2.webp differ
diff --git a/src/assets/images/motu-digital-performer-11.webp b/src/assets/images/motu-digital-performer-11.webp
new file mode 100644
index 00000000..82102143
Binary files /dev/null and b/src/assets/images/motu-digital-performer-11.webp differ
diff --git a/src/assets/images/neovim-icon.webp b/src/assets/images/neovim-icon.webp
new file mode 100644
index 00000000..31117893
Binary files /dev/null and b/src/assets/images/neovim-icon.webp differ
diff --git a/src/assets/images/ni-maschine-mk3.webp b/src/assets/images/ni-maschine-mk3.webp
new file mode 100644
index 00000000..3526a9bc
Binary files /dev/null and b/src/assets/images/ni-maschine-mk3.webp differ
diff --git a/src/assets/images/nixos-icon.webp b/src/assets/images/nixos-icon.webp
new file mode 100644
index 00000000..4cd0232d
Binary files /dev/null and b/src/assets/images/nixos-icon.webp differ
diff --git a/src/assets/images/nzxt-kraken-240-black.avif b/src/assets/images/nzxt-kraken-240-black.avif
new file mode 100644
index 00000000..447890c4
Binary files /dev/null and b/src/assets/images/nzxt-kraken-240-black.avif differ
diff --git a/src/assets/images/obsidian-icon.png b/src/assets/images/obsidian-icon.png
new file mode 100644
index 00000000..42c682b6
Binary files /dev/null and b/src/assets/images/obsidian-icon.png differ
diff --git a/src/assets/images/portacapture-x8.jpg b/src/assets/images/portacapture-x8.jpg
new file mode 100644
index 00000000..68e5bfd5
Binary files /dev/null and b/src/assets/images/portacapture-x8.jpg differ
diff --git a/src/assets/images/rme-babyface-pro-fs.webp b/src/assets/images/rme-babyface-pro-fs.webp
new file mode 100644
index 00000000..88bef0ab
Binary files /dev/null and b/src/assets/images/rme-babyface-pro-fs.webp differ
diff --git a/src/assets/images/ryzen-5-7600x.avif b/src/assets/images/ryzen-5-7600x.avif
new file mode 100644
index 00000000..d8d544cf
Binary files /dev/null and b/src/assets/images/ryzen-5-7600x.avif differ
diff --git a/src/assets/images/sigma-dc-dn-contemporary-e-mount.webp b/src/assets/images/sigma-dc-dn-contemporary-e-mount.webp
new file mode 100644
index 00000000..72afaa01
Binary files /dev/null and b/src/assets/images/sigma-dc-dn-contemporary-e-mount.webp differ
diff --git a/src/assets/images/sony-ilce-6700.webp b/src/assets/images/sony-ilce-6700.webp
new file mode 100644
index 00000000..bf5d7e0c
Binary files /dev/null and b/src/assets/images/sony-ilce-6700.webp differ
diff --git a/src/assets/images/spotify-icon.png b/src/assets/images/spotify-icon.png
new file mode 100644
index 00000000..873ae8f1
Binary files /dev/null and b/src/assets/images/spotify-icon.png differ
diff --git a/src/assets/images/totalmix-fx.webp b/src/assets/images/totalmix-fx.webp
new file mode 100644
index 00000000..9886927b
Binary files /dev/null and b/src/assets/images/totalmix-fx.webp differ
diff --git a/src/assets/images/vscode-icon.jpg b/src/assets/images/vscode-icon.jpg
new file mode 100644
index 00000000..0350776f
Binary files /dev/null and b/src/assets/images/vscode-icon.jpg differ
diff --git a/src/assets/images/working-copy-icon.avif b/src/assets/images/working-copy-icon.avif
new file mode 100644
index 00000000..7d74303a
Binary files /dev/null and b/src/assets/images/working-copy-icon.avif differ
diff --git a/src/components/BlogList/BlogList.astro b/src/components/BlogList/BlogList.astro
index c2af9a63..b7451340 100644
--- a/src/components/BlogList/BlogList.astro
+++ b/src/components/BlogList/BlogList.astro
@@ -35,7 +35,7 @@ const { entries, taxonomies } = Astro.props;
 
       return (
         <li class="entry-item fade-in-up">
-          <article class="pokemon-border">
+          <article class="double-border">
             <a
               class="blog-title"
               href={translatePath(
@@ -93,14 +93,14 @@ const { entries, taxonomies } = Astro.props;
         display: flex;
         flex-direction: column;
         gap: 0.825rem;
-        &:hover {
-          background-color: var(--bg-hover);
-        }
         .blog-title {
           color: var(--fg);
           font-size: 1.485rem;
           font-weight: 700;
           line-height: 1.325;
+          &:hover {
+          background-color: var(--bg-hover);
+        }
           @media (min-width: 640px) {
             font-size: 1.585rem;
           }
diff --git a/src/components/Card/Card.astro b/src/components/Card/Card.astro
new file mode 100644
index 00000000..23e2e84a
--- /dev/null
+++ b/src/components/Card/Card.astro
@@ -0,0 +1,67 @@
+---
+import {
+  type CardBorderType,
+  type ComponentCardProps,
+  type ElementCardProps,
+  isElementCard,
+  isValidBorderType,
+} from './card';
+
+type Props = ComponentCardProps | ElementCardProps;
+
+let cardBorderType: CardBorderType = 'solid';
+let isAnimated = false;
+
+if (isElementCard(Astro.props)) {
+  const { 'data-border-type': dataBorderType } = Astro.props;
+  if (isValidBorderType(dataBorderType)) {
+    cardBorderType = dataBorderType;
+  }
+} else {
+  const { borderType, isAnimated: animation } = Astro.props;
+  cardBorderType = borderType;
+  isAnimated = animation;
+}
+---
+
+<div class:list={["card", `${cardBorderType}-border`, { "fade-in-up": isAnimated }]}>
+  <slot name="image" />
+  <slot name="content" />
+</div>
+<style>
+  .card {
+    background-color: var(--bg);
+    max-width: 100%;
+    height: 15rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.525rem;
+    break-inside: avoid;
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+    & :global(.card-image) {
+      max-height: 8.75rem;
+      min-height: 6.75rem;
+      padding: 0.25rem;
+      display: flex;
+      justify-content: center;
+      & :global(img) {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    & :global(.card-content) {
+      font-size: 0.925rem;
+      padding: 0.175rem 0.325rem;
+      overflow-y: auto;
+    }
+    @media (min-width: 320px) {
+      max-width: 18rem;
+    }
+    @media (min-width: 1280px) {
+      max-width: 20rem;
+    }
+  }
+</style>
diff --git a/src/components/Card/CardGrid.astro b/src/components/Card/CardGrid.astro
new file mode 100644
index 00000000..11502644
--- /dev/null
+++ b/src/components/Card/CardGrid.astro
@@ -0,0 +1,25 @@
+---
+
+---
+
+<div class="card-grid">
+  <slot />
+</div>
+<style>
+  .card-grid {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: repeat(auto-fit, minmax(7.875rem, 1fr));
+    grid-auto-flow: row dense;
+    gap: 1.5rem;
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(auto-fit, minmax(9.675rem, 1fr));
+    }
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+</style>
diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts
new file mode 100644
index 00000000..335d823a
--- /dev/null
+++ b/src/components/Card/card.ts
@@ -0,0 +1,18 @@
+const cardBorderTypes = ['pixel', 'double', 'solid'] as const;
+
+export type CardBorderType = (typeof cardBorderTypes)[number];
+
+export type ElementCardProps = {
+  'data-border-type': string;
+};
+
+export type ComponentCardProps = {
+  borderType: CardBorderType;
+  isAnimated: boolean;
+};
+
+export const isElementCard = (props: object): props is ElementCardProps =>
+  Object.hasOwn(props, 'data-border-type');
+
+export const isValidBorderType = (type: string): type is CardBorderType =>
+  cardBorderTypes.some((borderType) => borderType === type);
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
new file mode 100644
index 00000000..4ebfa24c
--- /dev/null
+++ b/src/components/Card/index.ts
@@ -0,0 +1,2 @@
+export { default as Card } from './Card.astro';
+export { default as CardGrid } from './CardGrid.astro';
diff --git a/src/components/ContactForm/SubmitButton/SubmitButton.tsx b/src/components/ContactForm/SubmitButton/SubmitButton.tsx
index 2d01d6cd..19e58189 100644
--- a/src/components/ContactForm/SubmitButton/SubmitButton.tsx
+++ b/src/components/ContactForm/SubmitButton/SubmitButton.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 export const SubmitButton: Component<Props> = (props) => {
   return (
-    <Button type="submit" class={`pokemon-border ${submitButton}`}>
+    <Button type="submit" class={`double-border ${submitButton}`}>
       {props.label}
     </Button>
   );
diff --git a/src/components/ContactForm/TextField/TextField.tsx b/src/components/ContactForm/TextField/TextField.tsx
index 0f7e81dd..89f24e36 100644
--- a/src/components/ContactForm/TextField/TextField.tsx
+++ b/src/components/ContactForm/TextField/TextField.tsx
@@ -48,7 +48,7 @@ export const TextField: Component<Props> = (props) => {
           <Show
             when={props.type === 'hidden'}
             fallback={
-              <div class="pokemon-border">
+              <div class="double-border">
                 <Kobalte.Input
                   {...inputProps}
                   type={props.type}
@@ -65,7 +65,7 @@ export const TextField: Component<Props> = (props) => {
           </Show>
         }
       >
-        <div class="pokemon-border">
+        <div class="double-border">
           <Kobalte.TextArea {...inputProps} class={textField} />
         </div>
       </Show>
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index f32e988b..af3c667f 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -31,6 +31,9 @@ const t = await getEntry('i18n', `${locale}/translation`);
       <NavLink href={translatePath('/about')}
         >{t.data.nav.nav_links.about}</NavLink
       >
+      <NavLink href={translatePath('/tools')}
+        >{t.data.nav.nav_links.tools}</NavLink
+      >
     </div>
     <div class="icon-links" slot="outside-drawer">
       <Modal
diff --git a/src/components/PhotoGallery/PhotoGallery.astro b/src/components/PhotoGallery/PhotoGallery.astro
index 5d2d8d2e..d05b2881 100644
--- a/src/components/PhotoGallery/PhotoGallery.astro
+++ b/src/components/PhotoGallery/PhotoGallery.astro
@@ -1,5 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
+import { CardGrid } from '@/components/Card';
 import { ACCOUNT_ID, UNSPLASH_BASE_URL } from '@/lib/consts';
 import { getPhotographer } from '@/lib/unsplash/contents';
 import type { UnsplashPhotoData } from '@/lib/unsplash/types';
@@ -17,14 +18,14 @@ const username = await getPhotographer();
 ---
 
 <div class="photo-gallery-wrapper">
-  <section class="photo-gallery">
+  <CardGrid>
     {
       photos &&
         photos.results.map((photo, i) => (
           <PhotoGalleryItem {photo} order={i + 1} />
         ))
     }
-  </section>
+  </CardGrid>
   <aside>
     <p>
       {t.data.photo_gallery.credit_label}
@@ -58,24 +59,5 @@ const username = await getPhotographer();
         }
       }
     }
-    .photo-gallery {
-      display: grid;
-      align-items: flex-start;
-      grid-template-columns: repeat(auto-fit, minmax(7.875rem, 1fr));
-      grid-auto-flow: row dense;
-      gap: 1.5rem;
-      @media (min-width: 640px) {
-        grid-template-columns: repeat(auto-fit, minmax(9.675rem, 1fr));
-      }
-      @media (min-width: 768px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      @media (min-width: 1024px) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @media (min-width: 1280px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
   }
 </style>
diff --git a/src/components/PhotoGallery/PhotoGalleryItem.astro b/src/components/PhotoGallery/PhotoGalleryItem.astro
index e3fec7d3..7ce71e43 100644
--- a/src/components/PhotoGallery/PhotoGalleryItem.astro
+++ b/src/components/PhotoGallery/PhotoGalleryItem.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import { getEntry } from 'astro:content';
+import { Card } from '@/components/Card';
 import { ProfileIcon } from '@/components/ProfileIcon';
 import type { UnsplashPhoto } from '@/lib/unsplash/types';
 import { getTimeDiff } from '@/utils/get-time-diff';
@@ -30,75 +31,64 @@ const createdAt = new Date(created_at);
 const dateDiff = getTimeDiff(createdAt, locale);
 ---
 
-<div class="photo-gallery-item pixel-border fade-in-up">
+<Card borderType="pixel" isAnimated>
   <a
     aria-label={`${t.data.photo_gallery_item.photo_label}${order}`}
     href={`${links.html}?utm_source=${toSnakeCase(meta.data.site.title)}&utm_medium=referral`}
+    slot="image"
   >
-    <figure class="photo">
-      <Image
-        src={`${urls.raw}&auto=format&w=640&q=70`}
-        alt={alt_description || description || ''}
-        width={width}
-        height={height}
-        format="avif"
-        loading="lazy"
-      />
-      <figcaption>{alt_description || description}</figcaption>
-    </figure>
+    <Image
+      class="photo"
+      src={`${urls.raw}&auto=format&w=640&q=70`}
+      alt={alt_description || description || ''}
+      width={width}
+      height={height}
+      format="avif"
+      loading="lazy"
+    />
   </a>
-  <section class="photo-metadata">
+  <section slot="content" class="photo-metadata">
     <div class="photographer">
       <ProfileIcon
         alt={photo.user.username}
         src={photo.user.profile_image.small}
         size={20}
       />
-      <span>{user.username}</span>
+      <span>{user.last_name}</span>
     </div>
     <span class="photo-date">
       {dateDiff}
     </span>
   </section>
-</div>
+</Card>
 <style>
-  .photo-gallery-item {
+  .photo {
+    width: 100%;
+    max-height: 10.875rem;
+    object-fit: cover;
+  }
+  .photo-metadata {
+    font-size: 0.685rem;
     display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    break-inside: avoid;
-    .photo {
-      margin: 0 auto;
-      figcaption {
-        display: none;
-      }
-    }
-    .photo-metadata {
-      font-size: 0.685rem;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.175rem 0.225rem 0.225rem 0.225rem;
+    .photographer {
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: 0.5rem;
-      padding: 0.175rem 0.225rem 0.225rem 0.225rem;
-      .photographer {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        @media (min-width: 768px) {
-          gap: 0.5rem;
-        }
-      }
-      .photo-date {
-        margin-left: 0.5rem;
-      }
+      gap: 0.375rem;
       @media (min-width: 768px) {
-        font-size: 0.85rem;
-        padding: 0.375rem 0.5rem 0.5rem 0.5rem;
+        gap: 0.5rem;
       }
     }
+    .photo-date {
+      margin-left: 0.5rem;
+    }
     @media (min-width: 768px) {
-      margin-bottom: 1.5rem;
+      font-size: 0.85rem;
+      padding: 0.375rem 0.5rem 0.5rem 0.5rem;
     }
   }
 </style>
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 0308ef14..f8cf76f9 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -98,7 +98,7 @@ export const Search: Component<Props> = (props) => {
   return (
     <div class={searchWrapper}>
       <form onsubmit={handleSubmit}>
-        <div class={`${searchInputWrapper} pokemon-border`}>
+        <div class={`${searchInputWrapper} double-border`}>
           <SearchIcon label={props.t.button_label} width={22} height={22} />
           <input
             id="search-window"
diff --git a/src/components/elements/Figure/Image.astro b/src/components/elements/Figure/Image.astro
index fc9f314a..ff4c4fc8 100644
--- a/src/components/elements/Figure/Image.astro
+++ b/src/components/elements/Figure/Image.astro
@@ -32,7 +32,6 @@ const {
       margin: 0 auto;
       max-height: 100%;
       aspect-ratio: var(--aspectRatio);
-
       & :global(img) {
         object-fit: contain;
         color: transparent;
diff --git a/src/components/elements/Link/LinkCard.astro b/src/components/elements/Link/LinkCard.astro
index 5686d1dd..5f24ed2f 100644
--- a/src/components/elements/Link/LinkCard.astro
+++ b/src/components/elements/Link/LinkCard.astro
@@ -34,7 +34,7 @@ const image = {
 };
 ---
 
-<div class="pokemon-border link-card-wrapper">
+<div class="double-border link-card-wrapper">
   <a href={url.href} class="link-card" {...props}>
     <div class="link-metadata">
       <span class="link-title">{title}</span>
@@ -82,9 +82,7 @@ const image = {
       .link-metadata {
         display: flex;
         flex-direction: column;
-        flex-basis: 12rem;
-        flex-grow: 1;
-        flex-shrink: 1;
+        flex: 1 1 12rem;
         justify-content: space-between;
         padding: 0.5rem 0.875rem;
         white-space: nowrap;
@@ -125,9 +123,7 @@ const image = {
       .link-image {
         max-width: 8.75rem;
         display: flex;
-        flex-basis: 6rem;
-        flex-grow: 1;
-        flex-shrink: 1;
+        flex: 1 1 6rem;
         & :global(img) {
           object-fit: cover;
           width: 100%;
diff --git a/src/components/elements/OEmbed/OEmbedVideo.tsx b/src/components/elements/OEmbed/OEmbedVideo.tsx
index f90f82f1..d0cced01 100644
--- a/src/components/elements/OEmbed/OEmbedVideo.tsx
+++ b/src/components/elements/OEmbed/OEmbedVideo.tsx
@@ -5,7 +5,7 @@ import type { OEmbedVideo as OEmbedVideoSchema } from './types';
 export const OEmbedVideo: Component<{ data: OEmbedVideoSchema }> = (props) => {
   return (
     <div
-      class="pokemon-border"
+      class="double-border"
       innerHTML={sanitize(props.data.html)}
       data-oembed
       data-oembed-video
diff --git a/src/content/config.ts b/src/content/config.ts
index efea0bc3..93732b22 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -116,7 +116,7 @@ const i18n = defineCollection({
         blog: z.string(),
         news: z.string(),
         about: z.string(),
-        contact: z.string(),
+        tools: z.string(),
       }),
       hamburger_label: z.string(),
     }),
diff --git a/src/content/i18n/en/translation.yml b/src/content/i18n/en/translation.yml
index 9c95eea1..4901b593 100644
--- a/src/content/i18n/en/translation.yml
+++ b/src/content/i18n/en/translation.yml
@@ -15,7 +15,7 @@ nav:
     blog: *blog
     news: *news
     about: *about
-    contact: *contact
+    tools: Tools I use
   hamburger_label: Hamburger menu toggle
 pager:
   left_arrow_label: Previous page
diff --git a/src/content/i18n/ja/translation.yml b/src/content/i18n/ja/translation.yml
index 48131d8a..7a7a408d 100644
--- a/src/content/i18n/ja/translation.yml
+++ b/src/content/i18n/ja/translation.yml
@@ -15,7 +15,7 @@ nav:
     blog: *blog
     news: *news
     about: *about
-    contact: *contact
+    tools: 愛用ツール群
   hamburger_label: ハンバーガーメニュー開閉
 pager:
   left_arrow_label: 前のページ
@@ -101,7 +101,7 @@ pages:
   about:
     title: *about
     my_name: *author
-    contact_me: お問い合わせ
+    contact_me: *contact
     profile_img_alt: プロフィール画像
     back_to_top: *back_to_top
     scroll_to_top: *scroll_to_top
diff --git a/src/content/page/en/about.mdx b/src/content/page/en/about.mdx
index 1d9fb401..de7f4a49 100644
--- a/src/content/page/en/about.mdx
+++ b/src/content/page/en/about.mdx
@@ -1,7 +1,7 @@
 ---
 title: about
 type: page
-modifiedAt: 2024-09-06T03:22:14.632Z
+modifiedAt: 2024-09-09T08:43:05.042Z
 ---
 
 ## About my website
diff --git a/src/content/page/en/tools.mdx b/src/content/page/en/tools.mdx
new file mode 100644
index 00000000..16d83ab7
--- /dev/null
+++ b/src/content/page/en/tools.mdx
@@ -0,0 +1,126 @@
+---
+title: Tools I Use
+fmContentType: page
+modifiedAt: 2024-09-10T08:21:58.305Z
+description: Here are software & hardware tools I use daily.
+---
+
+## Daily Use
+
+- @= iPhone 15 Black
+  - [![iPhone 15 Black](../../../assets/images/iphone-15-black.webp)](https://www.apple.com/iphone-15/)
+  - iPhone 15 Black
+- @= iPad Pro Gen7(M4) 13inch Space Black
+  - [![iPad Pro Gen7(M4) 13inch Space Black](../../../assets/images/ipad-pro-13inch-spaceblack.webp)](https://www.apple.com/ipad-pro/)
+  - iPad Pro Gen7(M4) 13inch Space Black
+- @= Mac Studio Gen2(M2 Max)
+  - [![Mac Studio Gen2(M2 Max)](../../../assets/images/mac-studio-m2.webp)](https://www.apple.com/mac-studio/)
+  - Mac Studio Gen2(M2 Max)
+---
+- @= Obsidian
+  - [![ Obsidian ](../../../assets/images/obsidian-icon.png)](https://obsidian.md/)
+  - Obsidian
+- @= GoodNotes
+  - [![ GoodNotes ](../../../assets/images/goodnotes-icon.webp)](https://www.goodnotes.com/)
+  - GoodNotes
+- @= Anki
+  - [![ Anki ](../../../assets/images/anki-icon.webp)](https://apps.ankiweb.net/)
+  - Anki
+- @= Drafts
+  - [![ Drafts ](../../../assets/images/drafts-icon.webp)](https://getdrafts.com/)
+  - Drafts
+- @= Kindle
+  - [![ Kindle ](../../../assets/images/kindle-icon.webp)](https://www.amazon.co.jp/gp/browse.html?node=26197586051&ref=kcp_fd_hz)
+  - Kindle
+- @= Spotify
+  - [![ Spotify ](../../../assets/images/spotify-icon.png)](https://open.spotify.com/)
+  - Spotify
+
+### My Homebuilt PC
+
+It's mainly used for coding.
+
+- @= Lian Li A4-H2O
+  - [![ Lian Li A4-H2O ](../../../assets/images/lian-li-a4-h2o.jpg)](https://lian-li.com/product/a4h2o/?cn-reloaded=1)
+  - Lian Li A4-H2O
+- @= AMD Ryzen™ 5 7600X
+  - [![AMD Ryzen™ 5 7600X](../../../assets/images/ryzen-5-7600x.avif)](https://www.amd.com/en/products/processors/desktops/ryzen/7000-series/amd-ryzen-5-7600x.html)
+  - AMD Ryzen™ 5 7600X
+- @= 玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti
+  - [![玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti](../../../assets/images/garakuro-geforce-rtx-4060ti.webp)](https://www.kuroutoshikou.com/product/detail/gg-rtx4060ti-e8gb-oc-df.html)
+  - 玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti
+- @= ASRock B650E PG-ITX WiFi
+  - [![ ASRock B650E PG-ITX WiFi ](../../../assets/images/asrock-b650e-pg-itx-wifi.webp)](https://pg.asrock.com/mb/AMD/B650E%20PG-ITX%20WiFi/index.jp.asp)
+  - ASRock B650E PG-ITX WiFi
+- @= Corsair SF750
+  - [![ Corsair SF750 ](../../../assets/images/corsair-sf750.avif)](https://www.corsair.com/us/en/p/psu/cp-9020186-na/sf-series-sf750-750-watt-80-plus-platinum-certified-high-performance-sfx-psu-cp-9020186-na)
+  - Corsair SF750
+- @= NZXT KRAKEN 240 RL-KN240-B1
+  - [![ NZXT KRAKEN 240 RL-KN240-B1 ](../../../assets/images/nzxt-kraken-240-black.avif)](https://nzxt.com/product/kraken-240?srsltid=AfmBOoprt6uuh1-DON5Zd16yJ3UQpTL7HEBbl0EaB3ujeRi_zApWfApb)
+  - NZXT KRAKEN 240 RL-KN240-B1
+- @= Crucial DDR5 Pro 16GB x 2
+  - [![ Crucial DDR5 Pro 16GB x 2](../../../assets/images/crucial-ddr5-pro_.jpg)](https://www.crucial.com/memory/ddr5/cp2k16g56c46u5)
+  - Crucial DDR5 Pro  16GB x 2
+- @= KIOXIA EXCERIA Plus G3 1TB
+  - [![ KIOXIA EXCERIA Plus G3 1TB](../../../assets/images/kioxia-ssd-exceria-plus-g3.jpg)](https://www.kioxia.com/ja-jp/personal/ssd.html#EXCERIAPLUSG3)
+  - KIOXIA EXCERIA Plus G3 1TB
+
+## Development
+
+- @= NixOS
+  - [![ NixOS ](../../../assets/images/nixos-icon.webp)](https://nixos.org/)
+  - NixOS
+---
+- @= Cloudflare
+  - [![ Cloudflare ](../../../assets/images/cloudflare-logo.webp)](https://www.cloudflare.com/lp/ppc/overview-x/)
+  - Cloudflare
+- @= Docker
+  - [![ Docker ](../../../assets/images/docker-logo-blue.webp)](https://www.docker.com/)
+  - Docker
+---
+- @= Visual Studio Code
+  - [![ Visual Studio Code ](../../../assets/images/vscode-icon.jpg)](https://code.visualstudio.com/)
+  - Visual Studio Code
+- @= Neovim
+  - [![ Neovim ](../../../assets/images/neovim-icon.webp)](https://neovim.io/)
+  - Neovim
+
+## Arts
+
+### Music
+
+- @= RME Babyface Pro FS
+  - [![RME Babyface Pro FS](../../../assets/images/rme-babyface-pro-fs.webp)](https://rme-audio.de/babyface-pro-fs.html)
+  - RME Babyface Pro FS
+- @= audio-technica ATH-R70x
+  - [![audio-technica ATH-R70x](../../../assets/images/audio-technica-ath-r70x.webp)](https://www.audio-technica.co.jp/product/ATH-R70x?srsltid=AfmBOorXxQEzMYddDoDzfjSaT2bvyxwxa9GGJ8_6uAUcM46nGRhKQLoV)
+  - audio-technica ATH-R70x
+- @= Native Instruments MASCHINE MK3
+  - [![Native Instruments MASCHINE MK3](../../../assets/images/ni-maschine-mk3.webp)](https://www.native-instruments.com/en/products/maschine/production-systems/maschine/whats-new-in-mk3/?srsltid=AfmBOoryQwBPYY3OzXm82Xx0pn7dpBM4fhF3EAXXc-VrDTiUmsHIWUnG)
+  - Native Instruments MASCHINE MK3
+---
+- @= MOTU Digital Performer 11
+  - [![ MOTU Digital Performer 11 ](../../../assets/images/motu-digital-performer-11.webp)](https://motu.com/en-us/store/catalogue/digital-performer-11_489/#502)
+  - MOTU Digital Performer 11
+- @= RME TotalMix FX
+  - [![ RME TotalMix FX ](../../../assets/images/totalmix-fx.webp)](https://rme-audio.de/totalmix-fx.html)
+  - RME TotalMix FX
+
+### Photo & Videography
+
+- @= SONY α6700 ILCE-6700
+  - [![SONY α6700 ILCE-6700](../../../assets/images/sony-ilce-6700.webp)](https://www.sony.jp/ichigan/a-universe/special_ILCE-6700/?srsltid=AfmBOopW5UyEBpbMy8T9nVbXWQqON4WNw_K3-VQRwTZAwtoeJA6sxPcU)
+  - SONY α6700 ILCE-6700
+- @= SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount
+  - [![SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount](../../../assets/images/sigma-dc-dn-contemporary-e-mount.webp)](https://www.sigma-global.com/jp/lenses/c021_18_50_28/)
+  - SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount
+- @= TASCAM Portacapture X8
+  - [![TASCAM Portacapture X8](../../../assets/images/portacapture-x8.jpg)](https://tascam.jp/us/product/portacapture_x8/top)
+  - TASCAM Portacapture X8
+- @= TASCAM DR-10L Pro
+  - [![TASCAM DR-10L Pro](../../../assets/images/dr-10l_pro.jpg)](https://tascam.jp/us/product/dr-10l_pro/top)
+  - TASCAM DR-10L Pro
+---
+- @= DaVinci Resolve
+  - [![ DaVinci Resolve ](../../../assets/images/davinci-resolve-icon.webp)](https://www.blackmagicdesign.com/products/davinciresolve)
+  - DaVinci Resolve
diff --git a/src/content/page/ja/about.mdx b/src/content/page/ja/about.mdx
index cbe846e1..c204140c 100644
--- a/src/content/page/ja/about.mdx
+++ b/src/content/page/ja/about.mdx
@@ -1,7 +1,7 @@
 ---
 title: 運営者
 type: page
-modifiedAt: 2024-09-06T01:27:28.180Z
+modifiedAt: 2024-09-09T08:39:44.416Z
 ---
 
 {/* textlint-disable ja-technical-writing/ja-no-weak-phrase */}
diff --git a/src/content/page/ja/tools.mdx b/src/content/page/ja/tools.mdx
new file mode 100644
index 00000000..f9136e37
--- /dev/null
+++ b/src/content/page/ja/tools.mdx
@@ -0,0 +1,126 @@
+---
+title: 愛用ツール群
+fmContentType: page
+modifiedAt: 2024-09-10T08:52:25.946Z
+description: 私が普段使っているソフトウェア&ハードウェア群
+---
+
+## 普段使い
+
+- @= iPhone 15 ブラック
+  - [![iPhone 15 ブラック](../../../assets/images/iphone-15-black.webp)](https://www.apple.com/jp/shop/buy-iphone/iphone-15)
+  - iPhone 15 ブラック
+- @= iPad Pro 第 7 世代(M4) 13 インチ スペースブラック
+  - [![iPad Pro 第 7 世代(M4) 13インチ スペースブラック](../../../assets/images/ipad-pro-13inch-spaceblack.webp)](https://www.apple.com/jp/ipad-pro/)
+  - iPad Pro 第 7 世代(M4) 13 インチ スペースブラック
+- @= Mac Studio 第 2 世代(M2 Max)
+  - [![Mac Studio 第2世代(M2 Max)](../../../assets/images/mac-studio-m2.webp)](https://www.apple.com/jp/mac-studio/)
+  - Mac Studio 第 2 世代(M2 Max)
+---
+- @= Obsidian
+  - [![ Obsidian ](../../../assets/images/obsidian-icon.png)](https://obsidian.md/)
+  - Obsidian
+- @= GoodNotes
+  - [![ GoodNotes ](../../../assets/images/goodnotes-icon.webp)](https://www.goodnotes.com/)
+  - GoodNotes
+- @= Anki
+  - [![ Anki ](../../../assets/images/anki-icon.webp)](https://apps.ankiweb.net/)
+  - Anki
+- @= Drafts
+  - [![ Drafts ](../../../assets/images/drafts-icon.webp)](https://getdrafts.com/)
+  - Drafts
+- @= Kindle
+  - [![ Kindle ](../../../assets/images/kindle-icon.webp)](https://www.amazon.co.jp/gp/browse.html?node=26197586051&ref=kcp_fd_hz)
+  - Kindle
+- @= Spotify
+  - [![ Spotify ](../../../assets/images/spotify-icon.png)](https://open.spotify.com/intl-ja)
+  - Spotify
+
+### 自作PC
+
+主にコーディングに使用しています。
+
+- @= Lian Li A4-H2O
+  - [![ Lian Li A4-H2O ](../../../assets/images/lian-li-a4-h2o.jpg)](https://lian-li.com/ja/product/a4h2o/?cn-reloaded=1)
+  - Lian Li A4-H2O
+- @= AMD Ryzen™ 5 7600X
+  - [![AMD Ryzen™ 5 7600X](../../../assets/images/ryzen-5-7600x.avif)](https://www.amd.com/ja/products/processors/desktops/ryzen/7000-series/amd-ryzen-5-7600x.html)
+  - AMD Ryzen™ 5 7600X
+- @= 玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti
+  - [![玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti](../../../assets/images/garakuro-geforce-rtx-4060ti.webp)](https://www.kuroutoshikou.com/product/detail/gg-rtx4060ti-e8gb-oc-df.html)
+  - 玄人志向 GALAKURO GAMING NVIDIA GeForce RTX 4060 Ti
+- @= ASRock B650E PG-ITX WiFi
+  - [![ ASRock B650E PG-ITX WiFi ](../../../assets/images/asrock-b650e-pg-itx-wifi.webp)](https://pg.asrock.com/mb/AMD/B650E%20PG-ITX%20WiFi/index.jp.asp)
+  - ASRock B650E PG-ITX WiFi
+- @= Corsair SF750
+  - [![ Corsair SF750 ](../../../assets/images/corsair-sf750.avif)](https://www.corsair.com/jp/ja/p/psu/cp-9020186-jp/sf-series-sf750-750-watt-80-plus-platinum-certified-high-performance-sfx-psu-jp-cp-9020186-jp)
+  - Corsair SF750
+- @= NZXT KRAKEN 240 RL-KN240-B1
+  - [![ NZXT KRAKEN 240 RL-KN240-B1 ](../../../assets/images/nzxt-kraken-240-black.avif)](https://nzxt.com/ja-JP/product/kraken-240?srsltid=AfmBOopWj0u4VDZ-WDFUF2_38M1i4Y2lJg-uSpQWCu26ZnBwNo-pvUx3)
+  - NZXT KRAKEN 240 RL-KN240-B1
+- @= Crucial DDR5 Pro 16GB x 2
+  - [![ Crucial DDR5 Pro 16GB x 2](../../../assets/images/crucial-ddr5-pro_.jpg)](https://www.crucial.com/memory/ddr5/cp2k16g56c46u5)
+  - Crucial DDR5 Pro  16GB x 2
+- @= KIOXIA EXCERIA Plus G3 1TB
+  - [![ KIOXIA EXCERIA Plus G3 1TB](../../../assets/images/kioxia-ssd-exceria-plus-g3.jpg)](https://www.kioxia.com/ja-jp/personal/ssd.html#EXCERIAPLUSG3)
+  - KIOXIA EXCERIA Plus G3 1TB
+
+## 開発
+
+- @= NixOS
+  - [![ NixOS ](../../../assets/images/nixos-icon.webp)](https://nixos.org/)
+  - NixOS
+---
+- @= Cloudflare
+  - [![ Cloudflare ](../../../assets/images/cloudflare-logo.webp)](https://www.cloudflare.com/ja-jp/lp/ppc/overview-x/)
+  - Cloudflare
+- @= Docker
+  - [![ Docker ](../../../assets/images/docker-logo-blue.webp)](https://www.docker.com/)
+  - Docker
+---
+- @= Visual Studio Code
+  - [![ Visual Studio Code ](../../../assets/images/vscode-icon.jpg)](https://code.visualstudio.com/)
+  - Visual Studio Code
+- @= Neovim
+  - [![ Neovim ](../../../assets/images/neovim-icon.webp)](https://neovim.io/)
+  - Neovim
+
+## アート
+
+### 音楽
+
+- @= RME Babyface Pro FS
+  - [![RME Babyface Pro FS](../../../assets/images/rme-babyface-pro-fs.webp)](https://synthax.jp/babyface-pro-fs.html)
+  - RME Babyface Pro FS
+- @= audio-technica ATH-R70x
+  - [![audio-technica ATH-R70x](../../../assets/images/audio-technica-ath-r70x.webp)](https://www.audio-technica.co.jp/product/ATH-R70x?srsltid=AfmBOorXxQEzMYddDoDzfjSaT2bvyxwxa9GGJ8_6uAUcM46nGRhKQLoV)
+  - audio-technica ATH-R70x
+- @= Native Instruments MASCHINE MK3
+  - [![Native Instruments MASCHINE MK3](../../../assets/images/ni-maschine-mk3.webp)](https://www.native-instruments.com/jp/products/maschine/production-systems/maschine/whats-new-in-mk3/?srsltid=AfmBOoryQwBPYY3OzXm82Xx0pn7dpBM4fhF3EAXXc-VrDTiUmsHIWUnG)
+  - Native Instruments MASCHINE MK3
+---
+- @= MOTU Digital Performer 11
+  - [![ MOTU Digital Performer 11 ](../../../assets/images/motu-digital-performer-11.webp)](https://h-resolution.com/product/digital-performer/)
+  - MOTU Digital Performer 11
+- @= RME TotalMix FX
+  - [![ RME TotalMix FX ](../../../assets/images/totalmix-fx.webp)](https://rme-audio.de/totalmix-fx.html)
+  - RME TotalMix FX
+
+### 写真&動画撮影
+
+- @= SONY α6700 ILCE-6700
+  - [![SONY α6700 ILCE-6700](../../../assets/images/sony-ilce-6700.webp)](https://www.sony.jp/ichigan/a-universe/special_ILCE-6700/?srsltid=AfmBOopW5UyEBpbMy8T9nVbXWQqON4WNw_K3-VQRwTZAwtoeJA6sxPcU)
+  - SONY α6700 ILCE-6700
+- @= SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount
+  - [![SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount](../../../assets/images/sigma-dc-dn-contemporary-e-mount.webp)](https://www.sigma-global.com/jp/lenses/c021_18_50_28/)
+  - SIGMA 18-50mm F2.8 DC DN Contemporary SONY E-mount
+- @= TASCAM Portacapture X8
+  - [![TASCAM Portacapture X8](../../../assets/images/portacapture-x8.jpg)](https://tascam.jp/us/product/portacapture_x8/top)
+  - TASCAM Portacapture X8
+- @= TASCAM DR-10L Pro
+  - [![TASCAM DR-10L Pro](../../../assets/images/dr-10l_pro.jpg)](https://tascam.jp/us/product/dr-10l_pro/top)
+  - TASCAM DR-10L Pro
+---
+- @= DaVinci Resolve
+  - [![ DaVinci Resolve ](../../../assets/images/davinci-resolve-icon.webp)](https://www.blackmagicdesign.com/products/davinciresolve)
+  - DaVinci Resolve
diff --git a/src/lib/mdx-components.ts b/src/lib/mdx-components.ts
index 3ef69893..85d35d43 100644
--- a/src/lib/mdx-components.ts
+++ b/src/lib/mdx-components.ts
@@ -1,4 +1,5 @@
 import { Balloon } from '@/components/Balloon';
+import { Card, CardGrid } from '@/components/Card';
 import { FormattedDate } from '@/components/FormattedDate';
 import { StarRating } from '@/components/StarRating';
 import { Callout, CalloutTitle } from '@/components/elements/Callout';
@@ -11,6 +12,8 @@ export const mdxComponents = {
   Balloon,
   callout: Callout,
   'callout-title': CalloutTitle,
+  card: Card,
+  'card-grid': CardGrid,
   figure: Figure,
   FormattedDate,
   oembed: OEmbed,
diff --git a/src/plugins/remark-card.ts b/src/plugins/remark-card.ts
new file mode 100644
index 00000000..7ff3c0eb
--- /dev/null
+++ b/src/plugins/remark-card.ts
@@ -0,0 +1,166 @@
+import type { RemarkPlugin } from '@astrojs/markdown-remark';
+import type { BlockContent, DefinitionContent, Image, Link, Root } from 'mdast';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import { isParent } from './mdast-is';
+
+const parseSign = (sign: string | undefined): string | undefined => {
+  if (sign === undefined || sign === '') return;
+
+  const matched = sign.match(/@(?<borderType>[-=.])?$/);
+
+  const borderTypeSign = matched?.groups?.borderType;
+  const borderType =
+    borderTypeSign === '-'
+      ? 'solid'
+      : borderTypeSign === '='
+        ? 'double'
+        : borderTypeSign === '.'
+          ? 'pixel'
+          : 'solid';
+
+  return borderType;
+};
+
+const remarkCard: Plugin<[], Root> = (): ReturnType<RemarkPlugin> => {
+  return (tree) => {
+    visit(tree, 'list', (node) => {
+      if (!isParent(node)) return;
+      if (node.children.length === 0) return;
+
+      for (const listItemNode of node.children) {
+        if (!isParent(listItemNode)) continue;
+        if (listItemNode.children.length === 0) continue;
+
+        const cardSignNode = listItemNode.children[0];
+        if (cardSignNode?.type !== 'paragraph') continue;
+
+        if (!isParent(cardSignNode)) continue;
+        if (cardSignNode.children.length === 0) continue;
+
+        const cardSign = cardSignNode.children[0];
+        if (cardSign?.type !== 'text') continue;
+
+        const cardSignText = cardSign.value;
+        if (!cardSignText.startsWith('@')) continue;
+
+        const [sign, ...rest] = cardSignText.split(/\s/);
+        const imageAlt = rest.join(' ');
+        const borderType = parseSign(sign);
+
+        const cardListNode = listItemNode.children[1];
+        if (cardListNode?.type !== 'list') continue;
+
+        if (!isParent(cardListNode)) continue;
+        if (cardListNode.children.length === 0) continue;
+
+        const [cardListImageNode, ...cardListContentNodes] =
+          cardListNode.children;
+        if (!isParent(cardListImageNode)) continue;
+        if (cardListImageNode.children.length === 0) continue;
+
+        const cardImageNode = cardListImageNode.children[0];
+        if (cardImageNode?.type !== 'paragraph') continue;
+
+        if (!isParent(cardImageNode)) continue;
+        if (cardImageNode.children.length === 0) continue;
+
+        const cardImageOrLink = cardImageNode.children[0];
+        const imageMap = new Map<'url' | 'alt', string | null | undefined>();
+        let imageNode: Image | Link;
+        if (cardImageOrLink?.type === 'image') {
+          imageMap.set('url', cardImageOrLink.url);
+          imageMap.set('alt', imageAlt !== '' ? imageAlt : cardImageOrLink.alt);
+          imageNode = {
+            type: 'image',
+            alt: imageMap.get('alt'),
+            url: imageMap.get('url'),
+          } as Image;
+        } else if (cardImageOrLink?.type === 'link') {
+          const cardImage = cardImageOrLink.children[0];
+          if (cardImage?.type !== 'image') continue;
+
+          imageMap.set('url', cardImage.url);
+          imageMap.set('alt', imageAlt !== '' ? imageAlt : cardImage.alt);
+          imageNode = {
+            type: 'link',
+            url: cardImageOrLink.url,
+            children: [
+              {
+                type: 'image',
+                alt: imageMap.get('alt'),
+                url: imageMap.get('url'),
+              } as Image,
+            ],
+          } as Link;
+        } else {
+          continue;
+        }
+
+        const imageWrapperNode: BlockContent | DefinitionContent = {
+          type: 'paragraph',
+          data: {
+            hName: 'div',
+            hProperties: {
+              slot: 'image',
+              className: 'card-image',
+            },
+          },
+          children: [imageNode],
+        };
+
+        const contentNode: BlockContent | DefinitionContent = {
+          type: 'paragraph',
+          data: {
+            hName: 'div',
+            hProperties: {
+              slot: 'content',
+              className: 'card-content',
+            },
+          },
+          children: [],
+        };
+
+        cardListContentNodes.forEach((cardListContentNode, index, thisArr) => {
+          if (!isParent(cardListContentNode)) return;
+          if (cardListContentNode.children.length === 0) return;
+
+          const cardContentNode = cardListContentNode.children[0];
+          if (cardContentNode?.type !== 'paragraph') return;
+
+          if (!isParent(cardContentNode)) return;
+          if (cardContentNode.children.length === 0) return;
+
+          const cardContent = cardContentNode.children[0];
+          if (cardContent?.type !== 'text') return;
+
+          contentNode.children.push(cardContent);
+
+          if (thisArr.length !== index) {
+            contentNode.children.push({
+              type: 'text',
+              value: '\n',
+            });
+          }
+        });
+
+        node.data = {
+          ...node.data,
+          hName: 'card-grid',
+        };
+
+        listItemNode.data = {
+          ...listItemNode.data,
+          hName: 'card',
+          hProperties: {
+            dataBorderType: borderType,
+          },
+        };
+
+        listItemNode.children = [imageWrapperNode, contentNode];
+      }
+    });
+  };
+};
+
+export default remarkCard;
diff --git a/src/styles/global.css b/src/styles/global.css
index 3e279fd7..8cafd93a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -181,7 +181,12 @@ hr {
   }
 }
 
-.pokemon-border {
+.solid-border {
+  border: 2px solid var(--line);
+  border-radius: 0.175rem;
+}
+
+.double-border {
   position: relative;
   border-top: 4px solid var(--pixel-border);
   border-right: 2px solid var(--pixel-border);