diff --git a/styles/sass/style.scss b/styles/sass/style.scss
index 6ecb9fa..437c45e 100644
--- a/styles/sass/style.scss
+++ b/styles/sass/style.scss
@@ -1,11 +1,82 @@
+@use "sass:color";
+
+$bg: #FFFDF3;
+$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -2%, $saturation: -50%)};
+$fg: #011627;
+
+:root {
+  --bg: #{$bg};
+  --fg: #{$fg};
+}
+
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background: #1e1e2e;
-  color: #c6d0f5;
+  font-family: 'Nunito', 'K Gothic', sans-serif;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 2em;
+  background: $bg0;
+  color: var(--fg);
+  font-size: 1.25em;
+}
+
+#content {
+  width: 100%;
+  background: var(--bg);
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
+
+  & > div {
+    padding: 1em;
+  }
+
+  nav {
+    --bg: #{$fg};
+    --fg: #{$bg};
+    background: var(--bg);
+    color: var(--fg);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125);
+
+    display: flex;
+
+    & > * {
+      padding: 0.45em;
+
+      & > * {
+        vertical-align: middle;
+      }
+    }
+
+    & > a {
+      color: var(--fg);
+      font-weight: bold;
+
+      &:hover {
+        border: none;
+        --fg: #{$fg};
+        --bg: #{$bg};
+        background: var(--bg);
+        cursor: pointer;
+      }
+    }
+
+    & > :last-child {
+      margin-left: auto;
+    }
+
+    img {
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
 }
 
-b, strong {
-  color: #eff1f5;
+.svg-inline {
+  height: 1em;
+  vertical-align: -0.125em;
 }
 
 a {
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 4363870..66f95ba 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -2,58 +2,79 @@
 <html>
 <head>
     <title>Tegaki Tuesday</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
     <link href="/css/style.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
-    <a href="/{{ challenge - 1 }}">Previous</a>
-    <a href="/{{ challenge + 1 }}">Next</a>
-    <div lang="ja">
-        <script>
-            let kyujitai = false;
-            function kyujitaiToggle() {
-                document.querySelectorAll("[data-kyujitai]").forEach(segment => {
-                    let newText = segment.getAttribute("data-kyujitai");
-                    segment.setAttribute("data-kyujitai", segment.firstChild.data);
-                    segment.firstChild.data = newText;
-                })
-                kyujitai = !kyujitai;
-            }
-        </script>
-        <button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
-        {% for line in content.japanese %}
-            {% for subline in line %}
+    <div id="content">
+        <nav>
+            <a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a>
+            <input type="number">
+            <a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></a>
+            {% if content.song %}
+                <div>
+                    <span>{{ content.song.japanese }}</span>
+                </div>
+            {% endif %}
+            {# <a href="#">Login</a> #}
+            <a>
+                <span>@mochamoko</span> <img src="https://cdn.discordapp.com/avatars/101938458200641536/dd726225dbf0ae3d7888c6dbfec3eabe.webp?size=1024">
+            </a>
+        </nav>
+        <div>
+            <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
+            <a href="/{{ challenge - 1 }}">Previous</a>
+            <a href="/{{ challenge + 1 }}">Next</a>
+            <div lang="ja">
+                <script>
+                    let kyujitai = false;
+                    function kyujitaiToggle() {
+                        document.querySelectorAll("[data-kyujitai]").forEach(segment => {
+                            let newText = segment.getAttribute("data-kyujitai");
+                            segment.setAttribute("data-kyujitai", segment.firstChild.data);
+                            segment.firstChild.data = newText;
+                        })
+                        kyujitai = !kyujitai;
+                    }
+                </script>
+                <button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
+                {% for line in content.japanese %}
+                    {% for subline in line %}
+                        <p>
+                            {%- for word in subline -%}
+                                {%- if word.dictionary -%}
+                                    <a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
+                                {%- endif -%}
+                                {% for segment in word.text -%}
+                                    <ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
+                                {%- endfor -%}
+                                {%- if word.dictionary -%}
+                                    </a>
+                                {%- endif -%}
+                            {%- endfor -%}
+                        </p>
+                    {% endfor %}
+                {% endfor %}
+            </div>
+            {% if content.translation %}
                 <p>
-                    {%- for word in subline -%}
-                        {%- if word.dictionary -%}
-                            <a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
-                        {%- endif -%}
-                        {% for segment in word.text -%}
-                            <ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
-                        {%- endfor -%}
-                        {%- if word.dictionary -%}
-                            </a>
-                        {%- endif -%}
-                    {%- endfor -%}
+                    Translation
+                    {% if content.translation.author %}by {{ content.translation.author }}{% endif %}
+                    {% if content.translation.site %} via
+                        {% if content.translation.site.link %}
+                            <a href="{{ content.translation.site.link }}" target="_blank">{{ content.translation.site.name }}</a>
+                        {% else %}
+                            {{ content.translation.site.name }}
+                        {% endif %}
+                    {%- endif -%}
                 </p>
-            {% endfor %}
-        {% endfor %}
-    </div>
-    {% if content.translation %}
-        <p>
-            Translation
-            {% if content.translation.author %}by {{ content.translation.author }}{% endif %}
-            {% if content.translation.site %} via
-                {% if content.translation.site.link %}
-                    <a href="{{ content.translation.site.link }}" target="_blank">{{ content.translation.site.name }}</a>
-                {% else %}
-                    {{ content.translation.site.name }}
-                {% endif %}
             {%- endif -%}
-        </p>
-    {%- endif -%}
-    {%- if content.suggester -%}
-        <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
-    {%- endif -%}
+            {%- if content.suggester -%}
+                <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
+            {%- endif -%}
+        </div>
+    </div>
 </body>
 </html>
\ No newline at end of file
