diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index 209895f..0cb120a 100644
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -1,18 +1,57 @@
-<div>
-    <h1 class="text-2xl font-bold">非专业人士，制作不易，请大家多多谅解</h1>
-    <div class="text-l font-bold">有任何意见或建议可以直接联系我</div>
-    <div class="after:clear-both after:block">
-        导航：
-        <a class="text-blue-600 underline" href="/comments">节目单查询</a>
-        <a class="text-blue-600 underline" href="/danmakus">直播弹幕查询</a>
-        <a class="text-blue-600 underline" href="/programs" title="数据不全，待补充">节目查询</a>
-        @auth("web")
-            <a class="text-blue-600 underline" href="/programs/construct">节目建设</a>
-            <a class="text-blue-600 underline float-right" href="{{ route("logout") }}">登出</a>
-            <div class="float-right bg-cyan-600 mx-2 px-2 text-white">{{ Auth::user()->name }}</div>
-        @endauth
-        @guest
-            <a class="text-blue-600 underline float-right" href="{{ route("login") }}">登录</a>
-        @endguest
+<nav class="bg-white shadow-sm mb-2 w-full" aria-label="功能导航">
+    <div class="mx-auto px-2 sm:px-6 lg:px-8">
+        <div class="relative flex h-16 items-center justify-between">
+            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden" onclick="document.getElementById('_mobile_menu').style.display = document.getElementById('_mobile_menu').style.display ? '' : 'none'">
+                <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                    </svg>
+                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                <div class="flex flex-shrink-0 items-center border border-black rounded-full px-4 font-bold">
+                    永恒の录播查询站
+                </div>
+                <div class="hidden sm:ml-6 sm:block">
+                    <div class="flex space-x-4">
+                        <a class="{{ (request()->is('comments', 'video/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} px-3 py-2 rounded-md text-sm font-medium" href="/comments">节目单查询</a>
+                        <a class="{{ (request()->is('danmakus', 'danmakus/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} px-3 py-2 rounded-md text-sm font-medium" href="/danmakus">直播弹幕查询</a>
+                        <a class="{{ (request()->is('programs', '/', 'programs/*/video')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} px-3 py-2 rounded-md text-sm font-medium" href="/programs" title="数据不全，待补充">节目查询</a>
+                        @auth("web")
+                            <a class="{{ (request()->is('programs/construct', 'programs/construct/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} px-3 py-2 rounded-md text-sm font-medium" href="/programs/construct">节目建设</a>
+                        @endauth
+                    </div>
+                </div>
+            </div>
+            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                <div class="relative ml-3">
+                    @auth("web")
+                        <div class="bg-gray-100 cursor-pointer hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" onclick="document.getElementById('_user_menu').style.display = document.getElementById('_user_menu').style.display ? '' : 'none'">
+                            {{ Auth::user()->name }}
+                        </div>
+                        <div id="_user_menu" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" style="display: none">
+                            <a href="{{ route("logout") }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">退出登录</a>
+                        </div>
+                    @endauth
+                    @guest
+                        <a class="hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="{{ route("login") }}">登录</a>
+                    @endguest
+                </div>
+            </div>
+        </div>
     </div>
-</div>
+
+    <div class="sm:hidden" id="_mobile_menu" style="display: none">
+        <div class="space-y-1 px-2 pt-2 pb-3">
+            <a class="{{ (request()->is('comments', 'video/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} block px-3 py-2 rounded-md text-base font-medium" href="/comments">节目单查询</a>
+            <a class="{{ (request()->is('danmakus', 'danmakus/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} block px-3 py-2 rounded-md text-base font-medium" href="/danmakus">直播弹幕查询</a>
+            <a class="{{ (request()->is('programs', '/', 'programs/*/video')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} block px-3 py-2 rounded-md text-base font-medium" href="/programs" title="数据不全，待补充">节目查询</a>
+            @auth("web")
+                <a class="{{ (request()->is('programs/construct', 'programs/construct/*')) ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-700 hover:text-white' }} block px-3 py-2 rounded-md text-base font-medium" href="/programs/construct">节目建设</a>
+            @endauth
+        </div>
+    </div>
+</nav>