diff --git a/crawler/frontend/src/App.tsx b/crawler/frontend/src/App.tsx
index a401c55..c0a6b41 100644
--- a/crawler/frontend/src/App.tsx
+++ b/crawler/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import AlertError from './components/AlertError';
 import LoginModal from './components/LoginModal';
 import AuthCallback from './components/AuthCallback';
 import { Map } from './components/Map';
-import { FilterPanel, type ParameterValues, DEFAULT_FILTER_VALUES } from './components/FilterPanel';
+import { FilterPanel, type ParameterValues, DEFAULT_FILTER_VALUES, Metric } from './components/FilterPanel';
 import { Header } from './components/Header';
 import { StatsBar, type ViewMode } from './components/StatsBar';
 import { ListView } from './components/ListView';
@@ -162,6 +162,10 @@ function App() {
     }
   };
 
+  const handleMetricChange = (metric: Metric) => {
+    setQueryParameters(prev => prev ? { ...prev, metric } : null);
+  };
+
   const handlePropertyClick = (property: PropertyProperties, _coordinates: [number, number]) => {
     setHighlightedProperty(property.url);
     // Optionally: pan map to coordinates
@@ -254,6 +258,7 @@ function App() {
         <div className="hidden md:block w-64 shrink-0 h-full overflow-hidden">
           <FilterPanel
             onSubmit={onSubmit}
+            onMetricChange={handleMetricChange}
             isLoading={isLoading}
             listingCount={listingData?.features.length}
           />
@@ -270,6 +275,7 @@ function App() {
             <SheetContent side="left" className="w-80 p-0">
               <FilterPanel
                 onSubmit={onSubmit}
+                onMetricChange={handleMetricChange}
                 isLoading={isLoading}
                 listingCount={listingData?.features.length}
               />
diff --git a/crawler/frontend/src/components/FilterPanel.tsx b/crawler/frontend/src/components/FilterPanel.tsx
index dc9ab3a..3810079 100644
--- a/crawler/frontend/src/components/FilterPanel.tsx
+++ b/crawler/frontend/src/components/FilterPanel.tsx
@@ -66,6 +66,7 @@ export interface ParameterValues {
 
 interface FilterPanelProps {
     onSubmit: (action: 'fetch-data' | 'visualize', fromValues: ParameterValues) => void;
+    onMetricChange?: (metric: Metric) => void;
     isLoading?: boolean;
     listingCount?: number;
 }
@@ -89,7 +90,7 @@ const formSchema = z.object({
 
 type FormValues = z.infer<typeof formSchema>;
 
-export function FilterPanel({ onSubmit, isLoading, listingCount }: FilterPanelProps) {
+export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount }: FilterPanelProps) {
     const [availableFromRawInput, setAvailableFromRawInput] = useState("now");
     const [selectedFurnishTypes, setSelectedFurnishTypes] = useState<FurnishType[]>([]);
 
@@ -202,7 +203,10 @@ export function FilterPanel({ onSubmit, isLoading, listingCount }: FilterPanelPr
                                             render={({ field }) => (
                                                 <FormItem>
                                                     <FormLabel className="text-xs">Color by</FormLabel>
-                                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                    <Select onValueChange={(value) => {
+                                                        field.onChange(value);
+                                                        onMetricChange?.(value as Metric);
+                                                    }} defaultValue={field.value}>
                                                         <FormControl>
                                                             <SelectTrigger className="h-8 text-sm">
                                                                 <SelectValue placeholder="Metric" />