diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index e78da41ed5..3ce05b5da4 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -12,13 +12,16 @@ import {
   Typography,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { AnimatePresence, Transition } from "framer-motion";
 import React, { useMemo, useState } from "react";
 
-import { DataSource } from "@/configurator";
+import { BackButton, DataSource } from "@/configurator";
 import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
 import { DRAWER_WIDTH } from "@/configurator/components/drawer";
+import { MotionBox } from "@/configurator/components/presence";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
-import { Icon, getDimensionIconName } from "@/icons";
+import { getDimensionIconName, Icon } from "@/icons";
+import SvgIcArrowRight from "@/icons/components/IcArrowRight";
 import SvgIcClose from "@/icons/components/IcClose";
 import useEvent from "@/utils/use-event";
 
@@ -31,6 +34,9 @@ type State = {
   toggle: () => void;
   activeSection: Section;
   setActiveSection: (d: Section) => void;
+  selectedDimension: DimensionMetadataFragment | undefined;
+  setSelectedDimension: (d: DimensionMetadataFragment | undefined) => void;
+  clearSelectedDimension: () => void;
 };
 
 const Context = React.createContext<State | undefined>(undefined);
@@ -42,15 +48,21 @@ export const ContextProvider = ({
 }) => {
   const [open, setOpen] = React.useState(false);
   const [activeSection, setActiveSection] = React.useState<Section>("general");
+  const [selectedDimension, setSelectedDimension] = React.useState<
+    DimensionMetadataFragment | undefined
+  >(undefined);
 
-  const ctx = React.useMemo(() => {
+  const ctx: State = React.useMemo(() => {
     return {
       open,
       toggle: () => setOpen(!open),
       activeSection,
       setActiveSection,
+      selectedDimension,
+      setSelectedDimension,
+      clearSelectedDimension: () => setSelectedDimension(undefined),
     };
-  }, [open, activeSection]);
+  }, [open, activeSection, selectedDimension]);
 
   return <Context.Provider value={ctx}>{children}</Context.Provider>;
 };
@@ -109,10 +121,12 @@ const useOtherStyles = makeStyles<Theme>((theme) => {
       },
     },
     tabPanel: {
+      padding: 0,
+    },
+    tabPanelContent: {
       display: "flex",
       flexDirection: "column",
       gap: theme.spacing(4),
-      padding: 0,
     },
     icon: {
       display: "inline",
@@ -156,6 +170,21 @@ export const MetadataPanel = ({
   );
 };
 
+const animationProps: Transition = {
+  transition: {
+    duration: 0.2,
+  },
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+  },
+  exit: {
+    opacity: 0,
+  },
+};
+
 const PanelInner = ({
   datasetIri,
   dataSource,
@@ -217,8 +246,20 @@ const PanelInner = ({
             />
           </TabList>
 
-          <TabPanelGeneral datasetIri={datasetIri} dataSource={dataSource} />
-          <TabPanelData dimensions={dimensions} />
+          <AnimatePresence>
+            {activeSection === "general" ? (
+              <MotionBox key="general-tab" {...animationProps}>
+                <TabPanelGeneral
+                  datasetIri={datasetIri}
+                  dataSource={dataSource}
+                />
+              </MotionBox>
+            ) : activeSection === "data" ? (
+              <MotionBox key="data-tab" {...animationProps}>
+                <TabPanelData dimensions={dimensions} />
+              </MotionBox>
+            ) : null}
+          </AnimatePresence>
         </TabContext>
 
         <Content />
@@ -281,6 +322,7 @@ const TabPanelData = ({
   dimensions: DimensionMetadataFragment[];
 }) => {
   const classes = useOtherStyles();
+  const { selectedDimension, setSelectedDimension } = useContext();
   const [searchInput, setSearchInput] = useState("");
 
   const filteredDimensions = useMemo(() => {
@@ -293,36 +335,100 @@ const TabPanelData = ({
 
   return (
     <TabPanel className={classes.tabPanel} value="data">
-      {/* Extract into a component (as it's also used in MultiFilter drawer?) */}
-      <Input
-        className={classes.search}
-        value={searchInput}
-        onChange={(e) => setSearchInput(e.target.value.toLowerCase())}
-        placeholder={t({
-          id: "select.controls.metadata.search",
-          message: "Jump to...",
-        })}
-        startAdornment={
-          <InputAdornment position="start">
-            <Icon name="search" size={16} />
-          </InputAdornment>
-        }
-        sx={{ typography: "body2" }}
-      />
-      {filteredDimensions.map((d) => (
-        <Box key={d.iri}>
-          <Flex>
-            <Icon
-              className={classes.icon}
-              name={getDimensionIconName(d.__typename)}
+      <AnimatePresence exitBeforeEnter={true}>
+        {selectedDimension ? (
+          <MotionBox key="dimension-selected" {...animationProps}>
+            <BackButton onClick={() => setSelectedDimension(undefined)}>
+              <Trans id="button.back">Back</Trans>
+            </BackButton>
+            <Box sx={{ mt: 4 }}>
+              <TabPanelDataDimension
+                dim={selectedDimension}
+                expandable={false}
+              />
+            </Box>
+          </MotionBox>
+        ) : (
+          <MotionBox
+            key="dimension-not-selected"
+            className={classes.tabPanelContent}
+            {...animationProps}
+          >
+            {/* Extract into a component (as it's also used in MultiFilter drawer?) */}
+            <Input
+              className={classes.search}
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value.toLowerCase())}
+              placeholder={t({
+                id: "select.controls.metadata.search",
+                message: "Jump to...",
+              })}
+              startAdornment={
+                <InputAdornment position="start">
+                  <Icon name="search" size={16} />
+                </InputAdornment>
+              }
+              sx={{ typography: "body2" }}
             />
-            <Typography variant="body2" fontWeight="bold">
-              {d.label}
-            </Typography>
-          </Flex>
-          <Typography variant="body2">{d.description}</Typography>
-        </Box>
-      ))}
+            {filteredDimensions.map((d) => (
+              <TabPanelDataDimension key={d.iri} dim={d} expandable={true} />
+            ))}
+          </MotionBox>
+        )}
+      </AnimatePresence>
     </TabPanel>
   );
 };
+
+const TabPanelDataDimension = ({
+  dim,
+  expandable,
+}: {
+  dim: DimensionMetadataFragment;
+  expandable: boolean;
+}) => {
+  const classes = useOtherStyles();
+  const { setSelectedDimension } = useContext();
+  const { description, showExpandButton } = React.useMemo(() => {
+    if (dim.description && expandable) {
+      if (dim.description.length > 180) {
+        return {
+          description: dim.description.slice(0, 180) + "…",
+          showExpandButton: true,
+        };
+      }
+    }
+
+    return {
+      description: dim.description,
+      showExpandButton: false,
+    };
+  }, [dim.description, expandable]);
+  const iconName = React.useMemo(() => {
+    return getDimensionIconName(dim.__typename);
+  }, [dim.__typename]);
+
+  return (
+    <div>
+      <Flex>
+        <Icon className={classes.icon} name={iconName} />
+        <Typography variant="body2" fontWeight="bold">
+          {dim.label}
+        </Typography>
+      </Flex>
+      {description && <Typography variant="body2">{description}</Typography>}
+      {showExpandButton && (
+        <Button
+          component="a"
+          variant="text"
+          size="small"
+          onClick={() => setSelectedDimension(dim)}
+          endIcon={<SvgIcArrowRight />}
+          sx={{ p: 0 }}
+        >
+          Show more
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
index 882822b28e..0060d75baf 100644
--- a/app/configurator/components/configurator.tsx
+++ b/app/configurator/components/configurator.tsx
@@ -43,7 +43,7 @@ const BackContainer = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-const BackButton = ({
+export const BackButton = ({
   children,
   onClick,
 }: { children: React.ReactNode } & ButtonProps) => {
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 160a807aa0..1ab06a4c3d 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -33,11 +33,11 @@ msgstr "Filter nach oben verschieben"
 msgid "No results"
 msgstr "Kein Ergebnis"
 
-#: app/components/chart-preview.tsx:181
+#: app/components/chart-preview.tsx:187
 msgid "annotation.add.description"
 msgstr "[ Ohne Beschreibung ]"
 
-#: app/components/chart-preview.tsx:145
+#: app/components/chart-preview.tsx:149
 msgid "annotation.add.title"
 msgstr "[ Ohne Titel ]"
 
@@ -61,9 +61,9 @@ msgstr "Alle Datensätze"
 msgid "browse.datasets.description"
 msgstr "Erkunden Sie die vom LINDAS Linked Data Service bereitgestellten Datensätze, indem Sie entweder nach Kategorien oder Organisationen filtern oder direkt nach bestimmten Stichworten suchen. Klicken Sie auf einen Datensatz, um detailliertere Informationen zu erhalten und Ihre eigenen Visualisierungen zu erstellen."
 
-#: app/configurator/components/stepper.tsx:65
-#~ msgid "button.back"
-#~ msgstr "Zurück"
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Zurück"
 
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
@@ -445,16 +445,16 @@ msgstr "Italienisch"
 msgid "controls.measure"
 msgstr "Messwert"
 
-#: app/components/metadata-panel.tsx:228
-#: app/components/metadata-panel.tsx:240
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:208
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Daten"
 
-#: app/components/metadata-panel.tsx:198
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Allgemeines"
 
@@ -761,7 +761,7 @@ msgstr "Cube IRI"
 msgid "data.source"
 msgstr "Datenquelle"
 
-#: app/components/chart-published.tsx:159
+#: app/components/chart-published.tsx:163
 msgid "data.source.notTrusted"
 msgstr "Dieses Diagramm verwendet keine vertrauenswürdige Datenquelle."
 
@@ -781,7 +781,7 @@ msgstr "Datensatz"
 msgid "dataset.footnotes.updated"
 msgstr "Neuestes Update"
 
-#: app/components/chart-published.tsx:168
+#: app/components/chart-published.tsx:172
 msgid "dataset.hasImputedValues"
 msgstr "Einige Daten in diesem Datensatz fehlen und wurden interpoliert, um die Lücken zu füllen."
 
@@ -826,13 +826,13 @@ msgstr "Relevanz"
 msgid "dataset.order.title"
 msgstr "Titel"
 
-#: app/components/chart-preview.tsx:112
-#: app/components/chart-published.tsx:137
+#: app/components/chart-preview.tsx:116
+#: app/components/chart-published.tsx:141
 #: app/configurator/components/dataset-preview.tsx:120
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
-#: app/components/chart-published.tsx:148
+#: app/components/chart-published.tsx:152
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Achtung, dieser Datensatz ist abgelaufen.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
@@ -1019,7 +1019,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Suche"
 
-#: app/components/metadata-panel.tsx:295
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Springen zu..."
 
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 829a4d95dc..7938a50d12 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -33,11 +33,11 @@ msgstr "Move filter up"
 msgid "No results"
 msgstr "No results"
 
-#: app/components/chart-preview.tsx:181
+#: app/components/chart-preview.tsx:187
 msgid "annotation.add.description"
 msgstr "[ No Description ]"
 
-#: app/components/chart-preview.tsx:145
+#: app/components/chart-preview.tsx:149
 msgid "annotation.add.title"
 msgstr "[ No Title ]"
 
@@ -61,9 +61,9 @@ msgstr "All datasets"
 msgid "browse.datasets.description"
 msgstr "Explore datasets provided by the LINDAS Linked Data Service by either filtering by categories or organisations or search directly for specific keywords. Click on a dataset to see more detailed information and start creating your own visualizations."
 
-#: app/configurator/components/stepper.tsx:65
-#~ msgid "button.back"
-#~ msgstr "Back"
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Back"
 
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
@@ -465,16 +465,16 @@ msgstr "Italian"
 msgid "controls.measure"
 msgstr "Measure"
 
-#: app/components/metadata-panel.tsx:228
-#: app/components/metadata-panel.tsx:240
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:208
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Data"
 
-#: app/components/metadata-panel.tsx:198
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "General"
 
@@ -777,7 +777,7 @@ msgstr "Cube IRI"
 msgid "data.source"
 msgstr "Data source"
 
-#: app/components/chart-published.tsx:159
+#: app/components/chart-published.tsx:163
 msgid "data.source.notTrusted"
 msgstr "This chart is not using a trusted data source."
 
@@ -797,7 +797,7 @@ msgstr "Dataset"
 msgid "dataset.footnotes.updated"
 msgstr "Latest update"
 
-#: app/components/chart-published.tsx:168
+#: app/components/chart-published.tsx:172
 msgid "dataset.hasImputedValues"
 msgstr "Some data in this dataset is missing and has been interpolated to fill the gaps."
 
@@ -846,13 +846,13 @@ msgstr "Relevance"
 msgid "dataset.order.title"
 msgstr "Title"
 
-#: app/components/chart-preview.tsx:112
-#: app/components/chart-published.tsx:137
+#: app/components/chart-preview.tsx:116
+#: app/components/chart-published.tsx:141
 #: app/configurator/components/dataset-preview.tsx:120
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Careful, this dataset is only a draft.<0/><1>Don't use for reporting!</1>"
 
-#: app/components/chart-published.tsx:148
+#: app/components/chart-published.tsx:152
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Careful, the data for this chart has expired.<0/><1>Don't use for reporting!</1>"
 
@@ -1039,7 +1039,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Search"
 
-#: app/components/metadata-panel.tsx:295
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Jump to..."
 
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 57518c8a48..5f17fa7cb3 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -33,11 +33,11 @@ msgstr "Déplacer le filtre vers le haut"
 msgid "No results"
 msgstr "Aucun résultat"
 
-#: app/components/chart-preview.tsx:181
+#: app/components/chart-preview.tsx:187
 msgid "annotation.add.description"
 msgstr "[ Pas de description ]"
 
-#: app/components/chart-preview.tsx:145
+#: app/components/chart-preview.tsx:149
 msgid "annotation.add.title"
 msgstr "[ Pas de titre ]"
 
@@ -61,9 +61,9 @@ msgstr "Tous les jeux de données"
 msgid "browse.datasets.description"
 msgstr "Explorez les jeux de données liés fournis par LINDAS, en filtrant par catégories ou organisations, ou en recherchant par mots-clés. Cliquez sur un ensemble de données pour afficher des informations plus détaillées et commencer à créer vos propres visualisations. "
 
-#: app/configurator/components/stepper.tsx:65
-#~ msgid "button.back"
-#~ msgstr "Précédent"
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Précédent"
 
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
@@ -460,16 +460,16 @@ msgstr "Italien"
 msgid "controls.measure"
 msgstr "Variable mesurée"
 
-#: app/components/metadata-panel.tsx:228
-#: app/components/metadata-panel.tsx:240
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:208
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Données"
 
-#: app/components/metadata-panel.tsx:198
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Général"
 
@@ -772,7 +772,7 @@ msgstr "IRI du cube"
 msgid "data.source"
 msgstr "Source des données"
 
-#: app/components/chart-published.tsx:159
+#: app/components/chart-published.tsx:163
 msgid "data.source.notTrusted"
 msgstr "Ce graphique n'utilise pas une source de données fiable."
 
@@ -792,7 +792,7 @@ msgstr "Jeu de données"
 msgid "dataset.footnotes.updated"
 msgstr "Mise à jour"
 
-#: app/components/chart-published.tsx:168
+#: app/components/chart-published.tsx:172
 msgid "dataset.hasImputedValues"
 msgstr "Certaines données de cet ensemble de données sont manquantes et ont été interpolées pour combler les lacunes."
 
@@ -837,13 +837,13 @@ msgstr "Pertinence"
 msgid "dataset.order.title"
 msgstr "Titre"
 
-#: app/components/chart-preview.tsx:112
-#: app/components/chart-published.tsx:137
+#: app/components/chart-preview.tsx:116
+#: app/components/chart-published.tsx:141
 #: app/configurator/components/dataset-preview.tsx:120
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attention, ce jeu de données est à l'état d'ébauche.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
-#: app/components/chart-published.tsx:148
+#: app/components/chart-published.tsx:152
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attention, ce jeu de données est expiré.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
@@ -1030,7 +1030,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Chercher"
 
-#: app/components/metadata-panel.tsx:295
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Sauter à..."
 
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 82391ac3d2..132d9d6c7f 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -33,11 +33,11 @@ msgstr "Sposta il filtro in alto"
 msgid "No results"
 msgstr "Nessun risultato"
 
-#: app/components/chart-preview.tsx:181
+#: app/components/chart-preview.tsx:187
 msgid "annotation.add.description"
 msgstr "[ Nessuna descrizione ]"
 
-#: app/components/chart-preview.tsx:145
+#: app/components/chart-preview.tsx:149
 msgid "annotation.add.title"
 msgstr "[ Nessun titolo ]"
 
@@ -61,9 +61,9 @@ msgstr "Tutti i set di dati"
 msgid "browse.datasets.description"
 msgstr "Esplora i set di dati forniti dal LINDAS Linked Data Service filtrando per categorie o organizzazioni oppure cercando direttamente per parole chiave specifiche. Clicca su un set di dati per vedere informazioni più dettagliate e iniziare a creare le tue visualizzazioni."
 
-#: app/configurator/components/stepper.tsx:65
-#~ msgid "button.back"
-#~ msgstr "Torna indietro"
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Torna indietro"
 
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
@@ -465,16 +465,16 @@ msgstr "Italiano"
 msgid "controls.measure"
 msgstr "Misura"
 
-#: app/components/metadata-panel.tsx:228
-#: app/components/metadata-panel.tsx:240
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:208
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Dati"
 
-#: app/components/metadata-panel.tsx:198
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Generale"
 
@@ -777,7 +777,7 @@ msgstr "Cubo IRI"
 msgid "data.source"
 msgstr "Fonte di dati"
 
-#: app/components/chart-published.tsx:159
+#: app/components/chart-published.tsx:163
 msgid "data.source.notTrusted"
 msgstr "Questo grafico non utilizza una fonte di dati affidabile."
 
@@ -797,7 +797,7 @@ msgstr "Set di dati"
 msgid "dataset.footnotes.updated"
 msgstr "Ultimo aggiornamento"
 
-#: app/components/chart-published.tsx:168
+#: app/components/chart-published.tsx:172
 msgid "dataset.hasImputedValues"
 msgstr "In questo set di dati mancano alcuni dati. Questi sono stati interpolati per colmare le lacune.."
 
@@ -842,13 +842,13 @@ msgstr "Rilevanza"
 msgid "dataset.order.title"
 msgstr "Titolo"
 
-#: app/components/chart-preview.tsx:112
-#: app/components/chart-published.tsx:137
+#: app/components/chart-preview.tsx:116
+#: app/components/chart-published.tsx:141
 #: app/configurator/components/dataset-preview.tsx:120
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attenzione, questo set di dati è una bozza.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
-#: app/components/chart-published.tsx:148
+#: app/components/chart-published.tsx:152
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attenzione, questo set di dati è scaduto.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
@@ -1035,7 +1035,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Cerca"
 
-#: app/components/metadata-panel.tsx:295
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Salta a..."