diff --git a/reana-ui/src/pages/workflowDetails/components/LauncherLabel.js b/reana-ui/src/components/LauncherLabel.js
similarity index 100%
rename from reana-ui/src/pages/workflowDetails/components/LauncherLabel.js
rename to reana-ui/src/components/LauncherLabel.js
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowBadges.js b/reana-ui/src/components/WorkflowBadges.js
similarity index 91%
rename from reana-ui/src/pages/workflowList/components/WorkflowBadges.js
rename to reana-ui/src/components/WorkflowBadges.js
index 3bd4b2d8..a3d43d6b 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowBadges.js
+++ b/reana-ui/src/components/WorkflowBadges.js
@@ -1,8 +1,8 @@
-import styles from "~/pages/workflowList/components/WorkflowBadges.module.scss";
+import styles from "./WorkflowBadges.module.scss";
 import { Divider, Label } from "semantic-ui-react";
 import { JupyterNotebookIcon, WorkflowActionsPopup } from "~/components";
 import { INTERACTIVE_SESSION_URL } from "~/client";
-import { LauncherLabel } from "~/pages/workflowDetails/components";
+import { LauncherLabel } from "~/components";
 import { getReanaToken } from "~/selectors";
 import { useSelector } from "react-redux";
 import { statusMapping } from "~/util";
@@ -21,7 +21,7 @@ export default function WorkflowBadges({ workflow, withDivider = true }) {
 
   return (
     <>
-      <Divider className={styles.divider}></Divider>
+      {withDivider && <Divider className={styles.divider}></Divider>}
       <div className={styles["badges-and-actions"]}>
         <div className={styles.badgesContainer}>
           {workflow.duration && (
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss b/reana-ui/src/components/WorkflowBadges.module.scss
similarity index 100%
rename from reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss
rename to reana-ui/src/components/WorkflowBadges.module.scss
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowDetails.js b/reana-ui/src/components/WorkflowInfo.js
similarity index 89%
rename from reana-ui/src/pages/workflowList/components/WorkflowDetails.js
rename to reana-ui/src/components/WorkflowInfo.js
index 50b664a8..2f1eec95 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowDetails.js
+++ b/reana-ui/src/components/WorkflowInfo.js
@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2023 CERN.
+  Copyright (C) 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -13,10 +13,10 @@ import PropTypes from "prop-types";
 
 import { statusMapping } from "~/util";
 
-import styles from "./WorkflowDetails.module.scss";
-import WorkflowProgressCircleBar from "~/pages/workflowList/components/WorkflowProgressCircleBar";
+import styles from "./WorkflowInfo.module.scss";
+import { WorkflowProgressCircleBar } from "~/components";
 
-export default function WorkflowDetails({ workflow }) {
+export default function WorkflowInfo({ workflow }) {
   const {
     name,
     run,
@@ -87,6 +87,6 @@ export default function WorkflowDetails({ workflow }) {
   );
 }
 
-WorkflowDetails.propTypes = {
+WorkflowInfo.propTypes = {
   workflow: PropTypes.object.isRequired,
 };
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss b/reana-ui/src/components/WorkflowInfo.module.scss
similarity index 98%
rename from reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss
rename to reana-ui/src/components/WorkflowInfo.module.scss
index 41f51057..01f9352c 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss
+++ b/reana-ui/src/components/WorkflowInfo.module.scss
@@ -17,6 +17,7 @@
 
 .workflow {
   color: $raven;
+  font-size: 1.15rem;
 
   /**FIXME visibility on hover is missing!*/
   &.hover {
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js b/reana-ui/src/components/WorkflowProgressCircleBar.js
similarity index 100%
rename from reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js
rename to reana-ui/src/components/WorkflowProgressCircleBar.js
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.module.scss b/reana-ui/src/components/WorkflowProgressCircleBar.module.scss
similarity index 100%
rename from reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.module.scss
rename to reana-ui/src/components/WorkflowProgressCircleBar.module.scss
diff --git a/reana-ui/src/pages/workflowDetails/components/__tests__/LauncherLabel.test.js b/reana-ui/src/components/__tests__/LauncherLabel.test.js
similarity index 96%
rename from reana-ui/src/pages/workflowDetails/components/__tests__/LauncherLabel.test.js
rename to reana-ui/src/components/__tests__/LauncherLabel.test.js
index 0b8480ea..31bc7a3e 100644
--- a/reana-ui/src/pages/workflowDetails/components/__tests__/LauncherLabel.test.js
+++ b/reana-ui/src/components/__tests__/LauncherLabel.test.js
@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
diff --git a/reana-ui/src/components/index.js b/reana-ui/src/components/index.js
index 72e2129d..8d5b2c20 100644
--- a/reana-ui/src/components/index.js
+++ b/reana-ui/src/components/index.js
@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2021, 2022, 2023 CERN.
+  Copyright (C) 2020, 2021, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -16,10 +16,14 @@ export { default as Pagination } from "./Pagination";
 export { default as Title } from "./Title";
 export { default as TopHeader } from "./TopHeader";
 export { default as TooltipIfTruncated } from "./TooltipIfTruncated";
+export { default as LauncherLabel } from "./LauncherLabel";
 export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";
 export { default as WorkflowDeleteModal } from "./WorkflowDeleteModal";
+export { default as WorkflowInfo } from "./WorkflowInfo";
+export { default as WorkflowBadges } from "./WorkflowBadges";
 export { default as WorkflowStopModal } from "./WorkflowStopModal";
 export { default as WorkflowActionsPopup } from "./WorkflowActionsPopup";
+export { default as WorkflowProgressCircleBar } from "./WorkflowProgressCircleBar";
 export { default as PieChart } from "./PieChart";
 export { default as Search } from "./Search";
 export { default as Box } from "./Box";
diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
index 8899ea20..617cb7d5 100644
--- a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
+++ b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022, 2023 CERN.
+  Copyright (C) 2020, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -24,15 +24,17 @@ import {
 import BasePage from "../BasePage";
 import {
   Notification,
+  WorkflowInfo,
+  WorkflowBadges,
   WorkflowDeleteModal,
   WorkflowStopModal,
 } from "~/components";
 import {
-  WorkflowInfo,
   WorkflowLogs,
   WorkflowFiles,
   WorkflowSpecification,
 } from "./components";
+import styles from "./WorkflowDetails.module.scss";
 
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
@@ -139,8 +141,9 @@ export default function WorkflowDetails() {
 
   return (
     <BasePage title={pageTitle}>
-      <Container>
+      <Container className={styles["workflow-details-container"]}>
         <WorkflowInfo workflow={workflow} />
+        <WorkflowBadges workflow={workflow} withDivider={false} />
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}
diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.module.scss b/reana-ui/src/pages/workflowDetails/WorkflowDetails.module.scss
new file mode 100644
index 00000000..9717e1ce
--- /dev/null
+++ b/reana-ui/src/pages/workflowDetails/WorkflowDetails.module.scss
@@ -0,0 +1,3 @@
+.workflow-details-container {
+  padding-top: 2rem;
+}
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
deleted file mode 100644
index ec50a517..00000000
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
-  -*- coding: utf-8 -*-
-
-  This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
-
-  REANA is free software; you can redistribute it and/or modify it
-  under the terms of the MIT License; see LICENSE file for more details.
-*/
-
-import { useSelector } from "react-redux";
-import PropTypes from "prop-types";
-import { Icon, Popup } from "semantic-ui-react";
-
-import { INTERACTIVE_SESSION_URL } from "~/client";
-import { NON_FINISHED_STATUSES } from "~/config";
-import { getReanaToken } from "~/selectors";
-import { statusMapping } from "~/util";
-import { LauncherLabel, WorkflowProgress } from "../components";
-import { JupyterNotebookIcon, WorkflowActionsPopup } from "~/components";
-import styles from "./WorkflowInfo.module.scss";
-
-export default function WorkflowInfo({ workflow }) {
-  const {
-    name,
-    run,
-    createdDate,
-    startedDate,
-    finishedDate,
-    friendlyCreated,
-    friendlyStarted,
-    friendlyFinished,
-    duration,
-    completed,
-    total,
-    status,
-    launcherURL,
-    session_uri: sessionUri,
-    session_status: sessionStatus,
-  } = workflow;
-  const reanaToken = useSelector(getReanaToken);
-  const isSessionOpen = sessionStatus === "created";
-  return (
-    <div className={styles.workflow}>
-      <section className={styles.info}>
-        <div className={styles["details-box"]}>
-          <Icon
-            name={statusMapping[status].icon}
-            color={statusMapping[status].color}
-          />
-          <div>
-            <span className={styles["name"]}>{name}</span>
-            <span className={styles["run"]}>#{run}</span>
-            {isSessionOpen && (
-              <a
-                href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-                className={styles.notebook}
-              >
-                <JupyterNotebookIcon />
-              </a>
-            )}
-            <span className={styles["launcher-label"]}>
-              <LauncherLabel url={launcherURL} />
-            </span>
-            <Popup
-              trigger={
-                <div>
-                  {friendlyFinished
-                    ? `Finished ${friendlyFinished}`
-                    : friendlyStarted
-                      ? `Started ${friendlyStarted}`
-                      : `Created ${friendlyCreated}`}
-                </div>
-              }
-              content={
-                friendlyFinished
-                  ? finishedDate
-                  : friendlyStarted
-                    ? startedDate
-                    : createdDate
-              }
-            />
-          </div>
-        </div>
-        <div className={styles.info}>
-          <div>
-            <div className={styles["first-row"]}>
-              <span
-                className={`${styles["status"]} sui-${statusMapping[status].color}`}
-              >
-                {status}
-              </span>{" "}
-              {statusMapping[status].preposition} {duration}
-              {NON_FINISHED_STATUSES.includes(status) && (
-                <Icon
-                  name="refresh"
-                  className={styles.refresh}
-                  onClick={() => window.location.reload()}
-                />
-              )}
-            </div>
-            <div>
-              step {completed}/{total}
-            </div>
-          </div>
-          <WorkflowActionsPopup workflow={workflow} />
-        </div>
-      </section>
-      <WorkflowProgress workflow={workflow} />
-    </div>
-  );
-}
-
-WorkflowInfo.propTypes = {
-  workflow: PropTypes.object.isRequired,
-};
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
deleted file mode 100644
index 26436375..00000000
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-  -*- coding: utf-8 -*-
-
-  This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
-
-  REANA is free software; you can redistribute it and/or modify it
-  under the terms of the MIT License; see LICENSE file for more details.
-*/
-
-@import "@palette";
-
-.workflow {
-  color: $raven;
-  margin: 2rem 0;
-  font-size: 16px;
-
-  .info {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 1em;
-    flex-shrink: 0;
-
-    .details-box {
-      display: flex;
-      align-items: baseline;
-    }
-  }
-
-  .name,
-  .status {
-    font-weight: bold;
-  }
-
-  .name {
-    font-size: 1.3em;
-  }
-
-  .status,
-  .run {
-    font-size: 1.2em;
-  }
-
-  .run {
-    padding: 0 0.8em;
-  }
-
-  .refresh {
-    color: $gray;
-    cursor: pointer;
-    margin-left: 1em;
-    position: relative;
-    top: 10px;
-
-    &:hover {
-      color: $dark-gray;
-    }
-  }
-
-  .notebook {
-    margin-left: 1em;
-    margin: 0.7em;
-  }
-
-  .launcher-label {
-    vertical-align: bottom;
-  }
-}
diff --git a/reana-ui/src/pages/workflowDetails/components/index.js b/reana-ui/src/pages/workflowDetails/components/index.js
index 01dba896..5091c388 100644
--- a/reana-ui/src/pages/workflowDetails/components/index.js
+++ b/reana-ui/src/pages/workflowDetails/components/index.js
@@ -2,16 +2,14 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
+  Copyright (C) 2020, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
 export { default as WorkflowLogs } from "./WorkflowLogs";
-export { default as WorkflowInfo } from "./WorkflowInfo";
 export { default as WorkflowFiles } from "./WorkflowFiles";
 export { default as WorkflowProgress } from "./WorkflowProgress";
 export { default as WorkflowRetentionRules } from "./WorkflowRetentionRules";
 export { default as WorkflowSpecification } from "./WorkflowSpecification";
-export { default as LauncherLabel } from "./LauncherLabel";
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.js b/reana-ui/src/pages/workflowList/components/WorkflowList.js
index 5fe58aed..ab3e63e5 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.js
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.js
@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2021, 2022, 2023 CERN.
+  Copyright (C) 2020, 2021, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -12,11 +12,15 @@ import { Loader, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
-import { Box, WorkflowDeleteModal, WorkflowStopModal } from "~/components";
+import {
+  Box,
+  WorkflowBadges,
+  WorkflowInfo,
+  WorkflowDeleteModal,
+  WorkflowStopModal,
+} from "~/components";
 
 import styles from "./WorkflowList.module.scss";
-import WorkflowDetails from "~/pages/workflowList/components/WorkflowDetails";
-import WorkflowBadges from "~/pages/workflowList/components/WorkflowBadges";
 
 export default function WorkflowList({ workflows, loading }) {
   if (loading) return <Loader active />;
@@ -30,7 +34,7 @@ export default function WorkflowList({ workflows, loading }) {
           <Box padding={false} flex={false}>
             <Link key={workflow.id} to={`/details/${workflow.id}`}>
               <div className={styles["workflow-details-container"]}>
-                <WorkflowDetails workflow={workflow} actionsOnHover={true} />
+                <WorkflowInfo workflow={workflow} actionsOnHover={true} />
               </div>
             </Link>
             <WorkflowBadges workflow={workflow} />
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
index defe5a2e..71f25b64 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
@@ -16,7 +16,7 @@
 }
 
 .workflow-details-container {
-  padding: 1em;
+  padding: 1em 1em 0 1em;
   &:hover {
     background-color: lighten($sepia, 3%);
     border-color: darken($sepia, 10%);