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 3c22abfc6a..9a946ff5a1 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
@@ -59,18 +59,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 7a4da64039..cd5655e59b 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,
@@ -182,20 +182,20 @@ export function RequestsResultsItemTemplateDashboard({ result, index }) {
     creatorName =
       result.expanded?.created_by.metadata?.title || createdBy.community;
   }
-  const ComputerTabletRequestsItemsWithState = withState(
-    ComputerTabletRequestsItems
+  const ComputerTabletRequestsItemWithState = withState(
+    ComputerTabletRequestsItem
   );
-  const MobileRequestsItemsWithState = withState(MobileRequestsItems);
+  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}
@@ -467,35 +467,35 @@ const RequestCancelButtonMobileWithConfig = parametrize(RequestCancelButton, {
 
 const CommunitySubmission = () => (
   <LabelTypeSubmission className="rel-mr-1" size="small" color="blue" />
-)
+);
 
 const CommunityInvitation = () => (
   <LabelTypeInvitation className="rel-mr-1" size="small" color="blue" />
-)
+);
 
 const Submitted = () => (
   <LabelStatusSubmit className="rel-mr-1" size="small" color="blue" />
-)
+);
 
 const Deleted = () => (
   <LabelStatusDelete className="rel-mr-1" size="small" color="red" />
-)
+);
 
 const Accepted = () => (
   <LabelStatusAccept className="rel-mr-1" size="small" color="green" />
-)
+);
 
 const Declined = () => (
   <LabelStatusDecline className="rel-mr-1" size="small" color="red" />
-)
+);
 
 const Cancelled = () => (
   <LabelStatusCancel className="rel-mr-1" size="small" color="grey" />
-)
+);
 
 const Expired = () => (
   <LabelStatusExpire className="rel-mr-1" size="small" color="grey" />
-)
+);
 
 export const defaultComponents = {
   "BucketAggregation.element": RDMBucketAggregationElement,
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 98%
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 cc1e47dd8e..a611e0a86f 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
@@ -14,7 +14,7 @@ import { RequestActionController } from "@js/invenio_requests/request/actions/Re
 import { Icon, Item } from "semantic-ui-react";
 import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
 
-export const ComputerTabletRequestsItems = ({
+export const ComputerTabletRequestsItem = ({
   result,
   index,
   differenceInDays,
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 98%
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 fbe91323ba..328f9ec7b5 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
@@ -14,7 +14,7 @@ import { RequestActionController } from "@js/invenio_requests/request/actions/Re
 import { Icon, Item } from "semantic-ui-react";
 import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
 
-export const MobileRequestsItems = ({
+export const MobileRequestsItem = ({
   result,
   index,
   differenceInDays,
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 7359b7ba81..4ef21b8cdd 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
@@ -10,18 +10,8 @@
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import _get from "lodash/get";
 import _truncate from "lodash/truncate";
-import React, { useState } from "react";
-import {
-  Button,
-  Card,
-  Divider,
-  Header,
-  Icon,
-  Item,
-  Label,
-  Modal,
-  Segment,
-} from "semantic-ui-react";
+import React from "react";
+import { Button, Card, Divider, Header, Segment } from "semantic-ui-react";
 import {
   RDMBucketAggregationElement,
   RDMCountComponent,
@@ -31,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";
 
 const statuses = {
   in_review: { color: "yellow", title: i18next.t("In review") },
@@ -45,38 +37,6 @@ const statuses = {
 };
 
 export const RDMRecordResultsListItem = ({ result, index }) => {
-  const access_status_id = _get(result, "ui.access_status.id", "open");
-  const access_status = _get(result, "ui.access_status.title_l10n", "Open");
-  const access_status_icon = _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 description_stripped = _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 resource_type = _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 is_published = result.is_published;
-
-  // Derivatives
   const editRecord = () => {
     axiosWithconfig
       .post(`/api/records/${result.id}/draft`)
@@ -88,87 +48,21 @@ export const RDMRecordResultsListItem = ({ result, index }) => {
       });
   };
 
-  const viewLink = is_published
-    ? `/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>
-            {is_published ? (
-              <Icon name="check" color="green" />
-            ) : (
-              <Icon name="upload" color="red" />
-            )}
-          </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" color={statuses[result.status].color}>
-              {statuses[result.status].title}
-            </Label>
-          )}
-          <Label size="tiny" color="blue">
-            {publicationDate} ({version})
-          </Label>
-          <Label size="tiny" color="grey">
-            {resource_type}
-          </Label>
-          <Label size="tiny" className={`access-status ${access_status_id}`}>
-            {access_status_icon && (
-              <i className={`icon ${access_status_icon}`}></i>
-            )}
-            {access_status}
-          </Label>
-          <Button
-            compact
-            size="small"
-            floated="right"
-            onClick={() => editRecord()}
-          >
-            <Icon name="edit" />
-            {i18next.t("Edit")}
-          </Button>
-          {is_published && (
-            <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(description_stripped, {
-            length: 350,
-          })}
-        </Item.Description>
-        <Item.Extra>
-          {subjects.map((subject, index) => (
-            <Label key={index} 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}
+      ></ComputerTabletUploadsItem>
+      <MobileUploadsItem
+        result={result}
+        index={index}
+        editRecord={editRecord}
+        statuses={statuses}
+      ></MobileUploadsItem>
+    </>
   );
 };
 
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..f16234f1b3
--- /dev/null
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/ComputerTabletUploadsItem.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";
+
+export const ComputerTabletUploadsItem = ({
+  result,
+  index,
+  editRecord,
+  statuses,
+}) => {
+  const access_status_id = _get(
+    result,
+    "ui.access_status.id",
+    i18next.t("open")
+  );
+  const access_status = _get(
+    result,
+    "ui.access_status.title_l10n",
+    i18next.t("Open")
+  );
+  const access_status_icon = _get(
+    result,
+    "ui.access_status.icon",
+    i18next.t("unlock")
+  );
+  const description_stripped = _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 createdDate = _get(
+    result,
+    "ui.created_date_l10n_long",
+    i18next.t("No creation date found.")
+  );
+  const publicationDate = _get(
+    result,
+    "ui.publication_date_l10n_long",
+    i18next.t("No publication date found.")
+  );
+  const resource_type = _get(
+    result,
+    "ui.resource_type.title_l10n",
+    i18next.t("No resource type")
+  );
+  const version = result.ui?.version;
+  const is_published = result.is_published;
+
+  const viewLink = is_published
+    ? `/records/${result.id}`
+    : `/uploads/${result.id}`;
+  const icon = is_published ? (
+    <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">
+            {resource_type}
+          </Label>
+          <Label size="tiny" className={`access-status ${access_status_id}`}>
+            <i className={`icon ${access_status_icon}`}></i>
+            {access_status}
+          </Label>
+          <Button
+            compact
+            size="small"
+            floated="right"
+            onClick={() => editRecord()}
+          >
+            <Icon name="edit" />
+            {i18next.t("Edit")}
+          </Button>
+          {is_published && (
+            <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(description_stripped, {
+            length: 350,
+          })}
+        </Item.Description>
+        <Item.Extra>
+          {subjects.map((subject, index) => (
+            <Label key={index} size="tiny">
+              {subject.title_l10n}
+            </Label>
+          ))}
+          <div>
+            <small>
+              {i18next.t("Uploaded on")} <span>{createdDate}</span>
+            </small>
+          </div>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  );
+};
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..0e243152c2
--- /dev/null
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/MobileUploadsItem.js
@@ -0,0 +1,145 @@
+// 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";
+
+export const MobileUploadsItem = ({ result, index, editRecord, statuses }) => {
+  const access_status_id = _get(
+    result,
+    "ui.access_status.id",
+    i18next.t("open")
+  );
+  const access_status = _get(
+    result,
+    "ui.access_status.title_l10n",
+    i18next.t("Open")
+  );
+  const access_status_icon = _get(
+    result,
+    "ui.access_status.icon",
+    i18next.t("unlock")
+  );
+  const description_stripped = _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 createdDate = _get(
+    result,
+    "ui.created_date_l10n_long",
+    i18next.t("No creation date found.")
+  );
+  const publicationDate = _get(
+    result,
+    "ui.publication_date_l10n_long",
+    i18next.t("No publication date found.")
+  );
+  const resource_type = _get(
+    result,
+    "ui.resource_type.title_l10n",
+    i18next.t("No resource type")
+  );
+  const version = result.ui?.version;
+  const is_published = result.is_published;
+
+  const viewLink = is_published
+    ? `/records/${result.id}`
+    : `/uploads/${result.id}`;
+  const icon = is_published ? (
+    <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">
+            {resource_type}
+          </Label>
+          <Label size="tiny" className={`access-status ${access_status_id}`}>
+            <i className={`icon ${access_status_icon}`}></i>
+            {access_status}
+          </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="creatibutor-wrap separated ml-auto mr-auto"
+            />
+          </div>
+        </Item.Meta>
+        <Item.Description>
+          {_truncate(description_stripped, {
+            length: 100,
+          })}
+        </Item.Description>
+        <Item.Extra>
+          <Item.Extra>
+            {subjects.map((subject, index) => (
+              <Label key={index} size="tiny">
+                {subject.title_l10n}
+              </Label>
+            ))}
+            <div>
+              <small>
+                {i18next.t("Uploaded on")} <span>{createdDate}</span>
+              </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>
+          {is_published && (
+            <Button
+              compact
+              size="small"
+              floated="right"
+              href={viewLink}
+              className="fluid-responsive"
+            >
+              <Icon name="eye" />
+              {i18next.t("View")}
+            </Button>
+          )}
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  );
+};
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 0d9e9b36f6..d77bd3014d 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,9 @@ const apiConfig = {
 
 export const axiosWithconfig = axios.create(apiConfig);
 
-export function SearchItemCreators({ creators }) {
+export function SearchItemCreators({ creators, className }) {
+  const spanClass = className ?? "creatibutor-wrap separated";
+
   function makeIcon(scheme, identifier, name) {
     let link = null;
     let linkTitle = null;
@@ -51,17 +53,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;
@@ -71,26 +73,22 @@ export function SearchItemCreators({ creators }) {
 
     icon = (
       <a
-         className="no-text-decoration mr-0"
-         href={ link }
-         aria-label={`${name}: ${linkTitle}`}
-         title={`${name}: ${linkTitle}`}
-         key={scheme}
+        className="no-text-decoration mr-0"
+        href={link}
+        aria-label={`${name}: ${linkTitle}`}
+        title={`${name}: ${linkTitle}`}
+        key={scheme}
       >
-        <img
-          className="inline-id-icon ml-5"
-          src= { icon }
-          alt=""
-        />
+        <img className="inline-id-icon ml-5" src={icon} alt="" />
       </a>
-    )
-    return (icon);
+    );
+    return icon;
   }
 
   function getIcons(creator) {
     let ids = _get(creator, "person_or_org.identifiers", []);
     let creatorName = _get(creator, "person_or_org.name", "No name");
-    let icons = ids.map(c => makeIcon(c.scheme, c.identifier, creatorName));
+    let icons = ids.map((c) => makeIcon(c.scheme, c.identifier, creatorName));
     return icons;
   }
 
@@ -108,7 +106,7 @@ export function SearchItemCreators({ creators }) {
     return link;
   }
   return creators.map((creator, index) => (
-    <span className="creatibutor-wrap separated" key={index}>
+    <span className={spanClass} key={index}>
       {getLink(creator)}
       {getIcons(creator)}
     </span>