diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index a9c4af0..9ae08eb 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -47,6 +47,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground min-h-screen flex flex-col justify-normal;
+    @apply bg-background text-foreground min-h-screen;
   }
 }
diff --git a/apps/web/src/routes/dev/+page.svelte b/apps/web/src/routes/dev/+page.svelte
index 4474d09..c13c80e 100644
--- a/apps/web/src/routes/dev/+page.svelte
+++ b/apps/web/src/routes/dev/+page.svelte
@@ -14,7 +14,7 @@ import Card from "./card.svelte";
   <section class="flex flex-col items-center md:flex-row md:items-start gap-4 lg:gap-8">
     <h2 class="sr-only">自己紹介</h2>
 
-    <Card more="back" />
+    <Card class="md:!sticky md:top-16" more="back" />
 
     <section class="p-5 prose prose-sm prose-light">
       <p>
@@ -73,6 +73,18 @@ import Card from "./card.svelte";
         </li>
       </ul>
 
+      <h3 id="contact">連絡先</h3>
+
+      <ul>
+        <li>チューターやバグ修正など、カジュアルな案件は <a href="https://github.com/sponsors/cannorin" target="_blank">GitHub Sponsors</a> をご利用ください。</li>
+        <li>
+          ウェブサイト構築など、大規模な案件についてのご連絡は <a href="https://keybase.io/cannorin" target="_blank">Keybase</a>,
+          <a href="https://discord.com/users/497190979216867329" target="_blank">Discord</a>,
+          または contact(atmark)cannorin.net までお願いします。
+        </li>
+        <li>なお、現在特に転職の予定はありません。</li>
+      </ul>
+
       <a href="/" class="back mt-8 text-foreground no-underline font-normal">
         Back
       </a>
diff --git a/apps/web/src/routes/dev/card.svelte b/apps/web/src/routes/dev/card.svelte
index ea12a72..dc252a5 100644
--- a/apps/web/src/routes/dev/card.svelte
+++ b/apps/web/src/routes/dev/card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import Card, { type CardProps } from "$components/card.svelte";
+import { cn } from "$lib/utils";
 
 import IconTapl from "$assets/images/static/icon/tapl.webp?w=1080;800;600;400;300&enhanced";
 
@@ -7,10 +8,10 @@ import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub";
 import SiQiita from "@icons-pack/svelte-simple-icons/icons/SiQiita";
 import SiZenn from "@icons-pack/svelte-simple-icons/icons/SiZenn";
 
-let { more }: Pick<CardProps, "more"> = $props();
+let { more, ...rest }: Pick<CardProps, "more" | "class"> = $props();
 </script>
 
-<Card image={IconTapl} more={more} class="[view-transition-name:card-dev]">
+<Card image={IconTapl} more={more} class={cn("[view-transition-name:card-dev]", rest["class"])}>
   {#snippet title()}
     Developer
   {/snippet}
diff --git a/apps/web/src/routes/math/card.svelte b/apps/web/src/routes/math/card.svelte
index 0894e5a..840ad01 100644
--- a/apps/web/src/routes/math/card.svelte
+++ b/apps/web/src/routes/math/card.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 import Card, { type CardProps } from "$components/card.svelte";
+import { cn } from "$lib/utils";
 
 import IconLogic from "$assets/images/static/icon/logic-chang.webp?w=1080;800;600;400;300&enhanced";
 
 import SiOrcid from "@icons-pack/svelte-simple-icons/icons/SiOrcid";
 import SiResearchgate from "@icons-pack/svelte-simple-icons/icons/SiResearchgate";
 
-let { more }: Pick<CardProps, "more"> = $props();
+let { more, ...rest }: Pick<CardProps, "more" | "class"> = $props();
 </script>
 
-<Card image={IconLogic} more={more} class="[view-transition-name:card-math]">
+<Card image={IconLogic} more={more} class={cn("[view-transition-name:card-math]", rest["class"])}>
   {#snippet title()}
     Graduate Student
   {/snippet}
diff --git a/apps/web/src/routes/music/+page.svelte b/apps/web/src/routes/music/+page.svelte
index b9d2bf0..c815028 100644
--- a/apps/web/src/routes/music/+page.svelte
+++ b/apps/web/src/routes/music/+page.svelte
@@ -14,20 +14,53 @@ import Card from "./card.svelte";
   <section class="flex flex-col items-center md:flex-row md:items-start gap-4 lg:gap-8">
     <h2 class="sr-only">自己紹介</h2>
 
-    <Card more="back" />
+    <Card class="md:!sticky md:top-16" more="back" />
 
     <section class="p-5 prose prose-sm prose-light">
-      <p>ブレイクビーツと高速四つ打ちがメインです。以下のような雰囲気の DJ が得意です。</p>
+      <p>ブレイクビーツと高速四つ打ちを中心に、統一感と説得力のあるマルチジャンルプレイをする DJ です。</p>
+      <p>以下のような雰囲気の DJ が得意です。</p>
 
       <ul>
-        <li><em>Atmospheric:</em> DnB, Jungle, Trance, IDM, ...</li>
-        <li><em>Aggressive:</em> Crossbreed, Breakcore, Speedcore, ...</li>
-        <li><em>Industrial:</em> Frenchcore, Schranz, Doomcore, ...</li>
-        <li><em>Peak-time Hardcore:</em> Hardstyle, J-Core, Uptempo, ...</li>
+        <li>
+          <strong class="text-primary">Atmospheric</strong>
+          <ul>
+            <li>Drum & Bass, Jungle, Trance, Techno, IDM, ...</li>
+            <li>ワイヤードな世界観で緻密にミックスします。</li>
+          </ul>
+        </li>
+        <li>
+          <strong class="text-primary">Aggressive</strong>
+          <ul>
+            <li>Crossbreed, Neurofunk, Breakcore, Speedcore, ...</li>
+            <li>鬱屈とした心から湧き上がる冷たい衝動をぶつけます。</li>
+          </ul>
+        </li>
+        <li>
+          <strong class="text-primary">Peak-time Hardcore</strong>
+          <ul>
+            <li>Frenchcore, Rawstyle, J-Core, Uptempo Hardcore, ...</li>
+            <li>私のハードコアは "予習" 無しで楽しめます。</li>
+          </ul>
+        </li>
       </ul>
 
       <p>作る曲もだいたいこのへんのジャンルです。</p>
 
+      <h3 id="gears">使用機材・ソフトウェア</h3>
+
+      <p>普段の DJ の際は、以下の機材を持ち込んでいます。あまりサイズは取りませんが、ブースに置くスペースがあるとうれしいです。なお、CDJ + USB のオーソドックスなプレイもできます。</p>
+
+      <ul>
+        <li><a href="https://www.allen-heath.com/hardware/xone-series/xonek2/" target="_blank">Allen & Heath Xone:K2</a> (4ch MIDI コントローラ)</li>
+        <li><a href="https://evo.audio/products/audio-interfaces/evo-4/overview/" target="_blank"> Audient EVO 4</a> (AIF, フォンから RCA に変換)</li>
+        <li><a href="https://mixxx.org/" target="_blank">Mixxx</a> (DJ ソフトウェア)</li>
+        <li><a href="https://www.audio-technica.co.jp/product/ATH-M50x" target="_blank">audio-technica ATH-M50x</a></li>
+        <li>オヤイデ d+ classB RCA ケーブル</li>
+        <li>ノートPC</li>
+      </ul>
+
+      <p>作曲には Ableton Live を使用しています。</p>
+
       <h3 id="affiliation">主宰・所属</h3>
 
       <ul>
@@ -68,6 +101,15 @@ import Card from "./card.svelte";
         </li>
       </ul>
 
+      <h3 id="contact">連絡先</h3>
+
+      <p>
+        ブッキングや音楽制作などのご連絡は
+        <a href="https://discord.com/users/497190979216867329" target="_blank">Discord</a>,
+        <a href="https://x.com/cannorin3" target="_blank">Twitter (X)</a>,
+        または contact(atmark)cannorin.net までお願いします。
+      </p>
+
       <a href="/" class="back mt-8 text-foreground no-underline font-normal">
         Back
       </a>
diff --git a/apps/web/src/routes/music/card.svelte b/apps/web/src/routes/music/card.svelte
index 5cc59f7..31f6d72 100644
--- a/apps/web/src/routes/music/card.svelte
+++ b/apps/web/src/routes/music/card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import Card, { type CardProps } from "$components/card.svelte";
+import { cn } from "$lib/utils";
 
 import IconJakeko from "$assets/images/static/icon/jakeko.webp?w=1080;800;600;400;300&enhanced";
 
@@ -7,10 +8,10 @@ import SiBandcamp from "@icons-pack/svelte-simple-icons/icons/SiBandcamp";
 import SiMixcloud from "@icons-pack/svelte-simple-icons/icons/SiMixcloud";
 import SiSoundcloud from "@icons-pack/svelte-simple-icons/icons/SiSoundcloud";
 
-let { more }: Pick<CardProps, "more"> = $props();
+let { more, ...rest }: Pick<CardProps, "more" | "class"> = $props();
 </script>
 
-<Card image={IconJakeko} more={more} class="[view-transition-name:card-music]">
+<Card image={IconJakeko} more={more} class={cn("[view-transition-name:card-music]", rest["class"])}>
   {#snippet title()}
     DJ / Composer
   {/snippet}