update front

client/src/components/LeaderboardCard.jsx

@@ -71,7 +71,7 @@ const LeaderboardCard = ({ leaderboard }) => {
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: "rgba(0, 0, 0, 0.1)",
+              backgroundColor: "rgba(0, 0, 0, 0.15)",
               pointerEvents: "none",
               zIndex: 1,
             },

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -24,9 +24,11 @@ const LeaderboardFilters = ({ allSections }) => {
     totalLeaderboards,
     filteredCount,
     filterLeaderboards,
+    leaderboards,
   } = useLeaderboard();
 
   const [inputValue, setInputValue] = useState("");
+  const [totalArenaCount, setTotalArenaCount] = useState(0);
   const debouncedSearch = useDebounce(inputValue, 200);
 
   // Update the search query after debounce
@@ -34,6 +36,16 @@ const LeaderboardFilters = ({ allSections }) => {
     setSearchQuery(debouncedSearch);
   }, [debouncedSearch, setSearchQuery]);
 
+  // Update total arena count when toggle changes
+  React.useEffect(() => {
+    if (arenaOnly) {
+      const arenaCount = leaderboards.filter((board) =>
+        board.tags?.includes("judge:humans")
+      ).length;
+      setTotalArenaCount(arenaCount);
+    }
+  }, [arenaOnly, leaderboards]);
+
   // Check if any filter is active
   const isFilterActive = debouncedSearch || arenaOnly;
 
@@ -158,18 +170,55 @@ const LeaderboardFilters = ({ allSections }) => {
             endAdornment: (
               <InputAdornment position="end">
                 <Stack direction="row" spacing={2} alignItems="center">
-                  <Typography
-                    variant="body2"
-                    sx={{
-                      color: isFilterActive ? "primary.main" : "text.secondary",
-                      fontWeight: isFilterActive ? 500 : 400,
-                    }}
-                  >
-                    {isFilterActive
-                      ? `${filteredCount}/${totalLeaderboards}`
-                      : totalLeaderboards}{" "}
-                    leaderboards
-                  </Typography>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: debouncedSearch
+                          ? "primary.main"
+                          : "text.secondary",
+                        fontWeight: 500,
+                      }}
+                    >
+                      {filteredCount}
+                    </Typography>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        color: arenaOnly ? "secondary.main" : "text.secondary",
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          fontWeight: 500,
+                          mx: 0.5,
+                        }}
+                      >
+                        /
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          fontWeight: 500,
+                        }}
+                      >
+                        {arenaOnly ? totalArenaCount : totalLeaderboards}
+                      </Typography>
+                    </Box>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: "text.secondary",
+                        fontWeight: 400,
+                        ml: 0.5,
+                      }}
+                    >
+                      leaderboards
+                    </Typography>
+                  </Box>
+
                   <Divider orientation="vertical" flexItem />
                   <FormControlLabel
                     control={
@@ -177,10 +226,25 @@ const LeaderboardFilters = ({ allSections }) => {
                         checked={arenaOnly}
                         onChange={(e) => setArenaOnly(e.target.checked)}
                         size="small"
+                        color="secondary"
+                        sx={{
+                          "&.Mui-checked": {
+                            color: "secondary.light",
+                            "& .MuiSwitch-track": {
+                              backgroundColor: "secondary.light",
+                            },
+                          },
+                        }}
                       />
                     }
                     label={isMobile ? "Arena only" : "Show arena only"}
-                    sx={{ mr: 0 }}
+                    sx={{
+                      mr: 0,
+                      "& .MuiFormControlLabel-label": {
+                        color: arenaOnly ? "secondary.light" : "inherit",
+                        userSelect: arenaOnly ? "none" : "auto",
+                      },
+                    }}
                   />
                 </Stack>
               </InputAdornment>

client/src/components/LeaderboardSection.jsx

@@ -22,6 +22,9 @@ const LeaderboardSection = ({ title, leaderboards }) => {
     setExpanded(!expanded);
   };
 
+  // Calculate how many skeletons we need
+  const skeletonsNeeded = Math.max(0, 3 - leaderboards.length);
+
   return (
     <Box sx={{ mb: 6 }}>
       <Box
@@ -95,11 +98,28 @@ const LeaderboardSection = ({ title, leaderboards }) => {
         )}
       </Box>
       <Grid container spacing={3}>
-        {leaderboards.slice(0, ITEMS_PER_PAGE).map((leaderboard, index) => (
+        {displayedLeaderboards.map((leaderboard, index) => (
           <Grid item xs={12} sm={6} md={4} key={index}>
             <LeaderboardCard leaderboard={leaderboard} />
           </Grid>
         ))}
+        {/* Add skeletons if needed */}
+        {Array.from({ length: skeletonsNeeded }).map((_, index) => (
+          <Grid item xs={12} sm={6} md={4} key={`skeleton-${index}`}>
+            <Box
+              sx={{
+                height: "180px",
+                borderRadius: 2,
+                bgcolor: (theme) => alpha(theme.palette.primary.main, 0.15),
+                opacity: 1,
+                transition: "opacity 0.3s ease-in-out",
+                "&:hover": {
+                  opacity: 0.8,
+                },
+              }}
+            />
+          </Grid>
+        ))}
       </Grid>
       <Collapse in={showAll} timeout={300}>
         <Grid container spacing={3} sx={{ mt: 0 }}>

client/src/components/Logo/Logo.jsx

@@ -33,6 +33,7 @@ const Logo = () => {
           margin: "0 auto",
           position: "relative",
           zIndex: 1,
+          opacity: (theme) => (theme.palette.mode === "dark" ? 0.8 : 1),
         }}
       />
     </Link>

client/src/components/PageTitle/PageTitle.jsx

@@ -16,7 +16,7 @@ const PageTitle = () => {
       fontWeight="900"
       variant="h3"
       component="h1"
-      color="#364254"
+      color="text.primary"
       sx={{
         display: "flex",
         justifyContent: "center",
@@ -50,6 +50,10 @@ const PageTitle = () => {
                       left: "21px",
                       transform: "translateX(-50%)",
                       width: "13px",
+                      filter: (theme) =>
+                        theme.palette.mode === "dark"
+                          ? "invert(1) brightness(2)"
+                          : "none",
                     }}
                   />
                 )}

client/src/config/theme.js

@@ -84,9 +84,11 @@ const getDesignTokens = (mode) => ({
   components: {
     MuiCssBaseline: {
       styleOverrides: {
-        "html, body": {
-          backgroundColor: "background.default",
-          color: mode === "dark" ? "#fff" : "#000",
+        html: {
+          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
+        },
+        body: {
+          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
         },
       },
     },

client/src/context/LeaderboardContext.jsx

@@ -21,34 +21,38 @@ export const LeaderboardProvider = ({ children }) => {
 
   // Filter functions for categories
   const filterByTag = useCallback((tag, boards) => {
+    const searchTag = tag.toLowerCase();
+    console.log("Filtering by tag:", {
+      searchTag,
+      boards: boards?.map((board) => ({
+        id: board.id,
+        tags: board.tags,
+        matches: {
+          tags: board.tags?.some((t) => t.toLowerCase() === searchTag),
+        },
+      })),
+    });
     return (
-      boards?.filter(
-        (board) =>
-          board.tags?.includes(tag) || board.consolidated_tags?.includes(tag)
+      boards?.filter((board) =>
+        board.tags?.some((t) => t.toLowerCase() === searchTag)
       ) || []
     );
   }, []);
 
   const filterByLanguage = useCallback((boards) => {
     return (
-      boards?.filter(
-        (board) =>
-          board.tags?.some((tag) => tag.startsWith("language:")) ||
-          board.consolidated_tags?.some((tag) => tag.startsWith("language:"))
+      boards?.filter((board) =>
+        board.tags?.some((tag) => tag.startsWith("language:"))
       ) || []
     );
   }, []);
 
   const filterByVision = useCallback((boards) => {
     return (
-      boards?.filter(
-        (board) =>
-          board.tags?.some(
-            (tag) => tag === "modality:video" || tag === "modality:image"
-          ) ||
-          board.consolidated_tags?.some(
-            (tag) => tag === "modality:video" || tag === "modality:image"
-          )
+      boards?.filter((board) =>
+        board.tags?.some(
+          (tag) => tag === "modality:video" || tag === "modality:image"
+        )
       ) || []
     );
   }, []);
@@ -57,10 +61,11 @@ export const LeaderboardProvider = ({ children }) => {
     const categorizedTags = [
       "eval:code",
       "eval:math",
+      "eval:safety",
       "modality:video",
       "modality:image",
       "modality:audio",
-      "modality:tools",
+      "modality:agent",
       "domain:financial",
       "domain:medical",
       "domain:legal",
@@ -68,21 +73,15 @@ export const LeaderboardProvider = ({ children }) => {
 
     return (
       boards?.filter((board) => {
-        if (
-          (!board.tags || board.tags.length === 0) &&
-          (!board.consolidated_tags || board.consolidated_tags.length === 0)
-        ) {
+        if (!board.tags || board.tags.length === 0) {
           return true;
         }
 
         const hasNoTagsInCategory = !board.tags?.some(
           (tag) => categorizedTags.includes(tag) || tag.startsWith("language:")
         );
-        const hasNoConsolidatedTagsInCategory = !board.consolidated_tags?.some(
-          (tag) => categorizedTags.includes(tag) || tag.startsWith("language:")
-        );
 
-        return hasNoTagsInCategory && hasNoConsolidatedTagsInCategory;
+        return hasNoTagsInCategory;
       }) || []
     );
   }, []);
@@ -92,6 +91,11 @@ export const LeaderboardProvider = ({ children }) => {
     if (!leaderboards) return [];
 
     return [
+      {
+        id: "agentic",
+        title: "Agentic",
+        data: filterByTag("modality:agent", leaderboards),
+      },
       {
         id: "code",
         title: "Code",
@@ -113,11 +117,6 @@ export const LeaderboardProvider = ({ children }) => {
         title: "Audio",
         data: filterByTag("modality:audio", leaderboards),
       },
-      {
-        id: "agentic",
-        title: "Agentic",
-        data: filterByTag("modality:tools", leaderboards),
-      },
       {
         id: "financial",
         title: "Financial",
@@ -133,6 +132,11 @@ export const LeaderboardProvider = ({ children }) => {
         title: "Legal",
         data: filterByTag("domain:legal", leaderboards),
       },
+      {
+        id: "safety",
+        title: "Safety",
+        data: filterByTag("eval:safety", leaderboards),
+      },
       {
         id: "uncategorized",
         title: "Uncategorized",
@@ -149,7 +153,22 @@ export const LeaderboardProvider = ({ children }) => {
 
   // Get sections with data
   const sections = useMemo(() => {
-    return allSections.filter((section) => section.data.length > 0);
+    const filteredSections = allSections.filter((section) => {
+      console.log(`Section ${section.title}:`, {
+        data: section.data,
+        count: section.data.length,
+        boards: section.data.map((board) => ({
+          id: board.id,
+          tags: board.tags,
+        })),
+      });
+      return section.data.length > 0;
+    });
+    console.log(
+      "Final sections:",
+      filteredSections.map((s) => s.title)
+    );
+    return filteredSections;
   }, [allSections]);
 
   // Filter leaderboards based on search query and arena toggle
@@ -169,6 +188,8 @@ export const LeaderboardProvider = ({ children }) => {
           "test:",
           "modality:",
           "submission:",
+          "domain:",
+          "eval:",
         ];
 
         filtered = filtered.filter((board) => {
@@ -177,12 +198,7 @@ export const LeaderboardProvider = ({ children }) => {
           );
 
           if (isTagSearch) {
-            return (
-              board.tags?.some((tag) => tag.toLowerCase().includes(query)) ||
-              board.consolidated_tags?.some((tag) =>
-                tag.toLowerCase().includes(query)
-              )
-            );
+            return board.tags?.some((tag) => tag.toLowerCase().includes(query));
           }
 
           return board.card_data?.title?.toLowerCase().includes(query);
@@ -191,10 +207,8 @@ export const LeaderboardProvider = ({ children }) => {
 
       // Filter arena only
       if (arenaOnly) {
-        filtered = filtered.filter(
-          (board) =>
-            board.tags?.includes("judge:humans") ||
-            board.consolidated_tags?.includes("judge:humans")
+        filtered = filtered.filter((board) =>
+          board.tags?.includes("judge:humans")
         );
       }
 

client/src/pages/HowToSubmitPage/HowToSubmitPage.jsx

@@ -7,7 +7,12 @@ import {
   Divider,
   alpha,
   Link,
+  Grid,
+  InputLabel,
+  Tooltip,
+  IconButton,
 } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import PageHeader from "../../components/PageHeader/PageHeader";
 
 const StepNumber = ({ number }) => (
@@ -37,7 +42,7 @@ const Section = ({ title, children }) => (
     elevation={0}
     sx={{
       border: "1px solid",
-      borderColor: "grey.300",
+      borderColor: "divider",
       borderRadius: 1,
       overflow: "hidden",
       mb: 3,
@@ -48,10 +53,7 @@ const Section = ({ title, children }) => (
         px: 3,
         py: 2,
         borderBottom: "1px solid",
-        borderColor: (theme) =>
-          theme.palette.mode === "dark"
-            ? alpha(theme.palette.divider, 0.1)
-            : "grey.200",
+        borderColor: "divider",
         bgcolor: (theme) =>
           theme.palette.mode === "dark"
             ? alpha(theme.palette.background.paper, 0.5)
@@ -86,45 +88,62 @@ const Tag = ({ children }) => (
   </Box>
 );
 
-const TagSection = ({ title, description, tags, explanations }) => (
-  <Box sx={{ mb: 4 }}>
-    <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
+const TagCard = ({ title, description, tags, explanations }) => (
+  <Paper
+    elevation={1}
+    sx={{
+      p: 3,
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      borderRadius: 2,
+      border: "1px solid",
+      borderColor: "grey.200",
+    }}
+  >
+    <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
       {title}
     </Typography>
     {description && (
-      <Typography variant="body1" sx={{ mb: 2, color: "text.secondary" }}>
+      <Typography variant="body2" sx={{ mb: 2, color: "text.secondary" }}>
         {description}
       </Typography>
     )}
-    <Stack spacing={1}>
+    <Box sx={{ flex: 1 }}>
       {tags.map((tag, index) => (
-        <Box key={index}>
+        <Box key={index} sx={{ mb: 2 }}>
           <Tag>{tag}</Tag>
           {explanations && explanations[index] && (
             <Typography
-              component="span"
               variant="body2"
-              sx={{ color: "text.secondary", ml: 1 }}
+              sx={{
+                color: "text.secondary",
+                mt: 1,
+                display: "block",
+              }}
               dangerouslySetInnerHTML={{ __html: explanations[index] }}
             />
           )}
         </Box>
       ))}
-    </Stack>
-  </Box>
+    </Box>
+  </Paper>
 );
 
 const CodeBlock = ({ children }) => (
   <Box
     sx={{
       backgroundColor: (theme) =>
-        theme.palette.mode === "dark"
-          ? "rgba(255, 255, 255, 0.05)"
-          : "rgba(0, 0, 0, 0.03)",
-      p: 2,
+        alpha(
+          theme.palette.primary.main,
+          theme.palette.mode === "dark" ? 0.15 : 0.05
+        ),
+      px: 2,
+      py: 4,
       borderRadius: 1,
       fontFamily: "monospace",
       mb: 2,
+      position: "relative",
       "& .key": {
         color: (theme) => theme.palette.primary.main,
       },
@@ -142,10 +161,194 @@ const CodeBlock = ({ children }) => (
       },
     }}
   >
+    <InputLabel
+      sx={{
+        position: "absolute",
+        right: 8,
+        top: 8,
+        fontSize: "0.75rem",
+        color: "text.secondary",
+        fontFamily: "monospace",
+        bgcolor: "background.paper",
+        px: 1,
+        py: 0.5,
+        borderRadius: 1,
+        border: "1px solid",
+        borderColor: "divider",
+        zIndex: 1,
+      }}
+    >
+      README.md
+    </InputLabel>
     {children}
   </Box>
 );
 
+const getTagEmoji = (tag) => {
+  const type = tag.split(":")[0];
+  const name = tag.split(":")[1];
+
+  const emojiMap = {
+    submission: {
+      automatic: "🤖",
+      semiautomatic: "🔄",
+      manual: "👨‍💻",
+      closed: "🔒",
+    },
+    test: {
+      public: "👀",
+      mix: "🔀",
+      private: "🔐",
+      rolling: "🎲",
+    },
+    judge: {
+      function: "⚙️",
+      model: "🧠",
+      humans: "👥",
+      vibe_check: "✨",
+    },
+    modality: {
+      text: "📝",
+      image: "🖼️",
+      audio: "🎵",
+      video: "🎥",
+      tools: "🛠️",
+      artefacts: "🏺",
+    },
+    eval: {
+      generation: "✨",
+      math: "🔢",
+      code: "💻",
+      performance: "⚡",
+      safety: "🛡️",
+    },
+    task: {
+      rag: "🔍",
+    },
+    language: {
+      english: "🇬🇧",
+      french: "🇫🇷",
+      whatever: "🌍",
+    },
+    domain: {
+      financial: "💰",
+      medical: "⚕️",
+      legal: "⚖️",
+    },
+  };
+
+  return emojiMap[type]?.[name] || "🏷️";
+};
+
+const TagItem = ({ tag, explanation }) => {
+  // Extract the name without prefix
+  const name = tag.split(":")[1];
+  const emoji = getTagEmoji(tag);
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 2,
+        border: "1px solid",
+        borderColor: "divider",
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        sx={{
+          bgcolor: (theme) =>
+            alpha(
+              theme.palette.primary.main,
+              theme.palette.mode === "dark" ? 0.15 : 0.05
+            ),
+          py: 2,
+          px: 2,
+          borderRadius: 0,
+          mb: 2,
+          position: "relative",
+        }}
+      >
+        <Typography
+          variant="h6"
+          sx={{
+            fontWeight: 700,
+            color: "text.primary",
+            letterSpacing: "-0.02em",
+            pr: 5,
+            textTransform: "capitalize",
+          }}
+        >
+          {emoji} &nbsp;&nbsp; {name}
+        </Typography>
+      </Box>
+      <Box sx={{ px: 2, pb: 2 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            mb: 2,
+            fontSize: "0.75rem",
+          }}
+        >
+          <strong>{tag.split(":")[0]}</strong>:{tag.split(":")[1]}
+        </Typography>
+        {explanation && (
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+              flex: 1,
+            }}
+            dangerouslySetInnerHTML={{ __html: explanation }}
+          />
+        )}
+      </Box>
+    </Paper>
+  );
+};
+
+const TagSection = ({ title, description, tags, explanations }) => {
+  // Determine if this section should have 4 columns
+  const shouldHaveFourColumns = [
+    "Submission type",
+    "Test set status",
+    "Judges",
+  ].includes(title);
+
+  return (
+    <Box sx={{ mb: 8 }}>
+      <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
+        {title}
+      </Typography>
+      {description && (
+        <Typography variant="body1" sx={{ mb: 4, color: "text.secondary" }}>
+          {description}
+        </Typography>
+      )}
+      <Grid container spacing={2}>
+        {tags.map((tag, index) => (
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            md={shouldHaveFourColumns ? 3 : 4}
+            key={index}
+          >
+            <TagItem
+              tag={tag}
+              explanation={explanations ? explanations[index] : null}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
 const HowToSubmitPage = () => {
   return (
     <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", padding: 4 }}>
@@ -160,176 +363,244 @@ const HowToSubmitPage = () => {
       />
 
       <Section title="Configuration steps">
-        <Stack spacing={4}>
-          <Typography variant="body1" color="text.secondary">
-            Your leaderboard must be hosted on a{" "}
-            <Link
-              href="https://huggingface.co/docs/hub/spaces"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Hugging Face Space
-            </Link>
-            .
-            <br />
-            Like{" "}
-            <Link
-              href="https://huggingface.co/docs/hub/model-cards"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              model cards
-            </Link>
-            , your Space's <strong>README.md</strong> file should include
-            specific <strong>metadata</strong> in a YAML section at the top.
-          </Typography>
+        <Box sx={{ display: "flex", gap: 4 }}>
+          <Stack spacing={4} sx={{ flex: "0 0 45%" }}>
+            <Stack spacing={3}>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <StepNumber number={1} />
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    fontWeight: 600,
+                    color: "text.primary",
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  Create a Space
+                </Typography>
+              </Stack>
+              <Box sx={{ pl: 7 }}>
+                <Typography variant="body2" color="text.secondary">
+                  Your leaderboard must be hosted on a{" "}
+                  <Link
+                    href="https://huggingface.co/docs/hub/spaces"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Hugging Face Space
+                  </Link>
+                  .
+                </Typography>
+              </Box>
+            </Stack>
 
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: { xs: "column", md: "row" },
-              gap: 4,
-              position: "relative",
-            }}
-          >
-            <Box sx={{ flex: 4 }}>
-              <Stack spacing={4}>
-                <Stack spacing={3}>
-                  <Stack direction="row" spacing={2} alignItems="center">
-                    <StepNumber number={1} />
+            <Stack spacing={3}>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <StepNumber number={2} />
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    fontWeight: 600,
+                    color: "text.primary",
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  Add metadata
+                </Typography>
+              </Stack>
+              <Box sx={{ pl: 7 }}>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  sx={{ mb: 2 }}
+                >
+                  Like{" "}
+                  <Link
+                    href="https://huggingface.co/docs/hub/model-cards"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    model cards
+                  </Link>
+                  , your Space's{" "}
+                  <InputLabel
+                    sx={{
+                      display: "inline-flex",
+                      fontSize: "0.75rem",
+                      color: "text.secondary",
+                      fontFamily: "monospace",
+                      bgcolor: "background.paper",
+                      px: 1,
+                      py: 0.5,
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "divider",
+                      mx: 0.5,
+                    }}
+                  >
+                    README.md
+                  </InputLabel>{" "}
+                  file should include specific <strong>metadata</strong> in a
+                  YAML section at the top:
+                </Typography>
+                <ul
+                  style={{
+                    margin: 0,
+                    paddingLeft: "20px",
+                    color: "text.secondary",
+                  }}
+                >
+                  <li>
                     <Typography
-                      variant="subtitle1"
-                      sx={{
-                        fontWeight: 600,
-                        color: "text.primary",
-                        letterSpacing: "-0.01em",
-                      }}
+                      variant="body2"
+                      color="text.secondary"
+                      sx={{ display: "flex", alignItems: "center", gap: 0.5 }}
                     >
-                      Define the type
-                    </Typography>
-                  </Stack>
-                  <Box sx={{ pl: 7 }}>
-                    <Typography variant="body2" color="text.secondary">
                       Add either the <strong>leaderboard</strong> or{" "}
-                      <strong>arena</strong> tag.
-                    </Typography>
-                  </Box>
-                </Stack>
-
-                <Stack spacing={3}>
-                  <Stack direction="row" spacing={2} alignItems="center">
-                    <StepNumber number={2} />
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        fontWeight: 600,
-                        color: "text.primary",
-                        letterSpacing: "-0.01em",
-                      }}
-                    >
-                      Add a description
+                      <strong>arena</strong> tag
+                      <Tooltip
+                        title={
+                          <Box sx={{ p: 1, maxWidth: 300 }}>
+                            <Typography
+                              variant="subtitle2"
+                              sx={{
+                                mb: 1,
+                                fontWeight: 600,
+                                color: "text.secondary",
+                              }}
+                            >
+                              Choose between:
+                            </Typography>
+                            <Typography
+                              variant="body2"
+                              component="div"
+                              sx={{ mb: 1 }}
+                            >
+                              • <strong>arena</strong> - for human evaluations
+                              <br />
+                              <Box component="span" sx={{ pl: 2 }}>
+                                requires <Tag>judge:humans</Tag>
+                              </Box>
+                            </Typography>
+                            <Typography variant="body2" component="div">
+                              • <strong>leaderboard</strong> - for automated
+                              evaluations
+                              <br />
+                              <Box component="span" sx={{ pl: 2 }}>
+                                with <Tag>judge:function</Tag> or{" "}
+                                <Tag>judge:model</Tag>
+                              </Box>
+                            </Typography>
+                          </Box>
+                        }
+                        arrow
+                        placement="right"
+                        componentsProps={{
+                          tooltip: {
+                            sx: {
+                              bgcolor: "background.paper",
+                              color: "text.primary",
+                              "& .MuiTooltip-arrow": {
+                                color: "background.paper",
+                              },
+                              boxShadow: (theme) => theme.shadows[2],
+                            },
+                          },
+                        }}
+                      >
+                        <IconButton
+                          size="small"
+                          sx={{
+                            p: 0.5,
+                            color: "text.secondary",
+                            "&:hover": {
+                              color: "primary.main",
+                              bgcolor: (theme) =>
+                                alpha(theme.palette.primary.main, 0.1),
+                            },
+                          }}
+                        >
+                          <InfoOutlinedIcon sx={{ fontSize: "1rem" }} />
+                        </IconButton>
+                      </Tooltip>
                     </Typography>
-                  </Stack>
-                  <Box sx={{ pl: 7 }}>
+                  </li>
+                  <li>
                     <Typography variant="body2" color="text.secondary">
                       Include a <strong>short_description</strong> field to
-                      explain the purpose of your evaluation.
+                      explain the purpose of your evaluation
                     </Typography>
-                  </Box>
-                </Stack>
-
-                <Stack spacing={3}>
-                  <Stack direction="row" spacing={2} alignItems="center">
-                    <StepNumber number={3} />
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        fontWeight: 600,
-                        color: "text.primary",
-                        letterSpacing: "-0.01em",
-                      }}
-                    >
-                      Specify metadata
-                    </Typography>
-                  </Stack>
-                  <Box sx={{ pl: 7 }}>
+                  </li>
+                  <li>
                     <Typography variant="body2" color="text.secondary">
                       Add <strong>metadata tags</strong> to categorize your
-                      evaluation and help users understand its characteristics.
+                      evaluation (see examples on the right)
                     </Typography>
-                  </Box>
-                </Stack>
-              </Stack>
-            </Box>
+                  </li>
+                </ul>
+              </Box>
+            </Stack>
+          </Stack>
 
-            <Divider
-              orientation="vertical"
-              flexItem
-              sx={{
-                display: { xs: "none", md: "block" },
-              }}
-            />
-
-            <Box sx={{ flex: 5 }}>
-              <CodeBlock>
-                ---
-                <br />
-                <span className="key">short_description</span>
-                <span className="punctuation">:</span>{" "}
-                <span className="value">
-                  Evaluating LLMs on math reasoning tasks
-                </span>
-                <br />
-                <span className="key">tags</span>
-                <span className="punctuation">:</span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">leaderboard</span>
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
-                  Type of leaderboard
-                </span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">submission:automatic</span>{" "}
-                <span className="comment"># How models are submitted</span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">test:public</span>{" "}
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Test
-                  set visibility
-                </span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">judge:function</span>{" "}
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Evaluation method
-                </span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">modality:text</span>{" "}
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Input/output type
-                </span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">language:english</span>{" "}
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;# Language coverage
-                </span>
-                <br />
-                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
-                <span className="value">domain:financial</span>{" "}
-                <span className="comment">
-                  &nbsp;&nbsp;&nbsp;&nbsp;# Specific domain
-                </span>
-                <br />
-                ---
-              </CodeBlock>
-            </Box>
+          <Box sx={{ flex: 1 }}>
+            <CodeBlock>
+              ---
+              <br />
+              <span className="key">short_description</span>
+              <span className="punctuation">:</span>{" "}
+              <span className="value">
+                Evaluating LLMs on math reasoning tasks
+              </span>
+              <br />
+              <span className="key">tags</span>
+              <span className="punctuation">:</span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">leaderboard</span>
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
+                Type of leaderboard
+              </span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">submission:automatic</span>{" "}
+              <span className="comment"># How models are submitted</span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">test:public</span>{" "}
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Test set
+                visibility
+              </span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">judge:function</span>{" "}
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Evaluation method
+              </span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">modality:text</span>{" "}
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Input/output type
+              </span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">language:english</span>{" "}
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;# Language coverage
+              </span>
+              <br />
+              <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+              <span className="value">domain:financial</span>{" "}
+              <span className="comment">
+                &nbsp;&nbsp;&nbsp;&nbsp;# Specific domain
+              </span>
+              <br />
+              ---
+            </CodeBlock>
           </Box>
-        </Stack>
+        </Box>
       </Section>
 
       <Section title="What do the tags mean?">
@@ -350,8 +621,6 @@ const HowToSubmitPage = () => {
           ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Test set status"
           description="Arenas are not concerned by this category."
@@ -364,8 +633,6 @@ const HowToSubmitPage = () => {
           ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Judges"
           tags={[
@@ -382,11 +649,9 @@ const HowToSubmitPage = () => {
           ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Modalities"
-          description="Can be any (or several) of the following list:"
+          description="Can be any (or several) of the following list"
           tags={[
             "modality:text",
             "modality:image",
@@ -405,11 +670,9 @@ const HowToSubmitPage = () => {
           ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Evaluation categories"
-          description="Can be any (or several) of the following list:"
+          description="Can be any (or several) of the following list"
           tags={[
             "eval:generation",
             "eval:math",
@@ -428,25 +691,27 @@ const HowToSubmitPage = () => {
           ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Language"
-          description="You can indicate the languages covered by your benchmark like so: language:mylanguage. At the moment, we do not support language codes, please use the language name in English."
-          tags={["language:english", "language:french"]}
+          description="You can indicate the languages covered by your benchmark like so: language:mylanguage."
+          tags={["language:english", "language:french", "language:whatever"]}
+          explanations={[
+            "",
+            "",
+            "At the moment, we do not support language codes, please use the language name in English.",
+          ]}
         />
 
-        <Divider sx={{ my: 3 }} />
-
         <TagSection
           title="Domain"
           description="Indicates the specific domain of the leaderboard:"
           tags={["domain:financial", "domain:medical", "domain:legal"]}
         />
+
         <Typography
           variant="body2"
           sx={{
-            mt: 1,
+            mt: 3,
             color: "text.secondary",
             fontSize: "0.875rem",
             fontStyle: "italic",

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -1,23 +1,10 @@
 import React, { useState, useEffect } from "react";
-import {
-  Box,
-  CircularProgress,
-  Stack,
-  Button,
-  FormControlLabel,
-  Switch,
-  TextField,
-  InputAdornment,
-  Typography,
-} from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
+import { Box, CircularProgress, Typography } from "@mui/material";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 import Logo from "../../components/Logo/Logo";
 import PageTitle from "../../components/PageTitle/PageTitle";
-import PageHeader from "../../components/PageHeader/PageHeader";
 import LeaderboardSection from "../../components/LeaderboardSection";
 import LeaderboardFilters from "../../components/LeaderboardFilters/LeaderboardFilters";
-import { alpha } from "@mui/material/styles";
 import API_URLS from "../../config/api";
 import {
   LeaderboardProvider,