Update.

app.py

@@ -192,6 +192,13 @@ with blocks:
             gr.HTML(WHAT_IS_F1_HTML)
 
         with gr.TabItem("FormulaOne Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
+            gr.Markdown(
+                """
+                Welcome to the FormulaOne leaderboard. This table tracks the performance of various systems on the FormulaOne benchmark.
+                Use the "Select Columns to Display" dropdown to customize your view, and the search bar to find specific models or organizations.
+                """,
+                elem_classes="markdown-text",
+            )
             refresh_leaderboard_data()
             assert leaderboard_df is not None
             leaderboard_component = init_leaderboard(leaderboard_df)

src/about.py

@@ -14,30 +14,20 @@ WHAT_IS_F1_HTML = f"""
             <p class="text-lg mb-4 f1-p">We believe that existing benchmarks fail to capture the deep reasoning skills required for complex, research-level algorithmic problems. To address this gap, <a href="{PAPER_URL}" target="_blank" rel="noopener noreferrer" class="f1-a">we introduce <strong>FormulaOne</strong></a>.</p>
             <p class="mb-4 f1-p"><strong>FormulaOne</strong> consists of 220 novel dynamic programming problems over graphs. The problems are organised into three categories, ranging from moderate difficulty and all the way up to research-level.</p>
             
-            <!-- Nicely Styled Table -->
-            <div class="overflow-hidden overflow-x-auto rounded-lg border border-gray-200 my-8">
-                <table class="min-w-full divide-y divide-gray-200 text-sm">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">Category</th>
-                            <th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">Description</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200">
-                        <tr>
-                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Warmup</strong></td>
-                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 100 “easier” problems.</td>
-                        </tr>
-                        <tr>
-                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Tier 1</strong></td>
-                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 100 challenging problems.</td>
-                        </tr>
-                        <tr>
-                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Tier 2</strong></td>
-                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 20 highly challenging problems.</td>
-                        </tr>
-                    </tbody>
-                </table>
+            <!-- Nicely Styled Card Layout for Categories -->
+            <div class="my-8 grid grid-cols-1 gap-4 sm:grid-cols-3 text-center">
+                <div class="f1-category-card">
+                    <h3 class="text-lg font-bold text-gray-900">FormulaOne Warmup</h3>
+                    <p class="mt-1 text-sm text-gray-600">A set of 100 “easier” problems.</p>
+                </div>
+                <div class="f1-category-card">
+                    <h3 class="text-lg font-bold text-gray-900">FormulaOne Tier 1</h3>
+                    <p class="mt-1 text-sm text-gray-600">A set of 100 challenging problems.</p>
+                </div>
+                <div class="f1-category-card">
+                    <h3 class="text-lg font-bold text-gray-900">FormulaOne Tier 2</h3>
+                    <p class="mt-1 text-sm text-gray-600">A set of 20 highly challenging problems.</p>
+                </div>
             </div>
 
             <!-- Tabbed Problem Viewer -->

src/display/css_html_js.py

@@ -1,5 +1,3 @@
-# src/display/css_html_js.py
-
 custom_css = """
 .markdown-text {
     font-size: 16px !important;
@@ -36,7 +34,7 @@ button[role="tab"] {
 #box-filter > .form{ border: 0 }
 
 /* Light Theme Styles for the "What is FormulaOne" HTML content */
-.f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: #111827; text-align: center; margin-bottom: 3rem;}
+.f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: #111827; text-align: center; margin-bottom: 3rem !important;}
 .f1-h2 { font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 1.5rem; color: #111827; font-size: 1.875rem; line-height: 2.25rem; }
 .f1-p, .f1-li { line-height: 1.75; color: #374151; }
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
@@ -44,12 +42,29 @@ button[role="tab"] {
 .f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
 .f1-problem-box { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
 .f1-problem-box strong { color: #111827; }
-.f1-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; }
-.f1-th, .f1-td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; }
-.f1-th { background-color: #f9fafb; font-weight: 600; color: #374151; }
 .f1-figure { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
 .f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; font-style: italic; }
 .problem-tab-button { cursor: pointer; }
+
+/* New styles for the category cards */
+.f1-category-card {
+    display: block;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+    padding: 1rem;
+    background-color: white;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+/* Override for the dark Login Button */
+div[data-testid="login-button"] > button {
+    background: #ffffff !important;
+    color: #374151 !important;
+    border: 1px solid #d1d5db !important;
+}
+div[data-testid="login-button"] > button:hover {
+    background: #f9fafb !important;
+}
 """
 
 get_window_url_params = """