diff --git a/docs/screenshots/issue-161-footer-mobile.png b/docs/screenshots/issue-161-footer-mobile.png
new file mode 100644
index 0000000..57b7999
Binary files /dev/null and b/docs/screenshots/issue-161-footer-mobile.png differ
diff --git a/docs/screenshots/issue-161-footer-pc.png b/docs/screenshots/issue-161-footer-pc.png
new file mode 100644
index 0000000..3d53706
Binary files /dev/null and b/docs/screenshots/issue-161-footer-pc.png differ
diff --git a/docs/screenshots/issue-163-share-mobile.png b/docs/screenshots/issue-163-share-mobile.png
new file mode 100644
index 0000000..57d41eb
Binary files /dev/null and b/docs/screenshots/issue-163-share-mobile.png differ
diff --git a/docs/screenshots/issue-163-share-pc.png b/docs/screenshots/issue-163-share-pc.png
new file mode 100644
index 0000000..ef14178
Binary files /dev/null and b/docs/screenshots/issue-163-share-pc.png differ
diff --git a/docs/screenshots/issue-163-share-textarea-mobile.png b/docs/screenshots/issue-163-share-textarea-mobile.png
new file mode 100644
index 0000000..23d04fb
Binary files /dev/null and b/docs/screenshots/issue-163-share-textarea-mobile.png differ
diff --git a/docs/screenshots/issue-163-share-textarea-pc.png b/docs/screenshots/issue-163-share-textarea-pc.png
new file mode 100644
index 0000000..8086126
Binary files /dev/null and b/docs/screenshots/issue-163-share-textarea-pc.png differ
diff --git a/docs/screenshots/issue-166-after-about.png b/docs/screenshots/issue-166-after-about.png
new file mode 100644
index 0000000..fafdb63
Binary files /dev/null and b/docs/screenshots/issue-166-after-about.png differ
diff --git a/docs/screenshots/issue-166-after-ranking-mobile.png b/docs/screenshots/issue-166-after-ranking-mobile.png
new file mode 100644
index 0000000..cc463f8
Binary files /dev/null and b/docs/screenshots/issue-166-after-ranking-mobile.png differ
diff --git a/docs/screenshots/issue-166-after-ranking.png b/docs/screenshots/issue-166-after-ranking.png
new file mode 100644
index 0000000..a0a24ee
Binary files /dev/null and b/docs/screenshots/issue-166-after-ranking.png differ
diff --git a/docs/screenshots/issue-166-after-sanpai.png b/docs/screenshots/issue-166-after-sanpai.png
new file mode 100644
index 0000000..2bd870e
Binary files /dev/null and b/docs/screenshots/issue-166-after-sanpai.png differ
diff --git a/docs/screenshots/issue-166-after-top-mobile.png b/docs/screenshots/issue-166-after-top-mobile.png
new file mode 100644
index 0000000..19f0eb6
Binary files /dev/null and b/docs/screenshots/issue-166-after-top-mobile.png differ
diff --git a/docs/screenshots/issue-166-after-top.png b/docs/screenshots/issue-166-after-top.png
new file mode 100644
index 0000000..807e81d
Binary files /dev/null and b/docs/screenshots/issue-166-after-top.png differ
diff --git a/docs/screenshots/issue-166-before-about.png b/docs/screenshots/issue-166-before-about.png
new file mode 100644
index 0000000..029ea77
Binary files /dev/null and b/docs/screenshots/issue-166-before-about.png differ
diff --git a/docs/screenshots/issue-166-before-ranking.png b/docs/screenshots/issue-166-before-ranking.png
new file mode 100644
index 0000000..ef7908a
Binary files /dev/null and b/docs/screenshots/issue-166-before-ranking.png differ
diff --git a/web/assets/css/color.css b/web/assets/css/color.css
index 2aa5476..3d48b29 100644
--- a/web/assets/css/color.css
+++ b/web/assets/css/color.css
@@ -1,34 +1,44 @@
-.text-twitter {
-  color: #1da1f2;
-}
-.text-facebook {
-  color: #1778f2;
-}
-.text-hatena {
-  color: #1da1f2;
-}
-.text-github {
-  color: #333;
-}
-.text-connpass {
-  color: #666;
-}
+/* デザイントークン(#166)
+   基準は「夜の神社×暖色」(おみくじ演出・実績カード群のトーン)。
+   色はここで一元管理し、各所ではトークンを参照する */
+:root {
+  /* ベース */
+  --color-text: #ffffff;
+  --color-text-muted: #9a9a9a;
+  --color-link: #cccccc;
+
+  /* サーフェス(GitHub実績カード等と同系のダークカード) */
+  --color-surface: #0d1117;
+  --color-surface-border: #30363d;
 
-.bg-twitter {
-  background-color: #1da1f2;
+  /* アクセント(提灯・鈴の金に合わせた琥珀) */
+  --color-accent: #e0a83c;
+  --color-accent-hover: #c98f2a;
+  --color-accent-soft: #ffcf6b;
+
+  /* SNSブランド色 */
+  --color-x: #000000;
+  --color-bluesky: #0085ff;
+  --color-facebook: #1778f2;
+  --color-github: #333333;
+  --color-discord: #5865f2;
+
+  /* レイアウト */
+  --width-content: 600px;
 }
-.bg-facebook {
-  background-color: #1778f2;
+
+.bg-x {
+  background-color: var(--color-x);
 }
-.bg-line {
-  background-color: #00B900;
+.bg-bluesky {
+  background-color: var(--color-bluesky);
 }
-.bg-hatena {
-  background-color: #1da1f2;
+.bg-facebook {
+  background-color: var(--color-facebook);
 }
 .bg-github {
-  background-color: #333;
+  background-color: var(--color-github);
 }
 .bg-discord {
-  background-color: #5865F2;
+  background-color: var(--color-discord);
 }
diff --git a/web/assets/css/common.css b/web/assets/css/common.css
index 8912cdf..91f8c65 100644
--- a/web/assets/css/common.css
+++ b/web/assets/css/common.css
@@ -2,11 +2,17 @@ body {
     background-image: url(/background.png);
     background-repeat: repeat;
     background-size: 8%;
-    color: #fff;
+    color: var(--color-text);
 }
 
 a {
-    color: #ccc;
+    color: var(--color-link);
+}
+
+/* インラインコード(aboutの`でばっぐ神社とは`等)。
+   Bootstrap既定のピンクをやめ、サイトの暖色トーンに合わせる */
+code {
+    color: var(--color-accent-soft);
 }
 
 .w-35 {
@@ -20,3 +26,52 @@ a {
 .h-min-100vh {
    min-height: 100vh;
 }
+
+/* 本文系コンテンツの標準幅(インラインstyleのmax-width散在を置き換える) */
+.content-narrow {
+    max-width: var(--width-content);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* ダークカード(GitHub実績カード・参拝の草と同系のサーフェス) */
+.card-shrine {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-surface-border);
+    border-radius: 0.5rem;
+    color: var(--color-text);
+}
+
+/* セクション見出し(実績カード群の見出しと同じ、太字ゴシック) */
+.section-title {
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+/* 主要アクション(参拝・おみくじ・鈴)は琥珀のボタン。汎用はBootstrap標準のまま */
+.btn-accent {
+    color: #1a1206;
+    font-weight: 700;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+}
+.btn-accent:hover,
+.btn-accent:focus,
+.btn-accent:active {
+    color: #1a1206;
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+}
+
+/* ボタンに見えない強調ラベル(「でばっぐのうりょく」等) */
+.label-accent {
+    color: var(--color-accent-soft);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+/* 経験値バー等の進捗もトーンを揃える */
+.progress-bar {
+    background-color: var(--color-accent);
+    color: #1a1206;
+}
diff --git a/web/assets/css/font.css b/web/assets/css/font.css
index 5e1c926..23b83d7 100644
--- a/web/assets/css/font.css
+++ b/web/assets/css/font.css
@@ -5,6 +5,7 @@
 
 body {
   font-family: var(--font-family-sans-serif);
+  line-height: 1.75;
 }
 
 h1, h2, h3, h4, h5, h6 {
diff --git a/web/components/CommonFooter.vue b/web/components/CommonFooter.vue
index fd91aa9..b4cb8a6 100644
--- a/web/components/CommonFooter.vue
+++ b/web/components/CommonFooter.vue
@@ -22,33 +22,21 @@
               <!-- SNSリンク -->
               <div class="py-2">
                 <a
-                  class="btn bg-twitter text-white"
-                  href="https://twitter.com/debug_shrine"
+                  class="btn bg-x text-white"
+                  href="https://x.com/debug_shrine"
                   target="_blank"
+                  aria-label="X"
                 >
-                  <i class="fab fa-twitter fa-lg fa-fw"></i>
-                  Twitter
+                  <IconX />
                 </a>
                 <a
                   class="ms-3 btn bg-github text-white"
                   href="https://github.com/428lab/debug-shrine"
                   target="_blank"
+                  aria-label="GitHub"
                 >
                   <i class="fab fa-github fa-lg fa-fw"></i>
-                  GitHub
                 </a>
-                <!-- <a class="d-inline-block" href="https://428lab.net/" target="_blank">
-                <img src="/brandlogo/lab_icon.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://blog.428lab.net/" target="_blank">
-                <img src="/brandlogo/hatena_icon.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://twitter.com/lab_428" target="_blank">
-                <img src="/brandlogo/twitter.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://www.facebook.com/%E5%9B%9B%E8%B0%B7%E3%83%A9%E3%83%9C-102455797824507/" target="_blank">
-                <img src="/brandlogo/facebook.svg" alt="" width="40px" />
-              </a> -->
               </div>
             </div>
           </div>
diff --git a/web/components/GithubStats.vue b/web/components/GithubStats.vue
index f6e8782..89dfe0c 100644
--- a/web/components/GithubStats.vue
+++ b/web/components/GithubStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="github-stats p-3 rounded">
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-      <div class="gh-title"><i class="fab fa-github fa-fw"></i> GitHubの実績</div>
+      <h2 class="gh-title fs-6 mb-0"><i class="fab fa-github fa-fw"></i> GitHubの実績</h2>
       <div v-if="state === 'loaded'" class="gh-sub">
         {{ fetchedAtText }}
       </div>
@@ -205,14 +205,14 @@ export default {
 
 <style scoped>
 .github-stats {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .gh-title {
   font-weight: 700;
 }
 .gh-sub {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 
@@ -239,7 +239,7 @@ export default {
   margin-left: 1px;
 }
 .tile-label {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.8rem;
   margin-top: 2px;
 }
@@ -300,7 +300,7 @@ export default {
   font-weight: 700;
 }
 .repo-desc {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
   margin: 4px 0 6px;
   display: -webkit-box;
diff --git a/web/components/GrassGrid.vue b/web/components/GrassGrid.vue
index b88d6dc..71ad8ef 100644
--- a/web/components/GrassGrid.vue
+++ b/web/components/GrassGrid.vue
@@ -37,7 +37,7 @@
 
 <script>
 // 1つの草グリッド(期間分)を描画する。直近1年と年別表示(全期間)で共用。
-const { buildGrassGrid, levelFor } = require("@/components/sanpaiGrass");
+const { buildGrassGrid, levelFor } = require("@/utils/sanpaiGrass");
 
 export default {
   props: {
@@ -95,7 +95,7 @@ export default {
   position: absolute;
   top: 0;
   font-size: 10px;
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   white-space: nowrap;
 }
 
@@ -115,7 +115,7 @@ export default {
   height: 11px;
   line-height: 11px;
   font-size: 10px;
-  color: #9a9a9a;
+  color: var(--color-text-muted);
 }
 
 /* 草本体 */
diff --git a/web/components/IconBluesky.vue b/web/components/IconBluesky.vue
new file mode 100644
index 0000000..2d21ad4
--- /dev/null
+++ b/web/components/IconBluesky.vue
@@ -0,0 +1,16 @@
+<template>
+  <!-- FontAwesome kit(5.15.4)にBlueskyアイコンが無いためインラインSVGで描画する -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1.25em"
+    height="1.25em"
+    fill="currentColor"
+    aria-hidden="true"
+    style="vertical-align: -0.25em"
+  >
+    <path
+      d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
+    />
+  </svg>
+</template>
diff --git a/web/components/IconX.vue b/web/components/IconX.vue
new file mode 100644
index 0000000..f46e3b9
--- /dev/null
+++ b/web/components/IconX.vue
@@ -0,0 +1,16 @@
+<template>
+  <!-- FontAwesome kit(5.15.4)に fa-x-twitter が無いためインラインSVGで描画する -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1.25em"
+    height="1.25em"
+    fill="currentColor"
+    aria-hidden="true"
+    style="vertical-align: -0.25em"
+  >
+    <path
+      d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z"
+    />
+  </svg>
+</template>
diff --git a/web/components/OmikujiScene.vue b/web/components/OmikujiScene.vue
index bef23ea..ae4899c 100644
--- a/web/components/OmikujiScene.vue
+++ b/web/components/OmikujiScene.vue
@@ -35,7 +35,7 @@
           </a>
         </div>
         <div v-else>
-          <button class="btn btn-lg btn-danger" @click.stop="onRing">鈴を鳴らす</button>
+          <button class="btn btn-lg btn-accent" @click.stop="onRing">鈴を鳴らす</button>
         </div>
       </div>
       <div v-else-if="phase === 'cascade' || phase === 'fox'" class="hint skip">
diff --git a/web/components/ProfileStats.vue b/web/components/ProfileStats.vue
index ff12785..39e89bf 100644
--- a/web/components/ProfileStats.vue
+++ b/web/components/ProfileStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="profile-stats p-3 rounded">
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-      <div class="stats-title">📊 参拝の記録</div>
+      <h2 class="stats-title fs-6 mb-0">📊 参拝の記録</h2>
     </div>
 
     <div v-if="state === 'loading'" class="stats-sub py-3">
@@ -126,14 +126,14 @@ export default {
 
 <style scoped>
 .profile-stats {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .stats-title {
   font-weight: 700;
 }
 .stats-sub {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 
@@ -164,7 +164,7 @@ export default {
   margin-left: 1px;
 }
 .tile-label {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.8rem;
   margin-top: 2px;
 }
diff --git a/web/components/ranking.vue b/web/components/Ranking.vue
similarity index 72%
rename from web/components/ranking.vue
rename to web/components/Ranking.vue
index 039fb4d..82f0556 100644
--- a/web/components/ranking.vue
+++ b/web/components/Ranking.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="p-3 text-start bg-black rounded" v-if="isLogin">
+    <div class="p-3 text-start card-shrine" v-if="isLogin">
       <div class="fs-5 mb-3">あなたの順位</div>
       <table v-if="myRanking">
         <tr>
@@ -17,14 +17,13 @@
       <div class="" v-else>まだランキングに反映されていないようです</div>
     </div>
     <div class="text-start mt-3">
-      <div class="card border-primary">
-        <div class="card-header bg-primary">せんとうりょくランキング</div>
-        <div class="list-group list-group-flush text-dark">
+      <div class="card card-shrine ranking-card">
+        <div class="card-header ranking-header">せんとうりょくランキング</div>
+        <div class="list-group list-group-flush">
           <nuxt-link
             class="
               list-group-item list-group-item-action
               d-flex
-              text-dark
               align-items-center
             "
             v-for="item in rankingView"
@@ -55,8 +54,8 @@ import { mapGetters } from "vuex";
 
 export default {
   props: {
-    pagenation: false,
-    max: 100,
+    pagenation: { type: Boolean, default: false },
+    max: { type: Number, default: 100 },
   },
   data() {
     return {
@@ -93,7 +92,22 @@ export default {
 </script>
 
 <style scoped>
-.bg-black {
-  background-color: #000000;
+/* 実績カード群と同じダークカードでランキングを組む
+   (Bootstrapのcard/list-group既定は白背景のため暗色を明示する) */
+.ranking-header {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: var(--color-text);
+  font-weight: 700;
+  border-bottom: 1px solid var(--color-surface-border);
+}
+.ranking-card .list-group-item {
+  background-color: transparent;
+  color: var(--color-text);
+  border-color: var(--color-surface-border);
+}
+.ranking-card .list-group-item-action:hover,
+.ranking-card .list-group-item-action:focus {
+  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--color-text);
 }
 </style>
\ No newline at end of file
diff --git a/web/components/SanpaiGrass.vue b/web/components/SanpaiGrass.vue
index c66eb27..48c06f6 100644
--- a/web/components/SanpaiGrass.vue
+++ b/web/components/SanpaiGrass.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sanpai-grass p-3 rounded">
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-      <div class="grass-title">⛩️ 参拝の草</div>
+      <h2 class="grass-title fs-6 mb-0">⛩️ 参拝の草</h2>
       <div v-if="state === 'loaded'" class="grass-sub">
         直近1年: {{ recent.totalCount }}回参拝
       </div>
@@ -72,7 +72,7 @@
 // 参拝履歴のヒートマップ(草)。sanpaiHistoryGo から日別集計を取得して表示する。
 // デフォルトは直近1年、「全期間を解析する」ボタンで初参拝まで遡って年別に出す。
 import GrassGrid from "@/components/GrassGrid";
-const { splitYearRanges } = require("@/components/sanpaiGrass");
+const { splitYearRanges } = require("@/utils/sanpaiGrass");
 
 export default {
   components: { GrassGrid },
@@ -154,14 +154,14 @@ export default {
 
 <style scoped>
 .sanpai-grass {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .grass-title {
   font-weight: 700;
 }
 .grass-sub {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 .all-summary {
diff --git a/web/components/Share.vue b/web/components/Share.vue
index f26f13b..ceda9a9 100644
--- a/web/components/Share.vue
+++ b/web/components/Share.vue
@@ -1,47 +1,147 @@
 <template>
   <div class="">
     <div v-if="title !== ''">{{ title }}</div>
+    <!-- 全文(text)指定時は編集可能なテキストエリアを表示し、
+         コピー・シェアシートには編集後のテキストを使う -->
+    <div v-if="text" class="mt-2 content-narrow">
+      <textarea
+        class="form-control share-text-area"
+        rows="4"
+        v-model="editableText"
+      ></textarea>
+    </div>
+    <!-- 対応環境(主にモバイル)ではOSのシェアシートを一次導線にする -->
+    <div v-if="canWebShare" class="mt-2">
+      <button type="button" class="btn btn-outline-light" @click="webShare">
+        <i class="fas fa-share-alt fa-lg fa-fw"></i>
+        シェアする
+      </button>
+    </div>
     <div class="mt-2">
-      <a :href="twitterUrl" class="btn text-white bg-twitter" target="_blank">
-        <i class="fab fa-twitter fa-lg fa-fw"></i>
-        Twitter
+      <a
+        :href="xUrl"
+        class="btn text-white bg-x"
+        target="_blank"
+        aria-label="Xでシェア"
+      >
+        <IconX />
+      </a>
+      <a
+        :href="blueskyUrl"
+        class="btn text-white bg-bluesky"
+        target="_blank"
+        aria-label="Blueskyでシェア"
+      >
+        <IconBluesky />
       </a>
-      <a :href="facebookUrl" class="btn text-white bg-facebook" target="_blank">
+      <a
+        :href="facebookUrl"
+        class="btn text-white bg-facebook"
+        target="_blank"
+        aria-label="Facebookでシェア"
+      >
         <i class="fab fa-facebook fa-lg fa-fw"></i>
-        Facebook
       </a>
+      <button
+        type="button"
+        class="btn btn-secondary text-white"
+        :aria-label="copied ? 'コピーしました' : 'シェア文面をコピー'"
+        @click="copy"
+      >
+        <i class="fas fa-lg fa-fw" :class="copied ? 'fa-check' : 'fa-copy'"></i>
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
 export default {
   props: {
-    title: "",
-    url: "",
-    message: "",
+    title: { type: String, default: "" },
+    url: { type: String, default: "" },
+    message: { type: String, default: "" },
+    // コピー・シェアシート用の全文(URLやハッシュタグ込み)。
+    // 未指定の場合は message + url を使う。
+    text: { type: String, default: "" },
+  },
+  data() {
+    return {
+      canWebShare: false,
+      copied: false,
+      resetTimer: null,
+      editableText: this.text,
+    };
+  },
+  watch: {
+    text(value) {
+      this.editableText = value;
+    },
+  },
+  mounted() {
+    this.canWebShare = typeof navigator !== "undefined" && !!navigator.share;
+  },
+  beforeDestroy() {
+    clearTimeout(this.resetTimer);
   },
   computed: {
-    twitterUrl() {
+    // コピー用の全文(テキストエリアで編集した内容を優先)
+    fullText() {
+      if (this.editableText) return this.editableText;
+      return [this.message, this.url].filter(Boolean).join("\n");
+    },
+    // 直リンクは短文+URL(全文はintentには長すぎる)
+    shortText() {
+      return [this.message, this.url].filter(Boolean).join("\n");
+    },
+    xUrl() {
       return (
-        "https://twitter.com/intent/tweet?url=" +
+        "https://x.com/intent/post?url=" +
         encodeURIComponent(this.url) +
         "&text=" +
         encodeURIComponent(this.message) +
         "&hashtags=でばっぐ神社"
       );
     },
+    blueskyUrl() {
+      return (
+        "https://bsky.app/intent/compose?text=" +
+        encodeURIComponent(this.shortText)
+      );
+    },
     facebookUrl() {
       return (
         "https://www.facebook.com/sharer/sharer.php?u=" +
         encodeURIComponent(this.url)
       );
     },
-    // lineUrl() {
-    //   return this.url;
-    // },
+  },
+  methods: {
+    async webShare() {
+      try {
+        // 全文(URL込み)がある場合はそれを、無い場合は message + url を渡す
+        if (this.editableText) {
+          await navigator.share({ text: this.editableText });
+        } else {
+          await navigator.share({ text: this.message, url: this.url });
+        }
+      } catch (e) {
+        // ユーザーによるシェアシートのキャンセルは正常系なので何もしない
+      }
+    },
+    async copy() {
+      await navigator.clipboard.writeText(this.fullText);
+      this.copied = true;
+      clearTimeout(this.resetTimer);
+      this.resetTimer = setTimeout(() => {
+        this.copied = false;
+      }, 2000);
+    },
   },
 };
 </script>
+
+<style scoped>
+.share-text-area {
+  resize: vertical;
+}
+</style>
diff --git a/web/components/ShareText.vue b/web/components/ShareText.vue
index 3b39acf..2afa36d 100644
--- a/web/components/ShareText.vue
+++ b/web/components/ShareText.vue
@@ -8,7 +8,7 @@
     ></textarea>
     <button
       type="button"
-      class="btn btn-primary mt-2"
+      class="btn btn-outline-light mt-2"
       :class="{ copied: copied }"
       @click="copy"
     >
diff --git a/web/layouts/error.vue b/web/layouts/error.vue
index 7ac5310..7845308 100644
--- a/web/layouts/error.vue
+++ b/web/layouts/error.vue
@@ -1,49 +1,49 @@
-<template>
-  <div class="outline">
-    <div class="outer">
-      <div class="inner">
-        <div class="container py-5 text-center">
-          <img
-            src="/torii.svg"
-            alt="でばっぐ神社"
-            class="w-75"
-            style="max-width: 500px"
-          />
-          <div class="fs-2 mt-5" v-if="error.statusCode === 404">このページは存在しません</div>
-          <div class="fs-2 mt-5" v-else>エラーが発生しました</div>
-          <div class="fs-1"><strong>{{ error.statusCode }}</strong></div>
-          <div class="fs-4 mt-2">
-            <a href="/" class="btn btn-lg btn-success">トップに戻る</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  layout: 'single',
-  props: ['error']
-}
-</script>
-
-<style scoped>
-.outline {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-.inner {
-  width: 100%;
-  position: absolute;
-  top: 44%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  -webkit-transform: translateY(-50%) translateX(-50%);
-}
-
+<template>
+  <div class="outline">
+    <div class="outer">
+      <div class="inner">
+        <div class="container py-5 text-center">
+          <img
+            src="/torii.svg"
+            alt="でばっぐ神社"
+            class="w-75"
+            style="max-width: 500px"
+          />
+          <div class="fs-2 mt-5" v-if="error.statusCode === 404">このページは存在しません</div>
+          <div class="fs-2 mt-5" v-else>エラーが発生しました</div>
+          <div class="fs-1"><strong>{{ error.statusCode }}</strong></div>
+          <div class="fs-4 mt-2">
+            <a href="/" class="btn btn-lg btn-outline-light">トップに戻る</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'single',
+  props: ['error']
+}
+</script>
+
+<style scoped>
+.outline {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.inner {
+  width: 100%;
+  position: absolute;
+  top: 44%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+}
+
 </style>
\ No newline at end of file
diff --git a/web/pages/dashboard/index.vue b/web/pages/dashboard/index.vue
index 089487c..f6cf2a3 100644
--- a/web/pages/dashboard/index.vue
+++ b/web/pages/dashboard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="container p-3">
     <div class="d-md-flex justify-content-between align-items-end" v-if="!isLoading">
-      <div class="fs-1 flex-fill">マイページ</div>
+      <h1 class="fs-1 flex-fill mb-0">マイページ</h1>
       <div class="text-end mt-2 ms-3">
         <nuxt-link :to="`/u/` + user.screen_name"
           >公開プロフィールを確認 ></nuxt-link
@@ -94,7 +94,7 @@
         </div>
         <div class="col-12 col-md-6 col-lg-4">
           <div class="mb-3">前回の参拝：{{ profile.last_sanpai }}</div>
-          <div class="bg-primary rounded p-2 text-center">
+          <div class="p-2 text-center label-accent">
             でばっぐのうりょく
           </div>
           <RadarChart :chartData="chartData" />
@@ -228,11 +228,11 @@ export default {
 }
 
 .badge-section {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .badge-note {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 0f3492d..ac9cd37 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -12,7 +12,7 @@
           <div class="mt-4" v-if="!isLogin">
             <button
               @click="GitHubAuth"
-              class="btn btn-lg btn-primary"
+              class="btn btn-lg btn-accent"
               :disabled="false"
             >
               GitHubと連携して<br class="d-md-none" />参拝しよう
@@ -22,12 +22,12 @@
             <div>
               <button
                 @click="sanpai"
-                class="btn btn-lg btn-primary me-2"
+                class="btn btn-lg btn-accent me-2"
                 :disabled="false"
               >
                 参拝する
               </button>
-              <nuxt-link to="/omikuji" class="btn btn-lg btn-danger">
+              <nuxt-link to="/omikuji" class="btn btn-lg btn-outline-light">
                 おみくじを引く
               </nuxt-link>
             </div>
@@ -58,7 +58,7 @@
       <div class="container py-4 mt-4">
         <div class="row flex-row-reverse">
           <div class="col-12 col-md-6 col-lg-4 px-4">
-            <p class="fs-2">ランキング</p>
+            <h2 class="section-title mb-3">🏆 ランキング</h2>
             <ranking max="10" class="mt-3"></ranking>
             <div class="text-end px-4 mt-3 mb-4">
               <nuxt-link to="/ranking">
@@ -67,7 +67,7 @@
             </div>
           </div>
           <div class="col-12 col-md-6 col-lg-8 px-4 mb-4">
-            <p class="fs-2">でばっぐ神社とは</p>
+            <h2 class="section-title mb-3">⛩️ でばっぐ神社とは</h2>
             <p class="fs-4">
               <span class="text-danger"
                 ><strong>露御読把和流（ろおどはわる）</strong></span
@@ -84,7 +84,7 @@
                 >もっと詳しく <i class="fas fa-fw fa-chevron-right"></i
               ></nuxt-link>
             </div>
-            <p class="fs-2 mt-3">開発コミュニティ</p>
+            <h2 class="section-title mt-5 mb-3">💬 開発コミュニティ</h2>
             <div class="">
               <a href="https://discord.gg/HTdSVdgEXJ" target="_blank" class="btn btn-lg bg-discord text-white mt-2 me-2">
                 <i class="fab fa-discord fa-fw fa-lg"></i> 四谷ラボ Discord
@@ -93,7 +93,7 @@
                 <i class="fab fa-github fa-fw fa-lg"></i> 四谷ラボ GitHub
               </a>
             </div>
-            <p class="fs-2 mt-3">でばっぐ神社リポジトリ</p>
+            <h2 class="section-title mt-5 mb-3">📦 でばっぐ神社リポジトリ</h2>
             <div class="mt-2">
               <a href="https://github.com/428lab/debug-shrine" target="_blank">
                 <i class="fab fa-github fa-fw fa-lg"></i> 428lab/debug-shrine
@@ -111,7 +111,7 @@
     </div> -->
     <!-- <div class="py-5 px-5">
       <div class="text-center">
-        <button @click="GitHubAuth" class="btn btn-lg btn-primary">
+        <button @click="GitHubAuth" class="btn btn-lg btn-accent">
           GitHubでログインして<br />
           参拝する
         </button>
@@ -129,7 +129,7 @@ import {
   onAuthStateChanged,
 } from "firebase/auth";
 import { mapGetters } from "vuex";
-import Ranking from "@/components/ranking";
+import Ranking from "@/components/Ranking";
 
 export default {
   layout: "single",
diff --git a/web/pages/omikuji.vue b/web/pages/omikuji.vue
index e8a6907..5175103 100644
--- a/web/pages/omikuji.vue
+++ b/web/pages/omikuji.vue
@@ -1,13 +1,10 @@
 <template>
-  <div class="text-center container py-5" style="max-width: 640px">
+  <div class="text-center container py-5 content-narrow">
     <h1 class="mb-2">おみくじ</h1>
     <p class="text-muted">8時間に1回、ITの運勢を占えるぞ。</p>
 
-    <!-- 状態取得中 -->
-    <div v-if="state === 'loading'" class="my-5">
-      <div class="spinner-border" role="status"></div>
-      <div class="mt-3 text-muted">お伺いを立てています...</div>
-    </div>
+    <!-- 状態取得中(ローディング表現はLoadingコンポーネントに統一) -->
+    <Loading v-if="state === 'loading'" message="お伺いを立てています"></Loading>
 
     <!-- エラー -->
     <div v-else-if="state === 'error'" class="my-5">
@@ -22,7 +19,7 @@
     <!-- 引ける -->
     <div v-else-if="state === 'available'" class="my-5">
       <div class="omikuji-box mx-auto mb-4">⛩️</div>
-      <button class="btn btn-lg btn-danger px-5" @click="startScene">
+      <button class="btn btn-lg btn-accent px-5" @click="startScene">
         おみくじを引く
       </button>
       <div v-if="result" class="mt-3 text-muted small">
@@ -39,18 +36,20 @@
         次に引けるまで <span class="fw-bold">{{ remainingText }}</span>
       </div>
 
-      <!-- コピペ用テキスト(参拝結果と同じUI) -->
-      <div class="my-5 mx-auto" style="max-width: 600px">
-        <ShareText title="SNSで自慢しよう" :text="shareText"></ShareText>
-      </div>
-
       <div class="mt-4">
         <Share
           title="おみくじの結果をSNSで報告しよう"
           :url="shareUrl"
           :message="shareMessage"
+          :text="shareText"
         ></Share>
       </div>
+
+      <div class="mt-4">
+        <nuxt-link class="btn btn-outline-light" to="/dashboard">
+          マイページで称号を確認
+        </nuxt-link>
+      </div>
     </div>
 
     <!-- クールダウン中で前回結果が無い場合 -->
diff --git a/web/pages/ranking.vue b/web/pages/ranking.vue
index 5ab5efa..1b02fff 100644
--- a/web/pages/ranking.vue
+++ b/web/pages/ranking.vue
@@ -1,12 +1,12 @@
 <template>
   <main class="container p-3">
-    <div class="fs-1">ランキング</div>
+    <h1 class="fs-1 mb-0">ランキング</h1>
     <ranking></ranking>
   </main>
 </template>
 
 <script>
-import Ranking from "@/components/ranking";
+import Ranking from "@/components/Ranking";
 
 export default {
   components: { Ranking },
diff --git a/web/pages/sanpai.vue b/web/pages/sanpai.vue
index 6debe6f..4f0fe23 100644
--- a/web/pages/sanpai.vue
+++ b/web/pages/sanpai.vue
@@ -101,10 +101,6 @@
           </div>
         </div>
 
-        <!-- SNS投稿用テキスト -->
-        <div class="my-5 mx-auto" style="max-width: 600px">
-          <ShareText title="SNSで自慢しよう" :text="shareText"></ShareText>
-        </div>
       </div>
       <div v-else-if="result === 'expire'">
         <div class="px-5">
@@ -147,11 +143,17 @@
           title="参拝したことをSNSで報告しよう"
           :url="shareUrl"
           :message="shareMessage"
+          :text="result === 'success' ? shareText : ''"
         ></Share>
       </div>
-      <nuxt-link class="btn btn-lg btn-primary" to="/dashboard">
-        マイページを見る
-      </nuxt-link>
+      <div>
+        <nuxt-link class="btn btn-lg btn-accent me-2" to="/omikuji">
+          おみくじを引く
+        </nuxt-link>
+        <nuxt-link class="btn btn-lg btn-outline-light" to="/dashboard">
+          マイページを見る
+        </nuxt-link>
+      </div>
     </template>
     <transition name="loading-fade">
       <Loading v-if="isLoading" :messages="loadingMessages"></Loading>
diff --git a/web/pages/u/_userName.vue b/web/pages/u/_userName.vue
index 8f01cf8..49cd20b 100644
--- a/web/pages/u/_userName.vue
+++ b/web/pages/u/_userName.vue
@@ -5,7 +5,7 @@
         <div class="col-12 col-md-5 col-xl-8 mb-4 mb-md-0">
           <div class="p-3 bg-dark h-100 rounded">
             <div class="d-lg-flex align-items-center">
-              <div class="fs-4 me-4">{{ profile.nickName }}</div>
+              <h1 class="fs-4 me-4 mb-0">{{ profile.nickName }}</h1>
             </div>
             <div class="d-flex mt-3 d-md-block">
               <div class="w-35 mb-3 me-3">
@@ -73,7 +73,7 @@
             </div>
             <div class="col-8 col-md-12 mt-md-4">
               <div
-                class="bg-primary text-center d-inline-block p-1 debug-title"
+                class="text-center d-inline-block p-1 label-accent debug-title"
               >
                 <small>でばっぐのうりょく</small>
               </div>
@@ -97,7 +97,7 @@
     <div v-if="!isLogin" class="text-center">
       <nuxt-link
         to="/"
-        class="btn btn-lg btn-primary mt-3 d-block d-md-inline-block"
+        class="btn btn-lg btn-accent mt-3 d-block d-md-inline-block"
         >コントリビュートして<br class="d-md-none" />自分の能力を分析！
       </nuxt-link>
     </div>
@@ -185,18 +185,25 @@ export default {
     this.chartData.datasets[0].data =
       chartMax > 0 ? raw.map((v) => Math.round((v / chartMax) * 100)) : raw;
 
-    this.profile.nickName = response.data.user.display_name;
-    this.profile.screenName = response.data.user.screen_name;
-    this.profile.profileImage = response.data.user.github_image_path;
-    this.status.level = response.data.level;
-    this.status.points = response.data.points;
-    this.status.total = response.data.total;
-    this.status.hp = response.data.hp;
-    this.status.power = response.data.power;
-    this.status.intelligence = response.data.intelligence;
-    this.status.defence = response.data.defence;
-    this.status.agility = response.data.agility;
-    this.status.last_sanpai = response.data.last_sanpai;
+    // dataの空オブジェクトへの後付けプロパティ追加はVue 2では検知されず、
+    // computed(shareMessage等)が初回値のまま固定される。オブジェクトごと
+    // 差し替えてリアクティブにする(#165)。
+    this.profile = {
+      nickName: response.data.user.display_name,
+      screenName: response.data.user.screen_name,
+      profileImage: response.data.user.github_image_path,
+    };
+    this.status = {
+      level: response.data.level,
+      points: response.data.points,
+      total: response.data.total,
+      hp: response.data.hp,
+      power: response.data.power,
+      intelligence: response.data.intelligence,
+      defence: response.data.defence,
+      agility: response.data.agility,
+      last_sanpai: response.data.last_sanpai,
+    };
     if(response){
       this.isLoading = false;
     }
diff --git a/web/static/brandlogo/facebook.svg b/web/static/brandlogo/facebook.svg
deleted file mode 100644
index 4e48ea1..0000000
--- a/web/static/brandlogo/facebook.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0beta2 (2b71d25, 2019-12-03)"
-   sodipodi:docname="facebook.svg"
-   id="svg837"
-   version="1.1"
-   viewBox="0 0 24 24"
-   role="img">
-  <metadata
-     id="metadata843">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs841" />
-  <sodipodi:namedview
-     inkscape:current-layer="svg837"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="12"
-     inkscape:cx="12"
-     inkscape:zoom="28"
-     showgrid="false"
-     id="namedview839"
-     inkscape:window-height="963"
-     inkscape:window-width="1575"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     inkscape:document-rotation="0"
-     bordercolor="#666666"
-     pagecolor="#ffffff" />
-  <title
-     id="title833">Facebook icon</title>
-  <path
-     style="fill:#ffffff"
-     id="path835"
-     d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" />
-</svg>
diff --git a/web/static/brandlogo/hatena_icon.svg b/web/static/brandlogo/hatena_icon.svg
deleted file mode 100644
index 06521d1..0000000
--- a/web/static/brandlogo/hatena_icon.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="197.814"
-   height="197.81799"
-   viewBox="0 0 197.814 197.81799"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="hatena_icon.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2497"
-     inkscape:window-height="1417"
-     id="namedview6"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:zoom="0.78666667"
-     inkscape:cx="98.907"
-     inkscape:cy="98.909"
-     inkscape:window-x="1975"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4" />
-  <path
-     d="M 98.906,197.818 C 44.369,197.818 0,153.451 0,98.909 0,44.372 44.369,0 98.906,0 c 54.545,0 98.908,44.372 98.908,98.909 0,54.542 -44.363,98.909 -98.908,98.909 z m 0,-185.238 c -47.601,0 -86.33,38.723 -86.33,86.329 0,47.605 38.729,86.332 86.33,86.332 47.61,0 86.338,-38.727 86.338,-86.332 0,-47.606 -38.728,-86.329 -86.338,-86.329 z m 11.521,37.489 c -4.832,-9.785 -7.783,-19.3 -9.273,-24.845 v 70.055 c 2.447,0.917 4.197,3.257 4.197,6.021 0,3.559 -2.887,6.442 -6.443,6.442 -3.56,0 -6.443,-2.885 -6.443,-6.442 0,-2.896 1.925,-5.317 4.558,-6.131 V 25.15 C 95.538,30.681 92.585,40.242 87.73,50.069 80.159,65.383 70.721,78.892 70.721,78.892 l 6.036,82.598 c 0,0 5.736,6.401 22.31,6.41 h 0.023 c 16.573,-0.009 22.312,-6.41 22.312,-6.41 l 6.035,-82.598 c -0.003,0 -9.441,-13.508 -17.01,-28.823 z"
-     id="path2"
-     inkscape:connector-curvature="0"
-     style="fill:#ffffff" />
-</svg>
diff --git a/web/static/brandlogo/lab_icon.svg b/web/static/brandlogo/lab_icon.svg
deleted file mode 100644
index 1e09ca2..0000000
--- a/web/static/brandlogo/lab_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 71"><path fill="#FFF" d="M65.3 71H5.7C2.5 71 0 68.5 0 65.3V5.7C0 2.5 2.5 0 5.7 0h59.7C68.5 0 71 2.5 71 5.7v59.7c0 3.1-2.5 5.6-5.7 5.6z"/><path fill="#DF0012" d="M35.6 28.8c-.7.2-1.5.2-2.3-.1-1.4-.7-2-2.5-1.3-3.9.4-.7 1-1.2 1.7-1.5l4.7-1.5c-1.2-2.6-3.2-4.9-5.9-6.5-7-4.2-16.1-1.8-20.3 5.2s-1.8 16.1 5.2 20.3 16.1 1.8 20.3-5.2c1.5-2.5 2.2-5.4 2-8.1l-4.1 1.3z"/><path fill="#0068B6" d="M53.7 14c-4-2.4-9.2-1-11.6 3s-1 9.2 3 11.6c.3.2.7.4 1 .5-.1-.7.1-1.4.4-2 .9-1.6 2.9-2.1 4.5-1.2 1.1.7 1.7 1.9 1.6 3.2 1.6-.7 3.1-1.9 4-3.5 2.4-4.1 1.1-9.3-2.9-11.6z"/><path fill="#009144" d="M35.8 52.4c-1.6-.9-2.1-2.9-1.2-4.5.3-.5.8-.9 1.3-1.2-.3-.3-.7-.5-1.1-.8-4-2.4-9.2-1-11.6 3s-1 9.2 3 11.6c4 2.4 9.2 1 11.6-3 .9-1.6 1.3-3.3 1.1-5-.9.4-2.1.4-3.1-.1z"/><circle fill="#FBC600" cx="49.1" cy="42.1" r="10.6"/></svg>
\ No newline at end of file
diff --git a/web/static/brandlogo/line.svg b/web/static/brandlogo/line.svg
deleted file mode 100644
index 35374a1..0000000
--- a/web/static/brandlogo/line.svg
+++ /dev/null
@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="448.00043"
-   width="448.00043"
-   aria-hidden="true"
-   focusable="false"
-   data-prefix="fab"
-   data-icon="line"
-   class="svg-inline--fa fa-line fa-w-14"
-   role="img"
-   viewBox="0 0 448.00043 448.00043"
-   version="1.1"
-   id="svg895"
-   sodipodi:docname="line.svg"
-   inkscape:version="1.0beta2 (2b71d25, 2019-12-03)">
-  <metadata
-     id="metadata901">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs899" />
-  <sodipodi:namedview
-     fit-margin-bottom="0"
-     fit-margin-right="0"
-     fit-margin-left="0"
-     fit-margin-top="0"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     inkscape:document-rotation="0"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1484"
-     inkscape:window-height="950"
-     id="namedview897"
-     showgrid="false"
-     inkscape:zoom="1.3125"
-     inkscape:cx="224.00021"
-     inkscape:cy="224.00021"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg895" />
-  <path
-     inkscape:connector-curvature="0"
-     fill="currentColor"
-     d="m 272.10021,172.20021 v 71.1 c 0,1.8 -1.4,3.2 -3.2,3.2 h -11.4 c -1.1,0 -2.1,-0.6 -2.6,-1.3 l -32.6,-44 v 42.2 c 0,1.8 -1.4,3.2 -3.2,3.2 h -11.4 c -1.8,0 -3.2,-1.4 -3.2,-3.2 v -71.1 c 0,-1.8 1.4,-3.2 3.2,-3.2 h 11.3 c 1,0 2.1,0.5 2.6,1.4 l 32.6,44 v -42.2 c 0,-1.8 1.4,-3.2 3.2,-3.2 h 11.4 c 1.8,-0.1 3.3,1.4 3.3,3.1 z m -82,-3.2 h -11.4 c -1.8,0 -3.2,1.4 -3.2,3.2 v 71.1 c 0,1.8 1.4,3.2 3.2,3.2 h 11.4 c 1.8,0 3.2,-1.4 3.2,-3.2 v -71.1 c 0,-1.7 -1.4,-3.2 -3.2,-3.2 z m -27.5,59.6 h -31.1 v -56.4 c 0,-1.8 -1.4,-3.2 -3.2,-3.2 h -11.4 c -1.8,0 -3.2,1.4 -3.2,3.2 v 71.1 c 0,0.9 0.3,1.6 0.9,2.2 0.6,0.5 1.3,0.9 2.2,0.9 h 45.7 c 1.8,0 3.2,-1.4 3.2,-3.2 v -11.4 c 0,-1.7 -1.4,-3.2 -3.1,-3.2 z m 169.5,-59.6 h -45.7 c -1.7,0 -3.2,1.4 -3.2,3.2 v 71.1 c 0,1.7 1.4,3.2 3.2,3.2 h 45.7 c 1.8,0 3.2,-1.4 3.2,-3.2 v -11.4 c 0,-1.8 -1.4,-3.2 -3.2,-3.2 h -31.1 v -12 h 31.1 c 1.8,0 3.2,-1.4 3.2,-3.2 v -11.5 c 0,-1.8 -1.4,-3.2 -3.2,-3.2 h -31.1 v -12 h 31.1 c 1.8,0 3.2,-1.4 3.2,-3.2 v -11.4 c -0.1,-1.7 -1.5,-3.2 -3.2,-3.2 z m 115.9,-87.300004 V 367.00021 c -0.1,44.8 -36.8,81.1 -81.7,81 H 81.000206 c -44.8,-0.1 -81.09999988,-36.9 -80.99999988367,-81.7 V 81.000206 C 0.10020612,36.200206 36.900206,-0.09979388 81.700206,2.0611633e-4 H 367.00021 c 44.8,0.10000000367 81.1,36.79999988367 81,81.69999988367 z m -61.6,122.600004 c 0,-73 -73.2,-132.400004 -163.1,-132.400004 -89.9,0 -163.100004,59.400004 -163.100004,132.400004 0,65.4 58.000004,120.2 136.400004,130.6 19.1,4.1 16.9,11.1 12.6,36.8 -0.7,4.1 -3.3,16.1 14.1,8.8 17.4,-7.3 93.9,-55.3 128.2,-94.7 23.6,-26 34.9,-52.3 34.9,-81.5 z"
-     id="path893"
-     style="fill:#ffffff;fill-opacity:1" />
-</svg>
diff --git a/web/static/brandlogo/twitter.svg b/web/static/brandlogo/twitter.svg
deleted file mode 100644
index bdc61b7..0000000
--- a/web/static/brandlogo/twitter.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0beta2 (2b71d25, 2019-12-03)"
-   sodipodi:docname="twitter.svg"
-   id="svg837"
-   version="1.1"
-   viewBox="0 0 24 24"
-   role="img">
-  <metadata
-     id="metadata843">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs841" />
-  <sodipodi:namedview
-     inkscape:current-layer="svg837"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="12"
-     inkscape:cx="12"
-     inkscape:zoom="28"
-     showgrid="false"
-     id="namedview839"
-     inkscape:window-height="480"
-     inkscape:window-width="864"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     inkscape:document-rotation="0"
-     bordercolor="#666666"
-     pagecolor="#ffffff" />
-  <title
-     id="title833">Twitter icon</title>
-  <path
-     style="fill:#ffffff"
-     id="path835"
-     d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" />
-</svg>
diff --git a/web/components/sanpaiGrass.js b/web/utils/sanpaiGrass.js
similarity index 100%
rename from web/components/sanpaiGrass.js
rename to web/utils/sanpaiGrass.js