diff --git a/conf/nginx/share/www.conf b/conf/nginx/share/www.conf
index f58bb9b..c03e12c 100644
--- a/conf/nginx/share/www.conf
+++ b/conf/nginx/share/www.conf
@@ -8,6 +8,8 @@ location ^~ /.well-knwon {
   root /var/www/araya.dev/blog.araya.dev/.well-knwon;
 }
 
+
+
 location / {
 	root /var/www/araya.dev/www.araya.dev;
 	add_header cdn-cache-control no-cahce;
diff --git a/www.araya.dev/index.html b/www.araya.dev/index.html
index ac66048..11e6b59 100644
--- a/www.araya.dev/index.html
+++ b/www.araya.dev/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ja">
   <head>
     <script
@@ -126,8 +126,53 @@ <h1 class="section-heading">Job history</h1>
                 <a href="#job-history">Job History</a>
               </li>
             </ul>
-            <div class="icon">
-              <img src="/assets/white-cat.svg" alt="My profile icon" />
+            <div class="quick-links" data-quick-links>
+              <ul class="quick-links-list" aria-label="External links">
+                <li class="quick-links-item" style="--item-order: 4">
+                  <a
+                    href="https://blog.araya.dev"
+                    target="_blank"
+                    rel="noopener"
+                    referrerpolicy="no-referrer"
+                    >Blog</a
+                  >
+                </li>
+                <li class="quick-links-item" style="--item-order: 3">
+                  <a
+                    href="https://playground.araya.dev"
+                    target="_blank"
+                    rel="noopener"
+                    referrerpolicy="no-referrer"
+                    >Playground</a
+                  >
+                </li>
+                <li class="quick-links-item" style="--item-order: 2">
+                  <a
+                    href="https://github.com/arayaryoma"
+                    target="_blank"
+                    rel="noopener"
+                    referrerpolicy="no-referrer"
+                    >GitHub</a
+                  >
+                </li>
+                <li class="quick-links-item" style="--item-order: 1">
+                  <a
+                    href="https://twitter.com/arayaryoma"
+                    target="_blank"
+                    rel="noopener"
+                    referrerpolicy="no-referrer"
+                    >Twitter</a
+                  >
+                </li>
+              </ul>
+              <button
+                class="icon menu-toggle"
+                type="button"
+                aria-expanded="false"
+                aria-label="Open quick links"
+              >
+                <img src="/assets/white-cat.svg" alt="My profile icon" />
+              </button>
             </div>
           </nav>
         </template>
diff --git a/www.araya.dev/webcomponents/nav-bar/nav-bar.css b/www.araya.dev/webcomponents/nav-bar/nav-bar.css
index e22400e..4380a94 100644
--- a/www.araya.dev/webcomponents/nav-bar/nav-bar.css
+++ b/www.araya.dev/webcomponents/nav-bar/nav-bar.css
@@ -65,11 +65,65 @@ a {
   }
 }
 
+.quick-links {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+@media screen and (min-width: 768px) {
+  .quick-links {
+    right: 60px;
+    bottom: 60px;
+  }
+}
+
+.quick-links-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.quick-links-item {
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+  pointer-events: none;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease;
+  transition-delay: calc(var(--item-order) * 24ms);
+}
+
+.quick-links-item a {
+  display: inline-block;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--background), white 20%);
+  border: 1px solid color-mix(in srgb, var(--primary-color), white 25%);
+  padding: 6px 14px;
+  font-size: var(--font-size-18);
+  font-weight: bold;
+}
+
+.quick-links.is-open .quick-links-item {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
 .icon {
   --hex-width: 80px;
   --hex-height: calc(1.732 / 2 * var(--hex-width));
   --border-radius: 8px / 4%;
   grid-area: icon;
+  border: 0;
   border-radius: var(--border-radius);
   background: var(--primary-color);
   width: calc(var(--hex-width) / 2);
@@ -78,6 +132,7 @@ a {
   display: grid;
   place-content: center;
   margin-inline-end: calc(var(--hex-width) / 4);
+  cursor: pointer;
 }
 
 @media screen and (min-width: 768px) {
diff --git a/www.araya.dev/webcomponents/nav-bar/nav-bar.js b/www.araya.dev/webcomponents/nav-bar/nav-bar.js
index 8d6dbfc..ff0d19c 100644
--- a/www.araya.dev/webcomponents/nav-bar/nav-bar.js
+++ b/www.araya.dev/webcomponents/nav-bar/nav-bar.js
@@ -11,5 +11,20 @@ export class NavBar extends HTMLElement {
       shadow = this.attachShadow({ mode });
       shadow.appendChild(template.content.cloneNode(true));
     }
+
+    const quickLinks = shadow.querySelector("[data-quick-links]");
+    const menuToggle = shadow.querySelector(".menu-toggle");
+    if (!quickLinks || !menuToggle) {
+      return;
+    }
+
+    menuToggle.addEventListener("click", () => {
+      const isOpen = quickLinks.classList.toggle("is-open");
+      menuToggle.setAttribute("aria-expanded", String(isOpen));
+      menuToggle.setAttribute(
+        "aria-label",
+        isOpen ? "Close quick links" : "Open quick links",
+      );
+    });
   }
 }
