diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 30234a0a3..fd915c61f 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -75,44 +75,42 @@ export const ChartPieVisualization = ({
   );
 };
 
-export const ChartPie = memo(
-  (props: ChartProps<PieConfig> & { published: boolean }) => {
-    const { chartConfig, observations, dimensions, published } = props;
-    const { fields, interactiveFiltersConfig } = chartConfig;
-    const somePositive = observations.some(
-      (d) => (d[fields?.y?.componentIri] as number) > 0
-    );
-    const filters = useChartConfigFilters(chartConfig);
+export const ChartPie = memo((props: ChartProps<PieConfig>) => {
+  const { chartConfig, observations, dimensions } = props;
+  const { fields, interactiveFiltersConfig } = chartConfig;
+  const somePositive = observations.some(
+    (d) => (d[fields?.y?.componentIri] as number) > 0
+  );
+  const filters = useChartConfigFilters(chartConfig);
 
-    if (!somePositive) {
-      return <OnlyNegativeDataHint />;
-    }
+  if (!somePositive) {
+    return <OnlyNegativeDataHint />;
+  }
 
-    return (
-      <PieChart aspectRatio={published ? 1 : 0.4} {...props}>
-        <ChartContainer>
-          <ChartSvg>
-            <Pie />
-          </ChartSvg>
-          <Tooltip type="single" />
-        </ChartContainer>
-        <ChartControlsContainer>
-          {fields.animation && (
-            <TimeSlider
-              filters={filters}
-              dimensions={dimensions}
-              {...fields.animation}
-            />
-          )}
-          <LegendColor
-            chartConfig={chartConfig}
-            symbol="square"
-            interactive={
-              fields.segment && interactiveFiltersConfig?.legend.active
-            }
+  return (
+    <PieChart aspectRatio={0.4} {...props}>
+      <ChartContainer>
+        <ChartSvg>
+          <Pie />
+        </ChartSvg>
+        <Tooltip type="single" />
+      </ChartContainer>
+      <ChartControlsContainer>
+        {fields.animation && (
+          <TimeSlider
+            filters={filters}
+            dimensions={dimensions}
+            {...fields.animation}
           />
-        </ChartControlsContainer>
-      </PieChart>
-    );
-  }
-);
+        )}
+        <LegendColor
+          chartConfig={chartConfig}
+          symbol="square"
+          interactive={
+            fields.segment && interactiveFiltersConfig?.legend.active
+          }
+        />
+      </ChartControlsContainer>
+    </PieChart>
+  );
+});
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index b18d56c81..6416075ea 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -87,44 +87,42 @@ export const ChartScatterplotVisualization = ({
   );
 };
 
-export const ChartScatterplot = memo(
-  (props: ChartProps<ScatterPlotConfig> & { published: boolean }) => {
-    const { chartConfig, dimensions, published } = props;
-    const { fields, interactiveFiltersConfig } = chartConfig;
-    const filters = useChartConfigFilters(chartConfig);
+export const ChartScatterplot = memo((props: ChartProps<ScatterPlotConfig>) => {
+  const { chartConfig, dimensions } = props;
+  const { fields, interactiveFiltersConfig } = chartConfig;
+  const filters = useChartConfigFilters(chartConfig);
 
-    return (
-      <ScatterplotChart aspectRatio={published ? 1 : 0.4} {...props}>
-        <ChartContainer>
-          <ChartSvg>
-            <AxisWidthLinear />
-            <AxisHeightLinear />
-            <AxisWidthLinearDomain />
-            <AxisHeightLinearDomain />
-            <Scatterplot />
-            <InteractionVoronoi />
-          </ChartSvg>
-          <Tooltip type="single" />
-        </ChartContainer>
-        {(fields.animation || fields.segment) && (
-          <ChartControlsContainer>
-            {fields.animation && (
-              <TimeSlider
-                filters={filters}
-                dimensions={dimensions}
-                {...fields.animation}
-              />
-            )}
-            {fields.segment && (
-              <LegendColor
-                chartConfig={chartConfig}
-                symbol="circle"
-                interactive={interactiveFiltersConfig?.legend.active}
-              />
-            )}
-          </ChartControlsContainer>
-        )}
-      </ScatterplotChart>
-    );
-  }
-);
+  return (
+    <ScatterplotChart aspectRatio={0.4} {...props}>
+      <ChartContainer>
+        <ChartSvg>
+          <AxisWidthLinear />
+          <AxisHeightLinear />
+          <AxisWidthLinearDomain />
+          <AxisHeightLinearDomain />
+          <Scatterplot />
+          <InteractionVoronoi />
+        </ChartSvg>
+        <Tooltip type="single" />
+      </ChartContainer>
+      {(fields.animation || fields.segment) && (
+        <ChartControlsContainer>
+          {fields.animation && (
+            <TimeSlider
+              filters={filters}
+              dimensions={dimensions}
+              {...fields.animation}
+            />
+          )}
+          {fields.segment && (
+            <LegendColor
+              chartConfig={chartConfig}
+              symbol="circle"
+              interactive={interactiveFiltersConfig?.legend.active}
+            />
+          )}
+        </ChartControlsContainer>
+      )}
+    </ScatterplotChart>
+  );
+});
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
index ecf3522ac..400b356b0 100644
--- a/app/charts/shared/chart-data-filters.tsx
+++ b/app/charts/shared/chart-data-filters.tsx
@@ -7,7 +7,6 @@ import { useClient } from "urql";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
 import { useLoadingState } from "@/charts/shared/chart-loading-state";
-import { ChartFiltersList } from "@/components/chart-filters-list";
 import Flex from "@/components/flex";
 import { Select } from "@/components/form";
 import { Loading } from "@/components/hint";
@@ -132,39 +131,41 @@ export const ChartDataFilters = (props: ChartDataFiltersProps) => {
       </Trans>
     </Typography>
   ) : (
-    <Flex sx={{ flexDirection: "column", my: 4 }}>
+    <Flex sx={{ flexDirection: "column", mt: 4 }}>
       <Flex
         sx={{
-          justifyContent: "space-between",
+          justifyContent: "flex-end",
           alignItems: "flex-start",
           gap: 3,
           minHeight: 20,
         }}
       >
-        <ChartFiltersList
-          dataSource={dataSource}
-          chartConfig={chartConfig}
-          dimensions={dimensions}
-          measures={measures}
-        />
-
         {componentIris.length > 0 && (
           <Button
             variant="text"
-            endIcon={<Icon name={filtersVisible ? "close" : "add"} size={15} />}
+            endIcon={
+              <Icon
+                name="add"
+                size={16}
+                style={{
+                  transform: filtersVisible ? "rotate(45deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s ease-in-out",
+                }}
+              />
+            }
             sx={{
               display: "flex",
               fontSize: ["0.75rem", "0.75rem", "0.75rem"],
               alignItems: "center",
-              gap: 2,
               minWidth: "fit-content",
-              minHeight: 36,
-              px: 3,
+              minHeight: 0,
+              px: 2,
+              py: 1,
             }}
             onClick={() => setFiltersVisible(!filtersVisible)}
           >
             {loading && (
-              <span style={{ marginTop: "0.1rem" }}>
+              <span style={{ marginTop: "0.1rem", marginRight: "0.5rem" }}>
                 <LoadingIndicator />
               </span>
             )}
diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
index 50fd43907..4667285f6 100644
--- a/app/charts/shared/containers.tsx
+++ b/app/charts/shared/containers.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode } from "react";
 
 import { useChartState } from "@/charts/shared/chart-state";
 import { CalculationToggle } from "@/charts/shared/interactive-filter-calculation-toggle";
+import { useAlignChartElements } from "@/components/chart-helpers";
 import { useTransitionStore } from "@/stores/transition";
 
 export const ChartContainer = ({ children }: { children: ReactNode }) => {
@@ -12,6 +13,7 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
   const transitionDuration = useTransitionStore((state) => state.duration);
   const { bounds } = useChartState();
   const { width, height } = bounds;
+  const alignChartElements = useAlignChartElements();
 
   React.useEffect(() => {
     if (ref.current) {
@@ -27,8 +29,25 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
     }
   }, [height, enableTransition, transitionDuration]);
 
+  React.useEffect(() => {
+    if (height > alignChartElements.maxChartHeight) {
+      alignChartElements.setMaxChartHeight(height);
+    }
+  }, [height, alignChartElements]);
+
   return (
-    <div ref={ref} aria-hidden="true" style={{ position: "relative", width }}>
+    <div
+      ref={ref}
+      aria-hidden="true"
+      style={{
+        position: "relative",
+        width,
+        marginBottom: `${Math.max(
+          alignChartElements.maxChartHeight - height,
+          0
+        )}px`,
+      }}
+    >
       {children}
     </div>
   );
diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
index 98c9c89f6..f44d0ca03 100644
--- a/app/components/chart-filters-list.tsx
+++ b/app/components/chart-filters-list.tsx
@@ -1,3 +1,4 @@
+import { Trans } from "@lingui/macro";
 import { Box, Typography } from "@mui/material";
 import React, { Fragment } from "react";
 
@@ -144,10 +145,19 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
   return allFilters.length ? (
     <Typography
       component="div"
-      variant="body2"
-      sx={{ mb: 4, color: "grey.800" }}
+      variant="caption"
+      color="grey.600"
       data-testid="chart-filters-list"
     >
+      <Typography
+        component="span"
+        variant="inherit"
+        fontWeight="bold"
+        color="grey.600"
+        sx={{ mr: 2 }}
+      >
+        <Trans id="controls.section.data.filters">Filters</Trans>:
+      </Typography>
       {allFilters.map(({ dimension, value }, i) => (
         <Fragment key={dimension.iri}>
           <Box component="span" fontWeight="bold">
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 10b526d46..ef95893de 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -7,6 +7,7 @@ import {
   extractChartConfigComponentIris,
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
+import { ChartFiltersList } from "@/components/chart-filters-list";
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
 import { ChartConfig, DataSource } from "@/configurator";
@@ -112,7 +113,13 @@ export const ChartFootnotes = ({
   ] = useEmbedOptions();
 
   return (
-    <>
+    <div>
+      <ChartFiltersList
+        dataSource={dataSource}
+        chartConfig={chartConfig}
+        dimensions={dimensions}
+        measures={measures}
+      />
       {data?.dataCubesMetadata
         ? data.dataCubesMetadata.map((dataCubeMetadata) => {
             const cubeLink = makeOpenDataLink(locale, dataCubeMetadata);
@@ -274,7 +281,7 @@ export const ChartFootnotes = ({
             );
           })
         : null}
-    </>
+    </div>
   );
 };
 
diff --git a/app/components/chart-helpers.tsx b/app/components/chart-helpers.tsx
new file mode 100644
index 000000000..309a2826f
--- /dev/null
+++ b/app/components/chart-helpers.tsx
@@ -0,0 +1,101 @@
+import debounce from "lodash/debounce";
+import React from "react";
+
+type AlignChartElementsContext = {
+  reset: () => void;
+  maxHeaderHeight: number;
+  setMaxHeaderHeight: (height: number) => void;
+  maxChartHeight: number;
+  setMaxChartHeight: (height: number) => void;
+};
+
+const AlignChartElementsContext =
+  React.createContext<AlignChartElementsContext>({
+    reset: () => {},
+    maxHeaderHeight: 0,
+    setMaxHeaderHeight: () => {},
+    maxChartHeight: 0,
+    setMaxChartHeight: () => {},
+  });
+
+export const useAlignChartElements = () => {
+  const ctx = React.useContext(AlignChartElementsContext);
+
+  if (ctx === undefined) {
+    throw Error(
+      "You need to wrap your component in <AlignChartElementsProvider /> to useAlignChartElements()"
+    );
+  }
+
+  return ctx;
+};
+
+/** Used to be able to properly align common chart elements in multi-column layouts. */
+export const AlignChartElementsProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [maxHeaderHeight, setMaxHeaderHeight] = React.useState(0);
+  const [maxChartHeight, setMaxChartHeight] = React.useState(0);
+  const reset = React.useCallback(() => {
+    setMaxHeaderHeight(0);
+    setMaxChartHeight(0);
+  }, []);
+
+  React.useEffect(() => {
+    const resizeReset = debounce(reset, 100);
+    window.addEventListener("resize", resizeReset);
+
+    return () => {
+      window.removeEventListener("resize", resizeReset);
+    };
+  }, [reset]);
+
+  return (
+    <AlignChartElementsContext.Provider
+      value={{
+        reset,
+        maxHeaderHeight,
+        setMaxHeaderHeight,
+        maxChartHeight,
+        setMaxChartHeight,
+      }}
+    >
+      {children}
+    </AlignChartElementsContext.Provider>
+  );
+};
+
+export const useChartHeaderMarginBottom = () => {
+  const alignChartElements = useAlignChartElements();
+  const headerRef = React.useRef<HTMLDivElement>(null);
+  const oldMargin = React.useRef(0);
+
+  React.useEffect(() => {
+    if (headerRef.current) {
+      const { height } = headerRef.current.getBoundingClientRect();
+
+      if (height > alignChartElements.maxHeaderHeight) {
+        alignChartElements.setMaxHeaderHeight(height);
+      }
+    }
+  }, [alignChartElements]);
+
+  const headerMarginBottom = React.useMemo(() => {
+    if (headerRef.current) {
+      const { height } = headerRef.current.getBoundingClientRect();
+      const newMargin =
+        alignChartElements.maxHeaderHeight === 0
+          ? oldMargin.current
+          : alignChartElements.maxHeaderHeight - height;
+      oldMargin.current = newMargin;
+
+      return newMargin;
+    }
+
+    return 0;
+  }, [alignChartElements.maxHeaderHeight]);
+
+  return { headerRef, headerMarginBottom };
+};
diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
index 157220ecf..867df3e65 100644
--- a/app/components/chart-panel.tsx
+++ b/app/components/chart-panel.tsx
@@ -1,10 +1,12 @@
-import { Box, BoxProps, Theme } from "@mui/material";
+import { Box, BoxProps, Theme, useMediaQuery } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import capitalize from "lodash/capitalize";
 import React from "react";
 
+import { AlignChartElementsProvider } from "@/components/chart-helpers";
 import { ChartSelectionTabs } from "@/components/chart-selection-tabs";
-import { Layout } from "@/config-types";
+import { ChartConfig, Layout } from "@/config-types";
+import { useTheme } from "@/themes";
 
 const useStyles = makeStyles((theme: Theme) => ({
   panelLayoutVertical: {
@@ -13,16 +15,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     gap: theme.spacing(4),
   },
   panelLayoutTall: {
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 50%)",
+    display: "flex",
+    flexDirection: "column",
     gap: theme.spacing(4),
-
-    "& > :nth-child(3n - 2)": {
-      gridColumn: "1 / span 2",
-    },
-    "& > :nth-child(3n - 1, 3n)": {
-      gridColumn: "1 / span 1",
-    },
   },
   chartWrapper: {
     display: "flex",
@@ -36,6 +31,30 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export type ChartWrapperProps = BoxProps & {
+  editing?: boolean;
+  layoutType?: Layout["type"];
+};
+
+export const ChartWrapper = React.forwardRef<HTMLDivElement, ChartWrapperProps>(
+  (props, ref) => {
+    const { children, editing, layoutType, ...rest } = props;
+    const classes = useStyles();
+
+    return (
+      <Box ref={ref} {...rest}>
+        {(editing || layoutType === "tab") && <ChartSelectionTabs />}
+        <Box
+          className={classes.chartWrapper}
+          sx={{ minHeight: [150, 300, 500] }}
+        >
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+);
+
 type ChartPanelLayoutProps = React.PropsWithChildren<{
   type: Extract<Layout, { type: "dashboard" }>["layout"];
 }>;
@@ -59,26 +78,133 @@ export const ChartPanelLayout = (props: ChartPanelLayoutProps) => {
   );
 };
 
-export type ChartWrapperProps = BoxProps & {
-  editing?: boolean;
-  layout?: Layout;
+type ChartPanelLayoutVerticalProps = {
+  chartConfigs: ChartConfig[];
+  renderChart: (chartConfig: ChartConfig) => JSX.Element;
 };
 
-export const ChartWrapper = React.forwardRef<HTMLDivElement, ChartWrapperProps>(
-  (props, ref) => {
-    const { children, editing, layout, ...rest } = props;
-    const classes = useStyles();
+export const ChartPanelLayoutVertical = (
+  props: ChartPanelLayoutVerticalProps
+) => {
+  const { chartConfigs, renderChart } = props;
 
-    return (
-      <Box ref={ref} {...rest}>
-        {(editing || layout?.type === "tab") && <ChartSelectionTabs />}
+  return (
+    <ChartPanelLayout type="tall">
+      {chartConfigs.map(renderChart)}
+    </ChartPanelLayout>
+  );
+};
+
+type ChartPanelLayoutTallProps = {
+  chartConfigs: ChartConfig[];
+  renderChart: (chartConfig: ChartConfig) => JSX.Element;
+};
+
+export const ChartPanelLayoutTall = (props: ChartPanelLayoutTallProps) => {
+  const { chartConfigs, renderChart } = props;
+  const rows = React.useMemo(() => {
+    return getChartPanelLayoutTallRows(chartConfigs, renderChart);
+  }, [chartConfigs, renderChart]);
+
+  return (
+    <ChartPanelLayout type="tall">
+      {rows.map((row, i) => (
+        <ChartPanelLayoutTallRow key={i} row={row} />
+      ))}
+    </ChartPanelLayout>
+  );
+};
+
+type ChartPanelLayoutTallRowProps = {
+  row: ChartPanelLayoutTallRow;
+};
+
+export const ChartPanelLayoutTallRow = (
+  props: ChartPanelLayoutTallRowProps
+) => {
+  const { row } = props;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  switch (row.type) {
+    case "wide":
+      return (
+        <AlignChartElementsProvider>
+          {row.renderChart(row.chartConfig)}
+        </AlignChartElementsProvider>
+      );
+    case "narrow":
+      if (isMobile) {
+        return (
+          <>
+            {row.chartConfigs.map((chartConfig) => (
+              <AlignChartElementsProvider key={chartConfig.key}>
+                {row.renderChart(chartConfig)}
+              </AlignChartElementsProvider>
+            ))}
+          </>
+        );
+      }
+
+      return (
         <Box
-          className={classes.chartWrapper}
-          sx={{ minHeight: [150, 300, 500] }}
+          sx={{
+            display: "grid",
+            gridTemplateColumns: {
+              xs: "1fr",
+              md: "calc(50% - 8px) calc(50% - 8px)",
+            },
+            gap: "16px",
+          }}
         >
-          {children}
+          <AlignChartElementsProvider>
+            {row.chartConfigs.map(row.renderChart)}
+          </AlignChartElementsProvider>
         </Box>
-      </Box>
-    );
+      );
   }
+};
+
+type ChartPanelLayoutTallRow = {
+  renderChart: (chartConfig: ChartConfig) => JSX.Element;
+} & (
+  | {
+      type: "wide";
+      chartConfig: ChartConfig;
+    }
+  | {
+      type: "narrow";
+      chartConfigs: [ChartConfig] | [ChartConfig, ChartConfig];
+    }
 );
+
+export const getChartPanelLayoutTallRows = (
+  chartConfigs: ChartConfig[],
+  renderChart: (chartConfig: ChartConfig) => JSX.Element
+): ChartPanelLayoutTallRow[] => {
+  const rows: ChartPanelLayoutTallRow[] = [];
+
+  for (let i = 0; i < chartConfigs.length; i += 1) {
+    if (i % 3 === 0) {
+      rows.push({
+        type: "wide",
+        chartConfig: chartConfigs[i],
+        renderChart,
+      });
+    }
+
+    if (i % 3 === 1) {
+      const currentConfig = chartConfigs[i];
+      const nextConfig = chartConfigs[i + 1];
+      rows.push({
+        type: "narrow",
+        chartConfigs: nextConfig
+          ? [currentConfig, nextConfig]
+          : [currentConfig],
+        renderChart,
+      });
+    }
+  }
+
+  return rows;
+};
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 12329e5c7..fec724c93 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -6,18 +6,23 @@ import {
   useDraggable,
   useDroppable,
 } from "@dnd-kit/core";
-// import { snapCenterToCursor } from "@dnd-kit/modifiers";
-import { getEventCoordinates } from "@dnd-kit/utilities";
 import { Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import Head from "next/head";
 import React from "react";
 
 import { DataSetTable } from "@/browse/datatable";
+import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
+import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
 import { ChartErrorBoundary } from "@/components/chart-error-boundary";
 import { ChartFootnotes } from "@/components/chart-footnotes";
 import {
-  ChartPanelLayout,
+  useAlignChartElements,
+  useChartHeaderMarginBottom,
+} from "@/components/chart-helpers";
+import {
+  ChartPanelLayoutTall,
+  ChartPanelLayoutVertical,
   ChartWrapper,
   ChartWrapperProps,
 } from "@/components/chart-panel";
@@ -32,12 +37,12 @@ import Flex from "@/components/flex";
 import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
 import {
+  ChartConfig,
   DataSource,
   Layout,
   getChartConfig,
   hasChartConfigs,
   isConfiguring,
-  isLayouting,
   useConfiguratorState,
 } from "@/configurator";
 import { Description, Title } from "@/configurator/components/annotators";
@@ -47,12 +52,12 @@ import {
 } from "@/graphql/hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
+import { InteractiveFiltersProvider } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { useTheme } from "@/themes";
+import { snapCornerToCursor } from "@/utils/dnd";
 import useEvent from "@/utils/use-event";
 
-import type { Modifier } from "@dnd-kit/core";
-
 type ChartPreviewProps = {
   dataSource: DataSource;
 };
@@ -63,26 +68,25 @@ export const ChartPreview = (props: ChartPreviewProps) => {
   const editing = isConfiguring(state);
   const { layout } = state;
 
-  return (
+  return layout.type === "dashboard" && !editing ? (
+    <DashboardPreview dataSource={dataSource} layoutType={layout.layout} />
+  ) : (
     <ChartTablePreviewProvider>
-      {layout.type === "dashboard" && !editing ? (
-        <DashboardPreview dataSource={dataSource} layoutType={layout.layout} />
-      ) : (
-        <ChartWrapper editing={editing} layout={layout}>
-          <ChartPreviewInner dataSource={dataSource} />
-        </ChartWrapper>
-      )}
+      <ChartWrapper editing={editing} layoutType={layout.type}>
+        <ChartPreviewInner dataSource={dataSource} />
+      </ChartWrapper>
     </ChartTablePreviewProvider>
   );
 };
 
 type DashboardPreviewProps = ChartPreviewProps & {
   layoutType: Extract<Layout, { type: "dashboard" }>["layout"];
+  editing?: boolean;
 };
 
 const DashboardPreview = (props: DashboardPreviewProps) => {
-  const { dataSource, layoutType } = props;
-  const [state, dispatch] = useConfiguratorState(isLayouting);
+  const { dataSource, layoutType, editing } = props;
+  const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const theme = useTheme();
   const transition = useTransitionStore();
   const [isDragging, setIsDragging] = React.useState(false);
@@ -90,78 +94,87 @@ const DashboardPreview = (props: DashboardPreviewProps) => {
     null
   );
   const [over, setOver] = React.useState<Over | null>(null);
+  const renderChart = React.useCallback(
+    (chartConfig: ChartConfig) => (
+      <DndChartPreview
+        chartKey={chartConfig.key}
+        dataSource={dataSource}
+        layoutType={state.layout.type}
+        editing={editing}
+      />
+    ),
+    [dataSource, editing, state.layout]
+  );
 
   return (
-    <ChartPanelLayout type={layoutType}>
-      <DndContext
-        collisionDetection={pointerWithin}
-        onDragStart={(e) => {
-          transition.setEnable(false);
-          setIsDragging(true);
-          setActiveChartKey(`${e.active.id}`);
-        }}
-        onDragMove={(e) => {
-          if (e.over?.id !== over?.id && e.over?.id !== activeChartKey) {
-            setOver(e.over);
-          }
-        }}
-        onDragEnd={(e) => {
-          transition.setEnable(true);
-          setIsDragging(false);
-          setActiveChartKey(null);
-          setOver(null);
+    <DndContext
+      collisionDetection={pointerWithin}
+      onDragStart={(e) => {
+        transition.setEnable(false);
+        setIsDragging(true);
+        setActiveChartKey(`${e.active.id}`);
+      }}
+      onDragMove={(e) => {
+        if (e.over?.id !== over?.id && e.over?.id !== activeChartKey) {
+          setOver(e.over);
+        }
+      }}
+      onDragEnd={(e) => {
+        transition.setEnable(true);
+        setIsDragging(false);
+        setActiveChartKey(null);
+        setOver(null);
 
-          const { active, over } = e;
+        const { active, over } = e;
 
-          if (!active || !over) {
-            return;
-          }
+        if (!active || !over) {
+          return;
+        }
 
-          dispatch({
-            type: "CHART_CONFIG_SWAP",
-            value: {
-              oldIndex: state.chartConfigs.findIndex(
-                (c) => c.key === active.id
-              ),
-              newIndex: state.chartConfigs.findIndex((c) => c.key === over.id),
-            },
-          });
-        }}
-      >
-        {state.chartConfigs.map((chartConfig) => (
-          <DndChartPreview
-            key={chartConfig.key}
-            chartKey={chartConfig.key}
-            dataSource={props.dataSource}
-            layout={state.layout}
-          />
-        ))}
-        {isDragging && (
-          <DragOverlay
-            zIndex={1000}
-            modifiers={[snapCornerToCursor]}
-            style={{
-              opacity: over ? 0.8 : 1,
-              width: "min(40vh, 400px)",
-              height: "fit-content",
-              border: `2px solid ${
-                over ? theme.palette.primary.main : "transparent"
-              }`,
-              cursor: "grabbing",
-              pointerEvents: "none",
-            }}
-          >
-            <ChartWrapper layout={state.layout}>
-              <ChartPreviewInner
-                dataSource={dataSource}
-                chartKey={activeChartKey}
-                disableMetadataPanel
-              />
-            </ChartWrapper>
-          </DragOverlay>
-        )}
-      </DndContext>
-    </ChartPanelLayout>
+        dispatch({
+          type: "CHART_CONFIG_SWAP",
+          value: {
+            oldIndex: state.chartConfigs.findIndex((c) => c.key === active.id),
+            newIndex: state.chartConfigs.findIndex((c) => c.key === over.id),
+          },
+        });
+      }}
+    >
+      {layoutType === "tall" ? (
+        <ChartPanelLayoutTall
+          chartConfigs={state.chartConfigs}
+          renderChart={renderChart}
+        />
+      ) : (
+        <ChartPanelLayoutVertical
+          chartConfigs={state.chartConfigs}
+          renderChart={renderChart}
+        />
+      )}
+      {isDragging && (
+        <DragOverlay
+          zIndex={1000}
+          modifiers={[snapCornerToCursor]}
+          style={{
+            opacity: over ? 0.8 : 1,
+            width: "min(40vh, 400px)",
+            height: "fit-content",
+            border: `2px solid ${
+              over ? theme.palette.primary.main : "transparent"
+            }`,
+            cursor: "grabbing",
+          }}
+        >
+          <ChartWrapper>
+            <ChartPreviewInner
+              dataSource={dataSource}
+              chartKey={activeChartKey}
+              dragHandleSlot={<DragHandle dragging />}
+            />
+          </ChartWrapper>
+        </DragOverlay>
+      )}
+    </DndContext>
   );
 };
 
@@ -173,6 +186,12 @@ type DndChartPreviewProps = ChartWrapperProps & {
 const DndChartPreview = (props: DndChartPreviewProps) => {
   const { children, chartKey, dataSource, ...rest } = props;
   const theme = useTheme();
+  const { reset: resetAlignChartElements } = useAlignChartElements();
+
+  // Reset max heights when the order of the charts changes.
+  React.useEffect(() => {
+    resetAlignChartElements();
+  }, [chartKey, resetAlignChartElements]);
 
   const {
     setActivatorNodeRef,
@@ -197,31 +216,33 @@ const DndChartPreview = (props: DndChartPreviewProps) => {
   );
 
   return (
-    <ChartWrapper
-      {...rest}
-      ref={setRef}
-      {...attributes}
-      style={{
-        opacity: isDragging ? 0 : isOver ? 0.8 : 1,
-        border: `2px solid ${
-          isOver && !isDragging ? theme.palette.primary.main : "transparent"
-        }`,
-        outline: "none",
-        pointerEvents: active ? "none" : "auto",
-      }}
-    >
-      <ChartPreviewInner
-        dataSource={dataSource}
-        chartKey={chartKey}
-        dragHandleSlot={
-          <DragHandle
-            {...listeners}
-            ref={setActivatorNodeRef}
-            dragging={isDragging}
-          />
-        }
-      />
-    </ChartWrapper>
+    <ChartTablePreviewProvider>
+      <ChartWrapper
+        {...rest}
+        ref={setRef}
+        {...attributes}
+        style={{
+          opacity: isDragging ? 0 : isOver ? 0.8 : 1,
+          border: `2px solid ${
+            isOver && !isDragging ? theme.palette.primary.main : "transparent"
+          }`,
+          outline: "none",
+          pointerEvents: active ? "none" : "auto",
+        }}
+      >
+        <ChartPreviewInner
+          dataSource={dataSource}
+          chartKey={chartKey}
+          dragHandleSlot={
+            <DragHandle
+              {...listeners}
+              ref={setActivatorNodeRef}
+              dragging={isDragging}
+            />
+          }
+        />
+      </ChartWrapper>
+    </ChartTablePreviewProvider>
   );
 };
 
@@ -265,6 +286,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
     containerRef,
     containerHeight,
   } = useChartTablePreview();
+  const { headerRef, headerMarginBottom } = useChartHeaderMarginBottom();
 
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
   const dimensions = components?.dataCubesComponents.dimensions;
@@ -284,7 +306,6 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
     <Flex
       sx={{
         flexDirection: "column",
-        justifyContent: "space-between",
         flexGrow: 1,
         color: "grey.800",
         p: 6,
@@ -308,46 +329,6 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
         )}
         {hasChartConfigs(state) && (
           <>
-            <Flex
-              sx={{
-                justifyContent:
-                  state.state === "CONFIGURING_CHART" ||
-                  chartConfig.meta.title[locale]
-                    ? "space-between"
-                    : "flex-end",
-                alignItems: "flex-start",
-                gap: 2,
-              }}
-            >
-              {(state.state === "CONFIGURING_CHART" ||
-                chartConfig.meta.title[locale]) && (
-                <Title
-                  text={chartConfig.meta.title[locale]}
-                  lighterColor
-                  onClick={
-                    state.state === "CONFIGURING_CHART"
-                      ? () =>
-                          dispatch({
-                            type: "CHART_ACTIVE_FIELD_CHANGED",
-                            value: "title",
-                          })
-                      : undefined
-                  }
-                />
-              )}
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
-                {!disableMetadataPanel && (
-                  <MetadataPanel
-                    // FIXME: adapt to design
-                    datasetIri={chartConfig.cubes[0].iri}
-                    dataSource={dataSource}
-                    dimensions={allComponents}
-                    top={96}
-                  />
-                )}
-                {dragHandleSlot}
-              </Flex>
-            </Flex>
             <Head>
               <title key="title">
                 {!chartConfig.meta.title[locale]
@@ -357,80 +338,127 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
                 - visualize.admin.ch
               </title>
             </Head>
-            {(state.state === "CONFIGURING_CHART" ||
-              chartConfig.meta.description[locale]) && (
-              <Description
-                text={chartConfig.meta.description[locale]}
-                lighterColor
-                onClick={
-                  state.state === "CONFIGURING_CHART"
-                    ? () => {
-                        dispatch({
-                          type: "CHART_ACTIVE_FIELD_CHANGED",
-                          value: "description",
-                        });
-                      }
-                    : undefined
-                }
-              />
-            )}
-            <Box ref={containerRef} height={containerHeight.current!} mt={4}>
-              {isTablePreview ? (
-                <DataSetTable
+            <LoadingStateProvider>
+              <InteractiveFiltersProvider>
+                <Box
                   sx={{
-                    width: "100%",
-                    maxHeight: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    height: "100%",
                   }}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              ) : (
-                <ChartWithFilters
-                  dataSource={dataSource}
-                  componentIris={componentIris}
-                  chartConfig={chartConfig}
-                  dimensions={dimensions}
-                  measures={measures}
-                />
-              )}
-            </Box>
-            {chartConfig && (
-              <ChartFootnotes
-                dataSource={dataSource}
-                chartConfig={chartConfig}
-                onToggleTableView={handleToggleTableView}
-                dimensions={dimensions}
-                measures={measures}
-              />
-            )}
-            <DebugPanel configurator interactiveFilters />
+                >
+                  <div style={{ height: "100%" }}>
+                    <div
+                      ref={headerRef}
+                      style={{
+                        marginBottom: `${headerMarginBottom}px`,
+                        transition: "margin-bottom 0.2s ease-in-out",
+                      }}
+                    >
+                      <Flex
+                        sx={{
+                          justifyContent:
+                            state.state === "CONFIGURING_CHART" ||
+                            chartConfig.meta.title[locale]
+                              ? "space-between"
+                              : "flex-end",
+                          alignItems: "flex-start",
+                          gap: 2,
+                        }}
+                      >
+                        {(state.state === "CONFIGURING_CHART" ||
+                          chartConfig.meta.title[locale]) && (
+                          <Title
+                            text={chartConfig.meta.title[locale]}
+                            lighterColor
+                            onClick={
+                              state.state === "CONFIGURING_CHART"
+                                ? () =>
+                                    dispatch({
+                                      type: "CHART_ACTIVE_FIELD_CHANGED",
+                                      value: "title",
+                                    })
+                                : undefined
+                            }
+                          />
+                        )}
+                        <Flex sx={{ alignItems: "center", gap: 2 }}>
+                          {!disableMetadataPanel && (
+                            <MetadataPanel
+                              // FIXME: adapt to design
+                              datasetIri={chartConfig.cubes[0].iri}
+                              dataSource={dataSource}
+                              dimensions={allComponents}
+                              top={96}
+                            />
+                          )}
+                          {dragHandleSlot}
+                        </Flex>
+                      </Flex>
+                      {(state.state === "CONFIGURING_CHART" ||
+                        chartConfig.meta.description[locale]) && (
+                        <Description
+                          text={chartConfig.meta.description[locale]}
+                          lighterColor
+                          onClick={
+                            state.state === "CONFIGURING_CHART"
+                              ? () => {
+                                  dispatch({
+                                    type: "CHART_ACTIVE_FIELD_CHANGED",
+                                    value: "description",
+                                  });
+                                }
+                              : undefined
+                          }
+                        />
+                      )}
+                      {chartConfig.interactiveFiltersConfig?.dataFilters
+                        .active && (
+                        <ChartDataFilters
+                          dataSource={dataSource}
+                          chartConfig={chartConfig}
+                          dimensions={dimensions}
+                          measures={measures}
+                        />
+                      )}
+                    </div>
+                    <Box
+                      ref={containerRef}
+                      height={containerHeight.current}
+                      pt={4}
+                    >
+                      {isTablePreview ? (
+                        <DataSetTable
+                          dataSource={dataSource}
+                          chartConfig={chartConfig}
+                          sx={{ width: "100%", maxHeight: "100%" }}
+                        />
+                      ) : (
+                        <ChartWithFilters
+                          dataSource={dataSource}
+                          componentIris={componentIris}
+                          chartConfig={chartConfig}
+                          dimensions={dimensions}
+                          measures={measures}
+                        />
+                      )}
+                    </Box>
+                  </div>
+                  <ChartFootnotes
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                    onToggleTableView={handleToggleTableView}
+                    dimensions={dimensions}
+                    measures={measures}
+                  />
+                </Box>
+                <DebugPanel configurator interactiveFilters />
+              </InteractiveFiltersProvider>
+            </LoadingStateProvider>
           </>
         )}
       </ChartErrorBoundary>
     </Flex>
   );
 };
-
-const snapCornerToCursor: Modifier = ({
-  activatorEvent,
-  draggingNodeRect,
-  transform,
-}) => {
-  if (draggingNodeRect && activatorEvent) {
-    const activatorCoordinates = getEventCoordinates(activatorEvent);
-
-    if (!activatorCoordinates) {
-      return transform;
-    }
-
-    const offsetX = activatorCoordinates.x - draggingNodeRect.left + 48;
-
-    return {
-      ...transform,
-      x: transform.x + offsetX - draggingNodeRect.width,
-      y: transform.y,
-    };
-  }
-
-  return transform;
-};
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 55918b421..98601dc31 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -1,15 +1,22 @@
 import { Trans } from "@lingui/macro";
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useStore } from "zustand";
 
 import { DataSetTable } from "@/browse/datatable";
+import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { extractChartConfigsComponentIris } from "@/charts/shared/chart-helpers";
+import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
 import { isUsingImputation } from "@/charts/shared/imputation";
 import { ChartErrorBoundary } from "@/components/chart-error-boundary";
 import { ChartFootnotes } from "@/components/chart-footnotes";
-import { ChartPanelLayout, ChartWrapper } from "@/components/chart-panel";
+import { useChartHeaderMarginBottom } from "@/components/chart-helpers";
+import {
+  ChartPanelLayoutTall,
+  ChartPanelLayoutVertical,
+  ChartWrapper,
+} from "@/components/chart-panel";
 import {
   ChartTablePreviewProvider,
   useChartTablePreview,
@@ -55,70 +62,82 @@ export const ChartPublished = (props: ChartPublishedProps) => {
   const [state] = useConfiguratorState(isPublished);
   const { dataSource } = state;
   const locale = useLocale();
+  const renderChart = React.useCallback(
+    (chartConfig: ChartConfig) => (
+      <ChartTablePreviewProvider key={chartConfig.key}>
+        <ChartWrapper key={chartConfig.key} layoutType={state.layout.type}>
+          <ChartPublishedInner
+            dataSource={dataSource}
+            state={state}
+            chartConfig={chartConfig}
+            configKey={configKey}
+          />
+        </ChartWrapper>
+      </ChartTablePreviewProvider>
+    ),
+    [configKey, dataSource, state]
+  );
 
-  return (
-    <ChartTablePreviewProvider>
-      {state.layout.type === "dashboard" ? (
-        <>
-          <Box
-            sx={{
-              mb:
-                state.layout.meta.title[locale] ||
-                state.layout.meta.description[locale]
-                  ? 4
-                  : 0,
-            }}
-          >
-            {state.layout.meta.title[locale] && (
-              <Title text={state.layout.meta.title[locale]} />
-            )}
-            {state.layout.meta.description[locale] && (
-              <Description text={state.layout.meta.description[locale]} />
-            )}
-          </Box>
-          <ChartPanelLayout type={state.layout.layout}>
-            {state.chartConfigs.map((chartConfig) => (
-              <ChartWrapper key={chartConfig.key} layout={state.layout}>
-                <ChartPublishedInner
-                  dataSource={dataSource}
-                  state={state}
-                  chartConfig={chartConfig}
-                  configKey={configKey}
-                />
-              </ChartWrapper>
-            ))}
-          </ChartPanelLayout>
-        </>
+  return state.layout.type === "dashboard" ? (
+    <>
+      <Box
+        sx={{
+          mb:
+            state.layout.meta.title[locale] ||
+            state.layout.meta.description[locale]
+              ? 4
+              : 0,
+        }}
+      >
+        {state.layout.meta.title[locale] && (
+          <Title text={state.layout.meta.title[locale]} />
+        )}
+        {state.layout.meta.description[locale] && (
+          <Description text={state.layout.meta.description[locale]} />
+        )}
+      </Box>
+      {state.layout.layout === "tall" ? (
+        <ChartPanelLayoutTall
+          chartConfigs={state.chartConfigs}
+          renderChart={renderChart}
+        />
       ) : (
-        <>
-          <Flex
-            sx={{
-              flexDirection: "column",
-              mb:
-                state.layout.meta.title[locale] ||
-                state.layout.meta.description[locale]
-                  ? 4
-                  : 0,
-            }}
-          >
-            {state.layout.meta.title[locale] && (
-              <Title text={state.layout.meta.title[locale]} />
-            )}
-            {state.layout.meta.description[locale] && (
-              <Description text={state.layout.meta.description[locale]} />
-            )}
-          </Flex>
-          <ChartWrapper layout={state.layout}>
-            <ChartPublishedInner
-              dataSource={dataSource}
-              state={state}
-              chartConfig={getChartConfig(state)}
-              configKey={configKey}
-            />
-          </ChartWrapper>
-        </>
+        <ChartPanelLayoutVertical
+          chartConfigs={state.chartConfigs}
+          renderChart={renderChart}
+        />
       )}
-    </ChartTablePreviewProvider>
+    </>
+  ) : (
+    <>
+      <Flex
+        sx={{
+          flexDirection: "column",
+          mb:
+            state.layout.meta.title[locale] ||
+            state.layout.meta.description[locale]
+              ? 4
+              : 0,
+        }}
+      >
+        {state.layout.meta.title[locale] && (
+          <Title text={state.layout.meta.title[locale]} />
+        )}
+        {state.layout.meta.description[locale] && (
+          <Description text={state.layout.meta.description[locale]} />
+        )}
+      </Flex>
+      <ChartTablePreviewProvider>
+        <ChartWrapper layoutType={state.layout.type}>
+          <ChartPublishedInner
+            dataSource={dataSource}
+            state={state}
+            chartConfig={getChartConfig(state)}
+            configKey={configKey}
+          />
+        </ChartWrapper>
+      </ChartTablePreviewProvider>
+    </>
   );
 };
 
@@ -161,6 +180,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
     containerHeight,
     computeContainerHeight,
   } = useChartTablePreview();
+  const { headerRef, headerMarginBottom } = useChartHeaderMarginBottom();
 
   const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
   const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);
@@ -276,65 +296,85 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
               </HintBlue>
             </Box>
           )}
-          <Flex
-            sx={{
-              justifyContent: meta.title[locale] ? "space-between" : "flex-end",
-              alignItems: "center",
-              gap: 2,
-            }}
-          >
-            {meta.title[locale] && <Title text={meta.title[locale]} />}
-            <MetadataPanel
-              // FIXME: adapt to design
-              datasetIri={chartConfig.cubes[0].iri}
-              dataSource={dataSource}
-              dimensions={allComponents}
-              container={rootRef.current}
-            />
-          </Flex>
-          {meta.description[locale] && (
-            <Description text={meta.description[locale]} />
-          )}
-          <InteractiveFiltersProvider>
-            <Flex
-              flexDirection="column"
-              ref={containerRef}
-              height={containerHeight.current!}
-              flexGrow={1}
-              mt={4}
-            >
-              {isTablePreview ? (
-                <DataSetTable
-                  sx={{ maxHeight: "100%" }}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              ) : (
-                <ChartWithFilters
-                  dataSource={dataSource}
-                  componentIris={componentIris}
-                  chartConfig={chartConfig}
-                  dimensions={dimensions}
-                  measures={measures}
-                />
-              )}
-            </Flex>
-            <ChartFootnotes
-              dataSource={dataSource}
-              chartConfig={chartConfig}
-              dimensions={dimensions}
-              measures={measures}
-              configKey={configKey}
-              onToggleTableView={handleToggleTableView}
-              visualizeLinkText={
-                showDownload === false ? (
-                  <Trans id="metadata.link.created.with.visualize.alternate">
-                    visualize.admin.ch
-                  </Trans>
-                ) : undefined
-              }
-            />
-          </InteractiveFiltersProvider>
+          <LoadingStateProvider>
+            <InteractiveFiltersProvider>
+              <div
+                ref={headerRef}
+                style={{
+                  marginBottom: `${headerMarginBottom}px`,
+                  transition: "margin-bottom 0.2s ease-in-out",
+                }}
+              >
+                <Flex
+                  sx={{
+                    justifyContent: meta.title[locale]
+                      ? "space-between"
+                      : "flex-end",
+                    alignItems: "center",
+                    gap: 2,
+                  }}
+                >
+                  {meta.title[locale] && <Title text={meta.title[locale]} />}
+                  <MetadataPanel
+                    // FIXME: adapt to design
+                    datasetIri={chartConfig.cubes[0].iri}
+                    dataSource={dataSource}
+                    dimensions={allComponents}
+                    container={rootRef.current}
+                  />
+                </Flex>
+                {meta.description[locale] && (
+                  <Description text={meta.description[locale]} />
+                )}
+                {chartConfig.interactiveFiltersConfig?.dataFilters.active && (
+                  <ChartDataFilters
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                    dimensions={dimensions}
+                    measures={measures}
+                  />
+                )}
+              </div>
+              <Flex
+                flexDirection="column"
+                ref={containerRef}
+                height={containerHeight.current}
+                flexGrow={1}
+                mt={4}
+              >
+                {isTablePreview ? (
+                  <DataSetTable
+                    sx={{ maxHeight: "100%" }}
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                  />
+                ) : (
+                  <ChartWithFilters
+                    dataSource={dataSource}
+                    componentIris={componentIris}
+                    chartConfig={chartConfig}
+                    dimensions={dimensions}
+                    measures={measures}
+                  />
+                )}
+              </Flex>
+              <ChartFootnotes
+                dataSource={dataSource}
+                chartConfig={chartConfig}
+                dimensions={dimensions}
+                measures={measures}
+                configKey={configKey}
+                onToggleTableView={handleToggleTableView}
+                visualizeLinkText={
+                  showDownload === false ? (
+                    <Trans id="metadata.link.created.with.visualize.alternate">
+                      visualize.admin.ch
+                    </Trans>
+                  ) : undefined
+                }
+              />
+            </InteractiveFiltersProvider>
+          </LoadingStateProvider>
         </ChartErrorBoundary>
       </Box>
     </MetadataPanelStoreContext.Provider>
diff --git a/app/components/chart-table-preview.tsx b/app/components/chart-table-preview.tsx
index 4c5ba15d9..b3c8f7b70 100644
--- a/app/components/chart-table-preview.tsx
+++ b/app/components/chart-table-preview.tsx
@@ -7,12 +7,12 @@ type Context = {
   setState: Dispatch<SetStateAction<boolean>>;
   setStateRaw: Dispatch<SetStateAction<boolean>>;
   containerRef: RefObject<HTMLDivElement>;
-  containerHeight: RefObject<"auto" | number>;
+  containerHeight: { current: "auto" | number };
   computeContainerHeight: () => void;
 };
 
 const ChartTablePreviewContext = React.createContext<Context>({
-  state: true,
+  state: false,
   setState: () => {},
   setStateRaw: () => {},
   containerRef: { current: null },
diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx
index ca84531b5..3fc5b6ce0 100644
--- a/app/components/chart-with-filters.tsx
+++ b/app/components/chart-with-filters.tsx
@@ -1,12 +1,8 @@
 import dynamic from "next/dynamic";
 import React from "react";
 
-import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
-import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
-import { ChartFiltersList } from "@/components/chart-filters-list";
-import Flex from "@/components/flex";
 import { ChartConfig, DataSource } from "@/configurator";
 import { Dimension, Measure } from "@/domain/data";
 
@@ -169,23 +165,9 @@ export const ChartWithFilters = React.forwardRef<
   useSyncInteractiveFilters(props.chartConfig);
 
   return (
-    <LoadingStateProvider>
-      <Flex
-        ref={ref}
-        sx={{
-          flexDirection: "column",
-          justifyContent: "space-between",
-          flexGrow: 1,
-        }}
-      >
-        {props.chartConfig.interactiveFiltersConfig?.dataFilters.active ? (
-          <ChartDataFilters {...props} />
-        ) : (
-          <ChartFiltersList {...props} />
-        )}
-        <GenericChart {...props} />
-      </Flex>
-    </LoadingStateProvider>
+    <div ref={ref}>
+      <GenericChart {...props} />
+    </div>
   );
 });
 ChartWithFilters.displayName = "ChartWithFilters";
diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx
index 6f0f2b574..d852376ea 100644
--- a/app/configurator/components/annotators.tsx
+++ b/app/configurator/components/annotators.tsx
@@ -51,7 +51,11 @@ export const Title = (props: Props) => {
       variant="h2"
       className={clsx(classes.text, className)}
       onClick={onClick}
-      sx={{ color: text ? text : getEmptyColor(lighterColor), ...sx }}
+      sx={{
+        color: text ? text : getEmptyColor(lighterColor),
+        wordBreak: "break-word",
+        ...sx,
+      }}
     >
       {text ? text : <Trans id="annotation.add.title">[ Title ]</Trans>}
     </Typography>
@@ -68,7 +72,11 @@ export const Description = (props: Props) => {
       variant="body1"
       className={clsx(classes.text, className)}
       onClick={onClick}
-      sx={{ color: text ? text : getEmptyColor(lighterColor), ...sx }}
+      sx={{
+        color: text ? text : getEmptyColor(lighterColor),
+        wordBreak: "break-word",
+        ...sx,
+      }}
     >
       {text ? (
         text
diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
index 174a2bc31..dcd79a4f5 100644
--- a/app/configurator/components/configurator.tsx
+++ b/app/configurator/components/configurator.tsx
@@ -225,130 +225,128 @@ const LayoutingStep = () => {
   }
 
   return (
-    <InteractiveFiltersProvider>
-      <PanelLayout type="LM" sx={{ background: (t) => t.palette.muted.main }}>
-        <PanelHeaderLayout type="LMR">
-          <PanelHeaderWrapper type="L">
-            <BackContainer>
-              <BackButton onClick={handlePrevious}>
-                <Trans id="controls.nav.back-to-configurator">
-                  Back to editing
-                </Trans>
-              </BackButton>
-            </BackContainer>
-          </PanelHeaderWrapper>
-          <PanelHeaderWrapper
-            type="M"
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 3,
-              mx: "auto",
+    <PanelLayout type="LM" sx={{ background: (t) => t.palette.muted.main }}>
+      <PanelHeaderLayout type="LMR">
+        <PanelHeaderWrapper type="L">
+          <BackContainer>
+            <BackButton onClick={handlePrevious}>
+              <Trans id="controls.nav.back-to-configurator">
+                Back to editing
+              </Trans>
+            </BackButton>
+          </BackContainer>
+        </PanelHeaderWrapper>
+        <PanelHeaderWrapper
+          type="M"
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 3,
+            mx: "auto",
+          }}
+        >
+          <IconButton
+            label="layoutTab"
+            checked={state.layout.type === "tab"}
+            onClick={() => {
+              if (state.layout.type === "tab") {
+                return;
+              }
+
+              dispatch({
+                type: "LAYOUT_CHANGED",
+                value: {
+                  type: "tab",
+                  meta: state.layout.meta,
+                  activeField: undefined,
+                },
+              });
             }}
-          >
-            <IconButton
-              label="layoutTab"
-              checked={state.layout.type === "tab"}
-              onClick={() => {
-                if (state.layout.type === "tab") {
-                  return;
-                }
+          />
+          <IconButton
+            label="layoutDashboard"
+            checked={state.layout.type === "dashboard"}
+            onClick={() => {
+              if (state.layout.type === "dashboard") {
+                return;
+              }
 
+              dispatch({
+                type: "LAYOUT_CHANGED",
+                value: {
+                  type: "dashboard",
+                  meta: state.layout.meta,
+                  layout: "vertical",
+                  activeField: undefined,
+                },
+              });
+            }}
+          />
+        </PanelHeaderWrapper>
+        <PanelHeaderWrapper
+          type="R"
+          sx={{
+            display: "flex",
+            alignItems: "start",
+            justifyContent: "flex-end",
+          }}
+        >
+          <PublishChartButton />
+        </PanelHeaderWrapper>
+      </PanelHeaderLayout>
+      <PanelBodyWrapper type="L">
+        <LayoutConfigurator />
+      </PanelBodyWrapper>
+      <PanelBodyWrapper type="M">
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            mt: 3,
+            mb: 4,
+          }}
+        >
+          <Title
+            text={state.layout.meta.title[locale]}
+            onClick={() => {
+              if (state.layout.activeField !== "title") {
                 dispatch({
-                  type: "LAYOUT_CHANGED",
-                  value: {
-                    type: "tab",
-                    meta: state.layout.meta,
-                    activeField: undefined,
-                  },
+                  type: "LAYOUT_ACTIVE_FIELD_CHANGED",
+                  value: "title",
                 });
-              }}
-            />
-            <IconButton
-              label="layoutDashboard"
-              checked={state.layout.type === "dashboard"}
-              onClick={() => {
-                if (state.layout.type === "dashboard") {
-                  return;
-                }
-
+              }
+            }}
+          />
+          <Description
+            text={state.layout.meta.description[locale]}
+            onClick={() => {
+              if (state.layout.activeField !== "description") {
                 dispatch({
-                  type: "LAYOUT_CHANGED",
-                  value: {
-                    type: "dashboard",
-                    meta: state.layout.meta,
-                    layout: "vertical",
-                    activeField: undefined,
-                  },
+                  type: "LAYOUT_ACTIVE_FIELD_CHANGED",
+                  value: "description",
                 });
-              }}
-            />
-          </PanelHeaderWrapper>
-          <PanelHeaderWrapper
-            type="R"
-            sx={{
-              display: "flex",
-              alignItems: "start",
-              justifyContent: "flex-end",
-            }}
-          >
-            <PublishChartButton />
-          </PanelHeaderWrapper>
-        </PanelHeaderLayout>
-        <PanelBodyWrapper type="L">
-          <LayoutConfigurator />
-        </PanelBodyWrapper>
-        <PanelBodyWrapper type="M">
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              gap: 1,
-              mt: 3,
-              mb: 4,
+              }
             }}
-          >
-            <Title
-              text={state.layout.meta.title[locale]}
-              onClick={() => {
-                if (state.layout.activeField !== "title") {
-                  dispatch({
-                    type: "LAYOUT_ACTIVE_FIELD_CHANGED",
-                    value: "title",
-                  });
-                }
-              }}
-            />
-            <Description
-              text={state.layout.meta.description[locale]}
-              onClick={() => {
-                if (state.layout.activeField !== "description") {
-                  dispatch({
-                    type: "LAYOUT_ACTIVE_FIELD_CHANGED",
-                    value: "description",
-                  });
-                }
-              }}
-            />
-          </Box>
-          <ChartPreview dataSource={state.dataSource} />
-        </PanelBodyWrapper>
-        <ConfiguratorDrawer
-          anchor="left"
-          open={!!state.layout.activeField}
-          hideBackdrop
-          onClose={handleClosePanel}
-        >
-          <div style={{ width: DRAWER_WIDTH }} data-testid="panel-drawer">
-            <BackToMainButton onClick={handleClosePanel} />
-            {isAnnotationField(state.layout.activeField) && (
-              <LayoutAnnotationsSelector />
-            )}
-          </div>
-        </ConfiguratorDrawer>
-      </PanelLayout>
-    </InteractiveFiltersProvider>
+          />
+        </Box>
+        <ChartPreview dataSource={state.dataSource} />
+      </PanelBodyWrapper>
+      <ConfiguratorDrawer
+        anchor="left"
+        open={!!state.layout.activeField}
+        hideBackdrop
+        onClose={handleClosePanel}
+      >
+        <div style={{ width: DRAWER_WIDTH }} data-testid="panel-drawer">
+          <BackToMainButton onClick={handleClosePanel} />
+          {isAnnotationField(state.layout.activeField) && (
+            <LayoutAnnotationsSelector />
+          )}
+        </div>
+      </ConfiguratorDrawer>
+    </PanelLayout>
   );
 };
 
@@ -362,9 +360,7 @@ const PublishStep = () => {
   return (
     <PanelLayout type="LM">
       <PanelBodyWrapper type="M">
-        <InteractiveFiltersProvider>
-          <ChartPreview dataSource={state.dataSource} />
-        </InteractiveFiltersProvider>
+        <ChartPreview dataSource={state.dataSource} />
       </PanelBodyWrapper>
     </PanelLayout>
   );
diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx
index 0e4ce2bd3..7498c75a7 100644
--- a/app/pages/v/[chartId].tsx
+++ b/app/pages/v/[chartId].tsx
@@ -144,7 +144,14 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
           width="100%"
           overflow="hidden"
         >
-          <Box sx={{ pt: 4, maxWidth: "50rem", margin: "auto" }}>
+          <Box
+            sx={{
+              maxWidth: { xs: "100%", lg: 1280 },
+              margin: "auto",
+              pt: 4,
+              px: 6,
+            }}
+          >
             {publishSuccess && (
               <Box mt={2} mb={5}>
                 <Success />
diff --git a/app/utils/dnd.ts b/app/utils/dnd.ts
new file mode 100644
index 000000000..15d443176
--- /dev/null
+++ b/app/utils/dnd.ts
@@ -0,0 +1,26 @@
+import { Modifier } from "@dnd-kit/core";
+import { getEventCoordinates } from "@dnd-kit/utilities";
+
+export const snapCornerToCursor: Modifier = ({
+  activatorEvent,
+  draggingNodeRect,
+  transform,
+}) => {
+  if (draggingNodeRect && activatorEvent) {
+    const activatorCoordinates = getEventCoordinates(activatorEvent);
+
+    if (!activatorCoordinates) {
+      return transform;
+    }
+
+    const offsetX = activatorCoordinates.x - draggingNodeRect.left + 48;
+
+    return {
+      ...transform,
+      x: transform.x + offsetX - draggingNodeRect.width,
+      y: transform.y,
+    };
+  }
+
+  return transform;
+};