diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities_items/MobileCommunitiesItem.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities_items/MobileCommunitiesItem.js
index 72eaed4b93..584f290bc9 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities_items/MobileCommunitiesItem.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities_items/MobileCommunitiesItem.js
@@ -53,18 +53,18 @@ export const MobileCommunitiesItem = ({ result, index }) => {
             </a>
           )}
         </Item>
-        <Item.Meta>
+        <Item.Extra>
           <Button
             compact
             size="small"
             floated="right"
             href={`/communities/${result.id}/settings`}
-            className="mt-0 fluid-responsive"
+            className="fluid-responsive"
           >
             <Icon name="edit" />
             {i18next.t("Edit")}
           </Button>
-        </Item.Meta>
+        </Item.Extra>
       </Item.Content>
     </Item>
   );
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js
index ec3250d816..916ea6f11c 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js
@@ -61,8 +61,8 @@ import {
   SearchHelpLinks,
 } from "../search/components";
 import { timestampToRelativeTime } from "../utils";
-import { ComputerTabletRequestsItems } from "./requests_items/ComputerTabletRequestsItems";
-import { MobileRequestsItems } from "./requests_items/MobileRequestsItems";
+import { ComputerTabletRequestsItem } from "./requests_items/ComputerTabletRequestsItem";
+import { MobileRequestsItem } from "./requests_items/MobileRequestsItem";
 
 export const RequestsResults = ({
   sortOptions,
@@ -190,18 +190,18 @@ export function RequestsResultsItemTemplateDashboard({ result, index }) {
   } else if (isCreatorCommunity) {
     creatorName = result.expanded?.created_by.metadata?.title || createdBy.community;
   }
-  const ComputerTabletRequestsItemsWithState = withState(ComputerTabletRequestsItems);
-  const MobileRequestsItemsWithState = withState(MobileRequestsItems);
+  const ComputerTabletRequestsItemWithState = withState(ComputerTabletRequestsItem);
+  const MobileRequestsItemWithState = withState(MobileRequestsItem);
   return (
     <>
-      <ComputerTabletRequestsItemsWithState
+      <ComputerTabletRequestsItemWithState
         result={result}
         index={index}
         differenceInDays={differenceInDays}
         isCreatorCommunity={isCreatorCommunity}
         creatorName={creatorName}
       />
-      <MobileRequestsItemsWithState
+      <MobileRequestsItemWithState
         result={result}
         index={index}
         differenceInDays={differenceInDays}
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItems.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItem.js
similarity index 95%
rename from invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItems.js
rename to invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItem.js
index 1c03a3d783..36dacfd7ae 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItems.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/ComputerTabletRequestsItem.js
@@ -13,7 +13,7 @@ import { Icon, Item } from "semantic-ui-react";
 import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
 import PropTypes from "prop-types";
 
-export const ComputerTabletRequestsItems = ({
+export const ComputerTabletRequestsItem = ({
   result,
   index,
   differenceInDays,
@@ -67,7 +67,7 @@ export const ComputerTabletRequestsItems = ({
   );
 };
 
-ComputerTabletRequestsItems.propTypes = {
+ComputerTabletRequestsItem.propTypes = {
   result: PropTypes.object.isRequired,
   index: PropTypes.string,
   differenceInDays: PropTypes.string.isRequired,
@@ -77,6 +77,6 @@ ComputerTabletRequestsItems.propTypes = {
   currentQueryState: PropTypes.object.isRequired,
 };
 
-ComputerTabletRequestsItems.defaultProps = {
+ComputerTabletRequestsItem.defaultProps = {
   index: null,
 };
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItems.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItem.js
similarity index 95%
rename from invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItems.js
rename to invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItem.js
index 2e5ed7c7a7..ad2276af07 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItems.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests_items/MobileRequestsItem.js
@@ -13,7 +13,7 @@ import { Icon, Item } from "semantic-ui-react";
 import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
 import PropTypes from "prop-types";
 
-export const MobileRequestsItems = ({
+export const MobileRequestsItem = ({
   result,
   index,
   differenceInDays,
@@ -62,7 +62,7 @@ export const MobileRequestsItems = ({
   );
 };
 
-MobileRequestsItems.propTypes = {
+MobileRequestsItem.propTypes = {
   result: PropTypes.object.isRequired,
   index: PropTypes.string,
   differenceInDays: PropTypes.string.isRequired,
@@ -72,6 +72,6 @@ MobileRequestsItems.propTypes = {
   currentQueryState: PropTypes.object.isRequired,
 };
 
-MobileRequestsItems.defaultProps = {
+MobileRequestsItem.defaultProps = {
   index: null,
 };
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads.js
index b4ad2e6222..73ec6dd6a6 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads.js
@@ -11,16 +11,7 @@ import { i18next } from "@translations/invenio_app_rdm/i18next";
 import _get from "lodash/get";
 import _truncate from "lodash/truncate";
 import React from "react";
-import {
-  Button,
-  Card,
-  Divider,
-  Header,
-  Icon,
-  Item,
-  Label,
-  Segment,
-} from "semantic-ui-react";
+import { Button, Card, Divider, Header, Segment } from "semantic-ui-react";
 import {
   RDMBucketAggregationElement,
   RDMCountComponent,
@@ -30,9 +21,11 @@ import {
   RDMRecordSearchBarElement,
   RDMToggleComponent,
 } from "../search/components";
-import { axiosWithconfig, SearchItemCreators } from "../utils";
+import { axiosWithconfig } from "../utils";
 import { DashboardResultView, DashboardSearchLayoutHOC } from "./base";
 import { createSearchAppInit } from "@js/invenio_search_ui";
+import { ComputerTabletUploadsItem } from "./uploads_items/ComputerTabletUploadsItem";
+import { MobileUploadsItem } from "./uploads_items/MobileUploadsItem";
 import PropTypes from "prop-types";
 
 const statuses = {
@@ -45,38 +38,6 @@ const statuses = {
 };
 
 export const RDMRecordResultsListItem = ({ result, index }) => {
-  const accessStatusId = _get(result, "ui.access_status.id", "open");
-  const accessStatus = _get(result, "ui.access_status.title_l10n", "Open");
-  const accessStatusIcon = _get(result, "ui.access_status.icon", "unlock");
-  const createdDate = _get(
-    result,
-    "ui.created_date_l10n_long",
-    i18next.t("No creation date found.")
-  );
-  const creators = _get(result, "ui.creators.creators", []).slice(0, 3);
-
-  const descriptionStripped = _get(
-    result,
-    "ui.description_stripped",
-    i18next.t("No description")
-  );
-
-  const publicationDate = _get(
-    result,
-    "ui.publication_date_l10n_long",
-    i18next.t("No publication date found.")
-  );
-  const resourceType = _get(
-    result,
-    "ui.resource_type.title_l10n",
-    i18next.t("No resource type")
-  );
-  const title = _get(result, "metadata.title", i18next.t("No title"));
-  const subjects = _get(result, "ui.subjects", []);
-  const version = _get(result, "ui.version", null);
-  const isPublished = result.is_published;
-
-  // Derivatives
   const editRecord = () => {
     axiosWithconfig
       .post(`/api/records/${result.id}/draft`)
@@ -88,78 +49,21 @@ export const RDMRecordResultsListItem = ({ result, index }) => {
       });
   };
 
-  const viewLink = isPublished ? `/records/${result.id}` : `/uploads/${result.id}`;
   return (
-    <Item key={index} className="deposits-list-item mb-20">
-      <div className="status-icon mr-10">
-        <Item.Content verticalAlign="top">
-          <Item.Extra>
-            {isPublished ? (
-              <Icon name="check" className="positive" />
-            ) : (
-              <Icon name="upload" className="negative" />
-            )}
-          </Item.Extra>
-        </Item.Content>
-      </div>
-      <Item.Content style={{ cursor: "default" }}>
-        <Item.Extra className="labels-actions">
-          {/* For reduced spacing between labels. */}
-          {result.status in statuses && result.status !== "published" && (
-            <Label size="tiny" className={statuses[result.status].color}>
-              {statuses[result.status].title}
-            </Label>
-          )}
-          <Label size="tiny" className="primary">
-            {publicationDate} ({version})
-          </Label>
-          <Label size="tiny" className="neutral">
-            {resourceType}
-          </Label>
-          <Label size="tiny" className={`access-status ${accessStatusId}`}>
-            {accessStatusIcon && <i className={`icon ${accessStatusIcon}`} />}
-            {accessStatus}
-          </Label>
-          <Button compact size="small" floated="right" onClick={() => editRecord()}>
-            <Icon name="edit" />
-            {i18next.t("Edit")}
-          </Button>
-          {isPublished && (
-            <Button compact size="small" floated="right" href={viewLink}>
-              <Icon name="eye" />
-              {i18next.t("View")}
-            </Button>
-          )}
-        </Item.Extra>
-        <Item.Header as="h2">
-          <a href={viewLink}>{title}</a>
-        </Item.Header>
-        <Item.Meta>
-          <div className="creatibutors">
-            <SearchItemCreators creators={creators} />
-          </div>
-        </Item.Meta>
-        <Item.Description>
-          {_truncate(descriptionStripped, {
-            length: 350,
-          })}
-        </Item.Description>
-        <Item.Extra>
-          {subjects.map((subject) => (
-            <Label key={subject.title_l10n} size="tiny">
-              {subject.title_l10n}
-            </Label>
-          ))}
-          {createdDate && (
-            <div>
-              <small>
-                {i18next.t("Uploaded on")} <span>{createdDate}</span>
-              </small>
-            </div>
-          )}
-        </Item.Extra>
-      </Item.Content>
-    </Item>
+    <>
+      <ComputerTabletUploadsItem
+        result={result}
+        index={index}
+        editRecord={editRecord}
+        statuses={statuses}
+      />
+      <MobileUploadsItem
+        result={result}
+        index={index}
+        editRecord={editRecord}
+        statuses={statuses}
+      />
+    </>
   );
 };
 
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/ComputerTabletUploadsItem.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/ComputerTabletUploadsItem.js
new file mode 100644
index 0000000000..43c8fbf1da
--- /dev/null
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/ComputerTabletUploadsItem.js
@@ -0,0 +1,131 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2022 CERN.
+//
+// Invenio App RDM 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 { i18next } from "@translations/invenio_app_rdm/i18next";
+import _get from "lodash/get";
+import _truncate from "lodash/truncate";
+import React from "react";
+import { Button, Icon, Item, Label } from "semantic-ui-react";
+import { SearchItemCreators } from "../../utils";
+import PropTypes from "prop-types";
+
+export const ComputerTabletUploadsItem = ({ result, index, editRecord, statuses }) => {
+  const accessStatusId = _get(result, "ui.access_status.id", i18next.t("open"));
+  const accessStatus = _get(result, "ui.access_status.title_l10n", i18next.t("Open"));
+  const accessStatusIcon = _get(result, "ui.access_status.icon", i18next.t("unlock"));
+  const descriptionStripped = _get(
+    result,
+    "ui.description_stripped",
+    i18next.t("No description")
+  );
+  const title = _get(result, "metadata.title", i18next.t("No title"));
+  const creators = _get(result, "ui.creators.creators", []).slice(0, 3);
+  const subjects = _get(result, "ui.subjects", []);
+  const publicationDate = _get(
+    result,
+    "ui.publication_date_l10n_long",
+    i18next.t("No publication date found.")
+  );
+  const resourceType = _get(
+    result,
+    "ui.resource_type.title_l10n",
+    i18next.t("No resource type")
+  );
+  const createdDate = result.ui?.created_date_l10n_long;
+  const version = result.ui?.version ?? "";
+  const isPublished = result.is_published;
+
+  const viewLink = isPublished ? `/records/${result.id}` : `/uploads/${result.id}`;
+  const icon = isPublished ? (
+    <Icon name="check" color="green" />
+  ) : (
+    <Icon name="upload" color="red" />
+  );
+
+  return (
+    <Item key={index} className="deposits-list-item mb-20 computer tablet only flex">
+      <div className="status-icon mr-10">
+        <Item.Content verticalAlign="top">
+          <Item.Extra>{icon}</Item.Extra>
+        </Item.Content>
+      </div>
+      <Item.Content style={{ cursor: "default" }}>
+        <Item.Extra className="labels-actions">
+          {result.status in statuses && result.status !== "published" && (
+            <Label size="tiny" color={statuses[result.status].color}>
+              {statuses[result.status].title}
+            </Label>
+          )}
+          <Label size="tiny" color="blue">
+            {publicationDate} ({version})
+          </Label>
+          <Label size="tiny" color="grey">
+            {resourceType}
+          </Label>
+          <Label size="tiny" className={`access-status ${accessStatusId}`}>
+            <i className={`icon ${accessStatusIcon}`} />
+            {accessStatus}
+          </Label>
+          <Button compact size="small" floated="right" onClick={() => editRecord()}>
+            <Icon name="edit" />
+            {i18next.t("Edit")}
+          </Button>
+          {isPublished && (
+            <Button compact size="small" floated="right" href={viewLink}>
+              <Icon name="eye" />
+              {i18next.t("View")}
+            </Button>
+          )}
+        </Item.Extra>
+        <Item.Header as="h2">
+          <a href={viewLink} className="truncate-lines-2">
+            {title}
+          </a>
+        </Item.Header>
+        <Item.Meta>
+          <div className="creatibutors">
+            <SearchItemCreators creators={creators} />
+          </div>
+        </Item.Meta>
+        <Item.Description>
+          {_truncate(descriptionStripped, {
+            length: 350,
+          })}
+        </Item.Description>
+        <Item.Extra>
+          {subjects.map((subject) => (
+            <Label key={subject.title_l10n} size="tiny">
+              {subject.title_l10n}
+            </Label>
+          ))}
+          <div>
+            {}
+            <small>
+              {createdDate ? (
+                <>
+                  {i18next.t("Uploaded on")} <span>{createdDate}</span>
+                </>
+              ) : (
+                i18next.t("No creation date found.")
+              )}
+            </small>
+          </div>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  );
+};
+
+ComputerTabletUploadsItem.propTypes = {
+  result: PropTypes.object.isRequired,
+  index: PropTypes.string,
+  editRecord: PropTypes.string.isRequired,
+  statuses: PropTypes.bool.isRequired,
+};
+
+ComputerTabletUploadsItem.defaultProps = {
+  index: null,
+};
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/MobileUploadsItem.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/MobileUploadsItem.js
new file mode 100644
index 0000000000..b9b9fc8126
--- /dev/null
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/MobileUploadsItem.js
@@ -0,0 +1,143 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2022 CERN.
+//
+// Invenio App RDM 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 { i18next } from "@translations/invenio_app_rdm/i18next";
+import _get from "lodash/get";
+import _truncate from "lodash/truncate";
+import React from "react";
+import { Button, Icon, Item, Label } from "semantic-ui-react";
+import { SearchItemCreators } from "../../utils";
+import PropTypes from "prop-types";
+
+export const MobileUploadsItem = ({ result, index, editRecord, statuses }) => {
+  const accessStatusId = _get(result, "ui.access_status.id", i18next.t("open"));
+  const accessStatus = _get(result, "ui.access_status.title_l10n", i18next.t("Open"));
+  const accessStatusIcon = _get(result, "ui.access_status.icon", i18next.t("unlock"));
+  const descriptionStripped = _get(
+    result,
+    "ui.description_stripped",
+    i18next.t("No description")
+  );
+  const title = _get(result, "metadata.title", i18next.t("No title"));
+  const creators = _get(result, "ui.creators.creators", []).slice(0, 3);
+  const subjects = _get(result, "ui.subjects", []);
+  const publicationDate = _get(
+    result,
+    "ui.publication_date_l10n_long",
+    i18next.t("No publication date found.")
+  );
+  const resourceType = _get(
+    result,
+    "ui.resource_type.title_l10n",
+    i18next.t("No resource type")
+  );
+  const createdDate = result.ui?.created_date_l10n_long;
+  const version = result.ui?.version ?? "";
+  const isPublished = result.is_published;
+
+  const viewLink = isPublished ? `/records/${result.id}` : `/uploads/${result.id}`;
+  const icon = isPublished ? (
+    <Icon name="check" color="green" />
+  ) : (
+    <Icon name="upload" color="red" />
+  );
+
+  return (
+    <Item key={index} className="deposits-list-item mb-20 mobile only flex">
+      <Item.Content className="centered" style={{ cursor: "default" }}>
+        <Item.Extra className="labels-actions">
+          {result.status in statuses && result.status !== "published" && (
+            <Label size="tiny" color={statuses[result.status].color}>
+              {statuses[result.status].title}
+            </Label>
+          )}
+          <Label size="tiny" color="blue">
+            {publicationDate} ({version})
+          </Label>
+          <Label size="tiny" color="grey">
+            {resourceType}
+          </Label>
+          <Label size="tiny" className={`access-status ${accessStatusId}`}>
+            <i className={`icon ${accessStatusIcon}`} />
+            {accessStatus}
+          </Label>
+        </Item.Extra>
+        <Item.Header as="h2">
+          <a href={viewLink} className="truncate-lines-2">
+            {icon}
+            {title}
+          </a>
+        </Item.Header>
+        <Item.Meta>
+          <div className="creatibutors">
+            <SearchItemCreators creators={creators} className="ml-auto mr-auto" />
+          </div>
+        </Item.Meta>
+        <Item.Description>
+          {_truncate(descriptionStripped, {
+            length: 100,
+          })}
+        </Item.Description>
+        <Item.Extra>
+          <Item.Extra>
+            {subjects.map((subject) => (
+              <Label key={subject.title_l10n} size="tiny">
+                {subject.title_l10n}
+              </Label>
+            ))}
+            <div>
+              {}
+              <small>
+                {createdDate ? (
+                  <>
+                    {i18next.t("Uploaded on")} <span>{createdDate}</span>
+                  </>
+                ) : (
+                  i18next.t("No creation date found.")
+                )}
+              </small>
+            </div>
+          </Item.Extra>
+        </Item.Extra>
+        <Item.Extra>
+          <Button
+            compact
+            size="small"
+            floated="right"
+            onClick={() => editRecord()}
+            className="fluid-responsive"
+          >
+            <Icon name="edit" />
+            {i18next.t("Edit")}
+          </Button>
+          {isPublished && (
+            <Button
+              compact
+              size="small"
+              floated="right"
+              href={viewLink}
+              className="fluid-responsive"
+            >
+              <Icon name="eye" />
+              {i18next.t("View")}
+            </Button>
+          )}
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  );
+};
+
+MobileUploadsItem.propTypes = {
+  result: PropTypes.object.isRequired,
+  index: PropTypes.string,
+  editRecord: PropTypes.string.isRequired,
+  statuses: PropTypes.bool.isRequired,
+};
+
+MobileUploadsItem.defaultProps = {
+  index: null,
+};
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/utils.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/utils.js
index c31e4cd5ce..c2382e24b6 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/utils.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/utils.js
@@ -43,7 +43,10 @@ const apiConfig = {
 
 export const axiosWithconfig = axios.create(apiConfig);
 
-export function SearchItemCreators({ creators }) {
+export function SearchItemCreators({ creators, className }) {
+  let spanClass = "creatibutor-wrap separated";
+  className && (spanClass += ` ${className}`);
+
   function makeIcon(scheme, identifier, name) {
     let link = null;
     let linkTitle = null;
@@ -51,17 +54,17 @@ export function SearchItemCreators({ creators }) {
 
     switch (scheme) {
       case "orcid":
-        link = "https://orcid.org/" + identifier;
+        link = `https://orcid.org/${identifier}`;
         linkTitle = i18next.t("ORCID profile");
         icon = "/static/images/orcid.svg";
         break;
       case "ror":
-        link = "https://ror.org/" + identifier;
+        link = `https://ror.org/${identifier}`;
         linkTitle = i18next.t("ROR profile");
         icon = "/static/images/ror-icon.svg";
         break;
       case "gnd":
-        link = "https://d-nb.info/gnd/" + identifier;
+        link = `https://d-nb.info/gnd/${identifier}`;
         linkTitle = i18next.t("GND profile");
         icon = "/static/images/gnd-icon.svg";
         break;