diff --git a/bun.lock b/bun.lock
index 629e6d5..eba6583 100644
--- a/bun.lock
+++ b/bun.lock
@@ -28,6 +28,8 @@
       "devDependencies": {
         "@eslint/compat": "^1.4.0",
         "@eslint/js": "^9.38.0",
+        "@fontsource/darumadrop-one": "^5.2.8",
+        "@iconify-json/mdi": "^1.2.3",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/kit": "^2.47.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -144,6 +146,8 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
+    "@fontsource/darumadrop-one": ["@fontsource/darumadrop-one@5.2.8", "", {}, "sha512-pN0RVFzd3cCpG3cQOeFLDZJ/2W/HMQR9KtCNhwHOMhEndsSiR1Dnk0e1qj/v8xzVTu+Q3/ZyTc0sYvIDj3z36A=="],
+
     "@fontsource/roboto": ["@fontsource/roboto@5.2.8", "", {}, "sha512-oh9g4Cg3loVMz9MWeKWfDI+ooxxG1aRVetkiKIb2ESS2rrryGecQ/y4pAj4z5A5ebyw450dYRi/c4k/I3UBhHA=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
@@ -156,6 +160,8 @@
 
     "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.46", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-cNWdSAa5Z3f0TlqdCt28rmeYWGKwe68J1ORdyHyqC4D6H7CWiVKBJXV3TDTocOQVDO372bz+cmsFeo4+pbRy+A=="],
 
+    "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
+
     "@iconify-json/svg-spinners": ["@iconify-json/svg-spinners@1.2.4", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
diff --git a/package.json b/package.json
index fcf7b7e..ce0fbb7 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.38.0",
+		"@fontsource/darumadrop-one": "^5.2.8",
+		"@iconify-json/mdi": "^1.2.3",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.47.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
diff --git a/src/lib/ui/appbar/AppBar.svelte b/src/lib/ui/appbar/AppBar.svelte
index c9975b3..be491a0 100644
--- a/src/lib/ui/appbar/AppBar.svelte
+++ b/src/lib/ui/appbar/AppBar.svelte
@@ -8,19 +8,20 @@
     onclick: () => void
   }
 
-  let { title, sub, account, right, children, moreIcon }: {
+  let { title, sub, account, right, children, moreIcon, gradient }: {
     title?: string
     sub?: string
     account?: () => void
     right?: Icon[]
     children?: any
     moreIcon?: string
+    gradient?: boolean
   } = $props()
 
   let showMenu = $state(false)
 </script>
 
-<div class="hbox h-64px">
+<div class="hbox h-64px" class:appbar-gradient={gradient}>
   {#if account}
     <IconButton icon="i-material-symbols:account-circle" onclick={account} aria-label="Account" />
   {:else}
@@ -50,4 +51,15 @@
       </Menu>
     </div>
   </div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style lang="sass">
+  .appbar-gradient
+    background: linear-gradient(180deg, rgba(var(--m3-scheme-surface) / 1), transparent)
+    z-index: 100
+  @media (prefers-color-scheme: dark)
+    .appbar-gradient
+      background: linear-gradient(180deg, rgba(var(--m3-scheme-surface) / 0.2), transparent)
+      // background: none
+      // mix-blend-mode: overlay
+</style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..ec3805d
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import AppBar from "$lib/ui/appbar/AppBar.svelte"
+  import Button from "$lib/ui/Button.svelte"
+  import "@fontsource/darumadrop-one"
+
+  // Generate 20 random lines of hiragana
+  const hiragana = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん"
+  function genRandomLines() {
+    const lines = []
+    for (let i = 0; i < 20; i++) {
+      lines.push(hiragana.split('').sort(() => Math.random() - 0.5).join(''))
+    }
+    return lines
+  }
+
+  const randomLines = genRandomLines()
+  const spinningMics = 10
+</script>
+
+<AppBar title="About" right={[
+  {
+    icon: 'i-mdi:github',
+    onclick: () => window.open('https://github.com/MaigoLabs/amaoke.app', '_blank')
+  }
+]} gradient></AppBar>
+
+<!-- <div class="gradient2"></div> -->
+
+<div class="cbox vbox overflow-hidden! absolute inset-0">
+  <div class="gradient1"></div>
+  <div class="gradient2"></div>
+  <div class="vbox justify-center items-center text-center relative z-10">
+    <div class="cbox absolute inset-0 z-5">
+      <div class="size-360px rounded-full opacity-70 gradient-center"></div>
+    </div>
+    <div class="z-10">
+      <div class="app-name text-32px">アマオケ</div>
+      <div class="m3-font-body-medium mfg-on-surface-variant">FOSS 1.0.0</div>
+      <div class="m3-font-body-medium mfg-on-surface">
+        Made with ♥ and 🔮 by <br>
+        <a href="https://maigo.dev" target="_blank" class="mfg-primary">MaigoLabs</a> 2025
+      </div>
+    </div>
+    <div class="cbox absolute inset-0 z-5 spin-circle opacity-50 pointer-events-none">
+      {#each Array(spinningMics) as _, i}
+        <div class="size-300px rounded-full absolute" style:transform={`rotate(${i * 360 / spinningMics}deg)`}>
+          <div class="rotate--140 text-24px">🎤</div>
+        </div>
+      {/each}
+    </div>
+  </div>
+  <!-- <div class="h-64px w-full"> </div> -->
+  <div class="vbox absolute overflow-hidden">
+    {#each randomLines as line}
+      <div class="mfg-on-surface mix-blend-color-burn opacity-07 truncate text-48px rotate--15 pointer-events-none line-height-64px tracking-8px kana-line">{line}</div>
+    {/each}
+  </div>
+</div>
+
+<!-- <div class="p-content py-16px">
+  <Button big href="https://github.com/MaigoLabs/amaoke.app">GitHub</Button>
+</div> -->
+
+<style lang="sass">
+  
+// @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Darumadrop+One&family=Hachi+Maru+Pop&family=Kiwi+Maru&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=M+PLUS+Rounded+1c&family=Quicksand:wght@300..700&family=Rampart+One&family=Stick&family=Yuji+Boku&family=Zen+Maru+Gothic&display=swap')
+
+.app-name
+  // font-family: "Yuji Boku"
+  font-family: "Darumadrop One"
+  font-size: 48px
+
+.gradient1,.gradient2
+  --size: calc(max(100vw, 100vh) * 1.5) 
+  position: absolute
+  width: 200vw
+  height: 200vh
+  border-radius: 50%
+
+.gradient1
+  // Radial gradient from D9C5F7 100% to FFFFFF 0%
+  background: radial-gradient(50% 50%, rgba(217,197,247,1), rgba(255,255,255,0))
+  bottom: 0
+  left: 0
+
+.gradient2
+  // Radial gradient from F7C5C5 100% to FFFFFF 0%
+  background: radial-gradient(50% 50%, rgba(247,197,197,1), rgba(255,255,255,0))
+  right: 0
+  top: 0
+
+.gradient-center
+  background: radial-gradient(50% 50%, rgba(255,255,255,1), rgba(255,255,255,0))
+
+@media (prefers-color-scheme: dark)
+  .gradient-center
+    background: radial-gradient(50% 50%, rgba(0,0,0,1), rgba(0,0,0,0))
+    opacity: 0.1
+
+  .kana-line
+    opacity: 0.2
+
+.spin-circle
+  animation: spin 30s linear infinite
+
+@keyframes spin
+  from
+    transform: rotate(360deg)
+  to
+    transform: rotate(0deg)
+</style>
\ No newline at end of file