diff --git a/app/src/components/Card.js b/app/src/components/Card.js
index 8ea47064..562da836 100644
--- a/app/src/components/Card.js
+++ b/app/src/components/Card.js
@@ -7,8 +7,6 @@ import { useTheme } from "@mui/material/styles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import NextLink from "next/link";
 
-import Chip from "../components/Chip";
-
 import {
   Button,
   Card as MuiCard,
@@ -21,8 +19,13 @@ import {
   ListItemText as MuiListItemText,
   Typography as MuiTypography,
   useMediaQuery,
+  IconButton,
+  Chip as MuiChip,
+  Snackbar,
 } from "@mui/material";
 
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
 const Card = styled(MuiCard)`
   ${spacing};
   position: relative;
@@ -76,19 +79,6 @@ const ListIcon = styled(FontAwesomeIcon)`
   margin-right: 10;
 `;
 
-const CardItem = ({ link, icon, color, text }) => {
-  return (
-    <ListItemButton href={link}>
-      <ListItemIcon>
-        <ListIcon icon={icon} size="2x" style={{ color: color }} />
-      </ListItemIcon>
-      <ListItemText>
-        <Markdown>{text}</Markdown>
-      </ListItemText>
-    </ListItemButton>
-  );
-};
-
 const TitleIcon = styled(FontAwesomeIcon)`
   padding-right: 15px;
 `;
@@ -107,6 +97,91 @@ const ButtonImage = styled.img`
   }
 `;
 
+const Chip = styled(MuiChip)`
+  padding: 4px 4px;
+  margin-right: 16px;
+  margin-bottom: 16px;
+  font-size: 100%;
+`;
+
+const CardItem = ({ link, icon, color, text }) => {
+  return (
+    <ListItemButton href={link}>
+      <ListItemIcon>
+        <ListIcon icon={icon} size="2x" style={{ color: color }} />
+      </ListItemIcon>
+      <ListItemText>
+        <Markdown>{text}</Markdown>
+      </ListItemText>
+    </ListItemButton>
+  );
+};
+
+export const ActionChip = ({
+  link,
+  icon,
+  text,
+  target,
+  copytext,
+  copymessage,
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (even, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const action = (
+    <React.Fragment>
+      <IconButton
+        size="small"
+        aria-label="close"
+        color="inherit"
+        onClick={handleClose}
+      >
+        <FontAwesomeIcon icon={faXmark} size="lg" />
+      </IconButton>
+    </React.Fragment>
+  );
+
+  const copyText = (text) => {
+    if (text !== undefined) {
+      navigator.clipboard.writeText(text);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Chip
+        icon={<ListIcon icon={icon} size="lg" style={{ marginRight: 0 }} />}
+        component="a"
+        href={link}
+        label={text}
+        target={target}
+        onClick={() => copyText(copytext)}
+        clickable
+        color="primary"
+        //variant="outlined"
+      />
+      <Snackbar
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        message={copymessage}
+        action={action}
+      />
+    </React.Fragment>
+  );
+};
+
 const InfoCard = ({ info }) => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -160,7 +235,7 @@ const InfoCard = ({ info }) => {
             </NextLink>
           ))}
           {info.chips?.map((chip, i) => (
-            <Chip
+            <ActionChip
               key={chip.link + t(`${info.id}.chips.${i}`)}
               link={chip.link}
               icon={chip.icon}
diff --git a/app/src/components/Chip.js b/app/src/components/Chip.js
deleted file mode 100644
index b92b2af6..00000000
--- a/app/src/components/Chip.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton, Chip as MuiChip, Snackbar } from "@mui/material";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
-const Chip = styled(MuiChip)`
-  padding: 4px 4px;
-  margin-right: 16px;
-  margin-bottom: 16px;
-  font-size: 100%;
-`;
-
-const ListIcon = styled(FontAwesomeIcon)`
-  margin-left: 10px;
-  margin-right: 10px;
-  font-weight: 800;
-`;
-
-const ContactChip = ({ link, icon, text, target, copytext, copymessage }) => {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (even, reason) => {
-    if (reason === "clickaway") {
-      return;
-    }
-    setOpen(false);
-  };
-
-  const action = (
-    <React.Fragment>
-      <IconButton
-        size="small"
-        aria-label="close"
-        color="inherit"
-        onClick={handleClose}
-      >
-        <FontAwesomeIcon icon={faXmark} size="lg" />
-      </IconButton>
-    </React.Fragment>
-  );
-
-  const copyText = (text) => {
-    if (text !== undefined) {
-      navigator.clipboard.writeText(text);
-      setOpen(true);
-    }
-  };
-
-  return (
-    <React.Fragment>
-      <Chip
-        icon={<ListIcon icon={icon} size="lg" style={{ marginRight: 0 }} />}
-        component="a"
-        href={link}
-        label={text}
-        target={target}
-        onClick={() => copyText(copytext)}
-        clickable
-        color="primary"
-        //variant="outlined"
-      />
-      <Snackbar
-        open={open}
-        autoHideDuration={6000}
-        onClose={handleClose}
-        message={copymessage}
-        action={action}
-      />
-    </React.Fragment>
-  );
-};
-
-export default ContactChip;
diff --git a/app/src/components/MetaItems.js b/app/src/components/MetaItems.js
index 10219cea..aefe27a9 100644
--- a/app/src/components/MetaItems.js
+++ b/app/src/components/MetaItems.js
@@ -14,6 +14,7 @@ import {
   faFlag,
   faHeart,
   faIdBadge,
+  faQuestion,
   faStar,
   faTable,
   faThumbsDown,
diff --git a/app/src/components/Property.js b/app/src/components/Property.js
new file mode 100644
index 00000000..337e35c8
--- /dev/null
+++ b/app/src/components/Property.js
@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Tooltip } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const Icon = styled(FontAwesomeIcon)`
+  padding-right: 0.5em;
+`;
+
+const Property = ({ label, value, color, icon }) => {
+  return (
+    <Tooltip title={label} placement="top-start">
+      <span
+        style={{
+          paddingRight: 15,
+          paddingBottom: 5,
+          display: "inline-block",
+        }}
+      >
+        {icon && <Icon icon={icon} color={color} />}
+        {value}
+      </span>
+    </Tooltip>
+  );
+};
+
+export default Property;
diff --git a/app/src/components/pages/apis/SwaggerUI.js b/app/src/components/apis/SwaggerUI.js
similarity index 100%
rename from app/src/components/pages/apis/SwaggerUI.js
rename to app/src/components/apis/SwaggerUI.js
diff --git a/app/src/components/pages/apis/javaCodeExamples.js b/app/src/components/apis/javaCodeExamples.js
similarity index 100%
rename from app/src/components/pages/apis/javaCodeExamples.js
rename to app/src/components/apis/javaCodeExamples.js
diff --git a/app/src/components/pages/apis/juliaCodeExamples.js b/app/src/components/apis/juliaCodeExamples.js
similarity index 100%
rename from app/src/components/pages/apis/juliaCodeExamples.js
rename to app/src/components/apis/juliaCodeExamples.js
diff --git a/app/src/components/pages/apis/pythonCodeExamples.js b/app/src/components/apis/pythonCodeExamples.js
similarity index 100%
rename from app/src/components/pages/apis/pythonCodeExamples.js
rename to app/src/components/apis/pythonCodeExamples.js
diff --git a/app/src/components/pages/apis/rCodeExamples.js b/app/src/components/apis/rCodeExamples.js
similarity index 100%
rename from app/src/components/pages/apis/rCodeExamples.js
rename to app/src/components/apis/rCodeExamples.js
diff --git a/app/src/components/pages/data/CroissantMetaData.js b/app/src/components/data/CroissantMetaData.js
similarity index 100%
rename from app/src/components/pages/data/CroissantMetaData.js
rename to app/src/components/data/CroissantMetaData.js
diff --git a/app/src/components/pages/data/FeatureTable.js b/app/src/components/data/FeatureTable.js
similarity index 100%
rename from app/src/components/pages/data/FeatureTable.js
rename to app/src/components/data/FeatureTable.js
diff --git a/app/src/components/pages/data/QualityTable.js b/app/src/components/data/QualityTable.js
similarity index 100%
rename from app/src/components/pages/data/QualityTable.js
rename to app/src/components/data/QualityTable.js
diff --git a/app/src/components/pages/flow/DependencyTable.js b/app/src/components/flow/DependencyTable.js
similarity index 100%
rename from app/src/components/pages/flow/DependencyTable.js
rename to app/src/components/flow/DependencyTable.js
diff --git a/app/src/components/pages/flow/ParameterTable.js b/app/src/components/flow/ParameterTable.js
similarity index 100%
rename from app/src/components/pages/flow/ParameterTable.js
rename to app/src/components/flow/ParameterTable.js
diff --git a/app/src/components/pages/landing/FAQ.js b/app/src/components/landing/FAQ.js
similarity index 100%
rename from app/src/components/pages/landing/FAQ.js
rename to app/src/components/landing/FAQ.js
diff --git a/app/src/components/pages/landing/Integrations.js b/app/src/components/landing/Integrations.js
similarity index 100%
rename from app/src/components/pages/landing/Integrations.js
rename to app/src/components/landing/Integrations.js
diff --git a/app/src/components/pages/landing/Introduction.js b/app/src/components/landing/Introduction.js
similarity index 100%
rename from app/src/components/pages/landing/Introduction.js
rename to app/src/components/landing/Introduction.js
diff --git a/app/src/components/pages/landing/Lifecycle.js b/app/src/components/landing/Lifecycle.js
similarity index 94%
rename from app/src/components/pages/landing/Lifecycle.js
rename to app/src/components/landing/Lifecycle.js
index 0ccb913d..0a017dbd 100644
--- a/app/src/components/pages/landing/Lifecycle.js
+++ b/app/src/components/landing/Lifecycle.js
@@ -4,7 +4,7 @@ import { useTranslation } from "next-i18next";
 
 import { spacing } from "@mui/system";
 import { Grid, Container, Typography } from "@mui/material";
-import InfoCard from "../../Card";
+import InfoCard from "../Card";
 
 import { faCogs, faDatabase, faFlask } from "@fortawesome/free-solid-svg-icons";
 import { purple, blue, red, yellow, green, orange } from "@mui/material/colors";
diff --git a/app/src/components/pages/landing/Testimonial.js b/app/src/components/landing/Testimonial.js
similarity index 100%
rename from app/src/components/pages/landing/Testimonial.js
rename to app/src/components/landing/Testimonial.js
diff --git a/app/src/pages/about.js b/app/src/pages/about.js
index eeb5e045..8ff61ba6 100644
--- a/app/src/pages/about.js
+++ b/app/src/pages/about.js
@@ -53,7 +53,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 import { purple, blue, red, green, pink, grey } from "@mui/material/colors";
-import Chip from "../components/Chip";
+import { ActionChip } from "../components/Card";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -501,7 +501,7 @@ function About() {
                   </ResultsWrapper>
                 </SearchProvider>
               </Grid>
-              <Chip
+              <ActionChip
                 key="join_core"
                 link="https://docs.openml.org/Governance/"
                 icon={faUsers}
diff --git a/app/src/pages/apis.js b/app/src/pages/apis.js
index 7bbff80e..fc3e73eb 100644
--- a/app/src/pages/apis.js
+++ b/app/src/pages/apis.js
@@ -52,7 +52,7 @@ SyntaxHighlighter.registerLanguage("java", java);
 import SwaggerUI from "swagger-ui-react";
 import "swagger-ui-react/swagger-ui.css";
 import "swagger-ui-themes/themes/3.x/theme-material.css";
-import StyledSwaggerUI from "../components/pages/apis/SwaggerUI";
+import StyledSwaggerUI from "../components/apis/SwaggerUI";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -67,10 +67,10 @@ export async function getStaticProps({ locale }) {
 }
 
 // Code examples
-import * as PythonExamples from "../components/pages/apis/pythonCodeExamples";
-import * as RExamples from "../components/pages/apis/rCodeExamples";
-import * as JuliaExamples from "../components/pages/apis/juliaCodeExamples";
-import * as JavaExamples from "../components/pages/apis/javaCodeExamples";
+import * as PythonExamples from "../components/apis/pythonCodeExamples";
+import * as RExamples from "../components/apis/rCodeExamples";
+import * as JuliaExamples from "../components/apis/juliaCodeExamples";
+import * as JavaExamples from "../components/apis/javaCodeExamples";
 import InfoCard from "../components/Card";
 import { faRust } from "@fortawesome/free-brands-svg-icons";
 import Wrapper from "../components/Wrapper";
diff --git a/app/src/pages/d/[dataId].js b/app/src/pages/d/[dataId].js
index 219249a6..479ee76e 100644
--- a/app/src/pages/d/[dataId].js
+++ b/app/src/pages/d/[dataId].js
@@ -6,9 +6,10 @@ import { Typography } from "@mui/material";
 import DashboardLayout from "../../layouts/Dashboard";
 import { getItem } from "../api/getItem";
 import Wrapper from "../../components/Wrapper";
-import CroissantMetaData from "../../components/pages/data/CroissantMetaData";
-import FeatureTable from "../../components/pages/data/FeatureTable";
-import QualityTable from "../../components/pages/data/QualityTable";
+import CroissantMetaData from "../../components/data/CroissantMetaData";
+import FeatureTable from "../../components/data/FeatureTable";
+import QualityTable from "../../components/data/QualityTable";
+import Property from "../../components/Property";
 
 import styled from "@emotion/styled";
 import {
@@ -26,16 +27,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // Server-side translation
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import {
+  faCheckCircle,
   faClock,
+  faClosedCaptioning,
+  faCloud,
   faCloudDownloadAlt,
   faCode,
+  faCodeBranch,
   faDatabase,
   faEdit,
+  faExclamationTriangle,
   faFileAlt,
+  faHeart,
+  faIdBadge,
+  faTable,
   faTags,
+  faTimes,
+  faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 
-import { MetaTag } from "../../components/MetaItems";
 import ReactMarkdown from "react-markdown";
 
 import { updateTag, TagChip } from "../api/itemDetail";
@@ -60,6 +70,13 @@ const UserChip = styled(Chip)`
   margin-bottom: 5px;
 `;
 
+const VersionChip = styled(Chip)`
+  margin-bottom: 5px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+`;
+
 // Loads the information about the dataset from ElasticSearch
 // Also loads the translations for the page
 export async function getStaticProps({ params, locale }) {
@@ -131,6 +148,7 @@ function Dataset({ data, error }) {
   // TODO: update with actual login status
   const loggedIn = true;
 
+  // Action buttons
   const buttonData = [
     {
       tooltipTitle: "Download Croissant description",
@@ -166,6 +184,61 @@ function Dataset({ data, error }) {
     },
   ];
 
+  // First row of dataset properties
+  const dataProps1 = [
+    { label: "id", value: "ID: " + data.data_id, icon: faIdBadge },
+    {
+      label: "version",
+      value: "v." + data.version,
+      icon: faCodeBranch,
+    },
+    {
+      label: "status",
+      value: data.status === "active" ? "verified" : data.status,
+      color:
+        data.status === "active"
+          ? "green"
+          : data.status === "deactivated"
+          ? "red"
+          : "orange",
+      icon:
+        data.status === "active"
+          ? faCheckCircle
+          : data.status === "deactivated"
+          ? faTimes
+          : faWrench,
+    },
+    {
+      label: "format",
+      value: data.format,
+      icon: faTable,
+    },
+    {
+      label: "licence",
+      value: data.licence,
+      icon: faClosedCaptioning,
+    },
+    {
+      label: "date",
+      value: data.date.split(" ")[0],
+      icon: faClock,
+    },
+  ];
+
+  const dataProps2 = [
+    { label: "likes", value: data.nr_of_likes + " likes", icon: faHeart },
+    {
+      label: "issues",
+      value: data.nr_of_issues + " issues",
+      icon: faExclamationTriangle,
+    },
+    {
+      label: "downloads",
+      value: data.nr_of_downloads + " downloads",
+      icon: faCloud,
+    },
+  ];
+
   return (
     <Wrapper>
       <Helmet title="OpenML Datasets" />
@@ -173,52 +246,26 @@ function Dataset({ data, error }) {
       <Grid container spacing={6}>
         <Grid item xs={12}>
           <ActionButtons buttons={buttonData} />
-          <Grid container>
+          <Grid container spacing={4}>
             <Grid item md={12}>
-              <Typography variant="h1" style={{ marginBottom: "15px" }}>
+              <Typography variant="h1">
                 <FontAwesomeIcon icon={faDatabase} />
                 &nbsp;&nbsp;&nbsp;{data.name}
               </Typography>
             </Grid>
+
             <Grid item md={12}>
-              <Grid container display="flex" spacing={2}>
-                <Grid item>
-                  <MetaTag type={"id"} value={"ID: " + data.data_id} />
-                </Grid>
+              <Grid container justifyContent="space-between" spacing={2}>
+                {/* Left-aligned Properties */}
                 <Grid item>
-                  <MetaTag
-                    type={"status"}
-                    value={data.status === "active" ? "verified" : data.status}
-                    color={
-                      data.status === "active"
-                        ? "green"
-                        : data.status === "deactivated"
-                        ? "red"
-                        : "orange"
-                    }
-                  />
-                </Grid>
-                <Grid item>
-                  <MetaTag type={"format"} value={data.format} />
-                </Grid>
-                <Grid item>
-                  <MetaTag type={"licence"} value={data.licence} />
-                </Grid>
-                <Grid item>
-                  <FontAwesomeIcon icon={faClock} /> {data.date.split(" ")[0]}
+                  {dataProps1.map((tag) => (
+                    <Property key={tag.label} {...tag} />
+                  ))}
                 </Grid>
+
+                {/* Right-aligned Version Chip */}
                 <Grid item>
-                  <MetaTag type={"version"} value={"v." + data.version} />
-                </Grid>
-                <Grid
-                  item
-                  style={{
-                    flexGrow: 1,
-                    display: "flex",
-                    justifyContent: "flex-end",
-                  }}
-                >
-                  <UserChip
+                  <VersionChip
                     size="small"
                     color="primary"
                     label="Version history"
@@ -227,17 +274,15 @@ function Dataset({ data, error }) {
                         <FontAwesomeIcon icon={faClock} />
                       </Avatar>
                     }
-                    href={
-                      "search?type=data&sort=version&status=any&order=asc&exact_name=" +
-                      data.name
-                    }
+                    href={`search?type=data&sort=version&status=any&order=asc&exact_name=${data.name}`}
                     component="a"
                     clickable
                   />
                 </Grid>
               </Grid>
 
-              <Grid container display="flex" spacing={2}>
+              {/* User Chip and Second Row of Properties */}
+              <Grid container spacing={2}>
                 <Grid item>
                   <UserChip
                     size="small"
@@ -249,43 +294,35 @@ function Dataset({ data, error }) {
                       </Avatar>
                     }
                     label={data.uploader}
-                    href={"search?type=user&id=" + data.uploader_id}
+                    href={`search?type=user&id=${data.uploader_id}`}
                     component="a"
                     clickable
                   />
                 </Grid>
                 <Grid item>
-                  <MetaTag type={"likes"} value={data.nr_of_likes + " likes"} />
-                </Grid>
-                <Grid item>
-                  <MetaTag
-                    type={"issues"}
-                    value={data.nr_of_issues + " issues"}
-                  />
-                </Grid>
-                <Grid item>
-                  <MetaTag type={"downloads"} value={data.nr_of_downloads} />
+                  {dataProps2.map((tag) => (
+                    <Property key={tag.label} {...tag} />
+                  ))}
                 </Grid>
               </Grid>
-            </Grid>
-          </Grid>
 
-          {/* Tags */}
-          <Grid container>
-            <Grid item md={12}>
-              <FontAwesomeIcon icon={faTags} />{" "}
-              {data.tags.map((element) =>
-                element.tag.toString().startsWith("study") ? (
-                  ""
-                ) : (
-                  <TagChip
-                    key={"tag_" + element.tag}
-                    label={"  " + element.tag + "  "}
-                    size="small"
-                    onClick={() => updateTag(element.tag)}
-                  />
-                ),
-              )}
+              {/* Tags */}
+              <Grid container spacing={2} pt={1}>
+                <Grid item md={12}>
+                  <FontAwesomeIcon icon={faTags} />
+                  {data.tags.map(
+                    (element) =>
+                      !element.tag.toString().startsWith("study") && (
+                        <TagChip
+                          key={"tag_" + element.tag}
+                          label={"  " + element.tag + "  "}
+                          size="small"
+                          onClick={() => updateTag(element.tag)}
+                        />
+                      ),
+                  )}
+                </Grid>
+              </Grid>
             </Grid>
           </Grid>
         </Grid>
diff --git a/app/src/pages/f/[flowId].js b/app/src/pages/f/[flowId].js
index 7ca37e33..f74309b6 100644
--- a/app/src/pages/f/[flowId].js
+++ b/app/src/pages/f/[flowId].js
@@ -18,8 +18,8 @@ import { CollapsibleDataTable, StringLimiter } from "../api/sizeLimiter";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCogs, faTags } from "@fortawesome/free-solid-svg-icons";
 import Wrapper from "../../components/Wrapper";
-import DependencyTable from "../../components/pages/flow/DependencyTable";
-import ParameterTable from "../../components/pages/flow/ParameterTable";
+import DependencyTable from "../../components/flow/DependencyTable";
+import ParameterTable from "../../components/flow/ParameterTable";
 
 export async function getStaticPaths() {
   // No paths are pre-rendered
diff --git a/app/src/pages/index.js b/app/src/pages/index.js
index 033e2f17..ced60934 100644
--- a/app/src/pages/index.js
+++ b/app/src/pages/index.js
@@ -4,9 +4,9 @@ import { useTranslation } from "next-i18next";
 import DashboardLayout from "../layouts/Dashboard";
 import { Helmet } from "react-helmet-async";
 
-import Integrations from "../components/pages/landing/Integrations";
-import Lifecycle from "../components/pages/landing/Lifecycle";
-import FAQ from "../components/pages/landing/FAQ";
+import Integrations from "../components/landing/Integrations";
+import Lifecycle from "../components/landing/Lifecycle";
+import FAQ from "../components/landing/FAQ";
 import Wrapper from "../components/Wrapper";
 
 import { Grid } from "@mui/material";
@@ -25,7 +25,7 @@ export async function getStaticProps({ locale }) {
 // Avoids a (dev-only) hydration warning for the svg diagram
 import dynamic from "next/dynamic";
 const Introduction = dynamic(
-  () => import("../components/pages/landing/Introduction"),
+  () => import("../components/landing/Introduction"),
   { ssr: false },
 );