diff --git a/packages/viewer/src/app/Footer.tsx b/packages/viewer/src/app/Footer.tsx
index e4fd831..75bbc04 100644
--- a/packages/viewer/src/app/Footer.tsx
+++ b/packages/viewer/src/app/Footer.tsx
@@ -5,61 +5,78 @@ declare global {
   const LASTCOMMITDATETIME: string;
 }
 
+function ExternalLink(
+  params: Omit<JSX.IntrinsicElements["a"], "className" | "target" | "rel">,
+) {
+  return (
+    <a // eslint-disable-line jsx-a11y/anchor-has-content
+      className="link-secondary text-decoration-none"
+      target="_blank"
+      rel="noopener noreferrer"
+      {...params} // eslint-disable-line react/jsx-props-no-spreading
+    />
+  );
+}
+
 export default function Footer() {
   return (
     <footer className="py-3 py-md-4 mt-5 bg-body-tertiary">
       <div className="container-lg py-3 py-md-4 px-4 px-md-3 text-secondary">
         <div className="row">
-          <div className="col-lg-3 mb-3">
+          <div className="col-lg-4 col-md-6 col-sm-8 mb-3 small">
             <a
-              className="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
+              className="d-inline-flex align-items-center mb-1 text-body-emphasis text-decoration-none fs-5"
               href="/"
-              aria-label="Bootstrap"
             >
-              <span className="fs-5">Luogu Discussion Archive</span>
+              Luogu Discussion Archive
             </a>
-            <ul className="list-unstyled small">
-              <li className="mb-2">
-                全新的洛谷讨论保存站由 Piterator
-                打造，拥有更赏心悦目的界面、更稳定的爬取器、更方便的体验，我们总是在不断尝试。
-              </li>
-              <li className="mb-2">
-                &copy; 2023 Piterator &middot;{" "}
-                <a
-                  href="https://github.com/piterator-org/luogu-discussion-archive"
-                  className="link-secondary text-decoration-none"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="1em"
-                    height="1em"
-                    fill="currentColor"
-                    className="bi bi-github position-relative"
-                    viewBox="0 0 16 16"
-                    style={{ top: "-.1em" }}
-                  >
-                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-                  </svg>{" "}
-                  GitHub
-                </a>
-              </li>
-              <li className="mb-2">
-                <a
-                  className="link-secondary text-decoration-none"
-                  href={`https://github.com/piterator-org/luogu-discussion-archive/commit/${COMMITHASH}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
+            <div className="mt-2">
+              We use Google Analytics on our site. For more information, see{" "}
+              <ExternalLink href="https://www.google.cn/policies/privacy/partners/">
+                Google&apos;s Privacy &amp; Terms
+              </ExternalLink>{" "}
+              and{" "}
+              <ExternalLink href="https://support.google.com/analytics/answer/6004245">
+                Safeguarding your data
+              </ExternalLink>
+              .
+            </div>
+            <div className="mt-2">
+              We improve our products and advertising by using{" "}
+              <ExternalLink href="https://clarity.microsoft.com/">
+                Microsoft Clarity
+              </ExternalLink>{" "}
+              to see how you use our website. By using our site, you agree that
+              we and Microsoft can collect and use this data.
+            </div>
+            <div className="mt-2">
+              &copy; 2023 Piterator &middot;{" "}
+              <ExternalLink href="https://github.com/piterator-org/luogu-discussion-archive">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  fill="currentColor"
+                  className="bi bi-github position-relative"
+                  viewBox="0 0 16 16"
+                  style={{ top: "-.1em" }}
                 >
-                  {VERSION}
-                </a>{" "}
-                @{" "}
-                {new Date(LASTCOMMITDATETIME).toLocaleString("zh", {
-                  timeZone: "Asia/Shanghai",
-                })}
-              </li>
-            </ul>
+                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                </svg>{" "}
+                GitHub
+              </ExternalLink>
+            </div>
+            <div className="mt-2">
+              <ExternalLink
+                href={`https://github.com/piterator-org/luogu-discussion-archive/commit/${COMMITHASH}`}
+              >
+                {VERSION}
+              </ExternalLink>{" "}
+              @{" "}
+              {new Date(LASTCOMMITDATETIME).toLocaleString("zh", {
+                timeZone: "Asia/Shanghai",
+              })}
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/viewer/src/app/page.module.css b/packages/viewer/src/app/page.module.css
deleted file mode 100644
index dd9a1b7..0000000
--- a/packages/viewer/src/app/page.module.css
+++ /dev/null
@@ -1,231 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition:
-    background 200ms,
-    border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}