diff --git a/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx b/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
index 7bfd68bb864..e5f21de65f9 100644
--- a/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
+++ b/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
@@ -71,12 +71,12 @@ export function MetricKind(props: SearchComponentProps) {
   };
 
   return (
-    <Box>
-      <FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+    <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+      <FormControl variant="standard">
         <Select
           value={metricRef.current ? metricRef.current.type : "count"}
           onChange={handleTypeChange}
-          sx={{ "min-height": "44px" }}
+          sx={{ "minHeight": "44px" }}
         >
           <MenuItem value="count">Count</MenuItem>
           <MenuItem value="avg">Average</MenuItem>
@@ -84,11 +84,13 @@ export function MetricKind(props: SearchComponentProps) {
           <MenuItem value="max">Max</MenuItem>
           <MenuItem value="min">Min</MenuItem>
         </Select>
-        <TextField 
+      </FormControl>
+      <FormControl variant="standard">
+        <TextField
           variant="standard"
           label="Field"
           onChange={handleNameChange}
-          sx={{ "margin-left": "10px", ... ( !metricRef.current && {display: "none"}) }}
+          sx={{ "marginLeft": "10px", ... ( !metricRef.current && {display: "none"}) }}
         />
       </FormControl>
     </Box>
@@ -104,7 +106,7 @@ export function AggregationKind(props: SearchComponentProps) {
   };
   const [aggregations, setAggregations] = useState<({term: TermAgg} | {histogram: HistogramAgg})[]>(
           [defaultAgg]);
-  
+
   const updateAggregationProp = (newAggregations: ({term: TermAgg} | {histogram: HistogramAgg})[]) => {
     const metric = props.searchRequest.aggregationConfig.metric;
     const updatedAggregation = Object.assign({}, {metric: metric}, ...newAggregations);
@@ -205,7 +207,7 @@ export function AggregationKind(props: SearchComponentProps) {
     const options = [];
     if (pos >= agg.length) {
       options.push((
-          <MenuItem value="new">Add aggregation</MenuItem>
+          <MenuItem value="new" key="new">Add aggregation</MenuItem>
       ))
     }
     let addHistogram = true;
@@ -216,14 +218,14 @@ export function AggregationKind(props: SearchComponentProps) {
       if (getAggregationKind(agg[i]) === "term") addTerm = false;
     }
     if (addHistogram) {
-      options.push((<MenuItem value="histogram">Histogram aggregation</MenuItem>))
+      options.push((<MenuItem value="histogram" key="histogram">Histogram aggregation</MenuItem>))
     }
     if (addTerm) {
-      options.push((<MenuItem value="term">Term aggregation</MenuItem>));
+      options.push((<MenuItem value="term" key="term">Term aggregation</MenuItem>));
     }
     if (agg.length > 1) {
       options.push((
-          <MenuItem value="rm">Remove aggregation</MenuItem>
+          <MenuItem value="rm" key="rm">Remove aggregation</MenuItem>
       ))
     }
     return options;
@@ -241,65 +243,74 @@ export function AggregationKind(props: SearchComponentProps) {
     const agg = aggs[pos]
     if (isHistogram(agg)) {
       return (
-        <Select
-          value={agg.histogram.interval}
-          onChange={(e) => handleHistogramChange(pos, e)}
-          sx={{ "margin-left": "10px", "min-height": "44px" }}
-        >
-          <MenuItem value="auto">Auto</MenuItem>
-          <MenuItem value="10s">10 seconds</MenuItem>
-          <MenuItem value="1m">1 minute</MenuItem>
-          <MenuItem value="5m">5 minutes</MenuItem>
-          <MenuItem value="10m">10 minutes</MenuItem>
-          <MenuItem value="1h">1 hour</MenuItem>
-          <MenuItem value="1d">1 day</MenuItem>
-        </Select>
+        <FormControl variant="standard">
+          <Select
+            value={agg.histogram.interval}
+            onChange={(e) => handleHistogramChange(pos, e)}
+            sx={{ "marginLeft": "10px", "minHeight": "44px" }}
+          >
+            <MenuItem value="auto">Auto</MenuItem>
+            <MenuItem value="10s">10 seconds</MenuItem>
+            <MenuItem value="1m">1 minute</MenuItem>
+            <MenuItem value="5m">5 minutes</MenuItem>
+            <MenuItem value="10m">10 minutes</MenuItem>
+            <MenuItem value="1h">1 hour</MenuItem>
+            <MenuItem value="1d">1 day</MenuItem>
+          </Select>
+        </FormControl>
       );
     }
     if (isTerm(agg)) {
-      return [(
-          <TextField 
-            variant="standard"
-            label="Field"
-            onChange={(e) => handleTermFieldChange(pos, e)}
-            sx={{ "margin-left": "10px" }}
-          />
-        ),(
-          <TextField 
-            variant="standard"
-            label="Return top"
-            type="number"
-            onChange={(e) => handleTermCountChange(pos, e)}
-            value={agg.term.size}
-            sx={{ "margin-left": "10px" }}
-          />
-        )]
+      return (<>
+          <FormControl variant="standard">
+            <TextField
+              variant="standard"
+              label="Field"
+              onChange={(e) => handleTermFieldChange(pos, e)}
+              sx={{ "margin-left": "10px" }}
+            />
+          </FormControl>
+          <FormControl variant="standard">
+            <TextField
+              variant="standard"
+              label="Return top"
+              type="number"
+              onChange={(e) => handleTermCountChange(pos, e)}
+              value={agg.term.size}
+              sx={{ "margin-left": "10px" }}
+            />
+          </FormControl>
+        </>)
     }
     return (null);
   }
 
   return (
-    <Box>
-      <FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
-        <Select
-          value={getAggregationKind(aggregations[0])}
-          onChange={(e) => handleAggregationChange(0, e)}
-          sx={{ "min-height": "44px", width: "190px" }}
-        >
-          { makeOptions(0, aggregations) }
-        </Select>
+    <>
+      <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+        <FormControl variant="standard">
+          <Select
+            value={getAggregationKind(aggregations[0])}
+            onChange={(e) => handleAggregationChange(0, e)}
+            sx={{ "minHeight": "44px", width: "190px" }}
+          >
+            { makeOptions(0, aggregations) }
+          </Select>
+        </FormControl>
         {drawAdditional(0, aggregations)}
-      </FormControl>
-      <FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
-        <Select
-          value={getAggregationKind(aggregations[1])}
-          onChange={(e) => handleAggregationChange(1, e)}
-          sx={{ "min-height": "44px", width: "190px" }}
-        >
-          { makeOptions(1, aggregations) }
-        </Select>
-        {drawAdditional(1, aggregations)}
-      </FormControl>
-    </Box>
+      </Box>
+      <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+        <FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+          <Select
+            value={getAggregationKind(aggregations[1])}
+            onChange={(e) => handleAggregationChange(1, e)}
+            sx={{ "minHeight": "44px", width: "190px" }}
+          >
+            { makeOptions(1, aggregations) }
+          </Select>
+          {drawAdditional(1, aggregations)}
+        </FormControl>
+      </Box>
+    </>
   )
 }
diff --git a/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx b/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
index 6e2025b2f5c..8649eeae750 100644
--- a/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
+++ b/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
@@ -48,6 +48,7 @@ export function AggregationResult({searchResponse}: {searchResponse: SearchRespo
        };
     });
     series;
+    // we don't customize colors because we would need a full palette.
     return (
     <LineChart
         xAxis={xAxis}
@@ -57,7 +58,7 @@ export function AggregationResult({searchResponse}: {searchResponse: SearchRespo
     )
   } else if (isTerm(result)) {
     return (<BarChart
-      series={[{ data: result.map(entry => entry.value)}]}
+      series={[{ data: result.map(entry => entry.value), color: "#004BD9A5"}]}
       xAxis={[{ data: result.map(entry => entry.term), scaleType: 'band' }]}
       margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
     />)
diff --git a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
index 0a6f406ec1f..19ea6469feb 100644
--- a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
+++ b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
@@ -70,7 +70,7 @@ export default function SearchResult(props: SearchResultProps) {
   const result = useMemo(
     () => {
       if (props.searchResponse == null || props.index == null) {
-	return null;
+        return null;
       } else if (props.searchResponse.aggregations === undefined) {
         console.log("result table");
         return (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
@@ -83,7 +83,7 @@ export default function SearchResult(props: SearchResultProps) {
   );
 
   return (
-    <Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}} >
+    <Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}}>
       <Box sx={{ height: '100%', flexDirection: 'column', flexGrow: 1, display: 'flex'}}>
         <Box sx={{ flexShrink: 0, display: 'flex', flexGrow: 0, flexBasis: 'auto' }}>
           <HitCount searchResponse={props.searchResponse} />
diff --git a/quickwit/quickwit-ui/src/services/client.ts b/quickwit/quickwit-ui/src/services/client.ts
index 94d953e6357..adced732ef2 100644
--- a/quickwit/quickwit-ui/src/services/client.ts
+++ b/quickwit/quickwit-ui/src/services/client.ts
@@ -171,7 +171,7 @@ export class Client {
           max: request.endTimestamp,
         };
       } else {
-	extended_bounds = undefined;
+        extended_bounds = undefined;
       }
       aggregation = {
         histo_agg: {
diff --git a/quickwit/quickwit-ui/src/utils/urls.ts b/quickwit/quickwit-ui/src/utils/urls.ts
index 28f24a844d5..cb8d5b5ab6c 100644
--- a/quickwit/quickwit-ui/src/utils/urls.ts
+++ b/quickwit/quickwit-ui/src/utils/urls.ts
@@ -117,7 +117,7 @@ export function toUrlSearchRequestParams(request: SearchRequest): URLSearchParam
       if (val == null) {
         return undefined;
       } else {
-	return val;
+        return val;
       }
     }))
   }