From 15a4ddf3ba893cdbea137cfcfd619d616a607b0d Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Mon, 26 Aug 2024 18:18:41 +0200
Subject: [PATCH 1/8] Fixed mathjax issue in FAQ

---
 .../app/(main)/components/custommathjax.tsx   | 51 +++++++++++++++++++
 .../app/(main)/components/mathjaxwrapper.tsx  | 14 +++++
 front_end/src/app/(main)/faq/page.tsx         | 20 +++++---
 3 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 front_end/src/app/(main)/components/custommathjax.tsx
 create mode 100644 front_end/src/app/(main)/components/mathjaxwrapper.tsx

diff --git a/front_end/src/app/(main)/components/custommathjax.tsx b/front_end/src/app/(main)/components/custommathjax.tsx
new file mode 100644
index 0000000000..d32c9fbf54
--- /dev/null
+++ b/front_end/src/app/(main)/components/custommathjax.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from "react";
+
+declare global {
+  interface Window {
+    MathJax: any;
+  }
+}
+
+interface CustomMathJaxProps {
+  children: string;
+}
+
+const CustomMathJax: React.FC<CustomMathJaxProps> = ({ children }) => {
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src =
+      "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML";
+    script.async = true;
+    document.head.appendChild(script);
+
+    script.onload = () => {
+      if (typeof window.MathJax !== "undefined") {
+        window.MathJax.Hub.Queue([
+          "Typeset",
+          window.MathJax.Hub,
+          nodeRef.current,
+        ]);
+      }
+    };
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window.MathJax !== "undefined") {
+      window.MathJax.Hub.Queue([
+        "Typeset",
+        window.MathJax.Hub,
+        nodeRef.current,
+      ]);
+    }
+  }, [children]);
+
+  return <div ref={nodeRef}>{children}</div>;
+};
+
+export default CustomMathJax;
diff --git a/front_end/src/app/(main)/components/mathjaxwrapper.tsx b/front_end/src/app/(main)/components/mathjaxwrapper.tsx
new file mode 100644
index 0000000000..81a31b5366
--- /dev/null
+++ b/front_end/src/app/(main)/components/mathjaxwrapper.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import React from "react";
+import CustomMathJax from "./custommathjax";
+
+interface MathJaxWrapperProps {
+  children: string;
+}
+
+const MathJaxWrapper: React.FC<MathJaxWrapperProps> = ({ children }) => {
+  return <CustomMathJax>{children}</CustomMathJax>;
+};
+
+export default MathJaxWrapper;
diff --git a/front_end/src/app/(main)/faq/page.tsx b/front_end/src/app/(main)/faq/page.tsx
index 25d7269699..4ee086edb0 100644
--- a/front_end/src/app/(main)/faq/page.tsx
+++ b/front_end/src/app/(main)/faq/page.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import PageWrapper from "../components/pagewrapper";
+import MathJaxWrapper from "../components/mathjaxwrapper";
 
 export const metadata = {
   title: "Metaculus FAQ",
@@ -2657,8 +2658,7 @@ export default function FAQ() {
             distribution to be symmetric.
           </p>
         </div>
-
-        {/* <div>
+        <div>
           <h3
             id="community-prediction"
             className="mb-4 scroll-mt-nav text-2xl font-semibold"
@@ -2671,13 +2671,15 @@ export default function FAQ() {
             forecaster opinion while still being fairly insensitive to outliers.
           </p>
           <p>Here&apos;s the mathematical detail:</p>
-          <ul className="ml-5 list-disc">
+          <ul className="ml-5 list-disc space-y-2">
             <li>Keep only the most recent prediction from each forecaster.</li>
             <li>
-              Assign them a number \(n\), from oldest to newest (oldest is
-              \(1\)).
+              <MathJaxWrapper>{` Assign them a number \\(n\\), from oldest to newest (oldest is
+            \\(1\\)).`}</MathJaxWrapper>
+            </li>
+            <li>
+              <MathJaxWrapper>{` Weight each by \\(w(n) \\propto e^{\\sqrt{n}}\\) before being aggregated.`}</MathJaxWrapper>
             </li>
-            <li>Weight each by \(w(n) \propto e^\sqrt{n}\) before being aggregated.</li>
             <ul className="ml-5 list-disc">
               <li>
                 For{" "}
@@ -2703,13 +2705,15 @@ export default function FAQ() {
                 distributions.
               </li>
             </ul>
-            <li>The particular form of the weights means that approximately \(\sqrt{N}\) forecasters need to predict or update their prediction in order to substantially change the Community Prediction on a question that already has \(N\) forecasters.</li>
+            <li>
+              <MathJaxWrapper>{` The particular form of the weights means that approximately \\(\\sqrt{N}\\) forecasters need to predict or update their prediction in order to substantially change the Community Prediction on a question that already has \\(N\\) forecasters.`}</MathJaxWrapper>
+            </li>
           </ul>
           <p>
             Users can hide the Community Prediction from view from within their
             settings.
           </p>
-        </div> */}
+        </div>
 
         <div>
           <h3

From 02266b7aa763e2ead999dfda3b1489f55f8f19c5 Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Mon, 26 Aug 2024 18:43:35 +0200
Subject: [PATCH 2/8] Partial Scores FAQ page

---
 .../src/app/(main)/help/scores-faq/page.tsx   | 336 ++++++++++++++++++
 1 file changed, 336 insertions(+)
 create mode 100644 front_end/src/app/(main)/help/scores-faq/page.tsx

diff --git a/front_end/src/app/(main)/help/scores-faq/page.tsx b/front_end/src/app/(main)/help/scores-faq/page.tsx
new file mode 100644
index 0000000000..80187e039d
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/page.tsx
@@ -0,0 +1,336 @@
+import PageWrapper from "../../components/pagewrapper";
+import MathJaxWrapper from "../../components/mathjaxwrapper";
+
+export const metadata = {
+  title: "Scores FAQ | Metaculus",
+  description: "tbd",
+};
+
+export default function ScoresFAQ() {
+  return (
+    <PageWrapper>
+      <h1>Scores FAQ</h1>
+      <p>
+        Below are Frequently Asked Questions (and answers!) about scores. The
+        general FAQ is <a href="/help/faq/">here</a>, and the medals FAQ is{" "}
+        <a href="/help/medals-faq/">here</a>.
+      </p>
+
+      <p>Contents:</p>
+      <div className="table-of-contents">
+        <ul>
+          <li>
+            <a href="#scores-section">Scores</a>
+          </li>
+          <ul className="label-font">
+            <li>
+              <a href="#scoring-rule">What is a scoring rule?</a>
+            </li>
+            <li>
+              <a href="#proper-scoring">What is a proper scoring rule?</a>
+            </li>
+            <li>
+              <a href="#log-score">What is the log score?</a>
+            </li>
+            <li>
+              <a href="#continuous-log-score">
+                What is the log score for continuous questions?
+              </a>
+            </li>
+            <li>
+              <a href="#baseline-score">What is the Baseline score?</a>
+            </li>
+            <li>
+              <a href="#peer-score">What is the Peer score?</a>
+            </li>
+            <li>
+              <a href="#cp-positive-peer">
+                Why is the Peer Score of the Community Prediction positive?
+              </a>
+            </li>
+            <li>
+              <a href="#time-averaging">
+                Do all my predictions on a question count toward my score?
+              </a>
+            </li>
+            <li>
+              <a href="#extremizing">
+                Can I get better scores by predicting extreme values?
+              </a>
+            </li>
+            <li>
+              <a href="#score-truncation">
+                Why did I get a small score when I was right?
+              </a>
+            </li>
+            <li>
+              <a href="#legacy-scores">What are the legacy scores?</a>
+              <ul className="label-font">
+                <li>
+                  <a href="#relative-score">What is the Relative score?</a>
+                </li>
+                <li>
+                  <a href="#coverage">What is the coverage?</a>
+                </li>
+                <li>
+                  <a href="#old-points">What are Metaculus points?</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <li>
+            <a href="#tournaments-section">Tournaments</a>
+          </li>
+          <ul className="label-font">
+            <li>
+              <a href="#tournament-scores">
+                How are my tournament Score, Coverage, Take, Prize and Rank
+                calculated?
+              </a>
+            </li>
+            <li>
+              <a href="#legacy-tournament-scores">
+                How are my (legacy) tournament Score, Coverage, Take, Prize and
+                Rank calculated?
+              </a>
+            </li>
+            <li>
+              <a href="#hidden-period">
+                What are the Hidden Period and Hidden Coverage Weights?
+              </a>
+            </li>
+          </ul>
+        </ul>
+      </div>
+
+      <hr className="my-4" />
+
+      <h1 className="scroll-mt-nav" id="scores">
+        Scores
+      </h1>
+
+      <h2 className="scroll-mt-nav" id="scoring-rule">
+        What is a scoring rule?
+      </h2>
+      <p>
+        A scoring rule is a mathematical function which, given a prediction and
+        an outcome, gives a score in the form of a number.
+      </p>
+      <p>
+        A naive scoring rule could be: &quot;you score equals the probability
+        you gave to the correct outcome&quot;. So, for example, if you predict
+        80% and the question resolves Yes, your score would be 0.8 (and 0.2 if
+        the question resolved No). At first glance this seems like a good
+        scoring rule: forecasters who gave predictions closer to the truth get
+        higher scores.
+      </p>
+      <p>
+        Unfortunately this scoring rule is not &quot;proper&quot;, as we&apos;ll
+        see in the next section.
+      </p>
+
+      <h2 className="scroll-mt-nav" id="proper-scoring">
+        What is a proper scoring rule?
+      </h2>
+      <p>
+        Proper scoring rules have a very special property: the only way to
+        optimize your score on average is to predict your sincere beliefs.
+      </p>
+      <p>
+        How do we know that the naive scoring rule from the previous section is
+        not proper? An example should be illuminating: consider the question
+        &quot;Will I roll a 6 on this fair die?&quot;. Since the die is fair,
+        your belief is &quot;1/6&quot; or about 17%. Now consider three
+        possibilities: you could either predict your true belief (17%), predict
+        something more extreme, like 5%, or predict something less extreme, like
+        30%. Here&apos;s a table of the scores you expect for each possible die
+        roll:
+      </p>
+
+      <div className="overflow-x-auto">
+        <table className="mx-auto w-auto border-collapse">
+          <thead>
+            <tr className="text-sm font-bold">
+              <td className="p-3">outcome die roll</td>
+              <td className="p-3">naive score of p=5%</td>
+              <td className="p-3">naive score of p=17%</td>
+              <td className="p-3">naive score of p=30%</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="text-sm font-normal">
+              <td className="p-3">1</td>
+              <td className="p-3">0.95</td>
+              <td className="p-3">0.83</td>
+              <td className="p-3">0.7</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">2</td>
+              <td className="p-3">0.95</td>
+              <td className="p-3">0.83</td>
+              <td className="p-3">0.7</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">3</td>
+              <td className="p-3">0.95</td>
+              <td className="p-3">0.83</td>
+              <td className="p-3">0.7</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">4</td>
+              <td className="p-3">0.95</td>
+              <td className="p-3">0.83</td>
+              <td className="p-3">0.7</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">5</td>
+              <td className="p-3">0.95</td>
+              <td className="p-3">0.83</td>
+              <td className="p-3">0.7</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">6</td>
+              <td className="p-3">0.05</td>
+              <td className="p-3">0.17</td>
+              <td className="p-3">0.3</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">average</td>
+              <td className="p-3">0.8</td>
+              <td className="p-3">0.72</td>
+              <td className="p-3">0.63</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        Which means you get a better score on average if you predict 5% than
+        17%. In other words, this naive score incentivizes you to predict
+        something other than the true probability. This is very bad!
+      </p>
+      <p>
+        Proper scoring rules do not have this problem: your score is best when
+        you predict the true probability. The log score, which underpins all
+        Metaculus scores, is a proper score (see{" "}
+        <a href="/help/scores-faq/#log-score">What is the log score?</a>). We
+        can compare the scores you get in the previous example:
+      </p>
+
+      <div className="overflow-x-auto">
+        <table className="mx-auto w-auto border-collapse">
+          <thead>
+            <tr className="text-sm font-normal">
+              <td className="p-3">outcome die roll</td>
+              <td className="p-3">log score of p=5%</td>
+              <td className="p-3">log score of p=17%</td>
+              <td className="p-3">log score of p=30%</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="text-sm font-normal">
+              <td className="p-3">1</td>
+              <td className="p-3">-0.05</td>
+              <td className="p-3">-0.19</td>
+              <td className="p-3">-0.37</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">2</td>
+              <td className="p-3">-0.05</td>
+              <td className="p-3">-0.19</td>
+              <td className="p-3">-0.37</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">3</td>
+              <td className="p-3">-0.05</td>
+              <td className="p-3">-0.19</td>
+              <td className="p-3">-0.37</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">4</td>
+              <td className="p-3">-0.05</td>
+              <td className="p-3">-0.19</td>
+              <td className="p-3">-0.37</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">5</td>
+              <td className="p-3">-0.05</td>
+              <td className="p-3">-0.19</td>
+              <td className="p-3">-0.37</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">6</td>
+              <td className="p-3">-3</td>
+              <td className="p-3">-1.77</td>
+              <td className="p-3">-1.2</td>
+            </tr>
+            <tr className="text-sm font-normal">
+              <td className="p-3">average</td>
+              <td className="p-3">-0.54</td>
+              <td className="p-3">-0.45</td>
+              <td className="p-3">-0.51</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        With the log score, you do get a higher (better) score if you predict
+        the true probability of 17%.
+      </p>
+      {/* 
+  <h2 className="section-header" id="log-score">What is the log score?</h2>
+  <p>The logarithmic scoring rule, or &quot;log score&quot; for short, is defined as:</p>
+  <MathJaxWrapper>
+    {`\\[
+    \\text{log score} = \\ln(P(outcome))
+    \\]`}
+  </MathJaxWrapper>
+  <p>Where <MathJaxWrapper>{`\\(\\ln\\)`}</MathJaxWrapper> is the natural logarithm and <MathJaxWrapper>{`\\(P(outcome)\\)`}</MathJaxWrapper> is the probability predicted for the outcome that actually happened. This log score applies to categorical predictions, where one of a (usually) small set of outcomes can happen. On Metaculus those are Binary and Multiple Choice questions. See the next section for the log scores of continuous questions.</p>
+  <p>Higher scores are better:</p>
+  <ul className="list-disc ml-6">
+    <li>If you predicted 0% on the correct outcome, your score will be <MathJaxWrapper>{`\\(-\\infty\\)`}</MathJaxWrapper> (minus infinity).</li>
+    <li>If you predict 100% on the correct outcome, your score will be 0.</li>
+  </ul>
+  <p>This means that the log score is always negative (for Binary and Multiple Choice questions). This has proved unintuitive, which is one reason why Metaculus uses the <a href="/help/scores-faq/#baseline-score">Baseline</a> and <a href="/help/scores-faq/#peer-score">Peer</a> scores, which are based on the log score but can be positive.</p>
+  <p>The log score is proper (see <a href="/help/scores-faq/#proper-scoring">What is a proper scoring rule?</a>). This means that to maximize your score <b>you should predict your true beliefs</b> (see <a href="#extremizing">Can I get better scores by predicting extreme values?</a>).</p>
+  <p>One interesting property of the log score: it is much more punitive of extreme wrong predictions than it is rewarding of extreme right predictions. Consider the scores you get for predicting 99% or 99.9%:</p>
+  
+  <div className="overflow-x-auto">
+    <table className="mx-auto w-auto border-collapse">
+      <thead>
+        <tr className="text-sm font-light">
+          <td className="p-4"></td>
+          <td className="p-4">99% Yes, 1% No</td>
+          <td className="p-4">99.9% Yes, 0.1% No</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr className="text-sm font-light">
+          <td className="p-4">Score if outcome = Yes</td>
+          <td className="p-4">-0.01</td>
+          <td className="p-4">-0.001</td>
+        </tr>
+        <tr className="text-sm font-light">
+          <td className="p-4">Score if outcome = No</td>
+          <td className="p-4">-4.6</td>
+          <td className="p-4">-6.9</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  
+  <p>Going from 99% to 99.9% only gives you a tiny advantage if you are correct (+0.009), but a huge penalty if you are wrong (-2.3). So be careful, and only use extreme probabilities when you&apos;re sure they&apos;re appropriate!</p>
+  
+  <h2 className="section-header" id="continuous-log-score">What is the log score for continuous questions?</h2>
+  <p>Since the domain of possible outcomes for continuous questions is (drum roll) continuous, any outcome has mathematically 0 chance of happening. Thankfully we can adapt the log score in the form:</p>
+  <MathJaxWrapper>
+    {`\\[
+    \\text{log score} = \\ln(\\operatorname{pdf}(outcome))
+    \\]`}
+  </MathJaxWrapper>
+  <p>Where <MathJaxWrapper>{`\\(\\ln\\)`}</MathJaxWrapper> is the natural logarithm and <MathJaxWrapper>{`\\(\\operatorname{pdf}(outcome)\\)`}</MathJaxWrapper> is the value of the predicted <a href="https://en.wikipedia.org/wiki/Probability_density_function">probability density function</a> at the outcome. Note that on Metaculus, all pdfs have a <a href="https://en.wikipedia.org/wiki/Uniform_distribution">uniform distribution</a> of height 0.01 added to them. This prevents extreme log scores.</p>
+  <p>This is also a proper scoring rule, and behaves in somewhat similar ways to the log score described above. One difference is that, contrary to probabilities that are always between 0 and 1, <MathJaxWrapper>{`\\(\\operatorname{pdf}\\)`}</MathJaxWrapper> values can be greater than 1. This means that the continuous log score can be greater than 0: in theory it has no maximum value, but in practice Metaculus restricts how sharp pdfs can get (see the maximum scores tabulated below).</p> */}
+    </PageWrapper>
+  );
+}

From bb2b415eb01ef9c2903d459a803e36b69b56096f Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Tue, 27 Aug 2024 11:40:32 +0300
Subject: [PATCH 3/8] refactor: utilise better-react-mathjax for rendering math
 expressions on static pages

---
 .../app/(main)/components/custommathjax.tsx   | 51 -------------------
 .../app/(main)/components/mathjaxwrapper.tsx  | 14 -----
 front_end/src/app/(main)/faq/page.tsx         | 17 +++++--
 .../src/app/(main)/help/scores-faq/page.tsx   |  9 ++--
 .../embedded_math_jax/index.tsx               |  5 +-
 front_end/src/components/math_jax_content.tsx | 17 +++++++
 6 files changed, 35 insertions(+), 78 deletions(-)
 delete mode 100644 front_end/src/app/(main)/components/custommathjax.tsx
 delete mode 100644 front_end/src/app/(main)/components/mathjaxwrapper.tsx
 create mode 100644 front_end/src/components/math_jax_content.tsx

diff --git a/front_end/src/app/(main)/components/custommathjax.tsx b/front_end/src/app/(main)/components/custommathjax.tsx
deleted file mode 100644
index d32c9fbf54..0000000000
--- a/front_end/src/app/(main)/components/custommathjax.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-declare global {
-  interface Window {
-    MathJax: any;
-  }
-}
-
-interface CustomMathJaxProps {
-  children: string;
-}
-
-const CustomMathJax: React.FC<CustomMathJaxProps> = ({ children }) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src =
-      "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML";
-    script.async = true;
-    document.head.appendChild(script);
-
-    script.onload = () => {
-      if (typeof window.MathJax !== "undefined") {
-        window.MathJax.Hub.Queue([
-          "Typeset",
-          window.MathJax.Hub,
-          nodeRef.current,
-        ]);
-      }
-    };
-
-    return () => {
-      document.head.removeChild(script);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (typeof window.MathJax !== "undefined") {
-      window.MathJax.Hub.Queue([
-        "Typeset",
-        window.MathJax.Hub,
-        nodeRef.current,
-      ]);
-    }
-  }, [children]);
-
-  return <div ref={nodeRef}>{children}</div>;
-};
-
-export default CustomMathJax;
diff --git a/front_end/src/app/(main)/components/mathjaxwrapper.tsx b/front_end/src/app/(main)/components/mathjaxwrapper.tsx
deleted file mode 100644
index 81a31b5366..0000000000
--- a/front_end/src/app/(main)/components/mathjaxwrapper.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import React from "react";
-import CustomMathJax from "./custommathjax";
-
-interface MathJaxWrapperProps {
-  children: string;
-}
-
-const MathJaxWrapper: React.FC<MathJaxWrapperProps> = ({ children }) => {
-  return <CustomMathJax>{children}</CustomMathJax>;
-};
-
-export default MathJaxWrapper;
diff --git a/front_end/src/app/(main)/faq/page.tsx b/front_end/src/app/(main)/faq/page.tsx
index 4ee086edb0..5363122191 100644
--- a/front_end/src/app/(main)/faq/page.tsx
+++ b/front_end/src/app/(main)/faq/page.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image";
 
+import MathJaxContent from "@/components/math_jax_content";
+
 import PageWrapper from "../components/pagewrapper";
-import MathJaxWrapper from "../components/mathjaxwrapper";
 
 export const metadata = {
   title: "Metaculus FAQ",
@@ -2674,11 +2675,15 @@ export default function FAQ() {
           <ul className="ml-5 list-disc space-y-2">
             <li>Keep only the most recent prediction from each forecaster.</li>
             <li>
-              <MathJaxWrapper>{` Assign them a number \\(n\\), from oldest to newest (oldest is
-            \\(1\\)).`}</MathJaxWrapper>
+              <MathJaxContent
+                content={` Assign them a number \\(n\\), from oldest to newest (oldest is
+              \\(1\\)).`}
+              />
             </li>
             <li>
-              <MathJaxWrapper>{` Weight each by \\(w(n) \\propto e^{\\sqrt{n}}\\) before being aggregated.`}</MathJaxWrapper>
+              <MathJaxContent
+                content={` Weight each by \\(w(n) \\propto e^{\\sqrt{n}}\\) before being aggregated.`}
+              />
             </li>
             <ul className="ml-5 list-disc">
               <li>
@@ -2706,7 +2711,9 @@ export default function FAQ() {
               </li>
             </ul>
             <li>
-              <MathJaxWrapper>{` The particular form of the weights means that approximately \\(\\sqrt{N}\\) forecasters need to predict or update their prediction in order to substantially change the Community Prediction on a question that already has \\(N\\) forecasters.`}</MathJaxWrapper>
+              <MathJaxContent
+                content={` The particular form of the weights means that approximately \\(\\sqrt{N}\\) forecasters need to predict or update their prediction in order to substantially change the Community Prediction on a question that already has \\(N\\) forecasters.`}
+              />
             </li>
           </ul>
           <p>
diff --git a/front_end/src/app/(main)/help/scores-faq/page.tsx b/front_end/src/app/(main)/help/scores-faq/page.tsx
index 80187e039d..a172cc1ee3 100644
--- a/front_end/src/app/(main)/help/scores-faq/page.tsx
+++ b/front_end/src/app/(main)/help/scores-faq/page.tsx
@@ -1,5 +1,4 @@
 import PageWrapper from "../../components/pagewrapper";
-import MathJaxWrapper from "../../components/mathjaxwrapper";
 
 export const metadata = {
   title: "Scores FAQ | Metaculus",
@@ -278,7 +277,7 @@ export default function ScoresFAQ() {
         With the log score, you do get a higher (better) score if you predict
         the true probability of 17%.
       </p>
-      {/* 
+      {/*
   <h2 className="section-header" id="log-score">What is the log score?</h2>
   <p>The logarithmic scoring rule, or &quot;log score&quot; for short, is defined as:</p>
   <MathJaxWrapper>
@@ -295,7 +294,7 @@ export default function ScoresFAQ() {
   <p>This means that the log score is always negative (for Binary and Multiple Choice questions). This has proved unintuitive, which is one reason why Metaculus uses the <a href="/help/scores-faq/#baseline-score">Baseline</a> and <a href="/help/scores-faq/#peer-score">Peer</a> scores, which are based on the log score but can be positive.</p>
   <p>The log score is proper (see <a href="/help/scores-faq/#proper-scoring">What is a proper scoring rule?</a>). This means that to maximize your score <b>you should predict your true beliefs</b> (see <a href="#extremizing">Can I get better scores by predicting extreme values?</a>).</p>
   <p>One interesting property of the log score: it is much more punitive of extreme wrong predictions than it is rewarding of extreme right predictions. Consider the scores you get for predicting 99% or 99.9%:</p>
-  
+
   <div className="overflow-x-auto">
     <table className="mx-auto w-auto border-collapse">
       <thead>
@@ -319,9 +318,9 @@ export default function ScoresFAQ() {
       </tbody>
     </table>
   </div>
-  
+
   <p>Going from 99% to 99.9% only gives you a tiny advantage if you are correct (+0.009), but a huge penalty if you are wrong (-2.3). So be careful, and only use extreme probabilities when you&apos;re sure they&apos;re appropriate!</p>
-  
+
   <h2 className="section-header" id="continuous-log-score">What is the log score for continuous questions?</h2>
   <p>Since the domain of possible outcomes for continuous questions is (drum roll) continuous, any outcome has mathematically 0 chance of happening. Thankfully we can adapt the log score in the form:</p>
   <MathJaxWrapper>
diff --git a/front_end/src/components/markdown_editor/embedded_math_jax/index.tsx b/front_end/src/components/markdown_editor/embedded_math_jax/index.tsx
index d9c2367ce1..ba2dc35da5 100644
--- a/front_end/src/components/markdown_editor/embedded_math_jax/index.tsx
+++ b/front_end/src/components/markdown_editor/embedded_math_jax/index.tsx
@@ -16,6 +16,7 @@ import classNames from "classnames";
 import React, { FC } from "react";
 
 import createEditorComponent from "@/components/markdown_editor/createJsxComponent";
+import MathJaxContent from "@/components/math_jax_content";
 import Button from "@/components/ui/button";
 
 import useLexicalBackspaceNodeRemove from "../hooks/use_backspace_node_remove";
@@ -44,9 +45,7 @@ const EmbeddedMathJax: React.FC<MathJaxRendererProps> = ({ content }) => {
       )}
       {...getReferenceProps()}
     >
-      <MathJaxContext>
-        <MathJax>{content}</MathJax>
-      </MathJaxContext>
+      <MathJaxContent content={content} />
       {!isReadOnly && (
         <Button onClick={deleteMathJax} presentationType="icon" variant="text">
           <FontAwesomeIcon icon={faXmark} />
diff --git a/front_end/src/components/math_jax_content.tsx b/front_end/src/components/math_jax_content.tsx
new file mode 100644
index 0000000000..7b7daf5ecc
--- /dev/null
+++ b/front_end/src/components/math_jax_content.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
+import React, { FC } from "react";
+
+type Props = {
+  content: string;
+};
+
+const MathJaxContent: FC<Props> = ({ content }) => {
+  return (
+    <MathJaxContext>
+      <MathJax>{content}</MathJax>
+    </MathJaxContext>
+  );
+};
+
+export default MathJaxContent;

From feda8ec252fd0f679ebd109982154506af3c021b Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Tue, 27 Aug 2024 16:11:51 +0200
Subject: [PATCH 4/8] Finished Scores FAQ, ooptimized flat page stylings,
 disclosure component

---
 .../src/app/(main)/components/pagewrapper.tsx |   2 +-
 .../(main)/components/styled_disclosure.tsx   |  60 ++
 front_end/src/app/(main)/faq/page.tsx         | 436 ++++----
 .../scores-faq/components/baseline_math.tsx   |  94 ++
 .../scores-faq/components/further_math.tsx    |  29 +
 .../help/scores-faq/components/peer_math.tsx  |  53 +
 .../scores-faq/components/points_math.tsx     | 110 ++
 .../components/truncation_example.tsx         | 172 +++
 .../src/app/(main)/help/scores-faq/page.tsx   | 975 ++++++++++++++++--
 .../press/components/DisclosureSection.tsx    | 491 +++++----
 .../press/components/ReferenceSection.tsx     | 160 ++-
 front_end/src/components/math_jax_content.tsx |  17 +-
 12 files changed, 1937 insertions(+), 662 deletions(-)
 create mode 100644 front_end/src/app/(main)/components/styled_disclosure.tsx
 create mode 100644 front_end/src/app/(main)/help/scores-faq/components/baseline_math.tsx
 create mode 100644 front_end/src/app/(main)/help/scores-faq/components/further_math.tsx
 create mode 100644 front_end/src/app/(main)/help/scores-faq/components/peer_math.tsx
 create mode 100644 front_end/src/app/(main)/help/scores-faq/components/points_math.tsx
 create mode 100644 front_end/src/app/(main)/help/scores-faq/components/truncation_example.tsx

diff --git a/front_end/src/app/(main)/components/pagewrapper.tsx b/front_end/src/app/(main)/components/pagewrapper.tsx
index 709b292da5..4f2fc9e3b5 100644
--- a/front_end/src/app/(main)/components/pagewrapper.tsx
+++ b/front_end/src/app/(main)/components/pagewrapper.tsx
@@ -6,7 +6,7 @@ interface PageWrapper {
 
 const PageWrapper: React.FC<PageWrapper> = ({ children }) => {
   return (
-    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_p]:text-gray-700 [&_p]:dark:text-gray-400">
+    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_li]:text-sm [&_li]:md:text-base [&_p]:text-sm [&_p]:text-gray-700 [&_p]:dark:text-gray-400 [&_p]:md:text-base">
       {children}
     </div>
   );
diff --git a/front_end/src/app/(main)/components/styled_disclosure.tsx b/front_end/src/app/(main)/components/styled_disclosure.tsx
new file mode 100644
index 0000000000..02dabdf988
--- /dev/null
+++ b/front_end/src/app/(main)/components/styled_disclosure.tsx
@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition,
+} from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+
+interface StyledDisclosureProps {
+  question: string;
+  children: ReactNode;
+}
+
+const StyledDisclosure: React.FC<StyledDisclosureProps> = ({
+  question,
+  children,
+}) => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <div className="w-full">
+          <DisclosureButton
+            className={`group flex w-full items-center gap-3 rounded p-3 text-left text-lg transition-all ${
+              open
+                ? "rounded-b-none bg-blue-500 dark:bg-blue-600"
+                : "bg-white dark:bg-blue-900 md:bg-blue-300 md:hover:bg-blue-400 md:dark:bg-blue-800 md:dark:hover:bg-blue-700"
+            }`}
+          >
+            <FontAwesomeIcon
+              icon={faChevronDown}
+              size="sm"
+              className={`text-blue-700 transition-transform ${
+                open
+                  ? "rotate-180 text-blue-800 dark:text-blue-400"
+                  : "dark:text-blue-500"
+              }`}
+            />
+            {question}
+          </DisclosureButton>
+          <Transition
+            enter="transition-all duration-300 ease-in-out"
+            enterFrom="max-h-0 opacity-0 overflow-hidden"
+            enterTo="max-h-[1000px] opacity-100 overflow-hidden"
+            leave="transition-all duration-400 ease-in-out"
+            leaveFrom="max-h-[1000px] opacity-100 overflow-hidden"
+            leaveTo="max-h-0 opacity-0 overflow-hidden"
+          >
+            <DisclosurePanel className="rounded-t-none border border-blue-500 px-3 py-0 text-gray-700 dark:border-blue-600 md:px-5">
+              {children}
+            </DisclosurePanel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
+
+export default StyledDisclosure;
diff --git a/front_end/src/app/(main)/faq/page.tsx b/front_end/src/app/(main)/faq/page.tsx
index 5363122191..f25ceb537a 100644
--- a/front_end/src/app/(main)/faq/page.tsx
+++ b/front_end/src/app/(main)/faq/page.tsx
@@ -13,11 +13,12 @@ export const metadata = {
 export default function FAQ() {
   return (
     <PageWrapper>
-      <h1 className="mb-6 text-3xl font-bold">Metaculus FAQ</h1>
+      <h1 className="text-3xl font-bold">Metaculus FAQ</h1>
+      <hr />
       <div className="flex flex-col">
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Basics</h2>
-          <ul className="space-y-2">
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">Basics</h2>
+          <ul className="space-y-1">
             <li>
               <a href="#whatismetaculus">What is Metaculus?</a>
             </li>
@@ -48,10 +49,12 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Metaculus Questions</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">
+            Metaculus Questions
+          </h2>
+          <ul className="space-y-1">
             <li>
               <a href="#whatsort">
                 What sorts of questions are allowed, and what makes a good
@@ -118,9 +121,12 @@ export default function FAQ() {
           </ul>
         </div>
 
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Question Resolution</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">
+            Question Resolution
+          </h2>
+          <ul className="space-y-1">
             <li>
               <a href="#closers">
                 What are the &quot;open date&quot;, &quot;close date&quot; and
@@ -188,10 +194,10 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Predictions</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">Predictions</h2>
+          <ul className="space-y-1">
             <li>
               <a href="#tutorial">Is there a tutorial or walkthrough?</a>
             </li>
@@ -223,10 +229,12 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Scores and Medals</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">
+            Scores and Medals
+          </h2>
+          <ul className="space-y-1">
             <li>
               <a href="#whatscores">What are scores?</a>
             </li>
@@ -235,10 +243,12 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Metaculus Journal</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">
+            Metaculus Journal
+          </h2>
+          <ul className="space-y-1">
             <li>
               <a href="#whatisjournal">What is the metaculus Journal?</a>
             </li>
@@ -247,10 +257,10 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-
-        <div className="mb-4">
-          <h2 className="mb-4 text-2xl font-semibold">Miscellany</h2>
-          <ul className="space-y-2">
+        <hr />
+        <div>
+          <h2 className="mb-4 mt-0 text-2xl font-semibold">Miscellany</h2>
+          <ul className="space-y-1">
             <li>
               <a href="#what-are-pros">What are Metaculus Pro Forecasters?</a>
             </li>
@@ -298,17 +308,18 @@ export default function FAQ() {
             </li>
           </ul>
         </div>
-        <h2 className="mb-4 mt-8 scroll-mt-nav text-2xl font-bold" id="basics">
+        <hr />
+        <h2 className="scroll-mt-nav text-2xl font-bold" id="basics">
           Basics
         </h2>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="whatismetaculus"
         >
           What is Metaculus?
         </h3>
-        <p className="mb-4">
+        <p>
           Metaculus is an online forecasting platform and aggregation engine
           that brings together a global reasoning community and keeps score for
           thousands of forecasters, delivering machine learning-optimized
@@ -318,12 +329,12 @@ export default function FAQ() {
           organizations, university researchers and companies to increase the
           positive impact of its forecasts.
         </p>
-        <p className="mb-4">
+        <p>
           Metaculus therefore poses questions about the occurrence of a variety
           of future events, on many timescales, to a community of participating
           forecasters — you!
         </p>
-        <p className="mb-4">
+        <p>
           The name &quot;Metaculus&quot; comes from the{" "}
           <a href="https://en.wikipedia.org/wiki/Eriophyidae">
             Metaculus genus
@@ -333,25 +344,25 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="whatisforecasting"
         >
           What is forecasting?
         </h3>
-        <p className="mb-4">
+        <p>
           Forecasting is a systematic practice of attempting to answer questions
           about future events. On Metaculus, we follow a few principles to
           elevate forecasting above simple guesswork:
         </p>
 
-        <p className="mb-4">
+        <p>
           First, questions are carefully specified so that everyone understands
           beforehand and afterward which kinds of outcomes are included in the
           resolution, and which are not. Forecasters then give precise
           probabilities that measure their uncertainty about the outcome.
         </p>
 
-        <p className="mb-4">
+        <p>
           Second, Metaculus aggregates the forecasts into a simple{" "}
           <a href="https://en.wikipedia.org/wiki/Median">median</a> (community)
           prediction, and an advanced Metaculus Prediction. The Community
@@ -371,7 +382,7 @@ export default function FAQ() {
           (provided the whole group is not biased in the same way).
         </p>
 
-        <p className="mb-4">
+        <p>
           Third, we measure the relative skill of each forecaster, using their
           quantified forecasts. When we know the outcome of the question, the
           question is &quot;resolved&quot;, and forecasters receive their
@@ -385,17 +396,17 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="whenforecastingvaluable"
         >
           When is forecasting valuable?
         </h3>
-        <p className="mb-4">
+        <p>
           Forecasting is uniquely valuable primarily in complex, multi-variable
           problems or in situations where a lack of data makes it difficult to
           predict using explicit or exact models.
         </p>
-        <p className="mb-4">
+        <p>
           In these and other scenarios, aggregated predictions of strong
           forecasters offer one of the best ways of predicting future events. In
           fact, work by the political scientist Philip Tetlock demonstrated that
@@ -404,10 +415,10 @@ export default function FAQ() {
           forecasting various geopolitical outcomes.
         </p>
 
-        <h3 className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold" id="aim">
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="aim">
           Why should I be a forecaster?
         </h3>
-        <p className="mb-4">
+        <p>
           Research has shown that great forecasters come from various
           backgrounds—and oftentimes from fields that have nothing to do with
           predicting the future. Like many mental capabilities, prediction is a
@@ -415,7 +426,7 @@ export default function FAQ() {
           Steady quantitative feedback and regular practice can greatly improve
           a forecaster&apos;s accuracy.
         </p>
-        <p className="mb-4">
+        <p>
           Some events — such as eclipse timing and well-polled elections, can
           often be predicted with high resolution, e.g. 99.9% likely or 3%
           likely. Others — such as the flip of a coin or a close horse-race —
@@ -425,19 +436,16 @@ export default function FAQ() {
           groups, corporations, governments, and humanity as a whole will make
           better decisions.
         </p>
-        <p className="mb-4">
+        <p>
           As well as being worthwhile, Metaculus aims to be interesting and fun,
           while allowing participants to hone their prediction prowess and amass
           a track-record to prove it.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="whocreated"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="whocreated">
           Who created Metaculus?
         </h3>
-        <p className="mb-4">
+        <p>
           {" "}
           Metaculus originated with two researcher scientists, Anthony Aguirre
           and Greg Laughlin. Aguirre, a physicist, is a co-founder of{" "}
@@ -452,14 +460,14 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="whattournaments"
         >
           What Are Metaculus Tournaments and Question Series?
         </h3>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">Tournaments</h4>
-        <p className="mb-4">
+        <h4 className="text-lg font-semibold">Tournaments</h4>
+        <p>
           Metaculus tournaments are organized around a central topic or theme.
           Tournaments are often collaborations between Metaculus and a
           nonprofit, government agency, or other organization seeking to use
@@ -467,7 +475,7 @@ export default function FAQ() {
           and archived tournaments in our{" "}
           <a href="https://www.metaculus.com/tournaments/">Tournaments page</a>.
         </p>
-        <p className="mb-4">
+        <p>
           Tournaments are the perfect place to prove your forecasting skills,
           while helping to improve our collective decision making ability. Cash
           prizes and{" "}
@@ -476,7 +484,7 @@ export default function FAQ() {
           valuable contributions (like comments). Follow a Tournament (with the
           Follow button) to never miss new questions.
         </p>
-        <p className="mb-4">
+        <p>
           After at least one question has resolved, a Leaderboard will appear on
           the tournament page displaying current scores and rankings. A personal
           score board (&quot;My Score&quot;) will also appear, detailing your
@@ -486,17 +494,17 @@ export default function FAQ() {
           </a>
           .
         </p>
-        <p className="mb-4">
+        <p>
           At the end of a tournament, the prize pool is divided among
           forecasters according to their forecasting performance. The more you
           forecasted and the more accurate your forecasts were, the greater
           proportion of the prize pool you receive.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           Can I donate my tournament winnings?
         </h4>
-        <p className="mb-4">
+        <p>
           If you have outstanding tournament winnings, Metaculus is happy to
           facilitate donations to various non-profits, regranting organizations,
           and funds. You can find the list of organizations we facilitate
@@ -507,27 +515,24 @@ export default function FAQ() {
           .
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">Question Series</h4>
-        <p className="mb-4">
+        <h4 className="text-lg font-semibold">Question Series</h4>
+        <p>
           Like Tournaments, Question Series are organized around a central topic
           or theme. Unlike tournaments, they do not have a prize pool.
         </p>
-        <p className="mb-4">
+        <p>
           Question Series still show leaderboards, for interest and fun. However
           they do **not** award medals.
         </p>
-        <p className="mb-4">
+        <p>
           You can find all Question Series in a special section of the{" "}
           <a href="https://www.metaculus.com/tournaments/">Tournaments page</a>.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="predmarket"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="predmarket">
           Is Metaculus a prediction market?
         </h3>
-        <p className="mb-4">
+        <p>
           Sort of. Like a prediction market, Metaculus aims to aggregate many
           people&apos;s information, expertise, and predictive power into
           high-quality forecasts. However, prediction markets generally operate
@@ -541,10 +546,10 @@ export default function FAQ() {
           prediction market.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           Advantages of Metaculus over prediction markets
         </h4>
-        <p className="mb-4">
+        <p>
           Metaculus has several advantages over prediction markets. One is that
           Metaculus forecasts are scored solely based on accuracy, while
           prediction markets may be used for other reasons, such as hedging.
@@ -553,13 +558,10 @@ export default function FAQ() {
           if an event occurs.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="justpolling"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="justpolling">
           Are Metaculus Questions Polls?
         </h3>
-        <p className="mb-4">
+        <p>
           No. Opinion polling can be a useful way to gauge the sentiment and
           changes in a group or culture, but there is often no single
           &quot;right answer&quot;, as in a{" "}
@@ -569,7 +571,7 @@ export default function FAQ() {
           &quot;How worried are you about the environment?&quot;
         </p>
 
-        <p className="mb-4">
+        <p>
           In contrast, Metaculus questions are designed to be objectively
           resolvable (like in{" "}
           <a href="https://www.metaculus.com/questions/9942/brent-oil-to-breach-140-before-may">
@@ -587,19 +589,16 @@ export default function FAQ() {
         </p>
 
         <h2
-          className="mb-4 mt-8 scroll-mt-nav scroll-mt-nav text-2xl font-bold"
+          className="scroll-mt-nav scroll-mt-nav text-2xl font-bold"
           id="metaculus-questions"
         >
           Metaculus Questions
         </h2>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="whatsort"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="whatsort">
           What sorts of questions are allowed, and what makes a good question?
         </h3>
-        <p className="mb-4">
+        <p>
           Questions should focus on tangible, objective facts about the world
           which are well-defined and not a matter of opinion. &quot;When will
           the United States collapse?&quot; is a poor, ambiguous question;{" "}
@@ -614,12 +613,12 @@ export default function FAQ() {
           <q>When will (event) X occur?</q> or{" "}
           <q>What will the value or quantity of X be by (date) Y?</q>
         </p>
-        <p className="mb-4">
+        <p>
           A good question will be unambiguously resolvable. A community reading
           the question terms should be able to agree, before and after the event
           has occurred, whether the outcome satisfies the question&apos;s terms.
         </p>
-        <p className="mb-4">Questions should also follow some obvious rules:</p>
+        <p>Questions should also follow some obvious rules:</p>
 
         <ol className="mb-4 ml-4 list-inside list-decimal space-y-2">
           <li>
@@ -649,13 +648,10 @@ export default function FAQ() {
           </li>
         </ol>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="whocreates"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="whocreates">
           Who creates the questions, and who decides which get posted?
         </h3>
-        <p className="mb-4">
+        <p>
           Many questions are launched by Metaculus staff, but any logged-in user
           can propose a question. Proposed questions will be reviewed by a group
           of moderators appointed by Metaculus. Moderators will select the best
@@ -664,7 +660,7 @@ export default function FAQ() {
           <a href="/question-writing/">aligned with our writing style</a>.
         </p>
 
-        <p className="mb-4">
+        <p>
           Metaculus hosts questions on{" "}
           <a href="/questions/categories/">many topics</a>, but our primary
           focus areas are Science,{" "}
@@ -686,10 +682,7 @@ export default function FAQ() {
           , and <a href="/questions/?categories=geopolitics">Geopolitics</a>.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="whoedits"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="whoedits">
           Who can edit questions?
         </h3>
         <ul className="mb-4 ml-4 list-inside list-disc space-y-2">
@@ -710,10 +703,7 @@ export default function FAQ() {
             or Pending.
           </li>
         </ul>
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="add-coauthors"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="add-coauthors">
           How do I invite co-authors to my question?
         </h3>
         <ul className="mb-4 ml-4 list-inside list-disc space-y-2">
@@ -737,7 +727,7 @@ export default function FAQ() {
         </ul>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="question-submission"
         >
           How can I get my own question posted?
@@ -795,13 +785,13 @@ export default function FAQ() {
         </ol>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="pending-question"
         >
           What can I do if a question I submitted has been pending for a long
           time?
         </h3>
-        <p className="mb-4">
+        <p>
           We currently receive a large volume of question submissions, many of
           which are interesting and well-written. That said, we try to approve
           just enough questions that they each can get the attention they
@@ -829,12 +819,12 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="admins-resolution"
         >
           What can I do if a question should be resolved but isn&apos;t?
         </h3>
-        <p className="mb-4">
+        <p>
           If a question is still waiting for resolution, check to make sure
           there hasn&apos;t been a comment from staff explaining the reason for
           the delay. If there hasn&apos;t, you can tag @admins to alert the
@@ -843,12 +833,12 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="question-private"
         >
           What is a private question?
         </h3>
-        <p className="mb-4">
+        <p>
           Private questions are questions that are not visible to the broader
           community. They aren&apos;t subject to the normal review process, so
           you can create one and predict on it right away. You can resolve your
@@ -856,7 +846,7 @@ export default function FAQ() {
           won&apos;t be added to your overall Metaculus score and they
           won&apos;t affect your ranking on the leaderboard.
         </p>
-        <p className="mb-4">
+        <p>
           You can use private questions for anything you want. Use them as
           practice to calibrate your predictions before playing for points,
           create a question series on a niche topic, or pose personal questions
@@ -864,19 +854,16 @@ export default function FAQ() {
           <strong>You can even invite up to 19 other users</strong> to view and
           predict on your own questions!
         </p>
-        <p className="mb-4">
+        <p>
           To invite other forecasters to your private question, click the
           &apos;...&apos; more options menu and select &apos;Share Private
           Question&apos;.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="comments"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="comments">
           What are the rules and guidelines for comments and discussions?
         </h3>
-        <p className="mb-4">
+        <p>
           We have a full set of{" "}
           <a href="/help/guidelines/">community etiquette guidelines</a> but in
           summary:
@@ -914,14 +901,11 @@ export default function FAQ() {
           </li>
         </ul>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="definitions"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="definitions">
           What do &quot;credible source&quot; and &quot;before [date X]&quot;
           and such phrases mean exactly?
         </h3>
-        <p className="mb-4">
+        <p>
           To reduce ambiguity in an efficient way, here are some definitions
           that can be used in questions, with a meaning set by this FAQ:
         </p>
@@ -954,14 +938,11 @@ export default function FAQ() {
             </ul>
           </li>
         </ol>
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="question-types"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="question-types">
           What types of questions are there?
         </h3>
-        <h4 className="mb-2 mt-4 text-lg font-semibold">Binary Questions</h4>
-        <p className="mb-4">
+        <h4 className="text-lg font-semibold">Binary Questions</h4>
+        <p>
           Binary questions can resolve as either <strong>Yes</strong> or{" "}
           <strong>No</strong> (unless the resolution criteria were
           underspecified or otherwise circumvented, in which case they can
@@ -975,8 +956,8 @@ export default function FAQ() {
           dropped below 5% before the specified time.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">Range Questions</h4>
-        <p className="mb-4">
+        <h4 className="text-lg font-semibold">Range Questions</h4>
+        <p>
           Range questions resolve to a certain value, and forecasters can
           specify a probability distribution to estimate the likelihood of each
           value occurring. Range questions can have open or closed bounds. If
@@ -987,19 +968,19 @@ export default function FAQ() {
           <a href="#out-of-bounds-resolution">See here</a> for more details
           about boundaries on range questions.
         </p>
-        <p className="mb-4">
+        <p>
           The range interface allows you to input multiple probability
           distributions with different weights.{" "}
           <a href="#range-interface">See here</a> for more details on using the
           interface.
         </p>
-        <p className="mb-4">
+        <p>
           There are two types of range questions, numeric range questions and
           date range questions.
         </p>
 
-        <h5 className="mb-2 mt-4 text-lg font-semibold">Numeric Range</h5>
-        <p className="mb-4">
+        <h5 className="text-lg font-semibold">Numeric Range</h5>
+        <p>
           Numeric range questions can resolve as a numeric value. For example,
           the question &quot;
           <a href="https://www.metaculus.com/questions/7346/initial-jobless-claims-july-2021/">
@@ -1009,7 +990,7 @@ export default function FAQ() {
           &quot; resolved as <strong>395</strong>, because the underlying source
           reported 395 thousand initial jobless claims for July 2021.
         </p>
-        <p className="mb-4">
+        <p>
           Questions can also resolve outside the numeric range. For example, the
           question &quot;
           <a href="https://www.metaculus.com/questions/6645/highest-us-core-cpi-growth-in-2021/">
@@ -1021,8 +1002,8 @@ export default function FAQ() {
           and 6.5 was the upper bound.
         </p>
 
-        <h5 className="mb-2 mt-4 text-lg font-semibold">Date Range</h5>
-        <p className="mb-4">
+        <h5 className="text-lg font-semibold">Date Range</h5>
+        <p>
           Date range questions can resolve as a certain date. For example, the
           question &quot;
           <a href="https://www.metaculus.com/questions/8723/date-of-next-who-pheic-declaration/">
@@ -1032,7 +1013,7 @@ export default function FAQ() {
           &quot; resolved as <strong>July 23, 2022</strong>, because a Public
           Health Emergency of International Concern was declared on that date.
         </p>
-        <p className="mb-4">
+        <p>
           Questions can also resolve outside the date range. For example, the
           question &quot;
           <a href="https://www.metaculus.com/questions/6947/first-super-heavy-flight/">
@@ -1044,23 +1025,23 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="question-groups"
         >
           What are question groups?
         </h3>
-        <p className="mb-4">
+        <p>
           Question groups are sets of closely related questions or question
           outcomes all collected on a single page. Forecasters can predict
           quickly and efficiently on these interconnected outcomes, confident
           that they are keeping all of their predictions internally consistent.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           How do question groups facilitate more efficient, more accurate
           forecasting?
         </h4>
-        <p className="mb-4">
+        <p>
           With question groups, it&apos;s easy to forecast progressively wider
           distributions the further into the future you predict to reflect
           increasing uncertainty. A question group collecting multiple binary
@@ -1069,11 +1050,11 @@ export default function FAQ() {
           each other.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           What happens to the existing question pages when they are combined in
           a question group?
         </h4>
-        <p className="mb-4">
+        <p>
           When regular forecast questions are converted into
           &quot;subquestions&quot; of a question group, the original pages are
           replaced by a single question group page. Comments that previously
@@ -1082,28 +1063,28 @@ export default function FAQ() {
           move.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           Do I need to forecast on every outcome / subquestion of a question
           group?
         </h4>
-        <p className="mb-4">
+        <p>
           No. Question groups comprise multiple <i>independent</i> subquestions.
           For that reason, there is no requirement that you forecast on every
           outcome within a group.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           How are question groups scored?
         </h4>
-        <p className="mb-4">
+        <p>
           Each outcome or subquestion is scored in the same manner as a normal
           independent question.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           Why don&apos;t question group outcome probabilities sum to 100%?
         </h4>
-        <p className="mb-4">
+        <p>
           Even if there can only be one outcome for a particular question group,
           the Community and Metaculus Predictions function as they would for
           normal independent questions. The Community and Metaculus Predictions
@@ -1111,7 +1092,7 @@ export default function FAQ() {
           on each subquestion, respectively. These medians and weighted
           aggregates are not constrained to sum to 100%
         </p>
-        <p className="mb-4">
+        <p>
           Feedback for question groups can be provided on the{" "}
           <a href="https://www.metaculus.com/questions/9861/2022-3-9-update-forecast-question-groups/">
             question group discussion post
@@ -1119,13 +1100,10 @@ export default function FAQ() {
           .
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="conditionals"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="conditionals">
           What are Conditional Pairs?
         </h3>
-        <p className="mb-4">
+        <p>
           A Conditional Pair is a special type of{" "}
           <a href="https://www.metaculus.com/faq/#question-groups">
             Question Group
@@ -1142,7 +1120,7 @@ export default function FAQ() {
           .
         </p>
 
-        <p className="mb-4">
+        <p>
           Conditional Pairs ask two Conditional Questions (or
           &quot;Conditionals&quot; for short), each corresponding to a possible
           outcome of the Parent:
@@ -1153,13 +1131,13 @@ export default function FAQ() {
           <li>If the Parent resolves No, how will the Child resolve?</li>
         </ol>
 
-        <p className="mb-4">
+        <p>
           The first Conditional assumes that &quot;The Parent resolves Yes&quot;
           (or &quot;if Yes&quot; for short). The second conditional does the
           same for No.
         </p>
 
-        <p className="mb-4">
+        <p>
           Conditional probabilities are probabilities, so forecasting is very
           similar to Binary Questions. The main difference is that we present
           both conditionals next to each other for convenience:
@@ -1168,13 +1146,12 @@ export default function FAQ() {
         <Image
           src="https://metaculus-public.s3.us-west-2.amazonaws.com/conditional_faq_2.jpg"
           alt="The two conditionals next to each other"
-          className="mb-4"
           layout="responsive"
           width={730}
           height={75}
         />
 
-        <p className="mb-4">
+        <p>
           Conditional questions are automatically resolved when their Parent and
           Child resolve:
         </p>
@@ -1193,23 +1170,21 @@ export default function FAQ() {
           </li>
         </ul>
 
-        <p className="mb-4">Let&apos;s work through an example:</p>
+        <p>Let&apos;s work through an example:</p>
 
         <ul className="mb-4 ml-4 list-inside list-disc space-y-2">
           <li>The Parent is &quot;Will it rain today?&quot;.</li>
           <li>The Child is &quot;Will it rain tomorrow?&quot;.</li>
         </ul>
 
-        <p className="mb-4">
-          So the two Conditionals in the Conditional Pair will be:
-        </p>
+        <p>So the two Conditionals in the Conditional Pair will be:</p>
 
         <ol className="mb-4 ml-4 list-inside list-decimal space-y-2">
           <li>&quot;If it rains today, will it rain tomorrow?&quot;</li>
           <li>&quot;If it does not rain today, will it rain tomorrow?&quot;</li>
         </ol>
 
-        <p className="mb-4">
+        <p>
           For simplicity, Metaculus presents conditional questions graphically.
           In the forecasting interface they are in a table:
         </p>
@@ -1217,13 +1192,12 @@ export default function FAQ() {
         <Image
           src="https://metaculus-public.s3.us-west-2.amazonaws.com/conditional_faq_3.jpg"
           alt="The Conditional Pair forecasting interface"
-          className="mb-4"
           layout="responsive"
           width={754}
           height={253}
         />
 
-        <p className="mb-4">
+        <p>
           And in the feeds, each possible outcome of the Parent is an arrow, and
           each conditional probability is a bar:
         </p>
@@ -1231,29 +1205,28 @@ export default function FAQ() {
         <Image
           src="https://metaculus-public.s3.us-west-2.amazonaws.com/conditional_faq_1.jpg"
           alt="The Conditional Pair feed tile"
-          className="mb-4"
           layout="responsive"
           width={746}
           height={142}
         />
 
-        <p className="mb-4">Back to the example:</p>
+        <p>Back to the example:</p>
 
-        <p className="mb-4">
+        <p>
           It rains today. The parent resolves Yes. This triggers the second
           conditional (&quot;if No&quot;) to be annulled. It is not scored.
         </p>
 
-        <p className="mb-4">
+        <p>
           You wait a day. This time it doesn&apos;t rain. The Child resolves No.
           This triggers the remaining Conditional (&quot;if Yes&quot;) to
           resolve No. It is scored like a normal Binary Question.
         </p>
 
-        <h4 className="mb-2 mt-4 text-lg font-semibold">
+        <h4 className="text-lg font-semibold">
           How do I create conditional pairs?
         </h4>
-        <p className="mb-4">
+        <p>
           You can create and submit conditional pairs like any other question
           type. On the &apos;
           <a href="https://www.metaculus.com/questions/create/">
@@ -1263,25 +1236,25 @@ export default function FAQ() {
           select Parent and Child questions.
         </p>
 
-        <p className="mb-4">
+        <p>
           Note: You can use question group subquestions as the Parent or Child
           by clicking the Parent or Child button and then either searching for
           the subquestion in the field or pasting the URL for the subquestion.
         </p>
 
-        <p className="mb-4">
+        <p>
           To copy the URL for a subquestion, simply visit a question group page
           and click the &apos;...&apos; more options menu to reveal the Copy
           Link option.
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="navigation-and-filtering"
         >
           How do I find certain questions on Metaculus?
         </h3>
-        <p className="mb-4">
+        <p>
           Questions on Metaculus are sorted by activity by default. Newer
           questions, questions with new comments, recently upvoted questions,
           and questions with many new predictions will appear at the top of the{" "}
@@ -1290,24 +1263,18 @@ export default function FAQ() {
           interest and customize the way you interact with Metaculus.
         </p>
 
-        <h4
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
-          id="search-bar"
-        >
+        <h4 className="scroll-mt-nav text-lg font-semibold" id="search-bar">
           Search Bar
         </h4>
-        <p className="mb-4">
+        <p>
           The search bar can be used to find questions using keywords and
           semantic matches. At this time it cannot search comments or users.
         </p>
 
-        <h4
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
-          id="filters"
-        >
+        <h4 className="scroll-mt-nav text-lg font-semibold" id="filters">
           Filters
         </h4>
-        <p className="mb-4">
+        <p>
           Questions can be sorted and filtered in a different manner from the
           default using the filters menu. Questions can be filtered by type,
           status and participation. Questions can also be ordered, for example
@@ -1318,20 +1285,17 @@ export default function FAQ() {
         </p>
 
         <h2
-          className="mb-4 mt-8 scroll-mt-nav scroll-mt-nav text-2xl font-bold"
+          className="scroll-mt-nav scroll-mt-nav text-2xl font-bold"
           id="question-resolution"
         >
           Question Resolution
         </h2>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="closers"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="closers">
           What are the &quot;open date&quot;, &quot;close date&quot; and
           &quot;resolve date?&quot;
         </h3>
-        <p className="mb-4">
+        <p>
           When submitting a question, you are asked to specify the closing date
           (when the question is no longer available for predicting) and
           resolution date (when the resolution is expected to occur). The date
@@ -1361,7 +1325,7 @@ export default function FAQ() {
             not binding in any way.
           </li>
         </ul>
-        <p className="mb-4">
+        <p>
           In some cases, questions must resolve at the resolution date according
           to the best available information. In such cases, it becomes important
           to choose the resolution date carefully. Try to set resolution dates
@@ -1372,7 +1336,7 @@ export default function FAQ() {
           &quot;this question resolves as <strong>Yes</strong> if X happens
           before January 1, 2040)&quot;.
         </p>
-        <p className="mb-4">
+        <p>
           The close date <em>must</em> be at least one hour prior to the
           resolution date, but can be much earlier, depending upon the context.
           Here are some guidelines for specifying the close date:
@@ -1403,7 +1367,7 @@ export default function FAQ() {
             discretion of the period of interest.
           </li>
         </ul>
-        <p className="mb-4">
+        <p>
           <strong>Note:</strong> Previous guidance suggested that a question
           should close between 1/2 to 2/3 of the way between the open time and
           resolution time. This was necessary due to the scoring system at the
@@ -1414,13 +1378,10 @@ export default function FAQ() {
           .
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="timezone"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="timezone">
           What timezone is used for questions?
         </h3>
-        <p className="mb-4">
+        <p>
           For dates and times written in the question, such as &quot;will event
           X happen before January 1, 2030?&quot;, if the timezone is not
           specified{" "}
@@ -1431,7 +1392,7 @@ export default function FAQ() {
           timezone in the resolution criteria, and any timezone specified in the
           text will be used.
         </p>
-        <p className="mb-4">
+        <p>
           For{" "}
           <a href="https://www.metaculus.com/faq/#question-types">date range</a>{" "}
           questions, the dates on the interface are in UTC. Typically the time
@@ -1447,13 +1408,10 @@ export default function FAQ() {
           but not what time of day, it will resolve as noon UTC on that day.
         </p>
 
-        <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
-          id="who-resolves"
-        >
+        <h3 className="scroll-mt-nav text-xl font-semibold" id="who-resolves">
           Who decides the resolution to a question?
         </h3>
-        <p className="mb-4">
+        <p>
           Only Metaculus Administrators can resolve questions. Binary questions
           can resolve <strong>Yes</strong>, <strong>No</strong>,{" "}
           <a href="https://www.metaculus.com/faq/#ambiguous-annulled">
@@ -1468,21 +1426,21 @@ export default function FAQ() {
         </p>
 
         <h3
-          className="mb-3 mt-6 scroll-mt-nav text-xl font-semibold"
+          className="scroll-mt-nav text-xl font-semibold"
           id="ambiguous-annulled"
         >
           What are &quot;Ambiguous&quot; and &quot;Annulled&quot; resolutions?
         </h3>
-        <p className="mb-4">
+        <p>
           Sometimes a question cannot be resolved because the state of the
           world, the <q>truth of the matter</q>, is too uncertain. In these
           cases, the question is resolved as Ambiguous.
         </p>
-        <p className="mb-4">
+        <p>
           Other times, the state of the world is clear, but a key assumption of
           the question was overturned. In these cases, the question is Annulled.
         </p>
-        <p className="mb-4">
+        <p>
           In the same way, when a Conditional turns out to be based on an
           outcome that did not occur, it is Annulled. For example, when a{" "}
           <a href="https://www.metaculus.com/faq/#conditionals">
@@ -1490,29 +1448,29 @@ export default function FAQ() {
           </a>
           &apos;s parent resolves Yes, the <q>if No</q> Conditional is Annulled.
         </p>
-        <p className="mb-4">
+        <p>
           When questions are Annulled or resolved as Ambiguous, they are no
           longer open for forecasting, and they are not scored.
         </p>
-        <p className="mb-4">
+        <p>
           <em>
             If you&apos;d like to read more about why Ambiguous and Annulled
             resolutions are necessary you can expand the section below.
           </em>
         </p>
 
-        <div className="mb-4">
+        <div>
           <p className="cursor-pointer font-semibold">
             Reasons for Ambiguous and Annulled resolutions
           </p>
           <div className="mt-2">
             <h3
-              className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+              className="scroll-mt-nav text-lg font-semibold"
               id="reason-annulled"
             >
               Why was this question Annulled or resolved as Ambiguous?
             </h3>
-            <p className="mb-4">
+            <p>
               An Ambiguous or Annulled resolution generally implies that there
               was some inherent ambiguity in the question, that real-world
               events subverted one of the assumptions of the question, or that
@@ -1523,7 +1481,7 @@ export default function FAQ() {
               consider factors such as fairness to all participating forecasters
               and the underlying incentives toward accurate forecasting.
             </p>
-            <p className="mb-4">
+            <p>
               To avoid this unfairness and provide the most accurate
               information, we resolve all questions in accordance with the
               actual written text of the resolution criteria whenever possible.
@@ -1538,12 +1496,12 @@ export default function FAQ() {
             </p>
 
             <h3
-              className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+              className="scroll-mt-nav text-lg font-semibold"
               id="types-annulled"
             >
               Types of Ambiguous or Annulled Resolutions
             </h3>
-            <p className="mb-4">
+            <p>
               A question&apos;s resolution criteria can be thought of as akin to
               a legal contract. The resolution criteria create a shared
               understanding of what forecasters are aiming to predict, and
@@ -1558,7 +1516,7 @@ export default function FAQ() {
               Additionally, the information provided by the forecasts on the
               question will be poor due to the differing interpretations.
             </p>
-            <p className="mb-4">
+            <p>
               The following sections provide more detail about common reasons we
               resolve questions as Ambiguous or Annul them and some examples.
               Some of these examples could fit into multiple categories, but
@@ -1620,7 +1578,7 @@ export default function FAQ() {
                 </li>
               </ul>
             </ul>
-            <p className="mb-4">
+            <p>
               <strong>Note:</strong> Previously Metaculus only had one
               resolution type &mdash; Ambiguous &mdash; for cases where a
               question could not otherwise be resolved. We&apos;ve since
@@ -1631,12 +1589,12 @@ export default function FAQ() {
             </p>
 
             <h4
-              className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+              className="scroll-mt-nav text-lg font-semibold"
               id="ambiguous-details"
             >
               Ambiguous Resolution
             </h4>
-            <p className="mb-4">
+            <p>
               Ambiguous resolution is reserved for questions where reality is
               not clear. Either because reporting about an event is conflicted
               or unclear about what actually happened, or available material is
@@ -1646,12 +1604,12 @@ export default function FAQ() {
             </p>
 
             <h5
-              className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+              className="scroll-mt-nav text-lg font-semibold"
               id="no-clear-consensus"
             >
               No Clear Consensus
             </h5>
-            <p className="mb-4">
+            <p>
               Questions can also resolve Ambiguous when there is not enough
               information available to arrive at an appropriate resolution. This
               can be because of conflicting or unclear media reports, or because
@@ -1724,12 +1682,12 @@ export default function FAQ() {
           </div>
         </div>
         <h5
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+          className="scroll-mt-nav text-lg font-semibold"
           id="no-clear-consensus"
         >
           No Clear Consensus
         </h5>
-        <p className="mb-4">
+        <p>
           Questions can also resolve Ambiguous when there is not enough
           information available to arrive at an appropriate resolution. This can
           be because of conflicting or unclear media reports, or because a data
@@ -1800,29 +1758,29 @@ export default function FAQ() {
         </ul>
 
         <h4
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+          className="scroll-mt-nav text-lg font-semibold"
           id="annulment-details"
         >
           Annulment
         </h4>
-        <p className="mb-4">
+        <p>
           Annulling a question is reserved for situations where reality is clear
           but the question is not. In other words, the question failed to
           adequately capture a method for clear resolution.
         </p>
-        <p className="mb-4">
+        <p>
           <strong>Note:</strong> Annulment was introduced in April of 2023, so
           while the following examples describe Annulment the questions in
           actuality were resolved as Ambiguous.
         </p>
 
         <h5
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+          className="scroll-mt-nav text-lg font-semibold"
           id="annulled-underspecified"
         >
           The Question Was Underspecified
         </h5>
-        <p className="mb-4">
+        <p>
           Writing good forecasting questions is hard, and it only gets harder
           the farther the question looks into the future. To fully eliminate the
           potential for a question to be Annulled the resolution criteria must
@@ -1836,7 +1794,7 @@ export default function FAQ() {
           find an interpretation that is clearly an appropriate fit for the
           resolution criteria, but this is not always possible.
         </p>
-        <p className="mb-4">
+        <p>
           Here are some examples of Annulment due to underspecified questions:
         </p>
         <ul className="mb-4 ml-4 list-inside list-disc space-y-2">
@@ -1910,12 +1868,12 @@ export default function FAQ() {
         </ul>
 
         <h5
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+          className="scroll-mt-nav text-lg font-semibold"
           id="annulled-subverted"
         >
           The Assumptions of the Question Were Subverted
         </h5>
-        <p className="mb-4">
+        <p>
           Questions often contain assumptions in their resolution criteria, many
           of which are unstated. For example, assuming that the underlying
           methodology of a data source will remain the same, assuming that an
@@ -1926,9 +1884,7 @@ export default function FAQ() {
           situations) but due to the difficulty in anticipating these outcomes
           this isn&apos;t always done.
         </p>
-        <p className="mb-4">
-          Here are some examples of Annulment due to subverted assumptions:
-        </p>
+        <p>Here are some examples of Annulment due to subverted assumptions:</p>
         <ul className="mb-4 ml-4 list-inside list-disc space-y-2">
           <li>
             <a href="https://www.metaculus.com/questions/10444/cause-of-flight-5735-crash/">
@@ -2026,12 +1982,12 @@ export default function FAQ() {
         </ul>
 
         <h5
-          className="mb-2 mt-4 scroll-mt-nav text-lg font-semibold"
+          className="scroll-mt-nav text-lg font-semibold"
           id="annulled-imbalanced"
         >
           Imbalanced Outcomes and Consistent Incentives
         </h5>
-        <p className="mb-4">
+        <p>
           Sometimes questions imply imbalanced outcomes, for example where the
           burden of proof for an event to be considered to have occurred is high
           and tips the scales toward a binary question resolving No, or where
@@ -2045,7 +2001,7 @@ export default function FAQ() {
           resolution of Yes or Annulled. This creates a bias in the question and
           also produces bad incentives if the question isn&apos;t Annulled.
         </p>
-        <p className="mb-4">
+        <p>
           The case of imbalanced outcomes and consistent incentives is best
           explained with examples, such as the following:
         </p>
@@ -2448,6 +2404,7 @@ export default function FAQ() {
             question, Metaculus may choose a suitable replacement.
           </p>
         </div>
+        <hr />
         <div>
           <h2
             id="predictions"
@@ -2746,6 +2703,7 @@ export default function FAQ() {
             <a href="/questions/track-record/">track record page</a>.
           </p>
         </div>
+        <hr />
         <div>
           <h2
             id="visibility-of-the-cp-and-mp"
@@ -2827,7 +2785,7 @@ export default function FAQ() {
             From a Public Figure&apos;s page, click Report Prediction and then
             provide
           </p>
-          <ol className="ml-5 list-decimal">
+          <ol className="ml-5 list-inside list-decimal">
             <li>A direct quotation from the prediction news source</li>
             <li>The name of the news source</li>
             <li>A link to the news source</li>
@@ -2984,6 +2942,7 @@ export default function FAQ() {
             you had a forecast, but not the others.
           </p>
         </div>
+        <hr />
         <div>
           <h2
             id="scores-and-medals"
@@ -3031,6 +2990,7 @@ export default function FAQ() {
           </p>
         </div>
 
+        <hr />
         <div>
           <h2
             id="Metaculus Journal"
@@ -3089,7 +3049,7 @@ export default function FAQ() {
             of organizations.
           </p>
         </div>
-
+        <hr />
         <div>
           <h2 id="miscellany" className="mb-4 scroll-mt-nav text-3xl font-bold">
             Miscellany
@@ -3120,7 +3080,7 @@ export default function FAQ() {
           <p>
             Metaculus selects individuals according to the following criteria:
           </p>
-          <ol className="ml-5 list-decimal">
+          <ol className="ml-5 list-inside list-decimal">
             <li>Have scores in the top 2% of all Metaculus forecasters.</li>
             <li>
               Have forecasted on a minimum of 75+ questions that have been
diff --git a/front_end/src/app/(main)/help/scores-faq/components/baseline_math.tsx b/front_end/src/app/(main)/help/scores-faq/components/baseline_math.tsx
new file mode 100644
index 0000000000..12f69a1812
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/components/baseline_math.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React from "react";
+
+import StyledDisclosure from "../../../components/styled_disclosure";
+import MathJaxContent from "@/components/math_jax_content";
+
+const BaselineMath = () => {
+  return (
+    <StyledDisclosure question="Baseline score math">
+      <p>
+        The Baseline scores are rescaled{" "}
+        <a href="/help/scores-faq/#log-score">log scores</a>, with the general
+        form:
+      </p>
+      <MathJaxContent
+        content={`\\[
+            \\text{Baseline score} = 100 \\times 
+            \\frac{
+            \\operatorname{log\\ score}(prediction) - \\operatorname{log\\ score}(baseline)
+            }{
+            \\text{scale}
+            }
+          \\]`}
+      />
+      <p>
+        For binary and multiple choice questions, the{" "}
+        <MathJaxContent content={`\\(scale\\)`} /> is chosen so that a perfect
+        prediction (<MathJaxContent content={`\\(P(outcome) = 100 \\%\\)`} />)
+        gives a score of +100. The formula for a binary question is:
+      </p>
+      <MathJaxContent
+        content={`\\[
+            \\text{binary Baseline score} = 100 \\times \\frac{ \\ln(P(outcome)) - \\ln(50 \\%) }{ \\ln(2)}
+          \\]`}
+      />
+      <p>
+        Note that you can rearrange this formula into:{" "}
+        <MathJaxContent
+          content={`\\(100 \\times(\\log_2(P(outcome)) + 1)\\)`}
+        />
+        .
+      </p>
+      <p>The formula for a multiple choice question with N options is:</p>
+      <MathJaxContent
+        content={`\\[
+            \\text{multiple choice Baseline score} = 100 \\times \\frac{ \\ln(P(outcome)) - \\ln(\\frac{ 1}{ N}) }{ \\ln(N)}
+          \\]`}
+      />
+      <p>
+        For continuous questions, the <MathJaxContent content={`\\(scale\\)`} />{" "}
+        was chosen empirically so that continuous scores have roughly the same
+        average as binary scores. The formula for a continuous question is:
+      </p>
+      <MathJaxContent
+        content={`\\[
+            \\text{continuous Baseline score} = 100 \\times \\frac{ \\ln(\\operatorname{pdf}(outcome)) - \\ln(baseline) }{ 2 }
+          \\]`}
+      />
+      <p>
+        Where <MathJaxContent content={`\\(\\ln\\)`} /> is the natural
+        logarithm, <MathJaxContent content={`\\(P(outcome)\\)`} /> is the
+        probability predicted for the outcome that actually happened, and{" "}
+        <MathJaxContent content={`\\(\\operatorname{pdf}(outcome)\\)`} /> is the
+        value of the predicted probability density function at the outcome.
+      </p>
+      <p>
+        The continuous <MathJaxContent content={`\\(baseline\\)`} /> depends on
+        whether the question has open or closed bounds:
+      </p>
+      <ul className="list-disc pl-5">
+        <li>
+          If both bounds are closed, the{" "}
+          <MathJaxContent content={`\\(baseline\\)`} /> is 1, corresponding to a
+          uniform distribution in range.
+        </li>
+        <li>
+          If one bound is open, the{" "}
+          <MathJaxContent content={`\\(baseline\\)`} /> is 0.95, corresponding
+          to a uniform distribution in range + 5% probability out of the open
+          bound.
+        </li>
+        <li>
+          If both bounds are open, the{" "}
+          <MathJaxContent content={`\\(baseline\\)`} /> is 0.9, corresponding to
+          a uniform distribution in range + 5% probability out of each open
+          bound.
+        </li>
+      </ul>
+    </StyledDisclosure>
+  );
+};
+
+export default BaselineMath;
diff --git a/front_end/src/app/(main)/help/scores-faq/components/further_math.tsx b/front_end/src/app/(main)/help/scores-faq/components/further_math.tsx
new file mode 100644
index 0000000000..961000b768
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/components/further_math.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+
+import StyledDisclosure from "../../../components/styled_disclosure";
+
+const FurtherMath = () => {
+  return (
+    <StyledDisclosure question="Further math details for nerds">
+      <p>
+        If you have an intuition that something should be 0 and not positive,
+        you are correct! The average Peer score across all users is guaranteed
+        to be 0. This does not imply that the score of the average (or median)
+        forecast is 0: the score of the mean is not the mean of the scores.
+      </p>
+      <p></p>
+      <p>
+        There is another reason why the Peer score of the Community Prediction
+        is positive: you can rearrange the Peer score formula to show that it is
+        the difference between the forecaster log score and the log score of the
+        geometric mean of all other forecasters. Since the median will be higher
+        than the geometric mean in most cases, it follows that the score of the
+        Community Prediction will be positive in most cases.
+      </p>
+    </StyledDisclosure>
+  );
+};
+
+export default FurtherMath;
diff --git a/front_end/src/app/(main)/help/scores-faq/components/peer_math.tsx b/front_end/src/app/(main)/help/scores-faq/components/peer_math.tsx
new file mode 100644
index 0000000000..9588c14c1d
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/components/peer_math.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+
+import StyledDisclosure from "../../../components/styled_disclosure";
+import MathJaxContent from "@/components/math_jax_content";
+
+const PeerMath = () => {
+  return (
+    <StyledDisclosure question="Peer score math">
+      <p>
+        The Peer scores are built on{" "}
+        <a href="/help/scores-faq/#log-score">log scores</a>, with the general
+        form:
+      </p>
+      <MathJaxContent
+        block
+        content={`\\[
+    \\text{Peer score} = 100 \\times \\frac{1}{N} \\sum_{i = 1}^N \\operatorname{log\\ score}(p) - \\operatorname{log\\ score}(p_i)
+  \\]`}
+      />
+      <p>
+        Where <MathJaxContent content={`\\(p\\)`} /> is the scored prediction,{" "}
+        <MathJaxContent content={`\\(N\\)`} /> is the number of other
+        predictions, and <MathJaxContent content={`\\(p_i\\)`} /> is the i-th
+        other prediction.
+      </p>
+      <p>Note that this can be rearranged into:</p>
+      <MathJaxContent
+        block
+        content={`\\[
+    \\text{Peer score} = 100 \\times (\\ln(p) - \\ln(\\operatorname{GM}(p_i)))
+  \\]`}
+      />
+      <p>
+        Where{" "}
+        <a href="https://en.wikipedia.org/wiki/Geometric_mean">
+          <MathJaxContent content={`\\(\\operatorname{GM}(p_i)\\)`} />
+        </a>{" "}
+        is the geometric mean of all other predictions.
+      </p>
+      <p>
+        As before, for binary questions <MathJaxContent content={`\\(p\\)`} />{" "}
+        is the probability given to the correct outcome (Yes or No), for
+        multiple choice questions it is the probability given to the option
+        outcome that resolved Yes, and for continuous questions it is the value
+        of the predicted pdf at the outcome.
+      </p>
+    </StyledDisclosure>
+  );
+};
+
+export default PeerMath;
diff --git a/front_end/src/app/(main)/help/scores-faq/components/points_math.tsx b/front_end/src/app/(main)/help/scores-faq/components/points_math.tsx
new file mode 100644
index 0000000000..9b6d68db6b
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/components/points_math.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import React from "react";
+
+import StyledDisclosure from "../../../components/styled_disclosure";
+import MathJaxContent from "@/components/math_jax_content";
+
+const PointsMath = () => {
+  return (
+    <StyledDisclosure question="Metaculus points math">
+      <p>
+        Your score <MathJaxContent content={`S(T,o)`} /> at any given time{" "}
+        <MathJaxContent content={`T`} /> is the sum of an &quot;absolute&quot;
+        component and a &quot;relative&quot; component:
+      </p>
+      <MathJaxContent
+        block
+        content={`\\[
+  S(T,o) = a(N) \\times L(p,o) + b(N) \\times B(p,o)
+  \\]`}
+      />
+      <p>where:</p>
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`o`} /> is the outcome of the question: 1 if
+          the question resolves positive, 0 if it resolves negative.
+        </li>
+        <li>
+          <MathJaxContent content={`N`} /> is the number of forecasters on the
+          question.
+        </li>
+        <li>
+          <MathJaxContent content={`L(p,o)`} /> is the log score relative to a
+          50% prior, defined as:
+        </li>
+      </ul>
+      <MathJaxContent
+        block
+        content={`\\[
+  L(p, o) =
+  \\begin{cases}
+  \\log_2 \\left ( \\frac{p}{0.5} \\right ) & \\text{if } o = 1 \\\\
+  \\log_2 \\left ( \\frac{1 - p}{0.5} \\right ) & \\text{if } o = 0
+  \\end{cases}
+  \\]`}
+      />
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`B(p,o)`} /> is the betting score and
+          represents a bet placed against every other forecaster. It is
+          described under &quot;constant pool scoring&quot; on the Metaculus
+          scoring demo (but with a modification that for computational
+          efficiency, the full distribution of other forecaster predictions is
+          replaced by a fitted{" "}
+          <a href="https://en.wikipedia.org/wiki/Beta_distribution">
+            beta distribution
+          </a>
+          ).
+        </li>
+        <li>
+          <MathJaxContent content={`a(N)`} /> and{" "}
+          <MathJaxContent content={`b(N)`} /> depend on{" "}
+          <MathJaxContent content={`N`} /> only and define how the points scale
+          with the number of forecasters.
+        </li>
+      </ul>
+      <MathJaxContent
+        block
+        content={`\\[
+  \\begin{align*}
+  A(N) &= 45 + 15 \\log_2(1 + N/30) \\\\
+  B(N) &= 30 \\log_2(1 + N/30)
+  \\end{align*}
+  \\]`}
+      />
+      <p>
+        Note that <MathJaxContent content={`B`} />,{" "}
+        <MathJaxContent content={`N`} />, and <MathJaxContent content={`p`} />{" "}
+        can all depend on <MathJaxContent content={`T`} /> and contribute to the
+        time-dependence of <MathJaxContent content={`S(T, o)`} />.
+      </p>
+      <p>
+        Your final score is given by the integral of{" "}
+        <MathJaxContent content={`S(T, o)`} /> over{" "}
+        <MathJaxContent content={`T`} />:
+      </p>
+      <MathJaxContent
+        block
+        content={`\\[
+  S = \\frac{1}{t_c-t_o} \\int_{t_o}^{t_c} S(T, o) \\, dT
+  \\]`}
+      />
+      <p>
+        where <MathJaxContent content={`t_o`} /> and{" "}
+        <MathJaxContent content={`t_c`} /> are the opening and closing times.
+        (Note that <MathJaxContent content={`S(T) = 0`} /> between the opening
+        time and your first prediction, and is also zero after question
+        resolution but before question close, in the case when a question
+        resolves early.)
+      </p>
+      <p>
+        Before May 2022, there was also a 50% point bonus given at the time the
+        question closes, but it was discontinued and the points multiplied by
+        1.5 henceforth.
+      </p>
+    </StyledDisclosure>
+  );
+};
+
+export default PointsMath;
diff --git a/front_end/src/app/(main)/help/scores-faq/components/truncation_example.tsx b/front_end/src/app/(main)/help/scores-faq/components/truncation_example.tsx
new file mode 100644
index 0000000000..adc3de9ecb
--- /dev/null
+++ b/front_end/src/app/(main)/help/scores-faq/components/truncation_example.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import React from "react";
+
+import StyledDisclosure from "../../../components/styled_disclosure";
+import MathJaxContent from "@/components/math_jax_content";
+
+const TruncationExample = () => {
+  return (
+    <StyledDisclosure question="Score truncation example">
+      <p>
+        This example uses the Baseline score, which will be noted{" "}
+        <MathJaxContent content={`\\(S\\)`} />, but results would be equivalent
+        with any proper score.
+      </p>
+      <p>
+        Alex wants to predict if they will be fired this year. They have a
+        performance review scheduled this week. They estimate there is a{" "}
+        <MathJaxContent content={`\\(20\\%\\)`} /> chance they fail it, and if
+        so they will be fired on the spot. If they don’t fail this week, there
+        is still a <MathJaxContent content={`\\(5\\%\\)`} /> chance they will be
+        fired at the end of the year. A proper scoring rule ensures that the
+        best strategy on this question is to predict{" "}
+        <MathJaxContent content={`\\(p=(20\\%+80\\% \\times 5\\%)=24\\%\\)`} />{" "}
+        this week, and then <MathJaxContent content={`\\(5\\%\\)`} /> for the
+        other 51 weeks (if they weren’t fired).
+      </p>
+      <p>
+        <b>Without truncation</b>
+      </p>
+      <p>Without truncation, this honest strategy gives Baseline scores of:</p>
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`\\(S(24\\%) \\approx -106\\)`} /> in the{" "}
+          <MathJaxContent content={`\\(20\\%\\)`} /> of cases they are fired
+          this week.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(24\\%) + \\frac{51}{52}S(5\\%) = -328\\)`}
+          />{" "}
+          in the <MathJaxContent content={`\\(80\\% \\times 5\\% = 4\\%\\)`} />{" "}
+          of cases they are fired at the end of the year.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(76\\%) + \\frac{51}{52}S(95\\%) = +92\\)`}
+          />{" "}
+          in the{" "}
+          <MathJaxContent content={`\\(80\\% \\times 95\\% = 76\\%\\)`} /> of
+          cases they are not fired.
+        </li>
+      </ul>
+      <p>
+        For an average score of{" "}
+        <MathJaxContent
+          content={`\\(20\\% \\times -106 + 4\\% \\times -327 + 76\\% \\times +92 = +36\\)`}
+        />{" "}
+        in expectation.
+      </p>
+      <p>
+        But the strategy of “predicting close to 100% in the beginning and lower
+        later”, let&apos;s say 99% today, then 5% the other 6 days, without
+        truncation gives Baseline scores of:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`\\(S(99\\%) \\approx +99\\)`} /> in the{" "}
+          <MathJaxContent content={`\\(20\\%\\)`} /> of cases they are fired
+          this week.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(99\\%) + \\frac{51}{52}S(5\\%) = -324\\)`}
+          />{" "}
+          in the <MathJaxContent content={`\\(80\\% \\times 5\\% = 4\\%\\)`} />{" "}
+          of cases they are fired at the end of the year.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(1\\%) + \\frac{51}{52}S(95\\%) = +80\\)`}
+          />{" "}
+          in the{" "}
+          <MathJaxContent content={`\\(80\\% \\times 95\\% = 76\\%\\)`} /> of
+          cases they are not fired.
+        </li>
+      </ul>
+      <p>
+        For an average score of{" "}
+        <MathJaxContent
+          content={`\\(20\\% \\times +99 + 4\\% \\times -324 + 76\\% \\times +80 = +68\\)`}
+        />{" "}
+        in expectation.
+      </p>
+      <p>
+        Notice that <MathJaxContent content={`\\(+68 > +36\\)`} />, so without
+        truncation, the gaming strategy gives you a score almost twice as high
+        in expectation! It is really not proper.
+      </p>
+      <p>
+        <b>With truncation</b>
+      </p>
+      <p>With truncation, the honest strategy gives Baseline scores of:</p>
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`\\(\\frac{1}{52}S(24\\%) \\approx −2\\)`} />{" "}
+          in the <MathJaxContent content={`\\(20\\%\\)`} /> of cases they are
+          fired this week.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(24\\%) + \\frac{51}{52}S(5\\%) = -328\\)`}
+          />{" "}
+          in the <MathJaxContent content={`\\(80\\% \\times 5\\% = 4\\%\\)`} />{" "}
+          of cases they are fired at the end of the year.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(76\\%) + \\frac{51}{52}S(95\\%) = +92\\)`}
+          />{" "}
+          in the{" "}
+          <MathJaxContent content={`\\(80\\% \\times 95\\% = 76\\%\\)`} /> of
+          cases they are not fired.
+        </li>
+      </ul>
+      <p>
+        For an average score of{" "}
+        <MathJaxContent
+          content={`\\(20\\% \\times -2 + 4\\% \\times -327 + 76\\% \\times +92 = +56\\)`}
+        />{" "}
+        in expectation.
+      </p>
+      <p>While the gaming strategy gives:</p>
+      <ul className="ml-5 list-disc">
+        <li>
+          <MathJaxContent content={`\\(\\frac{1}{52}S(99\\%) \\approx +2\\)`} />{" "}
+          in the <MathJaxContent content={`\\(20\\%\\)`} /> of cases they are
+          fired this week.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(99\\%) + \\frac{51}{52}S(5\\%) = -324\\)`}
+          />{" "}
+          in the <MathJaxContent content={`\\(80\\% \\times 5\\% = 4\\%\\)`} />{" "}
+          of cases they are fired at the end of the year.
+        </li>
+        <li>
+          <MathJaxContent
+            content={`\\(\\frac{1}{52}S(1\\%) + \\frac{51}{52}S(95\\%) = +80\\)`}
+          />{" "}
+          in the{" "}
+          <MathJaxContent content={`\\(80\\% \\times 95\\% = 76\\%\\)`} /> of
+          cases they are not fired.
+        </li>
+      </ul>
+      <p>
+        For an average score of{" "}
+        <MathJaxContent
+          content={`\\(20\\% \\times +2 + 4\\% \\times -324 + 76\\% \\times +80 = +48\\)`}
+        />{" "}
+        in expectation.
+      </p>
+      <p>
+        This time, <MathJaxContent content={`\\(+56 > +48\\)`} />, so with
+        truncation, the gaming strategy gives you a worse score than the honest
+        strategy! Which is proper.
+      </p>
+    </StyledDisclosure>
+  );
+};
+
+export default TruncationExample;
diff --git a/front_end/src/app/(main)/help/scores-faq/page.tsx b/front_end/src/app/(main)/help/scores-faq/page.tsx
index a172cc1ee3..482a708157 100644
--- a/front_end/src/app/(main)/help/scores-faq/page.tsx
+++ b/front_end/src/app/(main)/help/scores-faq/page.tsx
@@ -1,8 +1,15 @@
 import PageWrapper from "../../components/pagewrapper";
+import MathJaxContent from "@/components/math_jax_content";
+import BaselineMath from "./components/baseline_math";
+import PeerMath from "./components/peer_math";
+import FurtherMath from "./components/further_math";
+import TruncationExample from "./components/truncation_example";
+import PointsMath from "./components/points_math";
 
 export const metadata = {
   title: "Scores FAQ | Metaculus",
-  description: "tbd",
+  description:
+    "Learn how Metaculus scores work, including Peer scores, Relative scores, and legacy scoring methods. Understand tournament rankings, coverage, and prize calculations.",
 };
 
 export default function ScoresFAQ() {
@@ -11,17 +18,16 @@ export default function ScoresFAQ() {
       <h1>Scores FAQ</h1>
       <p>
         Below are Frequently Asked Questions (and answers!) about scores. The
-        general FAQ is <a href="/help/faq/">here</a>, and the medals FAQ is{" "}
+        general FAQ is <a href="/faq/">here</a>, and the medals FAQ is{" "}
         <a href="/help/medals-faq/">here</a>.
       </p>
 
-      <p>Contents:</p>
       <div className="table-of-contents">
-        <ul>
-          <li>
+        <ul className="space-y-2">
+          <li className="font-bold">
             <a href="#scores-section">Scores</a>
           </li>
-          <ul className="label-font">
+          <ul className=" space-y-1 pl-4">
             <li>
               <a href="#scoring-rule">What is a scoring rule?</a>
             </li>
@@ -64,7 +70,7 @@ export default function ScoresFAQ() {
             </li>
             <li>
               <a href="#legacy-scores">What are the legacy scores?</a>
-              <ul className="label-font">
+              <ul className="space-y-1  pl-4 pt-2">
                 <li>
                   <a href="#relative-score">What is the Relative score?</a>
                 </li>
@@ -77,10 +83,10 @@ export default function ScoresFAQ() {
               </ul>
             </li>
           </ul>
-          <li>
+          <li className="font-bold">
             <a href="#tournaments-section">Tournaments</a>
           </li>
-          <ul className="label-font">
+          <ul className="space-y-1 pl-4">
             <li>
               <a href="#tournament-scores">
                 How are my tournament Score, Coverage, Take, Prize and Rank
@@ -102,12 +108,13 @@ export default function ScoresFAQ() {
         </ul>
       </div>
 
-      <hr className="my-4" />
+      <hr className="my-8" />
 
-      <h1 className="scroll-mt-nav" id="scores">
+      <h1 className="scroll-mt-nav" id="scores-section">
         Scores
       </h1>
 
+      <hr />
       <h2 className="scroll-mt-nav" id="scoring-rule">
         What is a scoring rule?
       </h2>
@@ -128,6 +135,7 @@ export default function ScoresFAQ() {
         see in the next section.
       </p>
 
+      <hr />
       <h2 className="scroll-mt-nav" id="proper-scoring">
         What is a proper scoring rule?
       </h2>
@@ -149,7 +157,7 @@ export default function ScoresFAQ() {
       <div className="overflow-x-auto">
         <table className="mx-auto w-auto border-collapse">
           <thead>
-            <tr className="text-sm font-bold">
+            <tr className="text-xs font-bold md:text-sm">
               <td className="p-3">outcome die roll</td>
               <td className="p-3">naive score of p=5%</td>
               <td className="p-3">naive score of p=17%</td>
@@ -157,43 +165,43 @@ export default function ScoresFAQ() {
             </tr>
           </thead>
           <tbody>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">1</td>
               <td className="p-3">0.95</td>
               <td className="p-3">0.83</td>
               <td className="p-3">0.7</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">2</td>
               <td className="p-3">0.95</td>
               <td className="p-3">0.83</td>
               <td className="p-3">0.7</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">3</td>
               <td className="p-3">0.95</td>
               <td className="p-3">0.83</td>
               <td className="p-3">0.7</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">4</td>
               <td className="p-3">0.95</td>
               <td className="p-3">0.83</td>
               <td className="p-3">0.7</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">5</td>
               <td className="p-3">0.95</td>
               <td className="p-3">0.83</td>
               <td className="p-3">0.7</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">6</td>
               <td className="p-3">0.05</td>
               <td className="p-3">0.17</td>
               <td className="p-3">0.3</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">average</td>
               <td className="p-3">0.8</td>
               <td className="p-3">0.72</td>
@@ -219,7 +227,7 @@ export default function ScoresFAQ() {
       <div className="overflow-x-auto">
         <table className="mx-auto w-auto border-collapse">
           <thead>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-bold  md:text-sm">
               <td className="p-3">outcome die roll</td>
               <td className="p-3">log score of p=5%</td>
               <td className="p-3">log score of p=17%</td>
@@ -227,43 +235,43 @@ export default function ScoresFAQ() {
             </tr>
           </thead>
           <tbody>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">1</td>
               <td className="p-3">-0.05</td>
               <td className="p-3">-0.19</td>
               <td className="p-3">-0.37</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">2</td>
               <td className="p-3">-0.05</td>
               <td className="p-3">-0.19</td>
               <td className="p-3">-0.37</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">3</td>
               <td className="p-3">-0.05</td>
               <td className="p-3">-0.19</td>
               <td className="p-3">-0.37</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">4</td>
               <td className="p-3">-0.05</td>
               <td className="p-3">-0.19</td>
               <td className="p-3">-0.37</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">5</td>
               <td className="p-3">-0.05</td>
               <td className="p-3">-0.19</td>
               <td className="p-3">-0.37</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">6</td>
               <td className="p-3">-3</td>
               <td className="p-3">-1.77</td>
               <td className="p-3">-1.2</td>
             </tr>
-            <tr className="text-sm font-normal">
+            <tr className="text-xs font-normal md:text-sm">
               <td className="p-3">average</td>
               <td className="p-3">-0.54</td>
               <td className="p-3">-0.45</td>
@@ -277,59 +285,880 @@ export default function ScoresFAQ() {
         With the log score, you do get a higher (better) score if you predict
         the true probability of 17%.
       </p>
-      {/*
-  <h2 className="section-header" id="log-score">What is the log score?</h2>
-  <p>The logarithmic scoring rule, or &quot;log score&quot; for short, is defined as:</p>
-  <MathJaxWrapper>
-    {`\\[
+      <hr />
+      <h2 className="scroll-mt-nav" id="log-score">
+        What is the log score?
+      </h2>
+      <p>
+        The logarithmic scoring rule, or &quot;log score&quot; for short, is
+        defined as:
+      </p>
+      <MathJaxContent
+        content={` \\[
     \\text{log score} = \\ln(P(outcome))
     \\]`}
-  </MathJaxWrapper>
-  <p>Where <MathJaxWrapper>{`\\(\\ln\\)`}</MathJaxWrapper> is the natural logarithm and <MathJaxWrapper>{`\\(P(outcome)\\)`}</MathJaxWrapper> is the probability predicted for the outcome that actually happened. This log score applies to categorical predictions, where one of a (usually) small set of outcomes can happen. On Metaculus those are Binary and Multiple Choice questions. See the next section for the log scores of continuous questions.</p>
-  <p>Higher scores are better:</p>
-  <ul className="list-disc ml-6">
-    <li>If you predicted 0% on the correct outcome, your score will be <MathJaxWrapper>{`\\(-\\infty\\)`}</MathJaxWrapper> (minus infinity).</li>
-    <li>If you predict 100% on the correct outcome, your score will be 0.</li>
-  </ul>
-  <p>This means that the log score is always negative (for Binary and Multiple Choice questions). This has proved unintuitive, which is one reason why Metaculus uses the <a href="/help/scores-faq/#baseline-score">Baseline</a> and <a href="/help/scores-faq/#peer-score">Peer</a> scores, which are based on the log score but can be positive.</p>
-  <p>The log score is proper (see <a href="/help/scores-faq/#proper-scoring">What is a proper scoring rule?</a>). This means that to maximize your score <b>you should predict your true beliefs</b> (see <a href="#extremizing">Can I get better scores by predicting extreme values?</a>).</p>
-  <p>One interesting property of the log score: it is much more punitive of extreme wrong predictions than it is rewarding of extreme right predictions. Consider the scores you get for predicting 99% or 99.9%:</p>
+        block
+      />
+      <p>
+        Where <MathJaxContent content={`\\(\\ln\\)`} /> is the natural logarithm
+        and <MathJaxContent content={`\\(P(outcome)\\)`} /> is the probability
+        predicted for the outcome that actually happened. This log score applies
+        to categorical predictions, where one of a (usually) small set of
+        outcomes can happen. On Metaculus those are Binary and Multiple Choice
+        questions. See the next section for the log scores of continuous
+        questions.
+      </p>
+      <p>Higher scores are better:</p>
+      <ul className="ml-6 list-disc">
+        <li>
+          If you predicted 0% on the correct outcome, your score will be{" "}
+          <MathJaxContent content={`\\(-\\infty\\)`} /> (minus infinity).
+        </li>
+        <li>
+          If you predict 100% on the correct outcome, your score will be 0.
+        </li>
+      </ul>
+      <p>
+        This means that the log score is always negative (for Binary and
+        Multiple Choice questions). This has proved unintuitive, which is one
+        reason why Metaculus uses the{" "}
+        <a href="/help/scores-faq/#baseline-score">Baseline</a> and{" "}
+        <a href="/help/scores-faq/#peer-score">Peer</a> scores, which are based
+        on the log score but can be positive.
+      </p>
+      <p>
+        The log score is proper (see{" "}
+        <a href="/help/scores-faq/#proper-scoring">
+          What is a proper scoring rule?
+        </a>
+        ). This means that to maximize your score{" "}
+        <b>you should predict your true beliefs</b> (see{" "}
+        <a href="#extremizing">
+          Can I get better scores by predicting extreme values?
+        </a>
+        ).
+      </p>
+      <p>
+        One interesting property of the log score: it is much more punitive of
+        extreme wrong predictions than it is rewarding of extreme right
+        predictions. Consider the scores you get for predicting 99% or 99.9%:
+      </p>
 
-  <div className="overflow-x-auto">
-    <table className="mx-auto w-auto border-collapse">
-      <thead>
-        <tr className="text-sm font-light">
-          <td className="p-4"></td>
-          <td className="p-4">99% Yes, 1% No</td>
-          <td className="p-4">99.9% Yes, 0.1% No</td>
-        </tr>
-      </thead>
-      <tbody>
-        <tr className="text-sm font-light">
-          <td className="p-4">Score if outcome = Yes</td>
-          <td className="p-4">-0.01</td>
-          <td className="p-4">-0.001</td>
-        </tr>
-        <tr className="text-sm font-light">
-          <td className="p-4">Score if outcome = No</td>
-          <td className="p-4">-4.6</td>
-          <td className="p-4">-6.9</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+      <div className="overflow-x-auto">
+        <table className="mx-auto w-auto border-collapse">
+          <thead>
+            <tr className="text-xs font-bold md:text-sm">
+              <td className="p-2"></td>
+              <td className="p-2">99% Yes, 1% No</td>
+              <td className="p-2">99.9% Yes, 0.1% No</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="text-xs font-light md:text-sm">
+              <td className="p-2">Score if outcome = Yes</td>
+              <td className="p-2">-0.01</td>
+              <td className="p-2">-0.001</td>
+            </tr>
+            <tr className="text-xs font-light md:text-sm">
+              <td className="p-2">Score if outcome = No</td>
+              <td className="p-2">-4.6</td>
+              <td className="p-2">-6.9</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-  <p>Going from 99% to 99.9% only gives you a tiny advantage if you are correct (+0.009), but a huge penalty if you are wrong (-2.3). So be careful, and only use extreme probabilities when you&apos;re sure they&apos;re appropriate!</p>
+      <p>
+        Going from 99% to 99.9% only gives you a tiny advantage if you are
+        correct (+0.009), but a huge penalty if you are wrong (-2.3). So be
+        careful, and only use extreme probabilities when you&apos;re sure
+        they&apos;re appropriate!
+      </p>
 
-  <h2 className="section-header" id="continuous-log-score">What is the log score for continuous questions?</h2>
-  <p>Since the domain of possible outcomes for continuous questions is (drum roll) continuous, any outcome has mathematically 0 chance of happening. Thankfully we can adapt the log score in the form:</p>
-  <MathJaxWrapper>
-    {`\\[
+      <hr />
+      <h2 className="scroll-mt-nav" id="continuous-log-score">
+        What is the log score for continuous questions?
+      </h2>
+      <p>
+        Since the domain of possible outcomes for continuous questions is (drum
+        roll) continuous, any outcome has mathematically 0 chance of happening.
+        Thankfully we can adapt the log score in the form:
+      </p>
+      <MathJaxContent
+        content={`\\[
     \\text{log score} = \\ln(\\operatorname{pdf}(outcome))
     \\]`}
-  </MathJaxWrapper>
-  <p>Where <MathJaxWrapper>{`\\(\\ln\\)`}</MathJaxWrapper> is the natural logarithm and <MathJaxWrapper>{`\\(\\operatorname{pdf}(outcome)\\)`}</MathJaxWrapper> is the value of the predicted <a href="https://en.wikipedia.org/wiki/Probability_density_function">probability density function</a> at the outcome. Note that on Metaculus, all pdfs have a <a href="https://en.wikipedia.org/wiki/Uniform_distribution">uniform distribution</a> of height 0.01 added to them. This prevents extreme log scores.</p>
-  <p>This is also a proper scoring rule, and behaves in somewhat similar ways to the log score described above. One difference is that, contrary to probabilities that are always between 0 and 1, <MathJaxWrapper>{`\\(\\operatorname{pdf}\\)`}</MathJaxWrapper> values can be greater than 1. This means that the continuous log score can be greater than 0: in theory it has no maximum value, but in practice Metaculus restricts how sharp pdfs can get (see the maximum scores tabulated below).</p> */}
+        block
+      />
+      <p>
+        Where <MathJaxContent content={`\\(\\ln\\)`} /> is the natural logarithm
+        and <MathJaxContent content={`\\(\\operatorname{pdf}(outcome)\\)`} /> is
+        the value of the predicted{" "}
+        <a href="https://en.wikipedia.org/wiki/Probability_density_function">
+          probability density function
+        </a>{" "}
+        at the outcome. Note that on Metaculus, all pdfs have a{" "}
+        <a href="https://en.wikipedia.org/wiki/Uniform_distribution">
+          uniform distribution
+        </a>{" "}
+        of height 0.01 added to them. This prevents extreme log scores.
+      </p>
+      <p>
+        This is also a proper scoring rule, and behaves in somewhat similar ways
+        to the log score described above. One difference is that, contrary to
+        probabilities that are always between 0 and 1,{" "}
+        <MathJaxContent content={`\\(\\operatorname{pdf}\\)`} /> values can be
+        greater than 1. This means that the continuous log score can be greater
+        than 0: in theory it has no maximum value, but in practice Metaculus
+        restricts how sharp pdfs can get (see the maximum scores tabulated
+        below).
+      </p>
+      <hr />
+      <h2 className="scroll-mt-nav" id="baseline-score">
+        What is the Baseline score?
+      </h2>
+      <p>
+        The Baseline score compares a prediction to a fixed &quot;chance&quot;
+        baseline. If it is positive, the prediction was better than chance. If
+        it is negative, it was worse than chance.
+      </p>
+      <p>
+        That &quot;chance&quot; baseline gives the same probability to all
+        outcomes. For binary questions, this is a prediction of 50%. For an
+        N-option multiple choice question it is a prediction of 1/N for every
+        option. For continuous questions this is a uniform (flat) distribution.
+      </p>
+      <p>
+        The Baseline score is derived from the{" "}
+        <a href="/help/scores-faq/#log-score">log score</a>, rescaled so that:
+      </p>
+      <ul className="list-disc pl-5">
+        <li>
+          Predicting the same probability on all outcomes gives a score of 0.
+        </li>
+        <li>
+          Predicting perfectly on a binary or multiple choice question gives a
+          score of +100.
+        </li>
+        <li>
+          The average scores of binary and continuous questions roughly match.
+        </li>
+      </ul>
+      <p>Here are some notable values for the Baseline score:</p>
+      <div className="overflow-x-auto">
+        <table className="mx-auto w-auto">
+          <thead>
+            <tr>
+              <th className="p-4 text-xs font-bold  md:text-sm"></th>
+              <th className="p-4 text-xs font-bold  md:text-sm">
+                Binary questions
+              </th>
+              <th className="p-4 text-xs font-bold  md:text-sm">
+                Multiple Choice questions
+                <br />
+                (8 options)
+              </th>
+              <th className="p-4 text-xs font-bold  md:text-sm">
+                Continuous questions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-4 text-xs font-light md:text-sm">
+                Best possible Baseline score on Metaculus
+              </td>
+              <td className="p-4 text-xs font-light md:text-sm">+99.9</td>
+              <td className="p-4 text-xs font-light md:text-sm">+99.9</td>
+              <td className="p-4 text-xs font-light md:text-sm">+183</td>
+            </tr>
+            <tr>
+              <td className="p-4 text-xs font-light md:text-sm">
+                Worst possible Baseline score on Metaculus
+              </td>
+              <td className="p-4 text-xs font-light md:text-sm">-897</td>
+              <td className="p-4 text-xs font-light md:text-sm">-232</td>
+              <td className="p-4 text-xs font-light md:text-sm">-230</td>
+            </tr>
+            <tr>
+              <td className="p-4 text-xs font-light md:text-sm">
+                Median Baseline empirical score
+              </td>
+              <td className="p-4 text-xs font-light md:text-sm">+17</td>
+              <td className="p-4 text-xs font-light md:text-sm">no data yet</td>
+              <td className="p-4 text-xs font-light md:text-sm">+14</td>
+            </tr>
+            <tr>
+              <td className="p-4 text-xs font-light md:text-sm">
+                Average Baseline empirical score
+              </td>
+              <td className="p-4 text-xs font-light md:text-sm">+13</td>
+              <td className="p-4 text-xs font-light md:text-sm">no data yet</td>
+              <td className="p-4 text-xs font-light md:text-sm">+13</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>
+        Theoretically, binary scores can be infinitely negative, and continuous
+        scores can be both infinitely positive and infinitely negative. In
+        practice, Metaculus restricts binary predictions to be between 0.1% and
+        99.9%, and continuous pdfs to be between 0.01 and ~35, leading to the
+        scores above. The empirical scores are based on all scores observed on
+        all resolved Metaculus questions, as of November 2023.
+      </p>
+      <p>
+        Note that the above describes the Baseline score at a single point in
+        time. Metaculus scores are time-averaged over the lifetime of the
+        question, see{" "}
+        <a href="/help/scores-faq/#time-averaging">
+          Do all my predictions on a question count toward my score?
+        </a>
+        .
+      </p>
+      <p>You can expand the section below for more details and maths.</p>
+      <BaselineMath />
+      <hr />
+      <h2 className="scroll-mt-nav" id="peer-score">
+        What is the Peer score?
+      </h2>
+      <p>
+        The Peer score compares a prediction to all the other predictions made
+        on the same question. If it is positive, the prediction was (on average)
+        better than others. If it is negative it was worse than others.
+      </p>
+      <p>
+        The Peer score is derived from the{" "}
+        <a href="/help/scores-faq/#log-score">log score</a>: it is the average
+        difference between a prediction&apos;s log score, and the log scores of
+        all other predictions on that question. Like the Baseline score, the
+        Peer score is multiplied by 100.
+      </p>
+      <p>
+        One interesting property of the Peer score is that, on any given
+        question, the sum of all participants&apos; Peer scores is always 0.
+        This is because each forecaster&apos;s score is their average difference
+        with every other: when you add all the scores, all the differences
+        cancel out and the result is 0. Here&apos;s a quick example: imagine a{" "}
+        <a href="/help/scores-faq/#continuous-log-score">continuous question</a>
+        , with three forecasters having predicted:
+      </p>
+      <div className="overflow-x-auto overflow-y-hidden">
+        <table className="mx-auto table-auto">
+          <thead>
+            <tr>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                Forecaster
+              </th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                log score
+              </th>
+              <th className="px-4 py-2  text-left text-xs font-bold md:text-sm">
+                Peer score
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">Alex</td>
+              <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+                <MathJaxContent content={`\\(-1\\)`} />
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                <MathJaxContent
+                  content={`\\[
+          \\frac{(A-B)+(A-C)}{2} = \\frac{(-1-1)+(-1-2)}{2} = -2.5
+        \\]`}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                Bailey
+              </td>
+              <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+                <MathJaxContent content={`\\(1\\)`} />
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                <MathJaxContent
+                  content={`\\[
+          \\frac{(B-A)+(B-C)}{2} = \\frac{(1-(-1))+(1-2)}{2} = 0.5
+        \\]`}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">Cory</td>
+              <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+                <MathJaxContent content={`\\(2\\)`} />
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                <MathJaxContent
+                  content={`\\[
+          \\frac{(C-A)+(C-B)}{2} = \\frac{(2-(-1))+(2-1)}{2} = 2
+        \\]`}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm"></td>
+              <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+                sum
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                <MathJaxContent
+                  content={`\\[
+          -2.5+0.5+2 = 0
+        \\]`}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p>Here are some notable values for the Peer score:</p>
+      <table className="mx-auto table-auto">
+        <thead>
+          <tr>
+            <th className="px-4 py-2  text-xs font-bold md:text-sm"></th>
+            <th className="px-4 py-2  text-xs font-bold md:text-sm">
+              Binary and
+              <br />
+              Multiple Choice
+              <br />
+              questions
+            </th>
+            <th className="px-4 py-2  text-xs font-bold md:text-sm">
+              Continuous
+              <br />
+              questions
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="px-4 py-2 text-xs font-light md:text-sm">
+              Best possible Peer score on Metaculus
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              +996
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              +408
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-2 text-xs font-light md:text-sm">
+              Worst possible Peer score on Metaculus
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              -996
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              -408
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-2 text-xs font-light md:text-sm">
+              Median Peer empirical score
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              +2
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              +3
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-2 text-xs font-light md:text-sm">
+              Average Peer empirical score
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              0*
+            </td>
+            <td className="px-4 py-2 text-center text-xs font-light md:text-sm">
+              0*
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p>*The average Peer score is 0 by definition.</p>
+      <p>
+        Theoretically, binary scores can be infinitely negative, and continuous
+        scores can be both infinitely positive and infinitely negative. In
+        practice, Metaculus restricts binary predictions to be between 0.1% and
+        99.9%, and continuous pdfs to be between 0.01 and ~35, leading to the
+        scores above.
+      </p>
+      <p>
+        The &quot;empirical scores&quot; are based on all scores observed on all
+        resolved Metaculus questions, as of November 2023.
+      </p>
+      <p>
+        Note that the above describes the Peer score at a single point in time.
+        Metaculus scores are time-averaged over the lifetime of the question,
+        see{" "}
+        <a href="/help/scores-faq/#time-averaging">
+          Do all my predictions on a question count toward my score?
+        </a>
+        .
+      </p>
+      <p>You can expand the section below for more details and maths.</p>
+      <PeerMath />
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="cp-positive-peer">
+        Why is the Peer score of the Community Prediction positive?
+      </h2>
+      <p>
+        The <a href="/help/scores-faq/#peer-score">Peer score</a> measures
+        whether a forecaster was on average better than other forecasters. It is
+        the difference between the forecaster&apos;s{" "}
+        <a href="/help/scores-faq/#log-score">log score</a> and the average of
+        all other forecasters&apos; log scores. If you have a positive Peer
+        score, it means your log score was better than the average of all other
+        forecasters&apos; log scores.
+      </p>
+      <p>
+        The <a href="/faq/#community-prediction">Community Prediction</a> is a
+        time-weighted median of all forecasters on the question. Like most
+        aggregates, it is better than most of the forecasters it feeds on: it is
+        less noisy, less biased, and updates more often.
+      </p>
+      <p>
+        Since the Community Prediction is better than most forecasters, it
+        follows that its score should be higher than the average score of all
+        forecasters. And so its Peer score is positive.
+      </p>
+      <FurtherMath />
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="time-averaging">
+        Do all my predictions on a question count toward my score?
+      </h2>
+      <p>
+        Yes. Metaculus uses time-averaged scores, so all your predictions count,
+        proportional to how long they were standing. An example goes a long way
+        (we will use the Baseline score for simplicity, but the same logic
+        applies to any score):
+      </p>
+      <p>
+        A binary question is open 5 days, then closes and resolves Yes. You
+        start predicting on the second day, make these predictions, and get
+        those scores:
+      </p>
+      <div className="w-full overflow-x-auto overflow-y-hidden">
+        <table className="mx-auto table-auto">
+          <thead>
+            <tr>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm"></th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">Day 1</th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">Day 2</th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">Day 3</th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">Day 4</th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">Day 5</th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                Average
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                Prediction
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm"></td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">40%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">70%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm"></td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">80%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">N/A</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">
+                Baseline score
+              </td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">0</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-32</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+49</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+49</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+68</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+27</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>Some things to note:</p>
+      <ul className="ml-5 list-disc">
+        <li>
+          Before you predict, your score is considered to be 0 (this is true for
+          all scores based on the log score). This means that if you believe you
+          can do better than 0, you should predict as early as possible.
+        </li>
+        <li>
+          You have a score for Day 4, despite not having predicted that day.
+          This is because your predictions stay standing until you update them,
+          so on Day 4 you were scored on your Day 3 prediction. On Day 5 you
+          updated to 80%, so you were scored on that.
+        </li>
+        <li>
+          This example uses days, but your Metaculus scores are based on exact
+          timestamped predictions, so a prediction left standing for 1 hour will
+          count for 1/24th of a prediction left standing for a day, etc.
+        </li>
+      </ul>
+
+      <p>
+        Lastly, note that scores are always averaged for every instant between
+        the Open date and (scheduled) Close date of the question. If a question
+        resolves early (i.e. before the scheduled close date), then scores are
+        set to 0 between the resolution date and scheduled close date, and still
+        count in the average. This ensures alignment of incentives, as explained
+        in the section{" "}
+        <a href="/help/scores-faq/#score-truncation">
+          Why did I get a small score when I was right?
+        </a>{" "}
+        below.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="extremizing">
+        Can I get better scores by predicting extreme values?
+      </h2>
+      <p>
+        Metaculus uses proper scores (see{" "}
+        <a href="/help/scores-faq/#proper-scoring">
+          What is a proper scoring rule?
+        </a>
+        ), so you cannot get a better score (on average) by making predictions
+        more extreme than your beliefs. On any question, if you want to maximize
+        your expected score, you should predict exactly what you believe.
+      </p>
+      <p>
+        Let&apos;s walk through a simple example using the Baseline score.
+        Suppose you are considering predicting a binary question. After some
+        thought, you conclude that the question has 80% chance to resolve Yes.
+      </p>
+      <p>
+        If you predict 80%, you will get a score of +68 if the question resolves
+        Yes, and -132 if it resolves No. Since you think there is an 80% chance
+        it resolves Yes, you expect on average a score of
+      </p>
+      <p>
+        <MathJaxContent
+          content={`\\(80\\% \\times 68 + 20\\% \\times -132 = +28\\)`}
+        />
+      </p>
+      <p>
+        If you predict 90%, you will get a score of +85 if the question resolves
+        Yes, and -232 if it resolves No. Since you think there is an 80% chance
+        it resolves Yes, you expect on average a score of
+      </p>
+      <p>
+        <MathJaxContent
+          content={`\\(80\\% \\times 85 + 20\\% \\times -232 = +21\\)`}
+        />
+      </p>
+      <p>
+        So by predicting a more extreme value, you actually lower the score you
+        expect to get (on average!).
+      </p>
+      <p>Here are some more values from the same example, tabulated:</p>
+      <div className="w-full overflow-x-auto">
+        <table className="mx-auto table-auto">
+          <thead>
+            <tr>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                Prediction
+              </th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                Score if Yes
+              </th>
+              <th className="px-4 py-2  text-xs font-bold md:text-sm">
+                Score if No
+              </th>
+              <th className="px-4 py-2 text-xs font-bold md:text-sm">
+                Expected score
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">70%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+48</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-74</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+24</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">80%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+68</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-132</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+28</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">90%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+85</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-232</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+21</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">99%</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">+99</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-564</td>
+              <td className="px-4 py-2 text-xs font-light md:text-sm">-34</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>
+        The 99% prediction gets the highest score when the question resolves
+        Yes, but it also gets the lowest score when it resolves No. This is why,
+        on average, the strategy that maximizes your score is to predict what
+        you believe. This is one of the reasons why looking at scores on
+        individual questions is not very informative; only aggregate over many
+        questions are interesting!
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="score-truncation">
+        Why did I get a small score when I was right?
+      </h2>
+      <p>
+        To make sure incentives are aligned, Metaculus needs to ensure that our
+        scores are proper. We also time-average scores.
+      </p>
+      <p>
+        This has a counter-intuitive consequence: when a question resolves
+        before its intended close date, the times between resolution and close
+        date need to count in the time-average, with scores of 0. We call this
+        &quot;score truncation&quot;.
+      </p>
+      <p>
+        An example is best: imagine the question &quot;Will a new human land on
+        the Moon before 2030?&quot;. It can either resolve Yes before 2030
+        (because someone landed on the Moon), or it can resolve No in 2030. If
+        we did not truncate scores, you could game this question by predicting
+        close to 100% in the beginning (since it can only resolve positive
+        early), and lower later (since it can only resolve negative at the end).
+      </p>
+      <p>
+        Another way to think about this is that if a question lasts a year, then
+        each day (or in fact each second) is scored as a separate question. To
+        preserve properness, it is imperative that each day is weighted the same
+        in the final average (or at least that the weights be decided in
+        advance). From this perspective, not doing truncation is equivalent to
+        retroactively giving much more weight to days before the question
+        resolves, which is not proper.
+      </p>
+      <p>
+        You can read a worked example with maths by expanding the section below.
+      </p>
+
+      <TruncationExample />
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="legacy-scores">
+        What are the legacy scores?
+      </h2>
+
+      <h3 className="scroll-mt-nav" id="relative-score">
+        What is the Relative score?
+      </h3>
+      <p>
+        The Relative score compares a prediction to the median of all other
+        predictions on the same question. If it is positive, the prediction was
+        (on average) better than the median. If it is negative it was worse than
+        the median.
+      </p>
+      <p>It is based on the log score, with the formula:</p>
+      <MathJaxContent
+        block
+        content={`\\[
+\\text{Relative score} = \\log_2(p) - \\log_2(m)
+\\]`}
+      />
+      <p>
+        Where <MathJaxContent content={`p`} /> is the prediction being scored
+        and <MathJaxContent content={`m`} /> is the median of all other
+        predictions on that question.
+      </p>
+      <p>
+        As of late 2023, the Relative score is in the process of being replaced
+        by the <a href="/help/scores-faq/#peer-score">Peer score</a>, but it is
+        still used for many open tournaments.
+      </p>
+
+      <h3 className="scroll-mt-nav" id="coverage">
+        What is the coverage?
+      </h3>
+      <p>
+        The Coverage measures for what proportion of a question&apos;s lifetime
+        you had a prediction standing.
+      </p>
+      <p>
+        If you make your first prediction right when the question opens, your
+        coverage will be 100%. If you make your first prediction one second
+        before the question closes, your coverage will be very close to 0%.
+      </p>
+      <p>
+        The Coverage is used in tournaments, to incentivize early predictions.
+      </p>
+
+      <h3 className="scroll-mt-nav" id="old-points">
+        What are Metaculus points?
+      </h3>
+      <p>
+        Metaculus points were used as the main score on Metaculus until late
+        2023.
+      </p>
+      <p>
+        You can still find the rankings based on points{" "}
+        <a href="/legacy-points-rankings/">here</a>.
+      </p>
+      <p>
+        They are a proper score, based on the log score. They are a mixture of a
+        Baseline-like score and a Peer-like score, so they reward both beating
+        an impartial baseline and beating other forecasters.
+      </p>
+      <p>For full mathematical details, expand the section below.</p>
+
+      <PointsMath />
+      <hr className="mt-8" />
+      <h1 className="scroll-mt-nav" id="tournaments-section">
+        Tournaments
+      </h1>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="tournament-scores">
+        How are my tournament Score, Take, Prize, and Rank calculated?
+      </h2>
+      <p>
+        This scoring method was introduced in March 2024. It is based on the{" "}
+        <a href="/help/scores-faq/#peer-score">Peer scores</a> described above.
+      </p>
+      <p>
+        Your rank in the tournament is determined by the sum of your Peer scores
+        over all questions in the tournament (you get 0 for any question you
+        didn’t forecast).
+      </p>
+      <p>
+        The share of the prize pool you get is proportional to that same sum of
+        Peer scores, squared. If the sum of your Peer scores is negative, you
+        don’t get any prize.
+      </p>
+      <div className="w-full overflow-x-scroll">
+        <MathJaxContent
+          block
+          content={`\\[
+\\text{your total score} = \\sum_\\text{questions} \\text{your peer score}
+\\]`}
+        />
+        <MathJaxContent
+          block
+          content={`\\[
+\\text{your take} = \\max ( \\text{your total score}, 0)^2
+\\]`}
+        />
+        <MathJaxContent
+          block
+          content={`\\[
+\\text{your % prize} = \\frac{\\text{your take}}{\\sum_\\text{all users} \\text{user take}}
+\\]`}
+        />
+      </div>
+      <p>
+        For a tournament with a sufficiently large number of independent
+        questions, this scoring method is effectively{" "}
+        <a href="https://www.metaculus.com/help/scores-faq/#proper-scoring">
+          proper
+        </a>{" "}
+        for the top quartile of forecasters. While there are small imperfections
+        for forecasters near a 0 Peer score for which they might win a tiny bit
+        of money by extremizing their forecasts, we believe this is an edge case
+        that you can safely ignore. In short, you should predict your true
+        belief on any question.
+      </p>
+      <p>
+        Taking the square of your Peer scores incentivizes forecasting every
+        question and forecasting early. Don’t forget to <b>Follow</b> a
+        tournament to be notified of new questions.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="legacy-tournament-scores">
+        How are my (legacy) tournament Score, Coverage, Take, Prize, and Rank
+        calculated?
+      </h2>
+      <p>
+        <b>
+          This scoring method was superseded in March 2024 by the New Tournament
+          Score described above. It is still in use for tournaments that
+          concluded before March 2024 for some tournaments that were in flight
+          then.
+        </b>
+      </p>
+      <p>
+        Your tournament Score is the sum of your Relative scores over all
+        questions in the tournament. If, on average, you were better than the
+        Community Prediction, then it will be positive; otherwise, it will be
+        negative.
+      </p>
+      <p>
+        Your tournament Coverage is the average of your coverage on each
+        question. If you predicted all questions when they opened, your Coverage
+        will be 100%. If you predicted all questions halfway through, or if you
+        predicted half the questions when they opened, your Coverage will be
+        50%.
+      </p>
+      <p>
+        Your tournament Take is the exponential of your Score, times your
+        Coverage:
+      </p>
+      <MathJaxContent
+        block
+        content={`\\[
+\\text{Take} = e^\\text{Score} \\times \\text{Coverage}
+\\]`}
+      />
+      <p>
+        Your Prize is how much money you earned on that tournament. It is
+        proportional to your take and is equal to your Take divided by the sum
+        of all competing forecasters&apos; Takes.
+      </p>
+      <p>
+        Your Rank is simply how high you were in the leaderboard, sorted by
+        Prize.
+      </p>
+      <p>
+        The higher your Score and Coverage, the higher your Take will be. The
+        higher your Take, the more Prize you&apos;ll receive, and the higher
+        your Rank will be.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="hidden-period">
+        What are the Hidden Period and Hidden Coverage Weights?
+      </h2>
+      <p>
+        The Community Prediction is on average much better than most
+        forecasters. This means that you could get decent scores by just copying
+        the Community Prediction at all times. To prevent this, many tournament
+        questions have a significant period of time at the beginning when the
+        Community Prediction is hidden. We call this time the Hidden Period.
+      </p>
+      <p>
+        To incentivize forecasting during the hidden period, questions sometimes
+        are also set up so that the coverage you accrue during the Hidden Period
+        counts more. For example, the Hidden Period could count for 50% of the
+        question coverage, or even 100%. We call this percentage the Hidden
+        Period Coverage Weight.
+      </p>
+      <p>
+        If the Hidden Period Coverage Weight is 50%, then if you don&apos;t
+        forecast during the hidden period your coverage will be at most 50%,
+        regardless of how long the hidden period lasted.
+      </p>
     </PageWrapper>
   );
 }
diff --git a/front_end/src/app/(main)/press/components/DisclosureSection.tsx b/front_end/src/app/(main)/press/components/DisclosureSection.tsx
index ec3f9bbf98..2b56661b6a 100644
--- a/front_end/src/app/(main)/press/components/DisclosureSection.tsx
+++ b/front_end/src/app/(main)/press/components/DisclosureSection.tsx
@@ -2,295 +2,274 @@
 
 import React from "react";
 
-import DisclosureItem from "./DisclosureItem"; // Assuming Disclosure is in the same directory
+import StyledDisclosure from "../../components/styled_disclosure";
 
 const DisclosureSection = () => {
   return (
     <div className="flex flex-col gap-2">
-      <DisclosureItem
-        question="What is forecasting?"
-        description={
-          <>
-            <p className="mb-4 mt-0">
-              Forecasting is the practice of putting explicit probabilities,
-              dates, and numbers on future events—calculating odds via both
-              models and human judgment.
-            </p>
-            <p className="mb-4 mt-0">
-              Although such estimates are subjective, a substantial body of
-              scientific research demonstrates two points: that people who
-              forecast can improve, with some becoming expertly calibrated; and
-              that aggregating across many diverse opinions produces more
-              accurate forecasts than even the best individuals forecasting
-              alone. The resulting predictions give us a clearer sense of what
-              tomorrow will look like, allowing us to make better decisions
-              today, just as a good meteorologist can help us decide whether to
-              carry an umbrella.
+      <StyledDisclosure question="What is forecasting?">
+        <p>
+          Forecasting is the practice of putting explicit probabilities, dates,
+          and numbers on future events—calculating odds via both models and
+          human judgment.
+        </p>
+        <p>
+          Although such estimates are subjective, a substantial body of
+          scientific research demonstrates two points: that people who forecast
+          can improve, with some becoming expertly calibrated; and that
+          aggregating across many diverse opinions produces more accurate
+          forecasts than even the best individuals forecasting alone. The
+          resulting predictions give us a clearer sense of what tomorrow will
+          look like, allowing us to make better decisions today, just as a good
+          meteorologist can help us decide whether to carry an umbrella.
+        </p>
+        <p>
+          Of course, subjects like geopolitics are not like meteorology. Yet,
+          the scientific validity of human forecasting holds true even when it
+          comes to subjects with a high degree of uncertainty, like the war
+          between Russia and Ukraine. In fact,{" "}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://pubmed.ncbi.nlm.nih.gov/24659192/"
+          >
+            research
+          </a>{" "}
+          by University of Pennsylvania psychologists Philip Tetlock and Barbara
+          Mellers found that the aggregated geopolitical predictions of top
+          forecasters were{" "}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://www.npr.org/sections/parallels/2014/04/02/297839429/-so-you-think-youre-smarter-than-a-cia-agent"
+          >
+            more accurate
+          </a>{" "}
+          than those of CIA analysts with access to classified information.
+        </p>
+        <p>
+          Because forecasts are expressed probabilistically, we can rarely say
+          that a particular forecast was “right” or “wrong,”. Rather, we score
+          forecasts mathematically by comparing forecasts to outcomes over a
+          large body of questions. This enables us to determine how
+          “well-calibrated” any given forecaster is—i.e., do things that they
+          believe are 70% likely actually happen 70% of the time-as well as
+          track the record of the whole Metaculus community over thousands of
+          questions.
+        </p>
+        <p>
+          Metaculus forecasts are well-calibrated. They provide greater
+          visibility into the future.
+        </p>
+      </StyledDisclosure>
+      <StyledDisclosure question="What is Metaculus?">
+        <p>
+          Metaculus is an online forecasting platform and aggregation engine
+          working to improve human reasoning and coordination on topics of
+          global importance. As a Public Benefit Corporation, Metaculus provides
+          decision support based on these forecasts to a variety of institutions
+          (<a href="/about">learn more</a>).
+        </p>
+        <p>
+          Metaculus features questions on a wide range of topics, with a
+          particular focus on{" "}
+          <a href="/questions/?topic=ai">artificial intelligence</a>,{" "}
+          <a href="/questions/?categories=health-pandemics">biosecurity</a>,{" "}
+          <a href="/questions/?categories=environment-climate">
+            climate change
+          </a>
+          , and <a href="/questions/?categories=nuclear">nuclear risk</a>.
+        </p>
+      </StyledDisclosure>
+      <StyledDisclosure question="So, is Metaculus a “prediction market”?">
+        <p>
+          No, Metaculus is a forecasting platform and aggregation engine. Like
+          prediction markets, we collect people&apos;s forecasts and reward them
+          for accuracy. But in prediction markets, participants place bets
+          against each other for financial rewards, can only win insofar as
+          someone else loses. Metaculus forecasters are incentivized only to
+          make the most accurate forecasts, and they often collaborate to do so.
+        </p>
+        <p>
+          Prediction markets produce forecasts via where the betting market
+          settles. Metaculus explicitly aggregates everyone&apos;s forecasts
+          together using algorithms we refine over time. We produce a
+          time-weighted median, the &quot;Community Prediction,&quot; as well as
+          the more sophisticated &quot;Metaculus Prediction&quot;.
+        </p>
+        <p>
+          Prediction market bettors can produce accurate forecasts because they
+          have “skin in the game.” But{" "}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://pubsonline.informs.org/doi/abs/10.1287/mnsc.2015.2374"
+          >
+            research
+          </a>{" "}
+          shows that forecasting platforms like Metaculus often outperform
+          prediction markets, while avoiding many of the downsides of market
+          incentives that lead to regulators{" "}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://www.washingtonpost.com/lifestyle/2023/01/24/predictit-gambling-on-politics/"
+          >
+            restricting their activity.
+          </a>{" "}
+          And critically, the research, methods, and reasoning that Metaculus
+          forecasters produce are themselves valuable, as seen both in question
+          comments as well as in the{" "}
+          <a href="/project/journal">Metaculus Journal</a>.
+        </p>
+      </StyledDisclosure>
+      <StyledDisclosure question="How can forecasts help with your reporting?">
+        <div className="flex flex-col items-center gap-3 lg:flex-row lg:items-start lg:gap-8">
+          <div>
+            <p>
+              <b>1. Complement expert analysis.</b>
             </p>
-            <p className="mb-4 mt-0">
-              Of course, subjects like geopolitics are not like meteorology.
-              Yet, the scientific validity of human forecasting holds true even
-              when it comes to subjects with a high degree of uncertainty, like
-              the war between Russia and Ukraine. In fact,{" "}
+            <p>
+              News stories often rely on expert analysis to put developments in
+              context and to anticipate the future course of events.
+              Unfortunately, experts frequently offer imprecisely worded
+              forecasts—e.g., “If the United States provides it with F-16s,
+              there is a real possibility that Ukraine will regain control of
+              its airspace”—and{" "}
               <a
                 target="_blank"
                 rel="noreferrer"
-                href="https://pubmed.ncbi.nlm.nih.gov/24659192/"
+                href="https://hbr.org/2018/07/if-you-say-something-is-likely-how-likely-do-people-think-it-is"
               >
                 research
               </a>{" "}
-              by University of Pennsylvania psychologists Philip Tetlock and
-              Barbara Mellers found that the aggregated geopolitical predictions
-              of top forecasters were{" "}
+              shows that people interpret “real possibility” to mean anything
+              between 20% and 80%, confusing both journalists and their
+              audiences. Probabilistic forecasts eliminate this problem.
+            </p>
+            <p>
+              What’s more, to the extent that experts do put precise
+              probabilities on future events, their track record is poor. One of
+              Tetlock’s{" "}
               <a
                 target="_blank"
                 rel="noreferrer"
-                href="https://www.npr.org/sections/parallels/2014/04/02/297839429/-so-you-think-youre-smarter-than-a-cia-agent"
+                href="https://press.princeton.edu/books/hardcover/9780691178288/expert-political-judgment"
               >
-                more accurate
+                early findings
               </a>{" "}
-              than those of CIA analysts with access to classified information.
-            </p>
-            <p className="mb-4 mt-0">
-              Because forecasts are expressed probabilistically, we can rarely
-              say that a particular forecast was “right” or “wrong,”. Rather, we
-              score forecasts mathematically by comparing forecasts to outcomes
-              over a large body of questions. This enables us to determine how
-              “well-calibrated” any given forecaster is—i.e., do things that
-              they believe are 70% likely actually happen 70% of the time-as
-              well as track the record of the whole Metaculus community over
-              thousands of questions.
-            </p>
-            <p className="mb-4 mt-0">
-              Metaculus forecasts are well-calibrated. They provide greater
-              visibility into the future.
-            </p>
-          </>
-        }
-      />
-      <DisclosureItem
-        question="What is Metaculus?"
-        description={
-          <>
-            <p className="mb-4 mt-0">
-              Metaculus is an online forecasting platform and aggregation engine
-              working to improve human reasoning and coordination on topics of
-              global importance. As a Public Benefit Corporation, Metaculus
-              provides decision support based on these forecasts to a variety of
-              institutions (<a href="/about">learn more</a>).
-            </p>
-            <p className="mb-4 mt-0">
-              Metaculus features questions on a wide range of topics, with a
-              particular focus on{" "}
-              <a href="/questions/?topic=ai">artificial intelligence</a>,{" "}
-              <a href="/questions/?categories=health-pandemics">biosecurity</a>,{" "}
-              <a href="/questions/?categories=environment-climate">
-                climate change
-              </a>
-              , and <a href="/questions/?categories=nuclear">nuclear risk</a>.
-            </p>
-          </>
-        }
-      />
-      <DisclosureItem
-        question="So, is Metaculus a “prediction market”?"
-        description={
-          <>
-            <p className="mb-4 mt-0">
-              No, Metaculus is a forecasting platform and aggregation engine.
-              Like prediction markets, we collect people&apos;s forecasts and
-              reward them for accuracy. But in prediction markets, participants
-              place bets against each other for financial rewards, can only win
-              insofar as someone else loses. Metaculus forecasters are
-              incentivized only to make the most accurate forecasts, and they
-              often collaborate to do so.
+              was that political experts are highly overconfident in their
+              predictions. In fact, although there is significant variance,
+              their aggregate forecasts perform little better than chance. By
+              contrast, Metaculus predictions perform significantly better than
+              chance.
             </p>
             <p>
-              Prediction markets produce forecasts via where the betting market
-              settles. Metaculus explicitly aggregates everyone&apos;s forecasts
-              together using algorithms we refine over time. We produce a
-              time-weighted median, the &quot;Community Prediction,&quot; as
-              well as the more sophisticated &quot;Metaculus Prediction&quot;.
+              <b>2. Serve as a check on the conventional wisdom.</b>
             </p>
-            <p className="mb-4 mt-0">
-              Prediction market bettors can produce accurate forecasts because
-              they have “skin in the game.” But{" "}
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href="https://pubsonline.informs.org/doi/abs/10.1287/mnsc.2015.2374"
-              >
-                research
-              </a>{" "}
-              shows that forecasting platforms like Metaculus often outperform
-              prediction markets, while avoiding many of the downsides of market
-              incentives that lead to regulators{" "}
+            <p>
+              Forecasts can suggest that the conventional wisdom may be wrong
+              and that strongly held beliefs are worth questioning strongly. For
+              example, the conventional wisdom within the American military is
+              that China will invade Taiwan in the next few years. One four-star
+              general went so far as to{" "}
               <a
                 target="_blank"
                 rel="noreferrer"
-                href="https://www.washingtonpost.com/lifestyle/2023/01/24/predictit-gambling-on-politics/"
+                href="https://www.airandspaceforces.com/read-full-memo-from-amc-gen-mike-minihan/"
               >
-                restricting their activity.
+                suggest
               </a>{" "}
-              And critically, the research, methods, and reasoning that
-              Metaculus forecasters produce are themselves valuable, as seen
-              both in question comments as well as in the{" "}
-              <a href="/project/journal">Metaculus Journal</a>.
-            </p>
-          </>
-        }
-      />
-      <DisclosureItem
-        question="How can forecasts help with your reporting?"
-        description={
-          <div className="flex flex-col items-center gap-3 lg:flex-row lg:items-start lg:gap-8">
-            <div>
-              <p className="mb-4 mt-0">
-                <b>1. Complement expert analysis.</b>
-              </p>
-              <p className="mb-4 mt-0">
-                News stories often rely on expert analysis to put developments
-                in context and to anticipate the future course of events.
-                Unfortunately, experts frequently offer imprecisely worded
-                forecasts—e.g., “If the United States provides it with F-16s,
-                there is a real possibility that Ukraine will regain control of
-                its airspace”—and{" "}
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://hbr.org/2018/07/if-you-say-something-is-likely-how-likely-do-people-think-it-is"
-                >
-                  research
-                </a>{" "}
-                shows that people interpret “real possibility” to mean anything
-                between 20% and 80%, confusing both journalists and their
-                audiences. Probabilistic forecasts eliminate this problem.
-              </p>
-              <p className="mb-4 mt-0">
-                What’s more, to the extent that experts do put precise
-                probabilities on future events, their track record is poor. One
-                of Tetlock’s{" "}
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://press.princeton.edu/books/hardcover/9780691178288/expert-political-judgment"
-                >
-                  early findings
-                </a>{" "}
-                was that political experts are highly overconfident in their
-                predictions. In fact, although there is significant variance,
-                their aggregate forecasts perform little better than chance. By
-                contrast, Metaculus predictions perform significantly better
-                than chance.
-              </p>
-              <p className="mb-4 mt-0">
-                <b>2. Serve as a check on the conventional wisdom.</b>
-              </p>
-              <p className="mb-4 mt-0">
-                Forecasts can suggest that the conventional wisdom may be wrong
-                and that strongly held beliefs are worth questioning strongly.
-                For example, the conventional wisdom within the American
-                military is that China will invade Taiwan in the next few years.
-                One four-star general went so far as to{" "}
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://www.airandspaceforces.com/read-full-memo-from-amc-gen-mike-minihan/"
-                >
-                  suggest
-                </a>{" "}
-                there was a 100% chance of the PRC attempting to seize the
-                island in 2025, leading to war with the United States. By
-                contrast, the Metaculus forecast for the same time period is{" "}
-                {/* <CommunityPredictionInText
+              there was a 100% chance of the PRC attempting to seize the island
+              in 2025, leading to war with the United States. By contrast, the
+              Metaculus forecast for the same time period is{" "}
+              {/* <CommunityPredictionInText
                   question={createContentModel(
                     window.metacData.press_page.referenced_questions[0],
                   )}
                 /> */}
-                <a
-                  href="/questions/7792/100-deaths-in-chinataiwan-conflict-by-2026/"
-                  className="text-blue-700 hover:text-blue-800 dark:text-blue-300 hover:dark:text-blue-200"
-                >
-                  9%
-                </a>
-                , not least because war between great powers is rare and because
-                war between nuclear-armed great powers is unprecedented.
-                Forecasts can provide an outside perspective on highly charged
-                issues and serve as a check on inside thinking, adding nuance to
-                stories.
-              </p>
-              <p className="mb-4 mt-0">
-                <b>3. Make sense of the big questions.</b>
-              </p>
-              <p className="mb-4 mt-0">
-                Metaculus forecasts can help both journalists and their readers
-                make sense of developments where there is tremendous uncertainty
-                by breaking large, difficult-to-answer questions into smaller,
-                more tractable ones.
-              </p>
-              <p className="mb-4 mt-0">
-                The future of artificial intelligence falls into this category,
-                where the questions people are most interested in (e.g., “Will
-                AI lead to a more utopian or a more dystopian future?”) are
-                impossible to answer at this point. We can, however, provide
-                forecasts on{" "}
-                <a href="/questions/?topic=ai">more targeted questions</a> on AI
-                safety, the regulation of AI, technical progress on AI, and the
-                business of AI—all of which can help us better understand which
-                direction we are headed in and how fast. Forecasting questions
-                serve as clues as to what developments we should be paying
-                particular attention to. And a{" "}
-                <a href="/notebooks/16708/exploring-metaculuss-ai-track-record/">
-                  thorough analysis
-                </a>{" "}
-                of our track record on AI-related questions showed that
-                Metaculus predictions offer clear and useful insights into the
-                future of the field and its impacts.
-              </p>
-              <p className="mb-4 mt-0">
-                Metaculus forecasts can also identify where there have been
-                significant changes in our anticipations of the future. For
-                example, the drastic reduction in the forecast arrival date of
-                transformative AI—from the early 2040s to the current
-                distribution, centered around{" "}
-                {/* <CommunityPredictionInText
+              <a
+                href="/questions/7792/100-deaths-in-chinataiwan-conflict-by-2026/"
+                className="text-blue-700 hover:text-blue-800 dark:text-blue-300 hover:dark:text-blue-200"
+              >
+                9%
+              </a>
+              , not least because war between great powers is rare and because
+              war between nuclear-armed great powers is unprecedented. Forecasts
+              can provide an outside perspective on highly charged issues and
+              serve as a check on inside thinking, adding nuance to stories.
+            </p>
+            <p>
+              <b>3. Make sense of the big questions.</b>
+            </p>
+            <p>
+              Metaculus forecasts can help both journalists and their readers
+              make sense of developments where there is tremendous uncertainty
+              by breaking large, difficult-to-answer questions into smaller,
+              more tractable ones.
+            </p>
+            <p>
+              The future of artificial intelligence falls into this category,
+              where the questions people are most interested in (e.g., “Will AI
+              lead to a more utopian or a more dystopian future?”) are
+              impossible to answer at this point. We can, however, provide
+              forecasts on{" "}
+              <a href="/questions/?topic=ai">more targeted questions</a> on AI
+              safety, the regulation of AI, technical progress on AI, and the
+              business of AI—all of which can help us better understand which
+              direction we are headed in and how fast. Forecasting questions
+              serve as clues as to what developments we should be paying
+              particular attention to. And a{" "}
+              <a href="/notebooks/16708/exploring-metaculuss-ai-track-record/">
+                thorough analysis
+              </a>{" "}
+              of our track record on AI-related questions showed that Metaculus
+              predictions offer clear and useful insights into the future of the
+              field and its impacts.
+            </p>
+            <p>
+              Metaculus forecasts can also identify where there have been
+              significant changes in our anticipations of the future. For
+              example, the drastic reduction in the forecast arrival date of
+              transformative AI—from the early 2040s to the current
+              distribution, centered around{" "}
+              {/* <CommunityPredictionInText
                   question={createContentModel(
                     window.metacData.press_page.referenced_questions[1],
                   )}
                 /> */}
-                <a
-                  href="/questions/5121/date-of-artificial-general-intelligence/"
-                  className="text-blue-700 hover:text-blue-800 dark:text-blue-300 hover:dark:text-blue-200"
-                >
-                  Apr 29, 2033
-                </a>
-                —was used by{" "}
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://www.economist.com/finance-and-economics/2023/05/23/what-would-humans-do-in-a-world-of-super-ai"
-                >
-                  The Economist
-                </a>{" "}
-                as a tangible example of how society’s expectations of AI are
-                changing rapidly.
-              </p>
-            </div>
-            <a
-              className="block w-full max-w-[21rem] lg:min-w-[21rem]"
-              href="https://www.economist.com/finance-and-economics/2023/05/23/what-would-humans-do-in-a-world-of-super-ai"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img
-                className="w-full"
-                src="https://metaculus-media.s3.us-west-2.amazonaws.com/TheEconomistMetaculusAI.webp"
-                alt="The Economist graph based on data by Metaculus on the question of when will the first general-AI system be devised, tested and announced"
-              />
-            </a>
+              <a
+                href="/questions/5121/date-of-artificial-general-intelligence/"
+                className="text-blue-700 hover:text-blue-800 dark:text-blue-300 hover:dark:text-blue-200"
+              >
+                Apr 29, 2033
+              </a>
+              —was used by{" "}
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://www.economist.com/finance-and-economics/2023/05/23/what-would-humans-do-in-a-world-of-super-ai"
+              >
+                The Economist
+              </a>{" "}
+              as a tangible example of how society’s expectations of AI are
+              changing rapidly.
+            </p>
           </div>
-        }
-      />
+          <a
+            className="block w-full max-w-[21rem] lg:min-w-[21rem]"
+            href="https://www.economist.com/finance-and-economics/2023/05/23/what-would-humans-do-in-a-world-of-super-ai"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-full"
+              src="https://metaculus-media.s3.us-west-2.amazonaws.com/TheEconomistMetaculusAI.webp"
+              alt="The Economist graph based on data by Metaculus on the question of when will the first general-AI system be devised, tested and announced"
+            />
+          </a>
+        </div>
+      </StyledDisclosure>
     </div>
   );
 };
diff --git a/front_end/src/app/(main)/press/components/ReferenceSection.tsx b/front_end/src/app/(main)/press/components/ReferenceSection.tsx
index b303d763ab..2fdae3148b 100644
--- a/front_end/src/app/(main)/press/components/ReferenceSection.tsx
+++ b/front_end/src/app/(main)/press/components/ReferenceSection.tsx
@@ -2,101 +2,79 @@
 
 import React from "react";
 
-import DisclosureItem from "./DisclosureItem"; // Assuming Disclosure is in the same directory
+import StyledDisclosure from "../../components/styled_disclosure";
 
 const DisclosureSection = () => {
   return (
     <div className="flex flex-col gap-2">
-      <DisclosureItem
-        question="How to embed a Metaculus graph"
-        description={
-          <>
-            <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark mb-4 mt-0 text-xl font-bold">
-              On Substack, Twitter, or most other social media:
-            </h4>
-            <p className="mb-4 mt-0">
-              Simply paste the link to the Metaculus question URL, like{" "}
-              <a href="/questions/17096/us-tracks-training-runs-by-2026/">
-                www.metaculus.com/questions/17096/us-tracks-training-runs-by-2026
-              </a>
-              , and the preview image with the graph will show up automatically.
-            </p>
-            <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark mb-4 mt-0 text-xl font-bold">
-              On Other Sites:
-            </h4>
-            <p className="mb-4 mt-0">
-              On the question page, click &ldquo;embed&rdquo; at the top. Choose
-              your theme, width, and height, then copy the iframe onto your
-              site.
-            </p>
-            <p className="mb-4 mt-0">
-              If you&apos;d prefer to have a static image rather than an embed
-              that users can interact with, navigate to the URL of the embed,
-              e.g.{" "}
-              <a href="/questions/embed/17096/">
-                www.metaculus.com/questions/embed/17096/
-              </a>
-              . Then save the image, generally via right click + &ldquo;save
-              image as&rdquo;, and upload it to your preferred site.
-            </p>
-            <iframe
-              src="/questions/embed/13531/?theme=light"
-              style={{ maxWidth: 550, height: 430, width: "100%" }}
-            />
-          </>
-        }
-      />
-      <DisclosureItem
-        question="How to download raw forecasts"
-        description={
-          <>
-            <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark mb-4 mt-0 text-xl font-bold">
-              Via the API:
-            </h4>
-            <p className="mb-4 mt-0">
-              See the <a href="/api">full API documentation</a>. You can also
-              see the raw question data in your browser, like{" "}
-              <a href="/api2/questions/17096/">
-                www.metaculus.com/api2/questions/17096/
-              </a>
-              .
-            </p>
-            <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark mb-4 mt-0 text-xl font-bold">
-              Download Question Data:
-            </h4>
-            <p className="mb-4 mt-0">
-              Select the &lsquo;...&rsquo; menu on the question page, and click
-              &ldquo;Download CSV.&rdquo; (Only available on questions with a
-              critical mass of predictions.) If you have more expansive data
-              needs, please reach out to{" "}
-              <a href="mailto:christian@metaculus.com">
-                christian@metaculus.com
-              </a>{" "}
-              and we can construct a custom dataset for you.
-            </p>
-          </>
-        }
-      />
-      <DisclosureItem
-        question="How to find the right Metaculus question"
-        description={
-          <>
-            <p className="mb-4 mt-0">
-              There are thousands of Metaculus questions. You can search on{" "}
-              <a href="/questions">the main feed</a> by topic or keyword. Our AI
-              questions can be found <a href="/questions/?topic=ai">here</a>.
-            </p>
-            <p className="mb-4 mt-0">
-              If you can&apos;t find what you&apos;re looking for, or want to
-              suggest a question to forecast, reach out to{" "}
-              <a href="mailto:christian@metaculus.com">
-                christian@metaculus.com
-              </a>{" "}
-              .
-            </p>
-          </>
-        }
-      />
+      <StyledDisclosure question="How to embed a Metaculus graph">
+        <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark text-xl font-bold">
+          On Substack, Twitter, or most other social media:
+        </h4>
+        <p>
+          Simply paste the link to the Metaculus question URL, like{" "}
+          <a href="/questions/17096/us-tracks-training-runs-by-2026/">
+            www.metaculus.com/questions/17096/us-tracks-training-runs-by-2026
+          </a>
+          , and the preview image with the graph will show up automatically.
+        </p>
+        <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark text-xl font-bold">
+          On Other Sites:
+        </h4>
+        <p>
+          On the question page, click &ldquo;embed&rdquo; at the top. Choose
+          your theme, width, and height, then copy the iframe onto your site.
+        </p>
+        <p>
+          If you&apos;d prefer to have a static image rather than an embed that
+          users can interact with, navigate to the URL of the embed, e.g.{" "}
+          <a href="/questions/embed/17096/">
+            www.metaculus.com/questions/embed/17096/
+          </a>
+          . Then save the image, generally via right click + &ldquo;save image
+          as&rdquo;, and upload it to your preferred site.
+        </p>
+        <iframe
+          src="/questions/embed/13531/?theme=light"
+          style={{ maxWidth: 550, height: 430, width: "100%" }}
+        />
+      </StyledDisclosure>
+      <StyledDisclosure question="How to download raw forecasts">
+        <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark text-xl font-bold">
+          Via the API:
+        </h4>
+        <p>
+          See the <a href="/api">full API documentation</a>. You can also see
+          the raw question data in your browser, like{" "}
+          <a href="/api2/questions/17096/">
+            www.metaculus.com/api2/questions/17096/
+          </a>
+          .
+        </p>
+        <h4 className="text-metac-blue-800 dark:text-metac-blue-800-dark text-xl font-bold">
+          Download Question Data:
+        </h4>
+        <p>
+          Select the &lsquo;...&rsquo; menu on the question page, and click
+          &ldquo;Download CSV.&rdquo; (Only available on questions with a
+          critical mass of predictions.) If you have more expansive data needs,
+          please reach out to{" "}
+          <a href="mailto:christian@metaculus.com">christian@metaculus.com</a>{" "}
+          and we can construct a custom dataset for you.
+        </p>
+      </StyledDisclosure>
+      <StyledDisclosure question="How to find the right Metaculus question">
+        <p>
+          There are thousands of Metaculus questions. You can search on{" "}
+          <a href="/questions">the main feed</a> by topic or keyword. Our AI
+          questions can be found <a href="/questions/?topic=ai">here</a>.
+        </p>
+        <p>
+          If you can&apos;t find what you&apos;re looking for, or want to
+          suggest a question to forecast, reach out to{" "}
+          <a href="mailto:christian@metaculus.com">christian@metaculus.com</a> .
+        </p>
+      </StyledDisclosure>
     </div>
   );
 };
diff --git a/front_end/src/components/math_jax_content.tsx b/front_end/src/components/math_jax_content.tsx
index 7b7daf5ecc..8d606798c7 100644
--- a/front_end/src/components/math_jax_content.tsx
+++ b/front_end/src/components/math_jax_content.tsx
@@ -1,17 +1,28 @@
 "use client";
 import { MathJax, MathJaxContext } from "better-react-mathjax";
 import React, { FC } from "react";
+import dynamic from "next/dynamic";
 
 type Props = {
   content: string;
+  block?: boolean;
 };
 
-const MathJaxContent: FC<Props> = ({ content }) => {
+const MathJaxContent: FC<Props> = ({ content, block = false }) => {
   return (
     <MathJaxContext>
-      <MathJax>{content}</MathJax>
+      <MathJax
+        style={{
+          display: block ? "block" : "inline-block",
+        }}
+      >
+        {content}
+      </MathJax>
     </MathJaxContext>
   );
 };
 
-export default MathJaxContent;
+// Exporting the component using dynamic import with ssr: false
+export default dynamic(() => Promise.resolve(MathJaxContent), {
+  ssr: false,
+});

From 0b98936739e6afc832c59a61c58a53989676e564 Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Wed, 28 Aug 2024 23:29:01 +0200
Subject: [PATCH 5/8] Added Medals FAQ page

---
 .../src/app/(main)/help/medals-faq/page.tsx   | 441 ++++++++++++++++++
 1 file changed, 441 insertions(+)
 create mode 100644 front_end/src/app/(main)/help/medals-faq/page.tsx

diff --git a/front_end/src/app/(main)/help/medals-faq/page.tsx b/front_end/src/app/(main)/help/medals-faq/page.tsx
new file mode 100644
index 0000000000..32f0526aa8
--- /dev/null
+++ b/front_end/src/app/(main)/help/medals-faq/page.tsx
@@ -0,0 +1,441 @@
+import PageWrapper from "../../components/pagewrapper";
+import MathJaxContent from "@/components/math_jax_content";
+
+export const metadata = {
+  title: "Medals FAQ | Metaculus",
+  description:
+    "Learn about Metaculus medals, how they are awarded for forecasting accuracy, comment quality, and question writing. Understand the h-index, medal tiers, and eligibility criteria.",
+};
+
+export default function MedalsFAQ() {
+  return (
+    <PageWrapper>
+      <h1>Medals FAQ</h1>
+      <p>
+        Below are Frequently Asked Questions (and answers!) about medals. The
+        general FAQ is <a href="/faq/">here</a>, and the medals FAQ is{" "}
+        <a href="/help/medals-faq/">here</a>.
+      </p>
+
+      <div className="table-of-contents">
+        <ul className="space-y-1">
+          <li>
+            <a href="#metaculus-medals">What are Metaculus medals?</a>
+          </li>
+          <li>
+            <a href="#baseline-medals">What are Baseline Accuracy medals?</a>
+          </li>
+          <li>
+            <a href="#peer-medals">What are Peer Accuracy medals?</a>
+          </li>
+          <li>
+            <a href="#tournament-medals">What are tournament medals?</a>
+          </li>
+          <li>
+            <a href="#comments-medals">What are Comments medals?</a>
+          </li>
+          <li>
+            <a href="#question-writing-medals">
+              What are Question Writing medals?
+            </a>
+          </li>
+          <li>
+            <a href="#writing-time-periods">
+              What is the time period for Comments & Question writing medals?
+            </a>
+          </li>
+          <li>
+            <a href="#scores-time-periods">
+              What is the time period for Baseline & Peer medals?
+            </a>
+          </li>
+          <li>
+            <a href="#h-indexes">What are h-indexes?</a>
+          </li>
+          <li>
+            <a href="#fractional-h-index">What is the fractional h-index?</a>
+          </li>
+          <li>
+            <a href="#medal-tiers">How are medal tiers determined?</a>
+          </li>
+          <li>
+            <a href="#medals-forever">Are medals forever?</a>
+          </li>
+        </ul>
+      </div>
+
+      <hr className="my-8" />
+
+      <h2 className="scroll-mt-nav" id="metaculus-medals">
+        What are Metaculus medals?
+      </h2>
+      <p>
+        Medals reward Metaculus users for excellence in forecasting accuracy,
+        insightful comment writing, and engaging question writing.
+      </p>
+
+      <p>
+        Medals are awarded based on a user&apos;s placement in the{" "}
+        <a href="/leaderboard/">Leaderboards</a>. There are separate
+        leaderboards for each medal category (
+        <a href="#peer-medals">Peer Accuracy</a>,{" "}
+        <a href="#baseline-medals">Baseline Accuracy</a>,{" "}
+        <a href="#comments-medals">Comments</a>, and{" "}
+        <a href="#question-writing-medals">Question Writing</a>), and each
+        leaderboard is further separated into time periods. Medals are also
+        awarded for placement in each{" "}
+        <a href="/help/scores-faq/#metaculus-tournaments">Tournament</a>&apos;s
+        leaderboard.
+      </p>
+
+      <p>
+        A medal&apos;s tier (gold, silver or bronze) is based on a user&apos;s
+        rank compared to other users, with only the top 1% earning Gold medals.
+      </p>
+
+      <p>
+        So no one gets an unfair advantage, only public content (questions,
+        comments, tournaments) counts for medals. If you are invited to a
+        private tournament, your activity there will not count toward any medal.
+        We have also decided the three Beginner Tournaments (
+        <a href="/tournament/Q42022-beginner-tournament/">1</a>,{" "}
+        <a href="/tournament/Q12023-beginner-tournament/">2</a>,{" "}
+        <a href="/tournament/beginner-tournament/">3</a>) would not award
+        medals, since that would be unfair to veteran forecasters who were
+        actively discouraged from participating.
+      </p>
+
+      <p>
+        Medals appear in the <a href="/leaderboard/">Leaderboards</a> and in
+        user profiles.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="baseline-medals">
+        What are Baseline Accuracy medals?
+      </h2>
+      <p>
+        The Baseline Accuracy medals reward accurate predictions on many
+        questions.
+      </p>
+      <p>
+        Users are ranked by the sum of their{" "}
+        <a href="/help/scores-faq/#baseline-score">Baseline scores</a> over all
+        questions in the <a href="#scores-time-periods">Time Period</a>.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="peer-medals">
+        What are Peer Accuracy medals?
+      </h2>
+      <p>
+        The Peer Accuracy medals reward accurate predictions compared to others,
+        and do not require forecasting a large number of questions.
+      </p>
+      <p>
+        Forecasters are ranked by the sum of their{" "}
+        <a href="/help/scores-faq/#peer-score">Peer scores</a>, divided by the
+        sum of their <a href="/help/scores-faq/#coverage">Coverages</a> over all
+        questions in the <a href="#scores-time-periods">Time Period</a>. This
+        creates a weighted average, where each prediction is counted
+        proportionally to how long it was standing.
+      </p>
+      <p>
+        If the forecaster has a total coverage below 30 in a particular time
+        period (e.g. they predicted 20 questions with 100% coverage, or 50
+        questions with 50% coverage), then their average score on the
+        leaderboard will include (30 - total coverage) questions with a 0 score.
+        This makes it unlikely that a user wins a medal by getting lucky on a
+        single question.
+      </p>
+      <p>
+        Before 2024, the Peer accuracy was slightly different. The forecaster
+        score was the average of their Peer scores, not taking Coverage into
+        account. This caused some incentives problems, see{" "}
+        <a href="https://www.metaculus.com/notebooks/20027/scores-and-medals-trade-offs-and-decisions/#update-july-2024-implementing-idea-4">
+          here
+        </a>{" "}
+        for details. The initial handicap was also 40 instead of the current 30.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="tournament-medals">
+        What are tournament medals?
+      </h2>
+      <p>
+        Tournament medals are awarded based on a user&apos;s rank on a
+        tournament leaderboard. The top 1% get gold, top 2% silver, and top 5%
+        bronze.
+      </p>
+      <p>
+        The three Beginner Tournaments (
+        <a href="/tournament/Q42022-beginner-tournament/">1</a>,{" "}
+        <a href="/tournament/Q12023-beginner-tournament/">2</a>,{" "}
+        <a href="/tournament/beginner-tournament/">3</a>) will not award medals,
+        since that would be unfair to veteran forecasters who were actively
+        discouraged from participating.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="comments-medals">
+        What are Comments medals?
+      </h2>
+      <p>
+        A Comments medal is awarded for writing valuable comments, with a
+        balance between quantity and quality.
+      </p>
+
+      <p>
+        Users are ranked by the{" "}
+        <a href="/help/medals-faq/#h-indexes">h-index</a> of upvotes on their
+        comments made during the{" "}
+        <a href="/help/medals-faq/#writing-time-periods">Time Period</a>.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="question-writing-medals">
+        What are Question Writing medals?
+      </h2>
+      <p>
+        The Question Writing medals reward writing engaging questions, with a
+        balance between quantity and quality.
+      </p>
+
+      <p>
+        Users are ranked by the{" "}
+        <a href="/help/medals-faq/#h-indexes">h-index</a> of the number of
+        forecasters who predicted on their authored questions in the{" "}
+        <a href="/help/medals-faq/#writing-time-periods">Time Period</a>.
+        Because there are few questions but many forecasters, the number of
+        forecasters is divided by 10 before being used in the h-index.
+      </p>
+
+      <p>
+        All co-authors on a question receive full credit, i.e. they are treated
+        the same as if they had authored the question alone.
+      </p>
+
+      <p>
+        Additionally, a single question may contribute to medals over many
+        years, not just the year it was written. If a question receives
+        predictions from 200 unique forecasters every year, then the author
+        receives credit for those 200 forecasters every year.
+      </p>
+      <hr />
+
+      <h2 className="scroll-mt-nav" id="writing-time-periods">
+        What are the Times Periods for Comments & Question writing medals?
+      </h2>
+      <p>
+        Comments and Question writing medals are awarded annually, based on the
+        # of upvotes on your comments and # of forecasters on your questions in
+        a given calendar year.
+      </p>
+
+      <p>
+        For example, if you wrote 20 long-term questions in 2016 that each
+        attracted 200 forecasters in every calendar year then your score for
+        Question Writing would be 20 in every year after 2016. Even though you
+        didn&apos;t write any questions in 2017, the engagement that your
+        questions attracted in 2017 makes you eligible for a 2017 medal. Said
+        another way, a great long-term question can contribute to many medals.
+      </p>
+      <hr />
+
+      <h2 className="scroll-mt-nav" id="scores-time-periods">
+        What are the Time Periods for Baseline & Peer medals?
+      </h2>
+      <p>
+        Time Periods for Accuracy medals serve two main purposes. They ensure a
+        periodic fair starting line on January 1, at which point long-time and
+        new forecasters are on equal grounds. They also group questions with
+        similar durations together, so it is easier to separate long-term and
+        short-term forecasting skill.
+      </p>
+
+      <p>
+        A Time Period for the Baseline and Peer medals consists of a Duration
+        (1, 2, 5, 10… years), a start year and an end year. The end date for a
+        time period is December 31 of the end year. The start date for a time
+        period is January 1 of the start year. So, a 5 year medal covering
+        2016–2020 has a start date of Jan 1, 2016 and an end date of Dec 31,
+        2020.
+      </p>
+
+      <p>
+        The Time Period determines which questions are included in a medal
+        calculation:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>
+          A question only belongs to exactly 1 Time Period, so it only
+          contributes to 1 Baseline medal and to 1 Peer medal.
+        </li>
+        <li>
+          A question is assigned to the shortest time period that satisfies the
+          following:
+        </li>
+        <ul className="ml-5 list-disc">
+          <li>The question opened after the Time Period start date.</li>
+          <li>
+            The question is <b>scheduled</b> to close <b>before</b> the Time
+            Period&apos;s end date.{" "}
+            <i>
+              (There is a 3 day buffer here: some questions were written to
+              close on Jan 1 and naturally belong in the prior year. Also,
+              sometimes time zones make it unclear which date to use.)
+            </i>
+          </li>
+          <li>
+            The question resolves before the Time Period&apos;s end date + a
+            buffer of 100 days.{" "}
+            <i>
+              (This allows time for data sources to become available. For
+              instance, a question about 2022 GDP naturally should count toward
+              the 2022 medal, but the final economic report is often published
+              ~90 days after the year end.)
+            </i>
+          </li>
+        </ul>
+      </ul>
+      <p>
+        Following the rules above, almost all questions are assigned to their
+        Time Period before forecasting begins. On rare occasions, a question
+        will fail to be resolved before the end of the 100-day buffer: by the
+        rules above it is automatically assigned to the next higher Duration in
+        which it fits.
+      </p>
+      <p>
+        Note: If a question closes early it remains in its originally assigned
+        time period. This is important to ensure that an optimistic forecaster
+        does not gain an advantage. For example, imagine ten 5-year questions
+        that can either resolve Yes this week (with 50% probability), or resolve
+        No after the full 5 years. Starting next week, an optimist looks
+        misleadingly good: they predicted 99% on all of the 5 questions that
+        resolved, and they all resolved Yes. After the full 5 years they
+        correctly look very bad: of the 10 questions they predicted 99% on, only
+        5 resolved Yes. Keeping questions in their initial time period ensures
+        that optimists don&apos;t get undue early credit.
+      </p>
+      <hr />
+      <h2 className="scroll-mt-nav" id="h-indexes">
+        What are h-indexes?
+      </h2>
+      <p>
+        An <a href="https://en.wikipedia.org/wiki/h-index">h-index</a> is a
+        metric commonly used in academia to measure the quantity and quality of
+        researcher publications. If a researcher has an h-index of N it means
+        that they have published at least N papers that each individually have
+        at least N citations.
+      </p>
+      <p>
+        We use h-indexes for the Comments medals (number of upvotes per comment)
+        and for the Question Writing medals (tens of forecasters per question).
+      </p>
+      <p>
+        Traditional h-indexes are integers. To break ties, we use a fractional
+        h-index, described below.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="fractional-h-index">
+        What is the fractional h-index?
+      </h2>
+      <p>
+        The fractional h-index is like the standard h-index, but with an added
+        fractional part that measures progress toward the next higher h-index
+        value.
+      </p>
+      <p>
+        Imagine that you have exactly 2 comments with exactly 2 upvotes. Your
+        h-index is therefore 2. To reach an h-index of 3, you need to receive 1
+        more upvote on each of your 2 existing comments (a total of 2 more
+        upvotes) and you need to write a new comment that receives 3 upvotes. In
+        total you need 5 more upvotes to reach an h-index of 3.
+      </p>
+      <p>
+        Imagine one of your comments receives 1 new upvote, and you write a
+        comment that receives 2 new upvotes. Your fractional h-index is then:
+      </p>
+      <p>2 + (1 + 2) / 5 = 2.6</p>
+      <p>In general, the formula is:</p>
+      <MathJaxContent
+        block
+        content={`\\[
+H_f = H + \\frac{ \\sum_{i=1}^{H+1} \\min(v_i, H+1) - H^2 }{ (H+1)^2 - H^2 }
+\\]`}
+      />
+      <p>
+        Where <MathJaxContent content={`\\( H \\)`} /> is your integer h-index,
+        and <MathJaxContent content={`\\( v_i \\)`} /> is the number of upvotes
+        on your i-th most upvoted comment.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="medal-tiers">
+        How are medal tiers determined?
+      </h2>
+      <p>
+        Medals are awarded based on a user&apos;s rank within a Category for a
+        Time Period, or in a Tournament:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>Top 1% = Gold</li>
+        <li>Top 2% = Silver</li>
+        <li>Top 5% = Bronze</li>
+      </ul>
+      <p>
+        The denominators for the percentages are the number of users who have
+        made any contribution toward that medal. Specifically, the denominators
+        are:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>
+          Baseline &amp; Peer Accuracy: the number of users who made a forecast
+          on any public question in the time period.
+        </li>
+        <li>
+          Tournament: the number of users who made a forecast on any question in
+          the tournament.
+        </li>
+        <li>
+          Comments: the number of users who made a public comment in the time
+          period.
+        </li>
+        <li>
+          Question writing: the number of users who authored (or co-authored) a
+          public question in the time period.
+        </li>
+      </ul>
+      <p>
+        To make the leaderboards more interesting and fair, we also enforce the
+        following rules:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>
+          The first, second, and third place finishers always receive (at least)
+          a gold, silver, and bronze medals, in that order.
+        </li>
+        <li>If two users are tied, they always get the same medal.</li>
+        <li>
+          Metaculus staff are ineligible for medals for contributions they made
+          during the time they were on staff.
+        </li>
+      </ul>
+      <hr />
+      <h2 className="scroll-mt-nav" id="medals-forever">
+        Are medals forever?
+      </h2>
+      <p>
+        In general, yes! We designed the medal system so that once a medal is
+        awarded, it never goes away.
+      </p>
+      <p>
+        However, when we discover an error - an incorrectly resolved question or
+        a bug in the code - we plan to correct the error and medals could shift,
+        hopefully only very slightly. We believe this will be a rare occurrence,
+        but it may happen. The spirit of Metaculus is to be accurate.
+      </p>
+    </PageWrapper>
+  );
+}

From d45545ff7841ad593d751f10b9b99442e1c9d93e Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Thu, 29 Aug 2024 00:05:01 +0200
Subject: [PATCH 6/8] Added Markdown Help page

---
 .../src/app/(main)/components/pagewrapper.tsx |   2 +-
 .../src/app/(main)/help/markdown/page.tsx     | 413 ++++++++++++++++++
 2 files changed, 414 insertions(+), 1 deletion(-)
 create mode 100644 front_end/src/app/(main)/help/markdown/page.tsx

diff --git a/front_end/src/app/(main)/components/pagewrapper.tsx b/front_end/src/app/(main)/components/pagewrapper.tsx
index 4f2fc9e3b5..dd13621cb0 100644
--- a/front_end/src/app/(main)/components/pagewrapper.tsx
+++ b/front_end/src/app/(main)/components/pagewrapper.tsx
@@ -6,7 +6,7 @@ interface PageWrapper {
 
 const PageWrapper: React.FC<PageWrapper> = ({ children }) => {
   return (
-    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_li]:text-sm [&_li]:md:text-base [&_p]:text-sm [&_p]:text-gray-700 [&_p]:dark:text-gray-400 [&_p]:md:text-base">
+    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_code]:rounded [&_code]:border [&_code]:border-blue-400 [&_code]:bg-white [&_code]:p-0.5 [&_code]:dark:border-blue-700 [&_code]:dark:bg-blue-900 [&_code]:md:bg-blue-200 [&_code]:dark:md:bg-blue-800 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_li]:text-sm [&_li]:md:text-base [&_p]:text-sm [&_p]:text-gray-700 [&_p]:dark:text-gray-400 [&_p]:md:text-base [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:border [&_pre]:border-blue-400 [&_pre]:bg-white [&_pre]:p-3 [&_pre]:dark:border-blue-700 [&_pre]:dark:bg-blue-900 [&_pre]:md:bg-blue-200 [&_pre]:dark:md:bg-blue-800">
       {children}
     </div>
   );
diff --git a/front_end/src/app/(main)/help/markdown/page.tsx b/front_end/src/app/(main)/help/markdown/page.tsx
new file mode 100644
index 0000000000..d13a5a5114
--- /dev/null
+++ b/front_end/src/app/(main)/help/markdown/page.tsx
@@ -0,0 +1,413 @@
+import PageWrapper from "../../components/pagewrapper";
+import MathJaxContent from "@/components/math_jax_content";
+
+export const metadata = {
+  title: "Markdown Syntax | Metaculus",
+  description:
+    "Learn how to use Markdown and MathJax on Metaculus. Discover syntax for links, headers, lists, tables, code, and equations to enhance your comments and questions.",
+};
+
+export default function MedalsFAQ() {
+  return (
+    <PageWrapper>
+      <h1>Markdown Syntax</h1>
+
+      <p>
+        When adding comments or suggesting questions, you can take advantage of{" "}
+        <a href="http://daringfireball.net/projects/markdown/">Markdown</a>{" "}
+        syntax to add links, emphasis, and headers. Additionally, you can add
+        mathematical equations via <a href="https://www.mathjax.org">MathJax</a>
+        , which will convert{" "}
+        <a href="https://en.wikibooks.org/wiki/LaTeX/Mathematics">
+          LaTeX syntax
+        </a>{" "}
+        into nicely typeset equations. We closely follow the{" "}
+        <a href="http://daringfireball.net/projects/markdown/syntax">
+          official Markdown syntax
+        </a>
+        , so that&apos;s the best place to look for a thorough explanation of
+        how the system works. We provide a brief overview of the most common
+        uses here.
+      </p>
+      <div className="table-of-contents">
+        <ul className="space-y-1">
+          <li>
+            <a href="#inline-elements">Inline elements</a>
+          </li>
+          <li>
+            <a href="#math">Math</a>
+          </li>
+          <li>
+            <a href="#headers">Headers</a>
+          </li>
+          <li>
+            <a href="#code">Code</a>
+          </li>
+          <li>
+            <a href="#quotes">Quotes</a>
+          </li>
+          <li>
+            <a href="#lists">Lists</a>
+          </li>
+          <li>
+            <a href="#tables">Tables</a>
+          </li>
+          <li>
+            <a href="#embeds">Embeds</a>
+          </li>
+          <li>
+            <a href="#images">Images</a>
+          </li>
+          <li>
+            <a href="#limitations">Differences and limitations</a>
+          </li>
+        </ul>
+      </div>
+      <hr />
+      <h2 className="scroll-mt-nav" id="inline-elements">
+        Inline elements
+      </h2>
+      <p>
+        Links can be produced using a{" "}
+        <code>[link title](http://and-link-address.com)</code> or by surrounding
+        a link with <code>&lt;</code> and <code>></code>, like{" "}
+        <code>&lt;http://www.example.com></code>. There are a number of
+        shortcuts to make your life easier if you keep repeating the same link
+        (see the{" "}
+        <a href="http://daringfireball.net/projects/markdown/syntax">docs</a>),
+        but these will cover 90% of the use cases.
+      </p>
+      <p>
+        Asterisks (*) and underscores (_) will both <em>_italicize_</em> text,
+        and two asterisks will make the text <strong>**bold**</strong>.
+        Back-ticks denote <code>fixed-width text</code>. If you want small text,
+        you can wrap it in a literal{" "}
+        <small>&lt;small>html tag&lt;/small></small>. Special characters (
+        <code>*_{}#+-.!\</code>) can be escaped using a backslash, like{" "}
+        <code>\*</code>, if they would otherwise be converted into a markdown
+        element.
+      </p>
+      <p>
+        We also allow a limited subset of HTML tags, which you can mix with
+        markdown syntax if you want. These include: <code>&lt;a></code>,{" "}
+        <code>&lt;p></code>, <code>&lt;em></code>,{" "}
+        <code>&lt;strong></code>, <code>&lt;small></code>,{" "}
+        <code>&lt;ol></code>, <code>&lt;ul></code>,{" "}
+        <code>&lt;li></code>, <code>&lt;br></code>,{" "}
+        <code>&lt;code></code>, <code>&lt;pre></code>,{" "}
+        <code>&lt;blockquote></code>, <code>&lt;aside></code>,{" "}
+        <code>&lt;div></code>, <code>&lt;h1></code>,{" "}
+        <code>&lt;h2></code>, <code>&lt;h3></code>,{" "}
+        <code>&lt;h4></code>, <code>&lt;h5></code>,{" "}
+        <code>&lt;h6></code>, <code>&lt;math-inline></code>,{" "}
+        <code>&lt;math-display></code>, <code>&lt;hr></code>,{" "}
+        <code>&lt;table></code>, <code>&lt;thead></code>,{" "}
+        <code>&lt;tbody></code>, <code>&lt;tr></code>,{" "}
+        <code>&lt;th></code>, <code>&lt;td></code>,{" "}
+        <code>&lt;del></code>, <code>&lt;sup></code>,{" "}
+        <code>&lt;sub></code>.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="math">
+        Math
+      </h2>
+      <p>
+        We supplement Markdown with{" "}
+        <a href="https://www.mathjax.org">MathJax</a> equation processing.
+        Mathematical formatting works by placing your equation between{" "}
+        <code>\(</code> and <code>\)</code> (for inline equations) or{" "}
+        <code>\[</code> and <code>\]</code> (for displayed equations). More
+        complicated equations can be put in an <code>align</code> environment,
+        like so
+      </p>
+      <pre>
+        {`\\begin{align}
+  \\log_2 \\left ( \\frac{p}{0.5} \\right ) &amp;= \\log_2 \\left ( p \\right ) + 1 \\\\
+  \\log_2 \\left ( \\frac{p}{0.5} \\right ) &amp;= \\frac{\\log(p) - \\log(0.5)}{\\log(1) - \\log(0.5)}
+\\end{align}`}
+      </pre>
+      <p>producing</p>
+      <MathJaxContent
+        content={`\\[
+    \\begin{align}
+    \\log_2 \\left ( \\frac{p}{0.5} \\right ) &= \\log_2 \\left ( p \\right ) + 1 \\\\
+    \\log_2 \\left ( \\frac{p}{0.5} \\right ) &= \\frac{\\log(p) - \\log(0.5)}{\\log(1) - \\log(0.5)}
+    \\end{align}
+    \\]`}
+      />
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="headers">
+        Headers
+      </h2>
+      <p>Headers are easiest to add using hash marks, for example</p>
+      <pre>
+        {`# Primary header
+## Secondary header
+##### Fifth-level header`}
+      </pre>
+
+      <p>Please use headers in comments sparingly!</p>
+      <hr />
+      <h2 className="scroll-mt-nav" id="code">
+        Code
+      </h2>
+      <p>Big chunks of code can be wrapped in three back-ticks. For example:</p>
+      <pre>
+        &#96;&#96;&#96;
+        {`
+def hello_world():
+    print('hello!')`}
+        <br />
+        &#96;&#96;&#96;
+      </pre>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="quotes">
+        Quotes
+      </h2>
+      <p>
+        If you want to quote someone, precede each line with a <code>&gt;</code>
+        :
+      </p>
+      <pre>
+        {`> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.`}
+      </pre>
+      <p>which would produce:</p>
+      <blockquote className="opacity-75 pl-4 border-l border-gray-500/50 ml-4">
+        <p>
+          This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+          consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+          Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+        </p>
+        <p>
+          Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+          id sem consectetuer libero luctus adipiscing.
+        </p>
+      </blockquote>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="lists">
+        Lists
+      </h2>
+      <p>Markdown can handle both ordered and unordered lists. For example,</p>
+      <pre>
+        {`1. First item
+2. Second item
+
+    Another paragraph in the second item. (Note the 4-spaces indentation.)
+
+    - Sublist item 1. (Note the 4-spaces indentation.)
+    - Sublist item 2.
+
+3. Third item.`}
+      </pre>
+      <p>produces:</p>
+      <ol className="list-inside list-decimal space-y-3">
+        <li>First item</li>
+        <li>
+          Second item
+          <p className="pl-8">
+            Another paragraph in the second item. (Note the 4-spaces
+            indentation.)
+          </p>
+          <ul className="list-inside list-disc pl-8">
+            <li>Sublist item 1. (Note the 4-spaces indentation.)</li>
+            <li>Sublist item 2.</li>
+          </ul>
+        </li>
+        <li>Third item.</li>
+      </ol>
+      <p>
+        Unordered lists behave similarly, but use <code>*</code> or{" "}
+        <code>+</code> or <code>-</code> to denote new items.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="tables">
+        Tables
+      </h2>
+      <p>We support simple tables of the form:</p>
+      <pre>
+        {`| Header 1 | Header 2 |   ← headers
+|----------|----------|   ← mandatory header separator
+| Cell 1   | Cell 2   |   ← line 1
+| Cell 3   | Cell 4   |   ← line 2`}
+      </pre>
+      <p>
+        Columns are separated by the pipe character <code>|</code>, and each
+        line is a row. For example, this:
+      </p>
+      <pre>
+        {`|Year | Predictions |  Total |
+|-----|-------------|--------|
+|2015 |         500 |    500 |
+|2016 |       25500 |  26000 |
+|2017 |       21000 |  47000 |
+|2018 |       63000 | 110000 |
+|2019 |       50000 | 160000 |
+|2020 |      220000 | 380000 |`}
+      </pre>
+      <p>Will render as:</p>
+      <div className="overflow-x-auto">
+        <table className="min-w-full border border-gray-300 bg-white dark:border-blue-700 dark:bg-blue-900 md:dark:bg-blue-800">
+          <thead className="bg-gray-100 dark:bg-blue-950">
+            <tr>
+              <th className="border-b border-gray-300 px-4 py-2 text-left text-sm font-semibold text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                Year
+              </th>
+              <th className="border-b border-gray-300 px-4 py-2 text-left text-sm font-semibold  text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                Predictions
+              </th>
+              <th className="border-b border-gray-300 px-4 py-2 text-left text-sm font-semibold text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400 ">
+                2015
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                500
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                500
+              </td>
+            </tr>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                2016
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                25500
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                26000
+              </td>
+            </tr>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                2017
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                21000
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                47000
+              </td>
+            </tr>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                2018
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                63000
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                110000
+              </td>
+            </tr>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                2019
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                50000
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                160000
+              </td>
+            </tr>
+            <tr>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                2020
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                220000
+              </td>
+              <td className="border-b border-gray-300 px-4 py-2 text-sm text-gray-700 dark:border-blue-700 dark:text-gray-400">
+                380000
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="embeds">
+        Embeds
+      </h2>
+      <p>
+        We allow <code>&lt;iframe></code> embeds from a limited list of
+        trusted sites, currently including:
+      </p>
+      <ul className="ml-5 list-disc">
+        <li>afdc.energy.gov</li>
+        <li>data.worldbank.org</li>
+        <li>fred.stlouisfed.org</li>
+        <li>ourworldindata.org</li>
+        <li>www.eia.gov</li>
+        <li>metaculus.com</li>
+      </ul>
+      <p>Note that this means you can embed Metaculus questions:</p>
+      <pre>
+        {`<iframe src="https://www.metaculus.com/questions/embed/8/" height="320" width="550"></iframe>`}
+      </pre>
+      <p>will render as:</p>
+      <div className="w-full overflow-x-auto">
+        <iframe
+          src="https://www.metaculus.com/questions/embed/8/"
+          height="320"
+          width="550"
+        ></iframe>
+      </div>
+      <p>
+        Note that for now this is only possible in question bodies, not in
+        comments.
+      </p>
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="images">
+        Images
+      </h2>
+      <p>
+        We also allow <code>&lt;img></code> images:
+      </p>
+      <pre>
+        {`<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" alt="markdown logo">`}
+      </pre>
+      <p>will render as:</p>
+      <img
+        src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg"
+        alt="markdown logo"
+      />
+
+      <hr />
+      <h2 className="scroll-mt-nav" id="limitations">
+        Differences and limitations
+      </h2>
+      <p>
+        The official Markdown specification lets users input raw HTML, but we
+        limit users to the elements described above. For example, if you try to
+        input an image using <code>![Alt text](/path/to/img.jpg)</code> the
+        output will look like &lt;img alt=&quot;Alt text&quot;
+        src=&quot;/path/to/img.jpg&quot;/>, and something like{" "}
+        <code>&lt;script>doSomethingEvil()&lt;/script></code> certainly
+        won&apos;t work. We also employ a few markdown extensions that handle
+        fenced code blocks (described above) and make{" "}
+        <a href="https://python-markdown.github.io/extensions/sane_lists/">
+          lists
+        </a>{" "}
+        and bolded text a little easier to manage.
+      </p>
+    </PageWrapper>
+  );
+}

From 2f3eba91fd6f245e8447e0e31762811da04aaab5 Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Sat, 31 Aug 2024 01:57:03 +0200
Subject: [PATCH 7/8] Markdown page syntax

---
 .../src/app/(main)/help/markdown/page.tsx     | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/front_end/src/app/(main)/help/markdown/page.tsx b/front_end/src/app/(main)/help/markdown/page.tsx
index d13a5a5114..674743a06c 100644
--- a/front_end/src/app/(main)/help/markdown/page.tsx
+++ b/front_end/src/app/(main)/help/markdown/page.tsx
@@ -70,8 +70,8 @@ export default function MedalsFAQ() {
       <p>
         Links can be produced using a{" "}
         <code>[link title](http://and-link-address.com)</code> or by surrounding
-        a link with <code>&lt;</code> and <code>></code>, like{" "}
-        <code>&lt;http://www.example.com></code>. There are a number of
+        a link with <code>&lt;</code> and <code>{">"}</code>, like{" "}
+        <code>&lt;http://www.example.com{">"}</code>. There are a number of
         shortcuts to make your life easier if you keep repeating the same link
         (see the{" "}
         <a href="http://daringfireball.net/projects/markdown/syntax">docs</a>),
@@ -82,30 +82,32 @@ export default function MedalsFAQ() {
         and two asterisks will make the text <strong>**bold**</strong>.
         Back-ticks denote <code>fixed-width text</code>. If you want small text,
         you can wrap it in a literal{" "}
-        <small>&lt;small>html tag&lt;/small></small>. Special characters (
-        <code>*_{}#+-.!\</code>) can be escaped using a backslash, like{" "}
-        <code>\*</code>, if they would otherwise be converted into a markdown
-        element.
+        <small>
+          &lt;small{">"}html tag&lt;/small{">"}
+        </small>
+        . Special characters (<code>*_{}#+-.!\</code>) can be escaped using a
+        backslash, like <code>\*</code>, if they would otherwise be converted
+        into a markdown element.
       </p>
       <p>
         We also allow a limited subset of HTML tags, which you can mix with
-        markdown syntax if you want. These include: <code>&lt;a></code>,{" "}
-        <code>&lt;p></code>, <code>&lt;em></code>,{" "}
-        <code>&lt;strong></code>, <code>&lt;small></code>,{" "}
-        <code>&lt;ol></code>, <code>&lt;ul></code>,{" "}
-        <code>&lt;li></code>, <code>&lt;br></code>,{" "}
-        <code>&lt;code></code>, <code>&lt;pre></code>,{" "}
-        <code>&lt;blockquote></code>, <code>&lt;aside></code>,{" "}
-        <code>&lt;div></code>, <code>&lt;h1></code>,{" "}
-        <code>&lt;h2></code>, <code>&lt;h3></code>,{" "}
-        <code>&lt;h4></code>, <code>&lt;h5></code>,{" "}
-        <code>&lt;h6></code>, <code>&lt;math-inline></code>,{" "}
-        <code>&lt;math-display></code>, <code>&lt;hr></code>,{" "}
-        <code>&lt;table></code>, <code>&lt;thead></code>,{" "}
-        <code>&lt;tbody></code>, <code>&lt;tr></code>,{" "}
-        <code>&lt;th></code>, <code>&lt;td></code>,{" "}
-        <code>&lt;del></code>, <code>&lt;sup></code>,{" "}
-        <code>&lt;sub></code>.
+        markdown syntax if you want. These include: <code>&lt;a{">"}</code>,{" "}
+        <code>&lt;p{">"}</code>, <code>&lt;em{">"}</code>,{" "}
+        <code>&lt;strong{">"}</code>, <code>&lt;small{">"}</code>,{" "}
+        <code>&lt;ol{">"}</code>, <code>&lt;ul{">"}</code>,{" "}
+        <code>&lt;li{">"}</code>, <code>&lt;br{">"}</code>,{" "}
+        <code>&lt;code{">"}</code>, <code>&lt;pre{">"}</code>,{" "}
+        <code>&lt;blockquote{">"}</code>, <code>&lt;aside{">"}</code>,{" "}
+        <code>&lt;div{">"}</code>, <code>&lt;h1{">"}</code>,{" "}
+        <code>&lt;h2{">"}</code>, <code>&lt;h3{">"}</code>,{" "}
+        <code>&lt;h4{">"}</code>, <code>&lt;h5{">"}</code>,{" "}
+        <code>&lt;h6{">"}</code>, <code>&lt;math-inline{">"}</code>,{" "}
+        <code>&lt;math-display{">"}</code>, <code>&lt;hr{">"}</code>,{" "}
+        <code>&lt;table{">"}</code>, <code>&lt;thead{">"}</code>,{" "}
+        <code>&lt;tbody{">"}</code>, <code>&lt;tr{">"}</code>,{" "}
+        <code>&lt;th{">"}</code>, <code>&lt;td{">"}</code>,{" "}
+        <code>&lt;del{">"}</code>, <code>&lt;sup{">"}</code>,{" "}
+        <code>&lt;sub{">"}</code>.
       </p>
 
       <hr />
@@ -180,7 +182,7 @@ def hello_world():
 > id sem consectetuer libero luctus adipiscing.`}
       </pre>
       <p>which would produce:</p>
-      <blockquote className="opacity-75 pl-4 border-l border-gray-500/50 ml-4">
+      <blockquote className="ml-4 border-l border-gray-500/50 pl-4 opacity-75">
         <p>
           This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
           consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
@@ -346,7 +348,7 @@ def hello_world():
         Embeds
       </h2>
       <p>
-        We allow <code>&lt;iframe></code> embeds from a limited list of
+        We allow <code>&lt;iframe{">"}</code> embeds from a limited list of
         trusted sites, currently including:
       </p>
       <ul className="ml-5 list-disc">
@@ -379,7 +381,7 @@ def hello_world():
         Images
       </h2>
       <p>
-        We also allow <code>&lt;img></code> images:
+        We also allow <code>&lt;img{">"}</code> images:
       </p>
       <pre>
         {`<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" alt="markdown logo">`}
@@ -399,10 +401,12 @@ def hello_world():
         limit users to the elements described above. For example, if you try to
         input an image using <code>![Alt text](/path/to/img.jpg)</code> the
         output will look like &lt;img alt=&quot;Alt text&quot;
-        src=&quot;/path/to/img.jpg&quot;/>, and something like{" "}
-        <code>&lt;script>doSomethingEvil()&lt;/script></code> certainly
-        won&apos;t work. We also employ a few markdown extensions that handle
-        fenced code blocks (described above) and make{" "}
+        src=&quot;/path/to/img.jpg&quot;/{">"}, and something like{" "}
+        <code>
+          &lt;script{">"}doSomethingEvil()&lt;/script{">"}
+        </code>{" "}
+        certainly won&apos;t work. We also employ a few markdown extensions that
+        handle fenced code blocks (described above) and make{" "}
         <a href="https://python-markdown.github.io/extensions/sane_lists/">
           lists
         </a>{" "}

From b3fdca037ea99821684fb6057ef9227ba0136703 Mon Sep 17 00:00:00 2001
From: aseckin <atakanseckin@gmail.com>
Date: Sat, 31 Aug 2024 02:55:48 +0200
Subject: [PATCH 8/8] Added Legacy Points Rankings page

---
 .../(main)/legacy-points-rankings/page.tsx    | 6032 +++++++++++++++++
 1 file changed, 6032 insertions(+)
 create mode 100644 front_end/src/app/(main)/legacy-points-rankings/page.tsx

diff --git a/front_end/src/app/(main)/legacy-points-rankings/page.tsx b/front_end/src/app/(main)/legacy-points-rankings/page.tsx
new file mode 100644
index 0000000000..1e3ab9e663
--- /dev/null
+++ b/front_end/src/app/(main)/legacy-points-rankings/page.tsx
@@ -0,0 +1,6032 @@
+import PageWrapper from "../components/pagewrapper";
+
+export const metadata = {
+  title: "Points Rankings Archive | Metaculus",
+  description:
+    "This page shows the cumulative points earned by top forecasters on all questions from October 2015 to April 2024. This page will not be updated in the future.",
+};
+
+export default function LegacyPointsRankings() {
+  return (
+    <PageWrapper>
+      <h1>Points Rankings</h1>
+      <p>
+        This page shows the cumulative points earned by top forecasters on all
+        questions from October 2015 to April 2024. This page will not be updated
+        in the future. Our current scoring and leaderboard system can be found{" "}
+        <a href="/help/scores-faq/#tournaments-section">here</a>.
+      </p>
+      <table className="w-full table-auto">
+        <thead>
+          <tr className="bg-blue-400 text-sm dark:bg-blue-800 md:bg-blue-300">
+            <th className="w-1/6 px-4 py-2 text-left">Rank</th>
+            <th className="px-4 py-2 text-left">User</th>
+            <th className="px-4 py-2 text-left">Points</th>
+          </tr>
+        </thead>
+        <tbody className="text-xs">
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">1</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103777"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                datscilly
+              </a>
+            </td>
+            <td className="px-4 py-2">115809</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">2</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112705"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PepeS
+              </a>
+            </td>
+            <td className="px-4 py-2">115089</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">3</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111881"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Vang
+              </a>
+            </td>
+            <td className="px-4 py-2">97733</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">4</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111805"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                galen
+              </a>
+            </td>
+            <td className="px-4 py-2">79164</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">5</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101465"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Jgalt
+              </a>
+            </td>
+            <td className="px-4 py-2">74592</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">6</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112076"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                SimonM
+              </a>
+            </td>
+            <td className="px-4 py-2">67860</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">7</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115375"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                citizen
+              </a>
+            </td>
+            <td className="px-4 py-2">67325</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">8</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118777"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BellardiaLemonus
+              </a>
+            </td>
+            <td className="px-4 py-2">62068</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">9</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107445"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Zweihander
+              </a>
+            </td>
+            <td className="px-4 py-2">60669</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">10</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100912"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PeterWildeford
+              </a>
+            </td>
+            <td className="px-4 py-2">54591</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">11</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100345"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                EvanHarper
+              </a>
+            </td>
+            <td className="px-4 py-2">54212</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">12</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103634"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AngraMainyu
+              </a>
+            </td>
+            <td className="px-4 py-2">52084</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">13</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114156"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TeeJayKay
+              </a>
+            </td>
+            <td className="px-4 py-2">51598</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">14</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112197"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JonathanShi
+              </a>
+            </td>
+            <td className="px-4 py-2">50406</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">15</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115725"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Sergio
+              </a>
+            </td>
+            <td className="px-4 py-2">48924</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">16</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116132"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TheObsoleteMan
+              </a>
+            </td>
+            <td className="px-4 py-2">45212</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">17</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109610"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                elifland
+              </a>
+            </td>
+            <td className="px-4 py-2">45017</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">18</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101341"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Pablo
+              </a>
+            </td>
+            <td className="px-4 py-2">44980</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">19</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119188"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                exmateriae
+              </a>
+            </td>
+            <td className="px-4 py-2">44741</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">20</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105906"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mattvdm
+              </a>
+            </td>
+            <td className="px-4 py-2">43617</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">21</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100518"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                traviswfisher
+              </a>
+            </td>
+            <td className="px-4 py-2">43089</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">22</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119767"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PhilippSchoenegger
+              </a>
+            </td>
+            <td className="px-4 py-2">41434</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">23</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117580"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MaciekK
+              </a>
+            </td>
+            <td className="px-4 py-2">41081</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">24</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103899"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Reprisal
+              </a>
+            </td>
+            <td className="px-4 py-2">39383</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">25</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109233"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Bob_Jacobs
+              </a>
+            </td>
+            <td className="px-4 py-2">35729</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">26</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119839"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DaAdCh
+              </a>
+            </td>
+            <td className="px-4 py-2">35340</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">27</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100638"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                James
+              </a>
+            </td>
+            <td className="px-4 py-2">34917</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">28</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111713"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jack
+              </a>
+            </td>
+            <td className="px-4 py-2">34880</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">29</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121041"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                norick
+              </a>
+            </td>
+            <td className="px-4 py-2">34860</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">30</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109742"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                katifish
+              </a>
+            </td>
+            <td className="px-4 py-2">33377</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">31</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103304"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                isinlor
+              </a>
+            </td>
+            <td className="px-4 py-2">32733</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">32</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119005"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                will_aldred
+              </a>
+            </td>
+            <td className="px-4 py-2">32719</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">33</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116440"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                uganda
+              </a>
+            </td>
+            <td className="px-4 py-2">32612</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">34</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112655"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Alexander230
+              </a>
+            </td>
+            <td className="px-4 py-2">32390</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">35</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112024"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aristophanes
+              </a>
+            </td>
+            <td className="px-4 py-2">32087</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">36</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112033"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lars3loff
+              </a>
+            </td>
+            <td className="px-4 py-2">31161</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">37</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/108792"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                steven0461
+              </a>
+            </td>
+            <td className="px-4 py-2">31149</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">38</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110947"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nextbigfuture
+              </a>
+            </td>
+            <td className="px-4 py-2">30478</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">39</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/139161"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Zaldath
+              </a>
+            </td>
+            <td className="px-4 py-2">29699</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">40</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103600"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                2e10e122
+              </a>
+            </td>
+            <td className="px-4 py-2">29141</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">41</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113439"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                zenblews
+              </a>
+            </td>
+            <td className="px-4 py-2">28859</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">42</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106326"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BrianGoodrich
+              </a>
+            </td>
+            <td className="px-4 py-2">27210</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">43</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126626"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                skmmcj
+              </a>
+            </td>
+            <td className="px-4 py-2">26567</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">44</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114115"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Charles
+              </a>
+            </td>
+            <td className="px-4 py-2">26087</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">45</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111856"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Cory
+              </a>
+            </td>
+            <td className="px-4 py-2">25986</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">46</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102710"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Bernhard
+              </a>
+            </td>
+            <td className="px-4 py-2">25701</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">47</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100535"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                bzial
+              </a>
+            </td>
+            <td className="px-4 py-2">25679</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">48</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125016"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                valentin.vincendon
+              </a>
+            </td>
+            <td className="px-4 py-2">24858</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">49</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111659"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                isabel
+              </a>
+            </td>
+            <td className="px-4 py-2">23797</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">50</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103733"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jzima
+              </a>
+            </td>
+            <td className="px-4 py-2">23764</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">51</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126666"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                vakrasiak
+              </a>
+            </td>
+            <td className="px-4 py-2">23453</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">52</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100626"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gjm
+              </a>
+            </td>
+            <td className="px-4 py-2">23258</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">53</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103618"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                foo
+              </a>
+            </td>
+            <td className="px-4 py-2">22562</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">54</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120160"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                OpenSystem
+              </a>
+            </td>
+            <td className="px-4 py-2">22485</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">55</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113862"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jowo
+              </a>
+            </td>
+            <td className="px-4 py-2">22333</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">56</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111772"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                NoUsernameSelected
+              </a>
+            </td>
+            <td className="px-4 py-2">22303</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">57</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113141"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                onl
+              </a>
+            </td>
+            <td className="px-4 py-2">22224</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">58</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109384"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Nichevo
+              </a>
+            </td>
+            <td className="px-4 py-2">22190</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">59</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112803"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Hayes
+              </a>
+            </td>
+            <td className="px-4 py-2">21915</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">60</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111160"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ad42astra
+              </a>
+            </td>
+            <td className="px-4 py-2">21822</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">61</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118771"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gunturiqbal
+              </a>
+            </td>
+            <td className="px-4 py-2">21477</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">62</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120255"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Primer
+              </a>
+            </td>
+            <td className="px-4 py-2">21163</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">63</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105656"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Jotto
+              </a>
+            </td>
+            <td className="px-4 py-2">20957</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">64</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115980"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                probahilliby
+              </a>
+            </td>
+            <td className="px-4 py-2">20644</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">65</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100014"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                converse
+              </a>
+            </td>
+            <td className="px-4 py-2">20610</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">66</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112733"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                wobblybobby
+              </a>
+            </td>
+            <td className="px-4 py-2">20560</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">67</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115975"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                johnnycaffeine
+              </a>
+            </td>
+            <td className="px-4 py-2">20236</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">68</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103223"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                CastilianoVulgo
+              </a>
+            </td>
+            <td className="px-4 py-2">20204</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">69</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113018"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Grigfall
+              </a>
+            </td>
+            <td className="px-4 py-2">19949</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">70</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115866"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JAJMLP
+              </a>
+            </td>
+            <td className="px-4 py-2">19442</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">71</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100550"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                hzds
+              </a>
+            </td>
+            <td className="px-4 py-2">19226</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">72</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121719"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TemetNosce
+              </a>
+            </td>
+            <td className="px-4 py-2">19016</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">73</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116812"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                chipsie
+              </a>
+            </td>
+            <td className="px-4 py-2">18934</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">74</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112133"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Glossy
+              </a>
+            </td>
+            <td className="px-4 py-2">18296</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">75</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123419"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Prodicus
+              </a>
+            </td>
+            <td className="px-4 py-2">18123</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">76</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123015"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                IY
+              </a>
+            </td>
+            <td className="px-4 py-2">18032</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">77</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112948"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                krtnu
+              </a>
+            </td>
+            <td className="px-4 py-2">18022</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">78</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126014"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                LD
+              </a>
+            </td>
+            <td className="px-4 py-2">17888</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">79</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110516"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rantahar
+              </a>
+            </td>
+            <td className="px-4 py-2">17719</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">80</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116988"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                palcu
+              </a>
+            </td>
+            <td className="px-4 py-2">17679</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">81</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112510"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                isaacdunn
+              </a>
+            </td>
+            <td className="px-4 py-2">17678</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">82</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113693"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Mellaculus
+              </a>
+            </td>
+            <td className="px-4 py-2">17497</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">83</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114222"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AvrahamEisenberg
+              </a>
+            </td>
+            <td className="px-4 py-2">17278</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">84</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107659"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                deKlik
+              </a>
+            </td>
+            <td className="px-4 py-2">17058</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">85</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103836"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Barbarossa
+              </a>
+            </td>
+            <td className="px-4 py-2">16877</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">86</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118874"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                stanulamstan
+              </a>
+            </td>
+            <td className="px-4 py-2">16761</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">87</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/137244"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                darron
+              </a>
+            </td>
+            <td className="px-4 py-2">16690</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">88</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101312"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                chris.j.cundy
+              </a>
+            </td>
+            <td className="px-4 py-2">16683</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">89</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118449"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                uszy
+              </a>
+            </td>
+            <td className="px-4 py-2">16641</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">90</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103907"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                darkives
+              </a>
+            </td>
+            <td className="px-4 py-2">16290</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">91</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101412"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                r
+              </a>
+            </td>
+            <td className="px-4 py-2">16179</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">92</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112497"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                helpermonkey
+              </a>
+            </td>
+            <td className="px-4 py-2">16061</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">93</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117464"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Bristol_OPT
+              </a>
+            </td>
+            <td className="px-4 py-2">15665</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">94</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120344"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dtark
+              </a>
+            </td>
+            <td className="px-4 py-2">15602</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">95</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104761"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Tamay
+              </a>
+            </td>
+            <td className="px-4 py-2">15523</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">96</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118868"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                alexanderpasch
+              </a>
+            </td>
+            <td className="px-4 py-2">15448</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">97</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100108"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                moons R us
+              </a>
+            </td>
+            <td className="px-4 py-2">15426</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">98</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133938"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Unwrapped8600
+              </a>
+            </td>
+            <td className="px-4 py-2">15408</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">99</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111743"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                NathanpmYoung
+              </a>
+            </td>
+            <td className="px-4 py-2">15379</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">100</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120980"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                borshigida
+              </a>
+            </td>
+            <td className="px-4 py-2">15276</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">101</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112493"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                niplav
+              </a>
+            </td>
+            <td className="px-4 py-2">15240</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">102</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113744"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                blednotik
+              </a>
+            </td>
+            <td className="px-4 py-2">15109</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">103</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104149"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Nayrolf
+              </a>
+            </td>
+            <td className="px-4 py-2">14939</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">104</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115250"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                bte
+              </a>
+            </td>
+            <td className="px-4 py-2">14897</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">105</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124371"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                8
+              </a>
+            </td>
+            <td className="px-4 py-2">14869</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">106</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/135856"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                evergreenemily
+              </a>
+            </td>
+            <td className="px-4 py-2">14690</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">107</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111911"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                alexrjl
+              </a>
+            </td>
+            <td className="px-4 py-2">14656</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">108</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124773"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jimmyred
+              </a>
+            </td>
+            <td className="px-4 py-2">14656</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">109</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123064"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                forecastooor
+              </a>
+            </td>
+            <td className="px-4 py-2">14438</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">110</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106142"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AABoyles
+              </a>
+            </td>
+            <td className="px-4 py-2">14339</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">111</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107308"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                james.jj.barry
+              </a>
+            </td>
+            <td className="px-4 py-2">14148</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">112</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109749"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                qassiov
+              </a>
+            </td>
+            <td className="px-4 py-2">14004</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">113</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103428"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pagouy
+              </a>
+            </td>
+            <td className="px-4 py-2">13959</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">114</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110540"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                randallburns
+              </a>
+            </td>
+            <td className="px-4 py-2">13910</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">115</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116023"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ege_erdil
+              </a>
+            </td>
+            <td className="px-4 py-2">13910</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">116</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101911"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tetraspace
+              </a>
+            </td>
+            <td className="px-4 py-2">13831</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">117</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100559"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DanielFilan
+              </a>
+            </td>
+            <td className="px-4 py-2">13812</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">118</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/108495"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                copacetic
+              </a>
+            </td>
+            <td className="px-4 py-2">13738</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">119</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112639"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                emilowk
+              </a>
+            </td>
+            <td className="px-4 py-2">13699</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">120</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124884"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                satisficer
+              </a>
+            </td>
+            <td className="px-4 py-2">13570</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">121</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103447"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                alexlyzhov
+              </a>
+            </td>
+            <td className="px-4 py-2">13287</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">122</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133859"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MayMeta
+              </a>
+            </td>
+            <td className="px-4 py-2">13263</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">123</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101056"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                FinanAdamson
+              </a>
+            </td>
+            <td className="px-4 py-2">13240</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">124</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114953"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                xenohunter
+              </a>
+            </td>
+            <td className="px-4 py-2">13184</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">125</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100139"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AndrewMcKnight
+              </a>
+            </td>
+            <td className="px-4 py-2">13095</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">126</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/135380"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lubos.saloky
+              </a>
+            </td>
+            <td className="px-4 py-2">12907</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">127</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115666"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Cato
+              </a>
+            </td>
+            <td className="px-4 py-2">12854</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">128</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127582"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lbiii
+              </a>
+            </td>
+            <td className="px-4 py-2">12816</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">129</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103904"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cpt
+              </a>
+            </td>
+            <td className="px-4 py-2">12745</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">130</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115741"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                FJehn
+              </a>
+            </td>
+            <td className="px-4 py-2">12735</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">131</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106400"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pranomostro
+              </a>
+            </td>
+            <td className="px-4 py-2">12609</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">132</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112874"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                stupidme
+              </a>
+            </td>
+            <td className="px-4 py-2">12608</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">133</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119020"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jmason
+              </a>
+            </td>
+            <td className="px-4 py-2">12548</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">134</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100059"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jimrandomh
+              </a>
+            </td>
+            <td className="px-4 py-2">12508</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">135</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109463"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Pazzaz
+              </a>
+            </td>
+            <td className="px-4 py-2">12407</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">136</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/140661"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                edoardo.baratelli
+              </a>
+            </td>
+            <td className="px-4 py-2">12397</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">137</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118681"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Cosmic
+              </a>
+            </td>
+            <td className="px-4 py-2">12322</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">138</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/136990"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TheAGI
+              </a>
+            </td>
+            <td className="px-4 py-2">12254</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">139</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119624"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gumbo
+              </a>
+            </td>
+            <td className="px-4 py-2">12247</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">140</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127643"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                followthesilence
+              </a>
+            </td>
+            <td className="px-4 py-2">12136</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">141</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122119"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                andrmoe
+              </a>
+            </td>
+            <td className="px-4 py-2">11797</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">142</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121434"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                fldnflncs
+              </a>
+            </td>
+            <td className="px-4 py-2">11711</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">143</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104378"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kgreene
+              </a>
+            </td>
+            <td className="px-4 py-2">11666</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">144</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100655"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                v
+              </a>
+            </td>
+            <td className="px-4 py-2">11433</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">145</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100497"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gbear605
+              </a>
+            </td>
+            <td className="px-4 py-2">11301</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">146</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103713"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                KrisMoore
+              </a>
+            </td>
+            <td className="px-4 py-2">11300</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">147</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114911"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Joker
+              </a>
+            </td>
+            <td className="px-4 py-2">11120</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">148</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122963"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Doryphore
+              </a>
+            </td>
+            <td className="px-4 py-2">11101</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">149</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103787"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kinnla
+              </a>
+            </td>
+            <td className="px-4 py-2">11066</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">150</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111971"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jonathanjouty
+              </a>
+            </td>
+            <td className="px-4 py-2">10956</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">151</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111864"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                felawinkelmolen
+              </a>
+            </td>
+            <td className="px-4 py-2">10881</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">152</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100426"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                shahar.avin
+              </a>
+            </td>
+            <td className="px-4 py-2">10795</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">153</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112479"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                evanbd
+              </a>
+            </td>
+            <td className="px-4 py-2">10752</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">154</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102384"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                qumidium
+              </a>
+            </td>
+            <td className="px-4 py-2">10715</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">155</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118622"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kqr
+              </a>
+            </td>
+            <td className="px-4 py-2">10680</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">156</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106992"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Morpheus
+              </a>
+            </td>
+            <td className="px-4 py-2">10645</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">157</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112134"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ksipe
+              </a>
+            </td>
+            <td className="px-4 py-2">10641</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">158</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121122"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                timmartin
+              </a>
+            </td>
+            <td className="px-4 py-2">10638</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">159</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114969"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                arun2642
+              </a>
+            </td>
+            <td className="px-4 py-2">10616</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">160</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112720"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sxqk
+              </a>
+            </td>
+            <td className="px-4 py-2">10585</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">161</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120745"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                bengs
+              </a>
+            </td>
+            <td className="px-4 py-2">10447</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">162</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118276"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mmmeta
+              </a>
+            </td>
+            <td className="px-4 py-2">10447</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">163</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122480"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Arqiduka
+              </a>
+            </td>
+            <td className="px-4 py-2">10417</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">164</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103764"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aran
+              </a>
+            </td>
+            <td className="px-4 py-2">10344</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">165</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102991"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lukas.baker
+              </a>
+            </td>
+            <td className="px-4 py-2">10301</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">166</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112543"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Natalia_Mendonca
+              </a>
+            </td>
+            <td className="px-4 py-2">10169</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">167</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112023"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sbares
+              </a>
+            </td>
+            <td className="px-4 py-2">10153</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">168</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/131306"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                draaglom
+              </a>
+            </td>
+            <td className="px-4 py-2">10106</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">169</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101006"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                englisc aspyrgend
+              </a>
+            </td>
+            <td className="px-4 py-2">10074</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">170</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116137"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Ab5A8bd20V
+              </a>
+            </td>
+            <td className="px-4 py-2">10070</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">171</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104023"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                yagudin
+              </a>
+            </td>
+            <td className="px-4 py-2">9840</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">172</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117552"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aqsalose
+              </a>
+            </td>
+            <td className="px-4 py-2">9787</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">173</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117279"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Maxima
+              </a>
+            </td>
+            <td className="px-4 py-2">9767</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">174</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112057"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Linch
+              </a>
+            </td>
+            <td className="px-4 py-2">9704</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">175</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103798"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                CredibleHulk
+              </a>
+            </td>
+            <td className="px-4 py-2">9700</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">176</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124733"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PietroMonticone
+              </a>
+            </td>
+            <td className="px-4 py-2">9643</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">177</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122678"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                perdana
+              </a>
+            </td>
+            <td className="px-4 py-2">9598</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">178</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123131"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                paleink
+              </a>
+            </td>
+            <td className="px-4 py-2">9587</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">179</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104078"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                oubus
+              </a>
+            </td>
+            <td className="px-4 py-2">9369</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">180</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111073"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Skapis9999
+              </a>
+            </td>
+            <td className="px-4 py-2">9368</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">181</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114685"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BionicD0LPH1N
+              </a>
+            </td>
+            <td className="px-4 py-2">9324</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">182</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116584"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pierreavdb
+              </a>
+            </td>
+            <td className="px-4 py-2">9307</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">183</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118050"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nr3forecasting
+              </a>
+            </td>
+            <td className="px-4 py-2">9225</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">184</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111714"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                beala
+              </a>
+            </td>
+            <td className="px-4 py-2">9220</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">185</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106417"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                peter.wille
+              </a>
+            </td>
+            <td className="px-4 py-2">9161</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">186</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110500"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MaxR
+              </a>
+            </td>
+            <td className="px-4 py-2">9022</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">187</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103689"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Rogozjin
+              </a>
+            </td>
+            <td className="px-4 py-2">8994</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">188</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127408"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MKUltra
+              </a>
+            </td>
+            <td className="px-4 py-2">8924</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">189</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122079"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                wd28
+              </a>
+            </td>
+            <td className="px-4 py-2">8871</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">190</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100487"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                robert.spiker
+              </a>
+            </td>
+            <td className="px-4 py-2">8867</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">191</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121605"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Zermelo
+              </a>
+            </td>
+            <td className="px-4 py-2">8867</td>
+          </tr>{" "}
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">192</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126809"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                geethepredictor
+              </a>
+            </td>
+            <td className="px-4 py-2">8795</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">193</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124032"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                6250
+              </a>
+            </td>
+            <td className="px-4 py-2">8780</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">194</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124836"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                purpleorange
+              </a>
+            </td>
+            <td className="px-4 py-2">8720</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">195</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/131523"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                SpottedBear
+              </a>
+            </td>
+            <td className="px-4 py-2">8711</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">196</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112763"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                KnowName
+              </a>
+            </td>
+            <td className="px-4 py-2">8701</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">197</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/141512"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Kongo
+              </a>
+            </td>
+            <td className="px-4 py-2">8694</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">198</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110524"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                underyx
+              </a>
+            </td>
+            <td className="px-4 py-2">8691</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">199</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103771"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Sigbold
+              </a>
+            </td>
+            <td className="px-4 py-2">8558</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">200</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111776"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                orion.tjungarryi
+              </a>
+            </td>
+            <td className="px-4 py-2">8543</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">201</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109611"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                berekuk
+              </a>
+            </td>
+            <td className="px-4 py-2">8538</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">202</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123622"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Mandelbrot
+              </a>
+            </td>
+            <td className="px-4 py-2">8509</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">203</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123156"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                benmanns
+              </a>
+            </td>
+            <td className="px-4 py-2">8507</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">204</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122805"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                proc1on
+              </a>
+            </td>
+            <td className="px-4 py-2">8499</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">205</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/134857"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gustavofenollelguay
+              </a>
+            </td>
+            <td className="px-4 py-2">8492</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">206</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113860"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                RuslanBes
+              </a>
+            </td>
+            <td className="px-4 py-2">8382</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">207</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104119"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DanielG
+              </a>
+            </td>
+            <td className="px-4 py-2">8253</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">208</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117719"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mooball
+              </a>
+            </td>
+            <td className="px-4 py-2">8244</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">209</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103409"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                raven.kopelman
+              </a>
+            </td>
+            <td className="px-4 py-2">8237</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">210</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100551"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dvasya
+              </a>
+            </td>
+            <td className="px-4 py-2">8185</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">211</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123095"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                fikisipi
+              </a>
+            </td>
+            <td className="px-4 py-2">8141</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">212</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/108770"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Matthew_Barnett
+              </a>
+            </td>
+            <td className="px-4 py-2">8132</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">213</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122313"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jpmos
+              </a>
+            </td>
+            <td className="px-4 py-2">8088</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">214</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101262"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BrunoParga
+              </a>
+            </td>
+            <td className="px-4 py-2">8083</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">215</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100816"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                akarlin
+              </a>
+            </td>
+            <td className="px-4 py-2">7974</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">216</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127385"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                CivilMarigold
+              </a>
+            </td>
+            <td className="px-4 py-2">7931</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">217</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118850"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                maverickmath
+              </a>
+            </td>
+            <td className="px-4 py-2">7929</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">218</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112556"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                schelling42
+              </a>
+            </td>
+            <td className="px-4 py-2">7908</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">219</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127085"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                xfoyuo
+              </a>
+            </td>
+            <td className="px-4 py-2">7893</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">220</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100480"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                davidmanheim
+              </a>
+            </td>
+            <td className="px-4 py-2">7852</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">221</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112840"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                faz
+              </a>
+            </td>
+            <td className="px-4 py-2">7844</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">222</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119983"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rgal
+              </a>
+            </td>
+            <td className="px-4 py-2">7782</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">223</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100632"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Evernaut
+              </a>
+            </td>
+            <td className="px-4 py-2">7760</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">224</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111166"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                erwil
+              </a>
+            </td>
+            <td className="px-4 py-2">7753</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">225</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106635"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Pshyeah
+              </a>
+            </td>
+            <td className="px-4 py-2">7744</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">226</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110217"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                michal_dubrawski
+              </a>
+            </td>
+            <td className="px-4 py-2">7738</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">227</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103649"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                FranekŻak
+              </a>
+            </td>
+            <td className="px-4 py-2">7684</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">228</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112386"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                HadiKhan
+              </a>
+            </td>
+            <td className="px-4 py-2">7672</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">229</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103816"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lifi
+              </a>
+            </td>
+            <td className="px-4 py-2">7669</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">230</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120508"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                twsummer
+              </a>
+            </td>
+            <td className="px-4 py-2">7585</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">231</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119329"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BlueCarrot
+              </a>
+            </td>
+            <td className="px-4 py-2">7538</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">232</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121431"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Neniu
+              </a>
+            </td>
+            <td className="px-4 py-2">7519</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">233</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111982"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                elspeth
+              </a>
+            </td>
+            <td className="px-4 py-2">7514</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">234</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112925"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                alexlitz
+              </a>
+            </td>
+            <td className="px-4 py-2">7508</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">235</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/110548"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                oldwindways
+              </a>
+            </td>
+            <td className="px-4 py-2">7500</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">236</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107327"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mainlinevkk
+              </a>
+            </td>
+            <td className="px-4 py-2">7493</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">237</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119215"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rappatoni
+              </a>
+            </td>
+            <td className="px-4 py-2">7486</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">238</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124841"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Sune
+              </a>
+            </td>
+            <td className="px-4 py-2">7474</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">239</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101014"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Symmetry
+              </a>
+            </td>
+            <td className="px-4 py-2">7401</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">240</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105615"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                fredrik.allenmark
+              </a>
+            </td>
+            <td className="px-4 py-2">7380</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">241</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112413"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ChALkeR
+              </a>
+            </td>
+            <td className="px-4 py-2">7356</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">242</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100867"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                muzzle
+              </a>
+            </td>
+            <td className="px-4 py-2">7214</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">243</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124287"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tournoy
+              </a>
+            </td>
+            <td className="px-4 py-2">7150</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">244</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109729"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                danickschwartz
+              </a>
+            </td>
+            <td className="px-4 py-2">7119</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">245</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/131185"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                anice
+              </a>
+            </td>
+            <td className="px-4 py-2">7071</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">246</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116712"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Baisius
+              </a>
+            </td>
+            <td className="px-4 py-2">7014</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">247</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105822"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ethereal_apparel
+              </a>
+            </td>
+            <td className="px-4 py-2">6981</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">248</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112005"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nobody521
+              </a>
+            </td>
+            <td className="px-4 py-2">6958</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">249</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111998"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                m3t4
+              </a>
+            </td>
+            <td className="px-4 py-2">6948</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">250</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114597"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                feistyguar
+              </a>
+            </td>
+            <td className="px-4 py-2">6937</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">251</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114070"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Trunton
+              </a>
+            </td>
+            <td className="px-4 py-2">6925</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">252</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101815"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Longeyes
+              </a>
+            </td>
+            <td className="px-4 py-2">6883</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">253</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112656"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Morten
+              </a>
+            </td>
+            <td className="px-4 py-2">6801</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">254</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105892"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                J08nY
+              </a>
+            </td>
+            <td className="px-4 py-2">6771</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">255</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113288"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ItsRyan
+              </a>
+            </td>
+            <td className="px-4 py-2">6757</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">256</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103116"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Uncle Jeff
+              </a>
+            </td>
+            <td className="px-4 py-2">6727</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">257</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104086"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                QkpVeHovc3pkaE1
+              </a>
+            </td>
+            <td className="px-4 py-2">6702</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">258</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118844"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                moscars
+              </a>
+            </td>
+            <td className="px-4 py-2">6695</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">259</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107400"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                hartmut.prochaska
+              </a>
+            </td>
+            <td className="px-4 py-2">6654</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">260</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123227"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sigitaskeras
+              </a>
+            </td>
+            <td className="px-4 py-2">6617</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">261</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115102"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cmeinel
+              </a>
+            </td>
+            <td className="px-4 py-2">6595</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">262</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122262"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                BoringCrab
+              </a>
+            </td>
+            <td className="px-4 py-2">6571</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">263</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125275"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                soothsayer
+              </a>
+            </td>
+            <td className="px-4 py-2">6552</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">264</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113616"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TheFooder
+              </a>
+            </td>
+            <td className="px-4 py-2">6549</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">265</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115063"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dwarn
+              </a>
+            </td>
+            <td className="px-4 py-2">6526</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">266</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123873"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                hyperflare
+              </a>
+            </td>
+            <td className="px-4 py-2">6519</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">267</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122384"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tomasz
+              </a>
+            </td>
+            <td className="px-4 py-2">6508</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">268</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112164"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JamesEvans
+              </a>
+            </td>
+            <td className="px-4 py-2">6482</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">269</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120949"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                freddie.poser
+              </a>
+            </td>
+            <td className="px-4 py-2">6475</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">270</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117829"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ramble
+              </a>
+            </td>
+            <td className="px-4 py-2">6443</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">271</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117833"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                q_rat
+              </a>
+            </td>
+            <td className="px-4 py-2">6431</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">272</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122283"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Lowe
+              </a>
+            </td>
+            <td className="px-4 py-2">6410</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">273</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113068"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TheSingleMalt
+              </a>
+            </td>
+            <td className="px-4 py-2">6403</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">274</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/145075"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cjwilliams
+              </a>
+            </td>
+            <td className="px-4 py-2">6395</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">275</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112852"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                vanev_
+              </a>
+            </td>
+            <td className="px-4 py-2">6371</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">276</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103827"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                r.grannell2
+              </a>
+            </td>
+            <td className="px-4 py-2">6367</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">277</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115191"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                propwash
+              </a>
+            </td>
+            <td className="px-4 py-2">6366</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">278</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123681"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                chazo
+              </a>
+            </td>
+            <td className="px-4 py-2">6321</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">279</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119478"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                biak.contramao
+              </a>
+            </td>
+            <td className="px-4 py-2">6314</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">280</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102221"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Random5
+              </a>
+            </td>
+            <td className="px-4 py-2">6306</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">281</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112167"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                waebi
+              </a>
+            </td>
+            <td className="px-4 py-2">6302</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">282</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114075"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PedeJo
+              </a>
+            </td>
+            <td className="px-4 py-2">6265</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">283</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126018"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Eristafuci
+              </a>
+            </td>
+            <td className="px-4 py-2">6259</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">284</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102756"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                samlichtenstein
+              </a>
+            </td>
+            <td className="px-4 py-2">6257</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">285</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115153"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                EmanueleAscani
+              </a>
+            </td>
+            <td className="px-4 py-2">6213</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">286</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/132879"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tbyoln
+              </a>
+            </td>
+            <td className="px-4 py-2">6191</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">287</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109348"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Meefburger
+              </a>
+            </td>
+            <td className="px-4 py-2">6123</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">288</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104540"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sebk
+              </a>
+            </td>
+            <td className="px-4 py-2">6112</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">289</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103072"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                edikatta
+              </a>
+            </td>
+            <td className="px-4 py-2">6108</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">290</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123205"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ce
+              </a>
+            </td>
+            <td className="px-4 py-2">6105</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">291</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109680"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Jim1776
+              </a>
+            </td>
+            <td className="px-4 py-2">6080</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">292</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114082"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Shiremonkey
+              </a>
+            </td>
+            <td className="px-4 py-2">6072</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">293</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122416"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                camelCase
+              </a>
+            </td>
+            <td className="px-4 py-2">6065</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">294</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125921"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                thot_experiment
+              </a>
+            </td>
+            <td className="px-4 py-2">6064</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">295</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103503"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                andymartin
+              </a>
+            </td>
+            <td className="px-4 py-2">6060</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">296</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112196"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                KnowThyself
+              </a>
+            </td>
+            <td className="px-4 py-2">6045</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">297</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119876"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mlsbt
+              </a>
+            </td>
+            <td className="px-4 py-2">6034</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">298</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103418"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jo
+              </a>
+            </td>
+            <td className="px-4 py-2">6032</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">299</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124323"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                LukasD
+              </a>
+            </td>
+            <td className="px-4 py-2">6008</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">300</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119978"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Torrent
+              </a>
+            </td>
+            <td className="px-4 py-2">5976</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">301</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112669"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                niklaswik
+              </a>
+            </td>
+            <td className="px-4 py-2">5965</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">302</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133711"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Stilico
+              </a>
+            </td>
+            <td className="px-4 py-2">5963</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">303</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124809"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lkr
+              </a>
+            </td>
+            <td className="px-4 py-2">5942</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">304</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120641"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tallmtt
+              </a>
+            </td>
+            <td className="px-4 py-2">5931</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">305</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119084"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ThemeArrow
+              </a>
+            </td>
+            <td className="px-4 py-2">5928</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">306</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113008"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                minnow_beacon
+              </a>
+            </td>
+            <td className="px-4 py-2">5884</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">307</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121560"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Dumbledores_Army
+              </a>
+            </td>
+            <td className="px-4 py-2">5861</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">308</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112956"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tinysat
+              </a>
+            </td>
+            <td className="px-4 py-2">5838</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">309</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133489"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                notlezah
+              </a>
+            </td>
+            <td className="px-4 py-2">5838</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">310</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114973"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                popplegg
+              </a>
+            </td>
+            <td className="px-4 py-2">5807</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">311</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123893"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PeterDowdy
+              </a>
+            </td>
+            <td className="px-4 py-2">5785</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">312</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119706"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Slurp
+              </a>
+            </td>
+            <td className="px-4 py-2">5778</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">313</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/145394"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                41Haiku
+              </a>
+            </td>
+            <td className="px-4 py-2">5778</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">314</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114171"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mavrande
+              </a>
+            </td>
+            <td className="px-4 py-2">5753</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">315</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117537"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AndrewMundy
+              </a>
+            </td>
+            <td className="px-4 py-2">5753</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">316</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118126"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                trapclap
+              </a>
+            </td>
+            <td className="px-4 py-2">5748</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">317</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/137079"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Heramb_42
+              </a>
+            </td>
+            <td className="px-4 py-2">5713</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">318</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117281"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                thezvi
+              </a>
+            </td>
+            <td className="px-4 py-2">5712</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">319</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120381"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mattvague
+              </a>
+            </td>
+            <td className="px-4 py-2">5699</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">320</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106736"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nagolinc
+              </a>
+            </td>
+            <td className="px-4 py-2">5697</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">321</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109190"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                NeilDullaghan
+              </a>
+            </td>
+            <td className="px-4 py-2">5671</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">322</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112850"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Jrob6122
+              </a>
+            </td>
+            <td className="px-4 py-2">5645</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">323</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113965"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gordonfierce
+              </a>
+            </td>
+            <td className="px-4 py-2">5633</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">324</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126697"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cjlemontea
+              </a>
+            </td>
+            <td className="px-4 py-2">5625</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">325</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102781"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                durbanus
+              </a>
+            </td>
+            <td className="px-4 py-2">5618</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">326</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123371"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                hawkebia
+              </a>
+            </td>
+            <td className="px-4 py-2">5617</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">327</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118218"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                qjh
+              </a>
+            </td>
+            <td className="px-4 py-2">5565</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">328</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133825"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mjs
+              </a>
+            </td>
+            <td className="px-4 py-2">5540</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">329</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100558"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ChristianKleineidam
+              </a>
+            </td>
+            <td className="px-4 py-2">5535</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">330</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116420"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                PMC_UwU
+              </a>
+            </td>
+            <td className="px-4 py-2">5525</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">331</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/120244"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                renan
+              </a>
+            </td>
+            <td className="px-4 py-2">5519</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">332</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111970"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                j.m.
+              </a>
+            </td>
+            <td className="px-4 py-2">5505</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">333</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113933"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                puffymist
+              </a>
+            </td>
+            <td className="px-4 py-2">5487</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">334</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101930"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                postmort
+              </a>
+            </td>
+            <td className="px-4 py-2">5484</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">335</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113007"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MaxG
+              </a>
+            </td>
+            <td className="px-4 py-2">5482</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">336</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125612"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                santithebest
+              </a>
+            </td>
+            <td className="px-4 py-2">5474</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">337</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115580"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Aithir
+              </a>
+            </td>
+            <td className="px-4 py-2">5466</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">338</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133827"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                partlygloudy
+              </a>
+            </td>
+            <td className="px-4 py-2">5461</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">339</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112966"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                leon.waterman
+              </a>
+            </td>
+            <td className="px-4 py-2">5424</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">340</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100403"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jaketchm
+              </a>
+            </td>
+            <td className="px-4 py-2">5413</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">341</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119805"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Astra
+              </a>
+            </td>
+            <td className="px-4 py-2">5404</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">342</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111330"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cyrusthegreat
+              </a>
+            </td>
+            <td className="px-4 py-2">5399</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">343</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100552"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                WilliamKiely
+              </a>
+            </td>
+            <td className="px-4 py-2">5394</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">344</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122458"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Laurency
+              </a>
+            </td>
+            <td className="px-4 py-2">5391</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">345</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104694"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                metani
+              </a>
+            </td>
+            <td className="px-4 py-2">5365</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">346</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112790"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                milesskorpen
+              </a>
+            </td>
+            <td className="px-4 py-2">5342</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">347</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100067"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                benelson7
+              </a>
+            </td>
+            <td className="px-4 py-2">5329</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">348</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100338"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                llamaquack1
+              </a>
+            </td>
+            <td className="px-4 py-2">5328</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">349</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123618"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                uran235
+              </a>
+            </td>
+            <td className="px-4 py-2">5314</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">350</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124758"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                arcxi
+              </a>
+            </td>
+            <td className="px-4 py-2">5308</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">351</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103825"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                qwertie256
+              </a>
+            </td>
+            <td className="px-4 py-2">5296</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">352</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122125"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                yigido
+              </a>
+            </td>
+            <td className="px-4 py-2">5283</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">353</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115523"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                moreheadm
+              </a>
+            </td>
+            <td className="px-4 py-2">5279</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">354</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/151993"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rednamlooc
+              </a>
+            </td>
+            <td className="px-4 py-2">5234</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">355</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107288"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Psykokwak
+              </a>
+            </td>
+            <td className="px-4 py-2">5225</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">356</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114735"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dsj
+              </a>
+            </td>
+            <td className="px-4 py-2">5220</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">357</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126516"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                SoaringMoon
+              </a>
+            </td>
+            <td className="px-4 py-2">5211</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">358</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116080"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                thmt
+              </a>
+            </td>
+            <td className="px-4 py-2">5198</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">359</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125846"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Kami
+              </a>
+            </td>
+            <td className="px-4 py-2">5175</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">360</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126896"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                saucy_intruder
+              </a>
+            </td>
+            <td className="px-4 py-2">5156</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">361</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117529"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cos
+              </a>
+            </td>
+            <td className="px-4 py-2">5155</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">362</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121445"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                laika
+              </a>
+            </td>
+            <td className="px-4 py-2">5128</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">363</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117720"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Miikka
+              </a>
+            </td>
+            <td className="px-4 py-2">5120</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">364</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117905"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                oumeen
+              </a>
+            </td>
+            <td className="px-4 py-2">5116</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">365</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119885"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JonathanMann
+              </a>
+            </td>
+            <td className="px-4 py-2">5109</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">366</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125291"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cheeseboy
+              </a>
+            </td>
+            <td className="px-4 py-2">5087</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">367</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123797"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JacobMalach
+              </a>
+            </td>
+            <td className="px-4 py-2">5078</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">368</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117522"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Simulacrum
+              </a>
+            </td>
+            <td className="px-4 py-2">5076</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">369</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113822"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cibyr
+              </a>
+            </td>
+            <td className="px-4 py-2">5051</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">370</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113177"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                clearthis
+              </a>
+            </td>
+            <td className="px-4 py-2">5050</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">371</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111702"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                StevenLochner
+              </a>
+            </td>
+            <td className="px-4 py-2">5039</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">372</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114958"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                bitshift
+              </a>
+            </td>
+            <td className="px-4 py-2">5018</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">373</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/129497"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                SalvadorBuse
+              </a>
+            </td>
+            <td className="px-4 py-2">5015</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">374</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103772"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                alcherblack
+              </a>
+            </td>
+            <td className="px-4 py-2">4997</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">375</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112643"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lauren
+              </a>
+            </td>
+            <td className="px-4 py-2">4990</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">376</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113867"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gmc
+              </a>
+            </td>
+            <td className="px-4 py-2">4984</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">377</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/136564"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aspRtnl
+              </a>
+            </td>
+            <td className="px-4 py-2">4984</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">378</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111849"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ajaxecles
+              </a>
+            </td>
+            <td className="px-4 py-2">4972</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">379</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113957"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                toms
+              </a>
+            </td>
+            <td className="px-4 py-2">4966</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">380</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125169"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                RickMcCoy
+              </a>
+            </td>
+            <td className="px-4 py-2">4965</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">381</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100597"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ghabs
+              </a>
+            </td>
+            <td className="px-4 py-2">4952</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">382</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/141530"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                einer
+              </a>
+            </td>
+            <td className="px-4 py-2">4952</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">383</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114017"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Kaleem
+              </a>
+            </td>
+            <td className="px-4 py-2">4914</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">384</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/109938"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ninjaedit
+              </a>
+            </td>
+            <td className="px-4 py-2">4907</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">385</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111327"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                adekcz
+              </a>
+            </td>
+            <td className="px-4 py-2">4892</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">386</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/141680"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MaximusMinimus
+              </a>
+            </td>
+            <td className="px-4 py-2">4884</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">387</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123490"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pepsiclear
+              </a>
+            </td>
+            <td className="px-4 py-2">4883</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">388</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112343"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                easystar
+              </a>
+            </td>
+            <td className="px-4 py-2">4873</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">389</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122939"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Balasar
+              </a>
+            </td>
+            <td className="px-4 py-2">4861</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">390</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126296"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dosimetrist
+              </a>
+            </td>
+            <td className="px-4 py-2">4860</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">391</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121773"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                equationist
+              </a>
+            </td>
+            <td className="px-4 py-2">4852</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">392</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114703"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JackW
+              </a>
+            </td>
+            <td className="px-4 py-2">4814</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">393</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123920"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                elegantelephant
+              </a>
+            </td>
+            <td className="px-4 py-2">4809</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">394</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127723"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ataman1977
+              </a>
+            </td>
+            <td className="px-4 py-2">4792</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">395</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/151573"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                hyjop
+              </a>
+            </td>
+            <td className="px-4 py-2">4758</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">396</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/137933"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                dittopoop
+              </a>
+            </td>
+            <td className="px-4 py-2">4736</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">397</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124311"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                marekondrejka
+              </a>
+            </td>
+            <td className="px-4 py-2">4735</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">398</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121180"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kaarelh
+              </a>
+            </td>
+            <td className="px-4 py-2">4732</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">399</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116844"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                prigoryan
+              </a>
+            </td>
+            <td className="px-4 py-2">4731</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">400</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121120"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sircaesar
+              </a>
+            </td>
+            <td className="px-4 py-2">4720</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">401</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112125"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nwj
+              </a>
+            </td>
+            <td className="px-4 py-2">4710</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">402</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123408"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Laplace
+              </a>
+            </td>
+            <td className="px-4 py-2">4710</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">403</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106982"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DrMatt
+              </a>
+            </td>
+            <td className="px-4 py-2">4702</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">404</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112342"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nostream
+              </a>
+            </td>
+            <td className="px-4 py-2">4679</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">405</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103832"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Tayaama
+              </a>
+            </td>
+            <td className="px-4 py-2">4652</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">406</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/133888"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nataliem
+              </a>
+            </td>
+            <td className="px-4 py-2">4588</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">407</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116324"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                zc
+              </a>
+            </td>
+            <td className="px-4 py-2">4581</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">408</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103695"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gdcs3
+              </a>
+            </td>
+            <td className="px-4 py-2">4580</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">409</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125165"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                QI92756340QI
+              </a>
+            </td>
+            <td className="px-4 py-2">4576</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">410</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112288"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mishasamin
+              </a>
+            </td>
+            <td className="px-4 py-2">4563</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">411</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116446"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                nostramus
+              </a>
+            </td>
+            <td className="px-4 py-2">4537</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">412</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103416"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AlertFoxes
+              </a>
+            </td>
+            <td className="px-4 py-2">4498</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">413</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102965"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                JavierSouto
+              </a>
+            </td>
+            <td className="px-4 py-2">4496</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">414</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103181"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                erik.bjareholt
+              </a>
+            </td>
+            <td className="px-4 py-2">4484</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">415</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112373"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Arcturus
+              </a>
+            </td>
+            <td className="px-4 py-2">4474</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">416</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/101002"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                babtras
+              </a>
+            </td>
+            <td className="px-4 py-2">4469</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">417</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115982"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                taskaryan
+              </a>
+            </td>
+            <td className="px-4 py-2">4466</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">418</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113981"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kenakofer
+              </a>
+            </td>
+            <td className="px-4 py-2">4457</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">419</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115397"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sergeant1337
+              </a>
+            </td>
+            <td className="px-4 py-2">4444</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">420</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114215"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ZeroInsight
+              </a>
+            </td>
+            <td className="px-4 py-2">4437</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">421</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104876"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MacGyver
+              </a>
+            </td>
+            <td className="px-4 py-2">4421</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">422</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126886"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                anegelya
+              </a>
+            </td>
+            <td className="px-4 py-2">4419</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">423</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100401"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Skj
+              </a>
+            </td>
+            <td className="px-4 py-2">4412</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">424</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116480"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ArgyropoulosA
+              </a>
+            </td>
+            <td className="px-4 py-2">4404</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">425</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122658"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Sean85
+              </a>
+            </td>
+            <td className="px-4 py-2">4401</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">426</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118562"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                edward.wilkinson6
+              </a>
+            </td>
+            <td className="px-4 py-2">4395</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">427</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103653"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kale
+              </a>
+            </td>
+            <td className="px-4 py-2">4389</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">428</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121361"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Randomness
+              </a>
+            </td>
+            <td className="px-4 py-2">4341</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">429</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117367"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mutecypher
+              </a>
+            </td>
+            <td className="px-4 py-2">4336</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">430</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/132173"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Hex_49
+              </a>
+            </td>
+            <td className="px-4 py-2">4326</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">431</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113950"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AnotherWorld
+              </a>
+            </td>
+            <td className="px-4 py-2">4314</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">432</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118226"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                eidanjacob
+              </a>
+            </td>
+            <td className="px-4 py-2">4305</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">433</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111268"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lisan
+              </a>
+            </td>
+            <td className="px-4 py-2">4296</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">434</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124771"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                adrunkhuman
+              </a>
+            </td>
+            <td className="px-4 py-2">4295</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">435</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122765"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Dmo
+              </a>
+            </td>
+            <td className="px-4 py-2">4291</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">436</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/149116"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ketchal
+              </a>
+            </td>
+            <td className="px-4 py-2">4281</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">437</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100333"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Wineclaw
+              </a>
+            </td>
+            <td className="px-4 py-2">4276</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">438</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112560"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                avdeevdan
+              </a>
+            </td>
+            <td className="px-4 py-2">4266</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">439</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104069"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                LCEnzo
+              </a>
+            </td>
+            <td className="px-4 py-2">4261</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">440</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116069"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                TinCan
+              </a>
+            </td>
+            <td className="px-4 py-2">4220</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">441</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107642"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                olliebase22
+              </a>
+            </td>
+            <td className="px-4 py-2">4218</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">442</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114032"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DerekTank
+              </a>
+            </td>
+            <td className="px-4 py-2">4215</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">443</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/127067"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                silence
+              </a>
+            </td>
+            <td className="px-4 py-2">4213</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">444</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113128"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                DavidRhysBernard
+              </a>
+            </td>
+            <td className="px-4 py-2">4210</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">445</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100147"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Occam
+              </a>
+            </td>
+            <td className="px-4 py-2">4197</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">446</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103246"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lumpenspace
+              </a>
+            </td>
+            <td className="px-4 py-2">4188</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">447</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/107386"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jhknot
+              </a>
+            </td>
+            <td className="px-4 py-2">4178</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">448</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100442"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rafiss
+              </a>
+            </td>
+            <td className="px-4 py-2">4175</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">449</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112172"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                ethulin
+              </a>
+            </td>
+            <td className="px-4 py-2">4129</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">450</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105552"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jason_k
+              </a>
+            </td>
+            <td className="px-4 py-2">4105</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">451</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/122635"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                KyooQ
+              </a>
+            </td>
+            <td className="px-4 py-2">4104</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">452</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102423"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Cloud breaker
+              </a>
+            </td>
+            <td className="px-4 py-2">4070</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">453</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/149007"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aoeiur
+              </a>
+            </td>
+            <td className="px-4 py-2">4064</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">454</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114164"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                muhammedcankucukaslan
+              </a>
+            </td>
+            <td className="px-4 py-2">4056</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">455</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/137515"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                gepisar
+              </a>
+            </td>
+            <td className="px-4 py-2">4052</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">456</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/111993"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                optimaloption
+              </a>
+            </td>
+            <td className="px-4 py-2">4050</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">457</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123882"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                kcd.bad
+              </a>
+            </td>
+            <td className="px-4 py-2">4032</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">458</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116800"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                aixi
+              </a>
+            </td>
+            <td className="px-4 py-2">4032</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">459</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115151"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                negation
+              </a>
+            </td>
+            <td className="px-4 py-2">4031</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">460</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103451"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                tom_sittler
+              </a>
+            </td>
+            <td className="px-4 py-2">4006</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">461</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/113582"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                silly
+              </a>
+            </td>
+            <td className="px-4 py-2">4004</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">462</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/142372"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cordistancer
+              </a>
+            </td>
+            <td className="px-4 py-2">4003</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">463</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/132186"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                electricdreams
+              </a>
+            </td>
+            <td className="px-4 py-2">3997</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">464</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/146248"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                GOLDEN-BLUE
+              </a>
+            </td>
+            <td className="px-4 py-2">3995</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">465</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/103593"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jacobklagerros
+              </a>
+            </td>
+            <td className="px-4 py-2">3987</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">466</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117139"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                billmo
+              </a>
+            </td>
+            <td className="px-4 py-2">3974</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">467</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/128784"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                benj83
+              </a>
+            </td>
+            <td className="px-4 py-2">3968</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">468</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/106870"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                FNORD
+              </a>
+            </td>
+            <td className="px-4 py-2">3966</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">469</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100739"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AlexRay
+              </a>
+            </td>
+            <td className="px-4 py-2">3961</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">470</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/130633"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Rinnegan
+              </a>
+            </td>
+            <td className="px-4 py-2">3947</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">471</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/116488"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Mattie-Liz
+              </a>
+            </td>
+            <td className="px-4 py-2">3939</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">472</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118382"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                EfficientMarkusHypo
+              </a>
+            </td>
+            <td className="px-4 py-2">3936</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">473</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126016"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                scippio
+              </a>
+            </td>
+            <td className="px-4 py-2">3932</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">474</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/118658"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                demirev
+              </a>
+            </td>
+            <td className="px-4 py-2">3931</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">475</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125085"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                cdo256
+              </a>
+            </td>
+            <td className="px-4 py-2">3918</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">476</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/100402"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Spirit59
+              </a>
+            </td>
+            <td className="px-4 py-2">3902</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">477</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124802"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                igoris
+              </a>
+            </td>
+            <td className="px-4 py-2">3901</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">478</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124826"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Eltanin
+              </a>
+            </td>
+            <td className="px-4 py-2">3900</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">479</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/151417"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                junky
+              </a>
+            </td>
+            <td className="px-4 py-2">3884</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">480</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112208"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                AmbroseWinters
+              </a>
+            </td>
+            <td className="px-4 py-2">3881</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">481</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114056"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                MuireallPrase
+              </a>
+            </td>
+            <td className="px-4 py-2">3869</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">482</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/105705"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jwsx
+              </a>
+            </td>
+            <td className="px-4 py-2">3849</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">483</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/136555"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Invert_DOG_about_centre_O
+              </a>
+            </td>
+            <td className="px-4 py-2">3847</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">484</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102085"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                WhySpace
+              </a>
+            </td>
+            <td className="px-4 py-2">3837</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">485</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/129140"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                rws
+              </a>
+            </td>
+            <td className="px-4 py-2">3809</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">486</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/126429"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                drandallfisher
+              </a>
+            </td>
+            <td className="px-4 py-2">3798</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">487</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112385"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                spacemanfromvenus
+              </a>
+            </td>
+            <td className="px-4 py-2">3781</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">488</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/114851"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pseudo
+              </a>
+            </td>
+            <td className="px-4 py-2">3773</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">489</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/104622"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Order
+              </a>
+            </td>
+            <td className="px-4 py-2">3731</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">490</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121426"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                pelegsh
+              </a>
+            </td>
+            <td className="px-4 py-2">3720</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">491</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/102294"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                9272
+              </a>
+            </td>
+            <td className="px-4 py-2">3716</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">492</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/125046"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                starshine
+              </a>
+            </td>
+            <td className="px-4 py-2">3709</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">493</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/117494"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                z1bbo
+              </a>
+            </td>
+            <td className="px-4 py-2">3708</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">494</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123746"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                sitte.adam
+              </a>
+            </td>
+            <td className="px-4 py-2">3694</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">495</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/112680"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                lagarto
+              </a>
+            </td>
+            <td className="px-4 py-2">3692</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">496</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/115575"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                WPR
+              </a>
+            </td>
+            <td className="px-4 py-2">3689</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">497</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/119161"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                somebody_else
+              </a>
+            </td>
+            <td className="px-4 py-2">3669</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">498</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/121212"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                jvxp
+              </a>
+            </td>
+            <td className="px-4 py-2">3656</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">499</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/124957"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                Vas75
+              </a>
+            </td>
+            <td className="px-4 py-2">3656</td>
+          </tr>
+          <tr className="border-b border-blue-400 dark:border-blue-700/50">
+            <td className="px-4 py-2">500</td>
+            <td className="px-4 py-2">
+              <a
+                href="/accounts/profile/123757"
+                className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+              >
+                mstub
+              </a>
+            </td>
+            <td className="px-4 py-2">3656</td>
+          </tr>
+        </tbody>
+      </table>
+    </PageWrapper>
+  );
+}