diff --git a/src/components/details.page.tsx b/src/components/details.page.tsx
index a30d20b..2111a09 100644
--- a/src/components/details.page.tsx
+++ b/src/components/details.page.tsx
@@ -1,16 +1,12 @@
-import Image from 'next/image';
 import { Attachement } from '@/api/settings';
 import { LatLngTuple } from 'leaflet';
-import { useTranslations } from 'next-intl';
 
 import { convertAttachementsToImages } from '@/lib/utils';
-import { Badge } from '@/components/ui/badge';
-import { Icons, propsForSVGPresentation } from '@/components/icons';
 
 import ButtonCenterView from './button-center-view';
 import ButtonClose from './button-close';
 import Carousel from './carousel';
-import MeterLength from './length';
+import { MetadataList } from './metadata-list';
 
 type Props = {
   content: {
@@ -35,13 +31,12 @@ type Props = {
 };
 
 export default function DetailsPageUI({ content }: Props) {
-  const t = useTranslations('details');
   return (
     <article>
       {content.attachments.length > 0 && (
         <div className="-m-8 mb-6">
           <Carousel
-            className="min-w-full"
+            className="w-full"
             images={convertAttachementsToImages(content.attachments)}
             width={800}
             height={600}
@@ -62,67 +57,12 @@ export default function DetailsPageUI({ content }: Props) {
           )}
           <ButtonClose />
         </div>
-        <dl className="flex items-center gap-2 py-2">
-          {content.length !== undefined && (
-            <>
-              <dt>
-                <Icons.chevronsLeftRight
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('length')}</span>
-              </dt>
-              <dd className="mr-2">
-                <MeterLength length={content.length} />
-              </dd>
-            </>
-          )}
-          {content.descent !== undefined && (
-            <>
-              <dt>
-                <Icons.arrowDownRight
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('descent')}</span>
-              </dt>
-              <dd className="mr-2">
-                <MeterLength length={content.descent} />
-              </dd>
-            </>
-          )}
-          {content.flow && (
-            <>
-              <dt>
-                <Icons.waves
-                  className="text-primary"
-                  {...propsForSVGPresentation}
-                />
-                <span className="sr-only">{t('flow')}</span>
-              </dt>
-              <dd className="mr-2">{content.flow}</dd>
-            </>
-          )}
-          {content.type && (
-            <>
-              <dt>{content.type.category.label} :</dt>
-              <dd>
-                <Badge className="gap-2">
-                  {content.type.pictogram && (
-                    <Image
-                      loading="lazy"
-                      src={content.type.pictogram}
-                      width={24}
-                      height={24}
-                      alt=""
-                    />
-                  )}
-                  <span>{content.type.label}</span>
-                </Badge>
-              </dd>
-            </>
-          )}
-        </dl>
+        <MetadataList
+          length={content.length}
+          descent={content.descent}
+          flow={content.flow}
+          type={content.type}
+        />
       </header>
 
       <div dangerouslySetInnerHTML={{ __html: content.description }} />
diff --git a/src/components/map/geometry-item.tsx b/src/components/map/geometry-item.tsx
index fa1dbff..957f1ff 100644
--- a/src/components/map/geometry-item.tsx
+++ b/src/components/map/geometry-item.tsx
@@ -1,19 +1,16 @@
 import { Fragment } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Layer } from '@/api/settings';
 import { GeoJsonProperties, Geometry } from 'geojson';
-import { GeoJSONOptions } from 'leaflet';
+import { GeoJSONOptions, PathOptions } from 'leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import {
-  Popup as LeafletPopup,
-  Marker,
-  Polygon,
-  Polyline,
-  Tooltip,
-} from 'react-leaflet';
+import { Marker, Polygon, Polyline } from 'react-leaflet';
 
+import { cn } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { DefaultMarker } from '@/components/map/default-marker';
-import Popup from '@/components/map/popup';
+
+import { GeometryTooltip } from './geometry-tooltip';
 
 type Props = {
   geometry: Geometry;
@@ -23,34 +20,6 @@ type Props = {
   options: GeoJSONOptions;
 };
 
-const MetaData = ({
-  properties,
-  layer,
-}: {
-  properties: GeoJsonProperties;
-  layer: Layer;
-}) => {
-  if (properties === null || (!properties.name && !properties.category)) {
-    return null;
-  }
-  return (
-    <>
-      <Tooltip>{properties.name ?? properties.category}</Tooltip>
-      {layer.type !== undefined && layer.url && properties.id && (
-        <LeafletPopup>
-          <Popup
-            name={properties.name ?? properties.category}
-            description={properties.description}
-            attachments={properties.attachments}
-            type={layer.type}
-            id={properties.id}
-          />
-        </LeafletPopup>
-      )}
-    </>
-  );
-};
-
 export const GeometryItem = ({
   geometry,
   properties,
@@ -58,6 +27,8 @@ export const GeometryItem = ({
   layer,
   options = { style: {} },
 }: Props) => {
+  const params = useSearchParams();
+  const router = useRouter();
   if (geometry.type === 'GeometryCollection') {
     return (
       <>
@@ -75,6 +46,18 @@ export const GeometryItem = ({
     );
   }
 
+  const hasDetails = layer.type !== undefined && layer.url && properties?.id;
+
+  const featureEventHandler = {
+    ...(hasDetails && {
+      click: () => {
+        router.push(
+          `/map/${layer?.type}/${properties?.id}?${params.toString()}`,
+        );
+      },
+    }),
+  };
+
   if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
     const coordinatesAsMultiPoint =
       geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates;
@@ -90,8 +73,9 @@ export const GeometryItem = ({
               key={`point-${id}-${index}`}
               position={[lng, lat]}
               icon={DefaultMarker(icon, 1)}
+              eventHandlers={featureEventHandler}
             >
-              <MetaData properties={properties} layer={layer} />
+              <GeometryTooltip properties={properties} layer={layer} />
             </Marker>
           );
         })}
@@ -129,9 +113,17 @@ export const GeometryItem = ({
                     weight: 10,
                     opacity: 0,
                   }}
-                  className={layer.type}
+                  eventHandlers={{
+                    mouseover: e => e.target.setStyle({ opacity: 0.5 }),
+                    mouseout: e => e.target.setStyle({ opacity: 0 }),
+                    ...featureEventHandler,
+                  }}
+                  className={cn(
+                    'streams-hover',
+                    !hasDetails && '!cursor-[unset]',
+                  )}
                 >
-                  <MetaData properties={properties} layer={layer} />
+                  <GeometryTooltip properties={properties} layer={layer} />
                 </Polyline>
               </Fragment>
             );
@@ -140,9 +132,10 @@ export const GeometryItem = ({
             <Polyline
               positions={group.map(([lat, lng]) => [lng, lat])}
               pathOptions={options.style as GeoJSONOptions}
-              className={layer.type}
+              className={cn(layer.type, !hasDetails && '!cursor-[unset]')}
+              eventHandlers={featureEventHandler}
             >
-              <MetaData properties={properties} layer={layer} />
+              <GeometryTooltip properties={properties} layer={layer} />
             </Polyline>
           );
         })}
@@ -164,9 +157,22 @@ export const GeometryItem = ({
               line.map<[number, number]>(([lat, lng]) => [lng, lat]),
             )}
             pathOptions={options.style as GeoJSONOptions}
+            eventHandlers={{
+              mouseover: e => e.target.setStyle({ fillOpacity: 0.8 }),
+              mouseout: e =>
+                e.target.setStyle({
+                  fillOpacity:
+                    (options.style as PathOptions)?.fillOpacity ?? 0.2,
+                }),
+              ...featureEventHandler,
+            }}
+            className={cn(
+              'transition-[fill-opacity]',
+              !hasDetails && '!cursor-[unset]',
+            )}
             pane="tilePane"
           >
-            <MetaData properties={properties} layer={layer} />
+            <GeometryTooltip properties={properties} layer={layer} />
           </Polygon>
         ))}
       </>
diff --git a/src/components/map/geometry-tooltip.tsx b/src/components/map/geometry-tooltip.tsx
new file mode 100644
index 0000000..b0ea4cc
--- /dev/null
+++ b/src/components/map/geometry-tooltip.tsx
@@ -0,0 +1,58 @@
+import Image from 'next/image';
+import { Layer } from '@/api/settings';
+import { GeoJsonProperties } from 'geojson';
+import { Tooltip } from 'react-leaflet';
+
+import { MetadataList } from '../metadata-list';
+
+export const GeometryTooltip = ({
+  properties,
+  layer,
+}: {
+  properties: GeoJsonProperties;
+  layer: Layer;
+}) => {
+  if (properties === null || (!properties.name && !properties.category)) {
+    return null;
+  }
+  if (layer.type === undefined || !layer.url || !properties.id) {
+    return <Tooltip>{properties.name ?? properties.category}</Tooltip>;
+  }
+  return (
+    <Tooltip
+      sticky
+      className="w-64 !overflow-hidden !whitespace-normal !rounded-xl !border-0 !p-0"
+    >
+      <div className="flex flex-col">
+        {properties.attachments?.[0]?.thumbnail && (
+          <Image
+            loading="lazy"
+            className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+            src={properties.attachments[0].thumbnail}
+            alt=""
+            width="400"
+            height="300"
+          />
+        )}
+        <div className="p-4">
+          <h3 className="line-clamp-2 text-lg font-bold">
+            {properties.name ?? properties.category}
+          </h3>
+          <MetadataList
+            descent={properties.descent}
+            flow={properties.flow}
+            length={properties.length}
+            type={properties.type}
+            small
+          />
+          {properties.description && (
+            <span
+              className="mb-1 line-clamp-2"
+              dangerouslySetInnerHTML={{ __html: properties.description }}
+            ></span>
+          )}
+        </div>
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/src/components/map/popup.tsx b/src/components/map/popup.tsx
deleted file mode 100644
index 03fcfb5..0000000
--- a/src/components/map/popup.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
-
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardMedia,
-  CardTitle,
-} from '../ui/card';
-
-type Props = {
-  name: string;
-  description: string;
-  attachments?: { thumbnail: string }[];
-  type: string;
-  id: string;
-};
-
-export default function Popup({
-  attachments,
-  name,
-  description,
-  type,
-  id,
-}: Props) {
-  const params = useSearchParams();
-  return (
-    <Card className="group relative border-0">
-      {attachments?.[0]?.thumbnail && (
-        <CardMedia>
-          <Image
-            loading="lazy"
-            className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
-            src={attachments[0].thumbnail}
-            alt=""
-            width="400"
-            height="300"
-          />
-        </CardMedia>
-      )}
-      <CardHeader>
-        <CardTitle>
-          <Link
-            className="after:absolute after:inset-0 after:rounded-lg after:content-[''] hover:underline hover:after:shadow focus:after:shadow"
-            href={`/map/${type}/${id}?${params.toString()}`}
-          >
-            {name}
-          </Link>
-        </CardTitle>
-        {description && (
-          <CardDescription className="line-clamp-2">
-            <div dangerouslySetInnerHTML={{ __html: description }} />
-          </CardDescription>
-        )}
-      </CardHeader>
-    </Card>
-  );
-}
diff --git a/src/components/metadata-list.tsx b/src/components/metadata-list.tsx
new file mode 100644
index 0000000..20ce88b
--- /dev/null
+++ b/src/components/metadata-list.tsx
@@ -0,0 +1,110 @@
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Icon, Icons, propsForSVGPresentation } from '@/components/icons';
+
+import MeterLength from './length';
+
+export type MetadataListProps = {
+  length?: number;
+  descent?: number;
+  flow?: string;
+  type?: {
+    label: string;
+    category: {
+      label: string;
+    };
+    pictogram?: string;
+  };
+  small?: boolean;
+};
+
+type MetadataItemProps = {
+  show?: boolean;
+  icon: Icon;
+  type: string;
+  value?: string | number;
+  meters?: number;
+  small?: boolean;
+};
+
+const MetadataItem = ({
+  show,
+  icon: Icon,
+  type,
+  value,
+  meters,
+  small,
+}: MetadataItemProps) => {
+  const t = useTranslations('details');
+  if (!show) return null;
+
+  return (
+    <div className="flex flex-row flex-wrap items-center justify-center gap-1">
+      <dt>
+        <Icon
+          className={cn('text-primary', small && 'w-4 h-4')}
+          {...propsForSVGPresentation}
+        />
+        <span className="sr-only">{t(type)}</span>
+      </dt>
+      <dd>{meters !== undefined ? <MeterLength length={meters} /> : value}</dd>
+    </div>
+  );
+};
+
+export const MetadataList = ({
+  length,
+  descent,
+  flow,
+  type,
+  small,
+}: MetadataListProps) => {
+  const t = useTranslations('details');
+  return (
+    <dl className="flex items-center justify-evenly gap-2 py-2">
+      <MetadataItem
+        show={length !== undefined}
+        icon={Icons.chevronsLeftRight}
+        type="length"
+        meters={length}
+        small={small}
+      />
+      <MetadataItem
+        show={descent !== undefined}
+        icon={Icons.arrowDownRight}
+        type="descent"
+        meters={descent}
+        small={small}
+      />
+      <MetadataItem
+        show={!!flow}
+        icon={Icons.waves}
+        type="flow"
+        value={flow}
+        small={small}
+      />
+      {type && (
+        <div className="flex flex-row flex-wrap items-center justify-center gap-1">
+          <dt>{type.category.label} :</dt>
+          <dd>
+            <Badge className="gap-2">
+              {type.pictogram && (
+                <Image
+                  loading="lazy"
+                  src={type.pictogram}
+                  width={24}
+                  height={24}
+                  alt=""
+                />
+              )}
+              <span>{type.label}</span>
+            </Badge>
+          </dd>
+        </div>
+      )}
+    </dl>
+  );
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 20dc46b..a480baf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -104,17 +104,31 @@ body .leaflet-container a.leaflet-popup-close-button {
 
 .streams-animation.leaflet-interactive {
   stroke-width: 2;
-  stroke: rgba(255, 255, 255, 0.6);
-  stroke-dasharray: 10;
-  stroke-dashoffset: 200;
+  stroke: rgba(255, 255, 255, 0.75);
+  stroke-dasharray: 1 15;
+  stroke-dashoffset: 208;
   animation-name: dash;
-  animation-duration: 20s;
+  animation-duration: 40s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 
+.streams-hover.leaflet-interactive:focus {
+  outline: none !important;
+  stroke-opacity: 0.5;
+}
+
 @keyframes dash {
   to {
     stroke-dashoffset: 0;
   }
 }
+
+/*
+leaflet bug: tooltips stay open if hovering an element while panning.
+As new tooltips are added at the end of .leaflet-tooltip-pane,
+just hide all tooltips that aren't the last one
+*/
+.leaflet-tooltip-pane > .leaflet-tooltip:not(:last-child) {
+  display: none;
+}