diff --git a/reana-ui/src/actions.js b/reana-ui/src/actions.js
index 14af4e6..33e2112 100644
--- a/reana-ui/src/actions.js
+++ b/reana-ui/src/actions.js
@@ -16,25 +16,28 @@ import client, {
   INTERACTIVE_SESSIONS_OPEN_URL,
   USER_INFO_URL,
   USER_SIGNOUT_URL,
+  USERS_SHARED_WITH_YOU_URL,
+  USERS_YOU_SHARED_WITH_URL,
   WORKFLOW_FILES_URL,
   WORKFLOW_LOGS_URL,
   WORKFLOW_RETENTION_RULES_URL,
   WORKFLOW_SET_STATUS_URL,
+  WORKFLOW_SHARE_STATUS_URL,
   WORKFLOW_SPECIFICATION_URL,
 } from "~/client";
-import {
-  parseWorkflows,
-  parseWorkflowRetentionRules,
-  parseLogs,
-  parseFiles,
-  formatSearch,
-} from "~/util";
 import {
   getConfig,
   getWorkflow,
   getWorkflowLogs,
   getWorkflowSpecification,
 } from "~/selectors";
+import {
+  formatSearch,
+  parseFiles,
+  parseLogs,
+  parseWorkflowRetentionRules,
+  parseWorkflows,
+} from "~/util";
 
 export const ERROR = "Error";
 export const NOTIFICATION = "Notification";
@@ -96,26 +99,11 @@ export const WORKFLOW_SHARE_STATUS_FETCH = "Fetch workflow share status";
 export const WORKFLOW_SHARE_STATUS_RECEIVED = "Workflow share status received";
 export const WORKFLOW_SHARE_STATUS_FETCH_ERROR =
   "Fetch workflow share status error";
-export const WORKFLOW_SHARE_INIT = "Initialise workflow sharing";
-export const WORKFLOW_SHARED_SUCCESSFULLY = "Workflow shared successfully";
-export const WORKFLOW_SHARED_ERROR = "Workflow shared error";
-export const WORKFLOW_SHARE_FINISH = "Finish workflow sharing";
-export const WORKFLOW_UNSHARE_INIT = "Initialise workflow unsharing";
-export const WORKFLOW_UNSHARED = "Workflow unshared";
-export const WORKFLOW_UNSHARE_ERROR = "Workflow unshare error";
-
-export const USERS_SHARED_WITH_YOU_FETCH =
-  "Fetch users who shared workflows with you";
+
 export const USERS_SHARED_WITH_YOU_RECEIVED =
   "Users who shared workflows with you received";
-export const USERS_SHARED_WITH_YOU_FETCH_ERROR =
-  "Fetch users who shared workflows with you error";
-export const USERS_YOU_SHARED_WITH_FETCH =
-  "Fetch users you shared workflows with";
 export const USERS_YOU_SHARED_WITH_RECEIVED =
   "Users you shared workflows with received";
-export const USERS_YOU_SHARED_WITH_FETCH_ERROR =
-  "Fetch users you shared workflows with error";
 
 export function errorActionCreator(error, name) {
   const { status, data } = error?.response;
@@ -288,12 +276,12 @@ export function fetchWorkflows({
   pagination,
   search,
   status,
-  ownedBy,
+  sharedBy,
   sharedWith,
   sort,
   showLoader = true,
   workflowIdOrName,
-  includeShared = false,
+  shared = false,
 }) {
   return async (dispatch) => {
     if (showLoader) {
@@ -305,20 +293,20 @@ export function fetchWorkflows({
         pagination,
         search: formatSearch(search),
         status,
-        ownedBy,
+        sharedBy,
         sharedWith,
         sort,
         workflowIdOrName,
-        includeShared,
+        shared,
       })
-      .then((resp) => {
+      .then((resp) =>
         dispatch({
           type: WORKFLOWS_RECEIVED,
           workflows: parseWorkflows(resp.data.items),
           total: resp.data.total,
           userHasWorkflows: resp.data.user_has_workflows,
-        });
-      })
+        }),
+      )
       .catch((err) => {
         dispatch(errorActionCreator(err, USER_INFO_URL));
         dispatch({ type: WORKFLOWS_FETCH_ERROR });
@@ -338,7 +326,7 @@ export function fetchWorkflow(id, { refetch = false, showLoader = true } = {}) {
         fetchWorkflows({
           workflowIdOrName: id,
           showLoader,
-          includeShared: true,
+          shared: true,
         }),
       );
     }
@@ -567,38 +555,34 @@ export function closeShareWorkflowModal() {
 
 export function fetchUsersSharedWithYou() {
   return async (dispatch) => {
-    dispatch({ type: USERS_SHARED_WITH_YOU_FETCH });
-
     return await client
       .getUsersSharedWithYou()
       .then((resp) => {
         dispatch({
           type: USERS_SHARED_WITH_YOU_RECEIVED,
-          users_shared_with_you: resp.data.users_shared_with_you,
+          usersSharedYouWith: resp.data.users_shared_with_you,
         });
         return resp;
       })
       .catch((err) => {
-        dispatch(errorActionCreator(err, USERS_SHARED_WITH_YOU_FETCH_ERROR));
+        dispatch(errorActionCreator(err, USERS_SHARED_WITH_YOU_URL));
       });
   };
 }
 
 export function fetchUsersYouSharedWith() {
   return async (dispatch) => {
-    dispatch({ type: USERS_YOU_SHARED_WITH_FETCH });
-
     return await client
       .getUsersYouSharedWith()
       .then((resp) => {
         dispatch({
           type: USERS_YOU_SHARED_WITH_RECEIVED,
-          users_you_shared_with: resp.data.users_you_shared_with,
+          usersYouSharedWith: resp.data.users_you_shared_with,
         });
         return resp;
       })
       .catch((err) => {
-        dispatch(errorActionCreator(err, USERS_YOU_SHARED_WITH_FETCH_ERROR));
+        dispatch(errorActionCreator(err, USERS_YOU_SHARED_WITH_URL));
       });
   };
 }
@@ -609,83 +593,24 @@ export function fetchWorkflowShareStatus(id) {
     return await client
       .getWorkflowShareStatus(id)
       .then((resp) => {
+        // convert to camel-case
+        const sharedWith = [];
+        for (const share of resp.data.shared_with) {
+          sharedWith.push({
+            userEmail: share.user_email,
+            validUntil: share.valid_until,
+          });
+        }
         dispatch({
           type: WORKFLOW_SHARE_STATUS_RECEIVED,
           id,
-          workflow_share_status: resp.data.shared_with,
+          sharedWith,
         });
         return resp;
       })
       .catch((err) => {
-        dispatch(errorActionCreator(err, WORKFLOW_SHARE_STATUS_FETCH_ERROR));
-      });
-  };
-}
-
-export function shareWorkflow(
-  id,
-  user_id,
-  user_emails_to_share_with,
-  valid_until,
-) {
-  return async (dispatch) => {
-    dispatch({ type: WORKFLOW_SHARE_INIT });
-
-    const users_shared_with = [];
-    const users_not_shared_with = [];
-
-    for (const user_email_to_share_with of user_emails_to_share_with) {
-      await client
-        .shareWorkflow(id, {
-          user_id,
-          user_email_to_share_with,
-          valid_until,
-        })
-        .then(() => {
-          users_shared_with.push(user_email_to_share_with);
-        })
-        .catch((err) => {
-          const error_message = err.response.data.message;
-          users_not_shared_with.push({
-            user_email_to_share_with,
-            error_message,
-          });
-        });
-
-      if (users_shared_with.length > 0) {
-        dispatch({
-          type: WORKFLOW_SHARED_SUCCESSFULLY,
-          users_shared_with,
-        });
-      }
-
-      if (users_not_shared_with.length > 0) {
-        dispatch({
-          type: WORKFLOW_SHARED_ERROR,
-          users_not_shared_with,
-        });
-      }
-    }
-
-    dispatch({ type: WORKFLOW_SHARE_FINISH });
-  };
-}
-
-export function unshareWorkflow(id, user_id, user_email_to_unshare_with) {
-  return async (dispatch) => {
-    dispatch({ type: WORKFLOW_UNSHARE_INIT });
-
-    return await client
-      .unshareWorkflow(id, {
-        user_id,
-        user_email_to_unshare_with,
-      })
-      .then(() => {
-        dispatch({ type: WORKFLOW_UNSHARED, user_email_to_unshare_with });
-      })
-      .catch((err) => {
-        const error_message = err.response.data.message;
-        dispatch({ type: WORKFLOW_UNSHARE_ERROR, error_message });
+        dispatch({ type: WORKFLOW_SHARE_STATUS_FETCH_ERROR });
+        dispatch(errorActionCreator(err, WORKFLOW_SHARE_STATUS_URL(id)));
       });
   };
 }
diff --git a/reana-ui/src/client.js b/reana-ui/src/client.js
index f7f42e2..b9a20e2 100644
--- a/reana-ui/src/client.js
+++ b/reana-ui/src/client.js
@@ -127,20 +127,12 @@ class Client {
     pagination,
     search,
     status,
-    ownedBy,
+    sharedBy,
     sharedWith,
     sort,
     workflowIdOrName,
-    includeShared = false,
+    shared,
   } = {}) {
-    let shared = false;
-    if (ownedBy === "anybody" || includeShared) {
-      ownedBy = undefined;
-      shared = true;
-    } else if (ownedBy === "you") {
-      ownedBy = undefined;
-    }
-
     return this._request(
       WORKFLOWS_URL({
         ...(pagination ?? {}),
@@ -148,7 +140,7 @@ class Client {
         search,
         status,
         shared,
-        shared_by: ownedBy,
+        shared_by: sharedBy,
         shared_with: sharedWith,
         sort,
       }),
@@ -238,16 +230,19 @@ class Client {
     return this._request(WORKFLOW_SHARE_STATUS_URL(id));
   }
 
-  shareWorkflow(id, data) {
+  shareWorkflow(id, { userEmailToShareWith, validUntil }) {
     return this._request(WORKFLOW_SHARE_URL(id), {
-      data,
+      data: {
+        user_email_to_share_with: userEmailToShareWith,
+        valid_until: validUntil,
+      },
       method: "post",
     });
   }
 
-  unshareWorkflow(id, data) {
+  unshareWorkflow(id, { userEmailToUnshareWith }) {
     return this._request(WORKFLOW_UNSHARE_URL(id), {
-      data,
+      data: { user_email_to_unshare_with: userEmailToUnshareWith },
       method: "post",
     });
   }
diff --git a/reana-ui/src/components/WorkflowActionsPopup.js b/reana-ui/src/components/WorkflowActionsPopup.js
index d0d551e..25b6252 100644
--- a/reana-ui/src/components/WorkflowActionsPopup.js
+++ b/reana-ui/src/components/WorkflowActionsPopup.js
@@ -8,20 +8,21 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
-import { useState } from "react";
 import PropTypes from "prop-types";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Icon, Menu, Popup } from "semantic-ui-react";
-import { useDispatch } from "react-redux";
 
-import { workflowShape } from "~/props";
 import {
-  deleteWorkflow,
   closeInteractiveSession,
+  deleteWorkflow,
   openDeleteWorkflowModal,
-  openStopWorkflowModal,
   openInteractiveSessionModal,
   openShareWorkflowModal,
+  openStopWorkflowModal,
 } from "~/actions";
+import { workflowShape } from "~/props";
+import { getUserEmail } from "~/selectors";
 
 import { JupyterNotebookIcon } from "~/components";
 
@@ -29,13 +30,10 @@ import styles from "./WorkflowActionsPopup.module.scss";
 
 const JupyterIcon = <JupyterNotebookIcon className={styles["jupyter-icon"]} />;
 
-export default function WorkflowActionsPopup({
-  workflow,
-  className,
-  insideClickableElement,
-}) {
+export default function WorkflowActionsPopup({ workflow, className }) {
   const dispatch = useDispatch();
   const [open, setOpen] = useState(false);
+  const userEmail = useSelector(getUserEmail);
   const { id, size, status, session_status: sessionStatus } = workflow;
   const isDeleted = status === "deleted";
   const isDeletedUsingWorkspace = isDeleted && size.raw > 0;
@@ -63,7 +61,6 @@ export default function WorkflowActionsPopup({
     onClick: (e) => {
       dispatch(openShareWorkflowModal(workflow));
       setOpen(false);
-      e.stopPropagation();
     },
   });
 
@@ -115,20 +112,9 @@ export default function WorkflowActionsPopup({
     });
   }
 
-  if (workflow.owner_email !== "-") {
-    return (
-      <div
-        className={className || styles.container}
-        style={
-          insideClickableElement ? { cursor: "pointer" } : { cursor: "default" }
-        }
-      />
-    );
-  }
-
   return (
     <div className={className}>
-      {menuItems.length > 0 && (
+      {workflow.ownerEmail === userEmail && menuItems.length > 0 && (
         <Popup
           basic
           trigger={
@@ -160,5 +146,4 @@ WorkflowActionsPopup.defaultProps = {
 WorkflowActionsPopup.propTypes = {
   workflow: workflowShape.isRequired,
   className: PropTypes.string,
-  insideClickableElement: PropTypes.bool,
 };
diff --git a/reana-ui/src/components/WorkflowBadges.js b/reana-ui/src/components/WorkflowBadges.js
index 113eb26..c1652c4 100644
--- a/reana-ui/src/components/WorkflowBadges.js
+++ b/reana-ui/src/components/WorkflowBadges.js
@@ -9,15 +9,16 @@
 */
 
 import styles from "./WorkflowBadges.module.scss";
-import { Icon, Label, Popup } from "semantic-ui-react";
+import { Label, Popup } from "semantic-ui-react";
 import { JupyterNotebookIcon } from "~/components";
 import { INTERACTIVE_SESSION_URL } from "~/client";
 import { LauncherLabel } from "~/components";
-import { getReanaToken } from "~/selectors";
+import { getReanaToken, getUserEmail } from "~/selectors";
 import { useSelector } from "react-redux";
 
 export default function WorkflowBadges({ workflow }) {
   const reanaToken = useSelector(getReanaToken);
+  const userEmail = useSelector(getUserEmail);
   const {
     size,
     launcherURL,
@@ -29,7 +30,7 @@ export default function WorkflowBadges({ workflow }) {
 
   return (
     <div className={styles.badgesContainer}>
-      {workflow.owner_email === "-" ? (
+      {workflow.ownerEmail === userEmail && (
         <>
           {workflow.duration && (
             <Label
@@ -64,18 +65,16 @@ export default function WorkflowBadges({ workflow }) {
             />
           )}
         </>
-      ) : (
+      )}
+      {workflow.ownerEmail !== userEmail && (
         <Popup
           trigger={
-            <span className={styles.owner}>
-              <Icon name="eye" style={{ marginTop: "-3px" }} />
-              {workflow.owner_email}
-            </span>
+            <Label basic size="tiny" content={workflow.ownerEmail} icon="eye" />
           }
           position="top center"
           content={
             "This workflow is read-only shared with you by " +
-            workflow.owner_email
+            workflow.ownerEmail
           }
         />
       )}
diff --git a/reana-ui/src/components/WorkflowShareModal.js b/reana-ui/src/components/WorkflowShareModal.js
index 8bdc756..afca1e6 100644
--- a/reana-ui/src/components/WorkflowShareModal.js
+++ b/reana-ui/src/components/WorkflowShareModal.js
@@ -8,88 +8,46 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import SemanticDatepicker from "react-semantic-ui-datepickers";
 import {
   Button,
-  Modal,
-  Icon,
-  Popup,
   Checkbox,
-  Dropdown,
-  TextArea,
+  Confirm,
+  Form,
+  Header,
+  Icon,
   Loader,
   Message,
-  Confirm,
+  Modal,
+  Popup,
 } from "semantic-ui-react";
 
+import { closeShareWorkflowModal, fetchWorkflowShareStatus } from "~/actions";
+import client from "~/client";
 import {
-  closeShareWorkflowModal,
-  fetchWorkflowShareStatus,
-  shareWorkflow,
-  unshareWorkflow,
-} from "~/actions";
-import {
-  getLoadingWorkflowShare,
   getLoadingWorkflowShareStatus,
-  getLoadingWorkflowUnshare,
-  getUnshareError,
-  getUserId,
-  getUserWorkflowWasUnsharedWith,
-  getUsersWorkflowWasNotSharedWith,
-  getUsersWorkflowWasSharedWith,
   getWorkflowShareModalItem,
   getWorkflowShareModalOpen,
   getWorkflowShareStatus,
 } from "~/selectors";
 
 import styles from "./WorkflowShareModal.module.scss";
-import SemanticDatepicker from "react-semantic-ui-datepickers";
 
-export default function WorkflowShareModal() {
+function WorkflowShareStatus({
+  workflow,
+  handleUnshareWorkflowSuccess,
+  handleUnshareWorkflowError,
+}) {
   const dispatch = useDispatch();
-  const open = useSelector(getWorkflowShareModalOpen);
-  const workflow = useSelector(getWorkflowShareModalItem);
-  const [linkCopied, setLinkCopied] = useState(false);
-  const [dropDownOptions, setDropDownOptions] = useState([]);
-  const [usersToShareWith, setUsersToShareWith] = useState([]);
-  const [expirationModalOpen, setExpirationModalOpen] = useState(false);
-  const [expirationDate, setExpirationDate] = useState(null);
-  const [neverExpires, setNeverExpires] = useState(true);
-  const [workflowShares, setWorkflowShares] = useState([]);
-  const workflowShareStatus = useSelector(getWorkflowShareStatus(workflow?.id));
-  const [workflowShareStatusLoading, setWorkflowShareStatusLoading] =
-    useState(false);
   const loadingWorkflowShareStatus = useSelector(getLoadingWorkflowShareStatus);
+  const workflowShareStatus = useSelector(getWorkflowShareStatus(workflow?.id));
 
-  const loadingWorkflowShare = useSelector(getLoadingWorkflowShare);
-  const loadingWorkflowUnshare = useSelector(getLoadingWorkflowUnshare);
-  const [unshareError, setUnshareError] = useState(null);
-  const workflowUnshareError = useSelector(getUnshareError);
-  const [usersSharedWith, setUsersSharedWith] = useState([]);
-  const usersWorkflowWasSharedWith = useSelector(getUsersWorkflowWasSharedWith);
-  const [usersNotSharedWith, setUsersNotSharedWith] = useState([]);
-  const usersWorkflowWasNotSharedWith = useSelector(
-    getUsersWorkflowWasNotSharedWith,
-  );
+  const [loadingUnshareWorkflow, setLoadingUnshareWorkflow] = useState(false);
   const [confirmUnshareOpen, setConfirmUnshareOpen] = useState(false);
   const [userToUnshareWith, setUserToUnshareWith] = useState(null);
-  const [userUnsharedWith, setUserUnsharedWith] = useState(null);
-  const userWorkflowWasUnsharedWith = useSelector(
-    getUserWorkflowWasUnsharedWith,
-  );
-  const userId = useSelector(getUserId);
-
-  const resetMessages = () => {
-    setUsersSharedWith([]);
-    setUsersNotSharedWith([]);
-    setUserUnsharedWith(null);
-    setUnshareError(null);
-  };
-
-  useEffect(() => {
-    resetMessages();
-  }, [open]);
+  const { name, run, id } = workflow;
 
   useEffect(() => {
     if (workflow) {
@@ -97,58 +55,157 @@ export default function WorkflowShareModal() {
     }
   }, [dispatch, workflow]);
 
-  useEffect(() => {
-    if (!workflowShareStatus) return;
-    setWorkflowShares(workflowShareStatus);
-  }, [workflowShareStatus]);
+  const handleUnshareWorkflow = (userEmailToUnshareWith) => {
+    setLoadingUnshareWorkflow(true);
+    client
+      .unshareWorkflow(id, {
+        userEmailToUnshareWith,
+      })
+      .then(() => {
+        dispatch(fetchWorkflowShareStatus(id));
+        handleUnshareWorkflowSuccess(userEmailToUnshareWith);
+        setLoadingUnshareWorkflow(false);
+        setConfirmUnshareOpen(false);
+      })
+      .catch((err) => {
+        const errorMessage = err.response.data.message;
+        handleUnshareWorkflowError(errorMessage);
+        setLoadingUnshareWorkflow(false);
+        setConfirmUnshareOpen(false);
+      });
+  };
 
-  useEffect(() => {
-    setWorkflowShareStatusLoading(loadingWorkflowShareStatus);
-  }, [loadingWorkflowShareStatus]);
+  return (
+    <div>
+      <Header as="h3">Read-only access</Header>
+      {loadingWorkflowShareStatus ? (
+        <Loader inline className={styles["loader-share-status"]} inverted />
+      ) : (
+        <>
+          {workflowShareStatus?.length > 0 ? (
+            <div>
+              {workflowShareStatus.map((share, index) => (
+                <div key={index} className={styles["share-item"]}>
+                  <div>
+                    <Icon
+                      name="user"
+                      size="big"
+                      className={styles["share-user-icon"]}
+                    />
+                    {share.userEmail}
+                  </div>
+                  <div>
+                    <Popup
+                      content={"Expires"}
+                      position="top center"
+                      disabled={false}
+                      trigger={
+                        <span>
+                          <Button
+                            size="tiny"
+                            icon
+                            labelPosition="left"
+                            disabled
+                          >
+                            <Icon name="clock" />
+                            {share.validUntil
+                              ? share.validUntil.substring(0, 10)
+                              : "Never"}
+                          </Button>
+                        </span>
+                      }
+                    />
+
+                    <Popup
+                      content="Unshare"
+                      position="top center"
+                      trigger={
+                        <Button
+                          size="tiny"
+                          icon
+                          negative
+                          onClick={() => {
+                            setUserToUnshareWith(share.userEmail);
+                            setConfirmUnshareOpen(true);
+                          }}
+                          disabled={loadingUnshareWorkflow}
+                          loading={loadingUnshareWorkflow}
+                        >
+                          <Icon name="trash" />
+                        </Button>
+                      }
+                    />
+                  </div>
+                </div>
+              ))}
+              <Confirm
+                size="mini"
+                open={confirmUnshareOpen}
+                header="Unshare workflow"
+                content={`Are you sure you want to unshare ${name} #${run} with ${userToUnshareWith}?`}
+                onCancel={() => {
+                  setConfirmUnshareOpen(false);
+                  setUserToUnshareWith(null);
+                }}
+                onConfirm={() => handleUnshareWorkflow(userToUnshareWith)}
+              />
+            </div>
+          ) : (
+            <Message info>
+              This workflow has not been shared with anyone yet.
+            </Message>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
 
-  useEffect(() => {
-    if (!loadingWorkflowShare) {
-      setUsersSharedWith(usersWorkflowWasSharedWith);
-      setUsersNotSharedWith(usersWorkflowWasNotSharedWith);
-      setUserUnsharedWith(null);
-      setUsersToShareWith([]);
-      if (workflow) dispatch(fetchWorkflowShareStatus(workflow.id));
-    }
-    // disable eslint because we want to run this effect only when
-    // loadingWorkflowShare changes, for further context:
-    // https://github.com/facebook/create-react-app/issues/6880#issuecomment-485963251
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadingWorkflowShare]);
+export default function WorkflowShareModal() {
+  const dispatch = useDispatch();
+  const open = useSelector(getWorkflowShareModalOpen);
+  const workflow = useSelector(getWorkflowShareModalItem);
+  const [linkCopied, setLinkCopied] = useState(false);
+  const [dropDownOptions, setDropDownOptions] = useState([]);
+  const [usersToShareWith, setUsersToShareWith] = useState([]);
+  const [message, setMessage] = useState("");
+  const [expirationModalOpen, setExpirationModalOpen] = useState(false);
+  const [expirationDate, setExpirationDate] = useState(null);
+  const [neverExpires, setNeverExpires] = useState(true);
 
-  useEffect(() => {
-    if (!loadingWorkflowUnshare) {
-      if (workflow) dispatch(fetchWorkflowShareStatus(workflow.id));
+  const [loadingShareWorkflow, setLoadingShareWorkflow] = useState(false);
+  const [lastSharingAction, setLastSharingAction] = useState({});
 
-      if (!workflowUnshareError) {
-        setUserUnsharedWith(userWorkflowWasUnsharedWith);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadingWorkflowUnshare]);
+  const resetShareForm = useCallback(() => {
+    setUsersToShareWith([]);
+    setMessage("");
+    setExpirationModalOpen(false);
+    setExpirationDate(null);
+    setNeverExpires(true);
+  }, []);
+
+  const resetState = useCallback(() => {
+    resetShareForm();
+    setLinkCopied(false);
+    setDropDownOptions([]);
+    setLoadingShareWorkflow(false);
+    setLastSharingAction({});
+  }, [resetShareForm]);
 
   useEffect(() => {
-    setUnshareError(workflowUnshareError);
-    if (workflowUnshareError) {
-      setUsersSharedWith([]);
-      setUsersNotSharedWith([]);
-      if (workflow) dispatch(fetchWorkflowShareStatus(workflow.id));
-    }
-  }, [workflowUnshareError, dispatch, workflow]);
+    resetState();
+  }, [workflow, open, resetState]);
 
   if (!workflow) return null;
 
   const onCloseModal = () => {
     dispatch(closeShareWorkflowModal());
-    resetMessages();
+    resetState();
   };
 
   const copyCurrentUrl = () => {
-    navigator.clipboard.writeText(window.location.href);
+    const detailsURL = new URL(`/details/${workflow.id}`, window.location.href);
+    navigator.clipboard.writeText(detailsURL.toString());
     setLinkCopied(true);
 
     setTimeout(() => {
@@ -187,68 +244,89 @@ export default function WorkflowShareModal() {
     setExpirationModalOpen(false);
   };
 
-  const handleShareWorkflow = () => {
-    resetMessages();
+  const handleShareWorkflow = (usersToShareWith) => {
     if (usersToShareWith.length === 0) {
       return;
     }
 
-    dispatch(
-      shareWorkflow(
-        workflow.id,
-        userId,
-        usersToShareWith,
-        expirationDate?.toLocaleDateString("sv-SE", {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }),
-      ),
-    );
-  };
+    const id = workflow.id;
+    const validUntil = expirationDate?.toLocaleDateString("sv-SE", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+
+    const usersSharedWith = [];
+    const usersNotSharedWith = [];
+    const requests = [];
+
+    setLoadingShareWorkflow(true);
+
+    for (const userEmailToShareWith of usersToShareWith) {
+      const req = client
+        .shareWorkflow(id, {
+          userEmailToShareWith,
+          validUntil,
+        })
+        .then(() => {
+          usersSharedWith.push(userEmailToShareWith);
+        })
+        .catch((err) => {
+          const errorMessage = err.response.data.message;
+          usersNotSharedWith.push({
+            userEmailToShareWith,
+            errorMessage,
+          });
+        });
+
+      requests.push(req);
+    }
 
-  const handleUnshareWorkflow = (userToUnshareWith) => {
-    setConfirmUnshareOpen(false);
-    setUsersSharedWith([]);
-    setUsersNotSharedWith([]);
-    setUserUnsharedWith(null);
-    dispatch(unshareWorkflow(workflow.id, userId, userToUnshareWith));
+    Promise.allSettled(requests).then(() => {
+      // update share status
+      dispatch(fetchWorkflowShareStatus(id));
+      // reset form and share button
+      resetShareForm();
+      setLoadingShareWorkflow(false);
+      // set results of last sharing action
+      setLastSharingAction({
+        usersSharedWith,
+        usersNotSharedWith,
+      });
+    });
   };
 
   const { name, run } = workflow;
   return (
-    <Modal
-      open={open}
-      onClose={onCloseModal}
-      closeIcon
-      size="tiny"
-      id={styles["workflow-share-modal"]}
-    >
+    <Modal open={open} onClose={onCloseModal} closeIcon size="tiny">
       <Modal.Header>
         Share {name} #{run}
       </Modal.Header>
 
       <Modal.Content>
-        <Dropdown
-          options={dropDownOptions}
-          placeholder="Emails of users to share with"
-          search
-          selection
-          fluid
-          allowAdditions
-          multiple
-          noResultsMessage={null}
-          value={usersToShareWith}
-          onAddItem={handleAddition}
-          onChange={handleChange}
-          disabled={loadingWorkflowShare}
-        />
+        <Form>
+          <Form.Dropdown
+            options={dropDownOptions}
+            placeholder="Emails of users to share with"
+            search
+            selection
+            fluid
+            allowAdditions
+            multiple
+            noResultsMessage={null}
+            value={usersToShareWith}
+            onAddItem={handleAddition}
+            onChange={handleChange}
+            disabled={loadingShareWorkflow}
+          />
 
-        <div className="ui form" id={styles["message"]}>
-          <TextArea placeholder="Message (optional)" />
-        </div>
-        <div id={styles["share-buttons"]}>
-          <div id={styles["share-button"]}>
+          <Form.TextArea
+            placeholder="Message (optional)"
+            disabled={loadingShareWorkflow}
+            value={message}
+            onChange={(_, { value }) => setMessage(value)}
+          />
+          <div className={styles["share-buttons"]}>
             <Popup
               content={
                 "Please provide at least one user to share the workflow with."
@@ -261,10 +339,11 @@ export default function WorkflowShareModal() {
                     primary
                     icon
                     labelPosition="left"
-                    onClick={() => {
-                      handleShareWorkflow();
-                    }}
-                    disabled={usersToShareWith.length === 0}
+                    onClick={() => handleShareWorkflow(usersToShareWith)}
+                    disabled={
+                      usersToShareWith.length === 0 || loadingShareWorkflow
+                    }
+                    loading={loadingShareWorkflow}
                   >
                     <Icon name="share alternate" />
                     Share
@@ -272,71 +351,68 @@ export default function WorkflowShareModal() {
                 </span>
               }
             />
-
-            {loadingWorkflowShare && (
-              <Loader inline id={styles["loader-share-workflow"]} inverted />
-            )}
+            <Popup
+              content={"Expires"}
+              position="top center"
+              trigger={
+                <Button
+                  onClick={openExpirationModal}
+                  icon
+                  labelPosition="left"
+                  className={styles["expiration-date-button"]}
+                >
+                  <Icon name="clock" />
+                  {neverExpires || !expirationDate
+                    ? "Never"
+                    : expirationDate?.toLocaleDateString("sv-SE", {
+                        year: "numeric",
+                        month: "2-digit",
+                        day: "2-digit",
+                      })}
+                </Button>
+              }
+            />
           </div>
-          <Popup
-            content={"Expires"}
-            position="top center"
-            trigger={
-              <Button
-                onClick={openExpirationModal}
-                icon
-                labelPosition="left"
-                id={styles["expiration-date-button"]}
-              >
-                <Icon name="clock" />
-                {neverExpires || !expirationDate
-                  ? "Never"
-                  : expirationDate?.toLocaleDateString("sv-SE", {
-                      year: "numeric",
-                      month: "2-digit",
-                      day: "2-digit",
-                    })}
-              </Button>
-            }
-          />
-        </div>
+        </Form>
 
-        {usersSharedWith.length > 0 && (
+        {lastSharingAction.usersSharedWith?.length > 0 && (
           <Message success>
             <Message.Header>
               {name} #{run} is now shared with
             </Message.Header>
             <Message.List>
-              {usersSharedWith.map((user_email, index) => (
-                <Message.Item key={index}>{user_email}</Message.Item>
+              {lastSharingAction.usersSharedWith.map((userEmail, index) => (
+                <Message.Item key={index}>{userEmail}</Message.Item>
               ))}
             </Message.List>
           </Message>
         )}
 
-        {usersNotSharedWith.length > 0 && (
+        {lastSharingAction.usersNotSharedWith?.length > 0 && (
           <Message error>
             <Message.Header>
               {name} #{run} could not be shared with
             </Message.Header>
             <Message.List>
-              {usersNotSharedWith.map((failure, index) => (
+              {lastSharingAction.usersNotSharedWith.map((failure, index) => (
                 <Message.Item key={index}>
-                  {failure.user_email_to_share_with}: {failure.error_message}
+                  {failure.userEmailToShareWith}: {failure.errorMessage}
                 </Message.Item>
               ))}
             </Message.List>
           </Message>
         )}
 
-        {userUnsharedWith && (
+        {lastSharingAction?.userUnsharedWith && (
           <Message success>
-            {name} #{run} is no longer shared with {userUnsharedWith}
+            {name} #{run} is no longer shared with{" "}
+            {lastSharingAction.userUnsharedWith}
           </Message>
         )}
-
-        {unshareError && (
+        {lastSharingAction?.unshareError && (
           <Message error>
-            An error occurred while unsharing {name} #{run}: {unshareError}
+            An error occurred while unsharing {name} #{run}:{" "}
+            {lastSharingAction.unshareError}
           </Message>
         )}
 
@@ -345,7 +421,6 @@ export default function WorkflowShareModal() {
           onClose={closeExpirationModal}
           closeIcon
           size="mini"
-          id={styles["expiration-date-modal"]}
         >
           <Modal.Header>Set expiration date</Modal.Header>
           <Modal.Content>
@@ -368,102 +443,28 @@ export default function WorkflowShareModal() {
               minDate={new Date()}
             />
           </Modal.Content>
-          <Modal.Actions id={styles["expiration-modal-actions"]}>
+          <Modal.Actions className={styles["expiration-modal-actions"]}>
             <Button
               primary
               onClick={handleSetExpirationDate}
-              className="aligned left"
-              id={styles["expiration-modal-set-button"]}
+              className={styles["expiration-modal-set-button"]}
             >
               Set
             </Button>
           </Modal.Actions>
         </Modal>
 
-        {loadingWorkflowUnshare && (
-          <Loader inline id={styles["loader-unshare-workflow"]} inverted />
-        )}
-
-        <h3 id={styles["read-only-header"]}>Read-only access</h3>
-
-        {workflowShareStatusLoading ? (
-          <Loader inline id={styles["loader-share-status"]} inverted />
-        ) : (
-          <>
-            {workflowShares.length > 0 ? (
-              <div>
-                {workflowShares.map((share, index) => (
-                  <div key={index} id={styles["share-item"]}>
-                    <div>
-                      <Icon
-                        name="user"
-                        size="big"
-                        id={styles["share-user-icon"]}
-                      />
-                      {share.user_email}
-                    </div>
-                    <div>
-                      <Popup
-                        content={"Expires"}
-                        position="top center"
-                        disabled={false}
-                        trigger={
-                          <span>
-                            <Button
-                              size="tiny"
-                              icon
-                              labelPosition="left"
-                              disabled
-                            >
-                              <Icon name="clock" />
-                              {share.valid_until
-                                ? share.valid_until.substring(0, 10)
-                                : "Never"}
-                            </Button>
-                          </span>
-                        }
-                      />
-
-                      <Popup
-                        content={"Unshare"}
-                        position="top center"
-                        trigger={
-                          <Button
-                            size="tiny"
-                            icon
-                            negative
-                            onClick={() => {
-                              setConfirmUnshareOpen(true);
-                              setUserToUnshareWith(share.user_email);
-                            }}
-                          >
-                            <Icon name="trash" />
-                          </Button>
-                        }
-                      />
-                      <Confirm
-                        size="mini"
-                        open={confirmUnshareOpen}
-                        header="Unshare workflow"
-                        content={`Are you sure you want to unshare ${name} #${run} with ${userToUnshareWith}?`}
-                        onCancel={() => setConfirmUnshareOpen(false)}
-                        onConfirm={() =>
-                          handleUnshareWorkflow(userToUnshareWith)
-                        }
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <Message info id={styles["no-share-message"]}>
-                This workflow has not been shared with anyone yet.
-              </Message>
-            )}
-          </>
-        )}
+        <WorkflowShareStatus
+          workflow={workflow}
+          handleUnshareWorkflowError={(err) => {
+            setLastSharingAction({ unshareError: err });
+          }}
+          handleUnshareWorkflowSuccess={(user) => {
+            setLastSharingAction({ userUnsharedWith: user });
+          }}
+        />
       </Modal.Content>
-      <Modal.Actions id={styles["sharing-modal-actions"]}>
+      <Modal.Actions className={styles["sharing-modal-actions"]}>
         <Popup
           content={"Link copied!"}
           open={linkCopied}
@@ -473,15 +474,14 @@ export default function WorkflowShareModal() {
               icon
               labelPosition="left"
               onClick={copyCurrentUrl}
-              className="left floated"
-              id={styles["copy-link-button"]}
+              className={`left floated ${styles["copy-link-button"]}`}
             >
               <Icon name="linkify" />
               Copy link
             </Button>
           }
         />
-        <Button onClick={onCloseModal} id={styles["done-button"]}>
+        <Button onClick={onCloseModal} className={styles["done-button"]}>
           Done
         </Button>
       </Modal.Actions>
diff --git a/reana-ui/src/components/WorkflowShareModal.module.scss b/reana-ui/src/components/WorkflowShareModal.module.scss
index 5259bad..9da7fd8 100644
--- a/reana-ui/src/components/WorkflowShareModal.module.scss
+++ b/reana-ui/src/components/WorkflowShareModal.module.scss
@@ -8,93 +8,54 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
-#workflow-share-modal > i {
-  top: 1.0535rem;
-  right: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-#expiration-date-modal > i {
-  top: 1.0535rem;
-  right: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-#loader-share-workflow:before,
-#loader-share-status:before,
-#loader-unshare-workflow:before {
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-#loader-share-workflow:after,
-#loader-share-status:after,
-#loader-unshare-workflow:after {
+:global(.ui.dimmer) :global(.ui.loader).loader-share-status:after {
   border-color: #767676 transparent transparent;
 }
 
-#loader-share-workflow {
-  margin-left: 5px;
-}
-
-#loader-unshare-workflow {
-  margin-top: 1.5em;
-}
-
-#message {
-  margin: 1em 0;
-}
-
-#share-buttons {
+.share-buttons {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5em;
 }
 
-#share-button {
-  display: flex;
-  align-items: center;
-}
-
-#expiration-date-button {
+:global(.ui.button).expiration-date-button {
   margin-right: 0;
 }
 
-#expiration-modal-actions {
+:global(.ui.modal) > :global(.actions).expiration-modal-actions {
   text-align: left;
+  padding: 1rem 1.5rem;
 }
 
-#expiration-modal-set-button {
-  margin-left: 0.5em;
+:global(.ui.modal)
+  :global(.actions)
+  > :global(.button).expiration-modal-set-button {
+  margin-left: 0;
 }
 
-#read-only-header {
-  margin-top: 0.75em;
-}
-
-#share-item {
+.share-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 0.5em;
 }
 
-#share-user-icon {
+:global(i.icon).share-user-icon {
   margin-right: 0.25em;
 }
 
-#no-share-message {
-  margin-top: -0.25em;
+:global(.ui.modal) > :global(.actions).sharing-modal-actions {
+  padding-left: 1.5em;
+  padding-right: 1.5em;
 }
 
-#sharing-modal-actions {
-  padding: 1.5em;
-}
-
-#copy-link-button {
-  margin-left: 0px;
-}
+:global(.ui.modal) :global(.actions) > :global(.button) {
+  &.copy-link-button {
+    margin-left: 0px;
+  }
 
-#done-button {
-  margin-right: 0px;
+  &.done-button {
+    margin-right: 0px;
+  }
 }
diff --git a/reana-ui/src/pages/workflowList/WorkflowList.js b/reana-ui/src/pages/workflowList/WorkflowList.js
index ab05384..e5e6ca2 100644
--- a/reana-ui/src/pages/workflowList/WorkflowList.js
+++ b/reana-ui/src/pages/workflowList/WorkflowList.js
@@ -73,12 +73,22 @@ function Workflows() {
   useEffect(() => cleanPolling(), [workflowRefresh]);
 
   useEffect(() => {
+    let shared = false;
+    let sharedBy = null;
+    if (ownedByFilter === "anybody") {
+      shared = true;
+      sharedBy = null;
+    } else if (ownedByFilter !== "you") {
+      sharedBy = ownedByFilter;
+    }
+
     dispatch(
       fetchWorkflows({
         pagination: { ...pagination },
         search: searchFilter,
         status: statusFilter,
-        ownedBy: ownedByFilter,
+        shared,
+        sharedBy,
         sharedWith: sharedWithFilter,
         sort: sortDir,
       }),
@@ -87,12 +97,14 @@ function Workflows() {
     if (!interval.current && reanaToken && pollingSecs) {
       interval.current = setInterval(() => {
         const showLoader = false;
+
         dispatch(
           fetchWorkflows({
             pagination: { ...pagination },
             search: searchFilter,
             status: statusFilter,
-            ownedBy: ownedByFilter,
+            shared,
+            sharedBy,
             sharedWith: sharedWithFilter,
             sort: sortDir,
             showLoader,
@@ -141,7 +153,7 @@ function Workflows() {
 
   return (
     <div className={styles.container}>
-      <Container id={styles["workflow-list-container"]}>
+      <Container text className={styles["workflow-list-container"]}>
         <Title className={styles.title}>
           <span>Your workflows</span>
           <span className={styles.refresh}>
diff --git a/reana-ui/src/pages/workflowList/WorkflowList.module.scss b/reana-ui/src/pages/workflowList/WorkflowList.module.scss
index 44699bd..0b89d42 100644
--- a/reana-ui/src/pages/workflowList/WorkflowList.module.scss
+++ b/reana-ui/src/pages/workflowList/WorkflowList.module.scss
@@ -42,37 +42,6 @@
   margin: 2em;
 }
 
-#workflow-list-container {
-  font-size: 1.14285714rem;
-  line-height: 1.5;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  #workflow-list-container {
-    width: 500px;
-  }
-}
-
-/* Tablet */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  #workflow-list-container {
-    width: 700px;
-  }
-}
-
-/* Small Monitor */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  #workflow-list-container {
-    width: 800px;
-  }
-}
-
-/* Large Monitor */
-@media only screen and (min-width: 1200px) {
-  #workflow-list-container {
-    width: 825px;
-  }
+:global(.ui.text.container).workflow-list-container {
+  max-width: 825px !important;
 }
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.js b/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.js
index d8632d8..c43e497 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.js
+++ b/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.js
@@ -17,9 +17,12 @@ import { fetchUsersSharedWithYou, fetchUsersYouSharedWith } from "~/actions";
 import { getUsersSharedWithYou, getUsersYouSharedWith } from "~/selectors";
 import styles from "./WorkflowSharingFilter.module.scss";
 
+const OWNED_BY = "owned_by";
+const SHARED_WITH = "shared_with";
+
 const sharingFilterOptions = [
-  { key: 0, text: "Owned by", value: "owned_by" },
-  { key: 1, text: "Shared with", value: "shared_with" },
+  { key: 0, text: "Owned by", value: OWNED_BY },
+  { key: 1, text: "Shared with", value: SHARED_WITH },
 ];
 
 export default function WorkflowSharingFilters({
@@ -29,10 +32,7 @@ export default function WorkflowSharingFilters({
   setSharedWithFilter,
 }) {
   const dispatch = useDispatch();
-  const [selectedFilterOption, setSelectedFilterOption] = useState(
-    sharingFilterOptions[0],
-  );
-  const [dynamicOptions, setDynamicOptions] = useState([]);
+  const [selectedFilterOption, setSelectedFilterOption] = useState(OWNED_BY);
 
   const usersYouSharedWith = useSelector(getUsersYouSharedWith, _.isEqual);
   const usersSharedWithYou = useSelector(getUsersSharedWithYou, _.isEqual);
@@ -62,7 +62,9 @@ export default function WorkflowSharingFilters({
     [usersYouSharedWith],
   );
 
-  const [selectedUser, setSelectedUser] = useState();
+  const [selectedUser, setSelectedUser] = useState(
+    usersSharedWithYouOptions[0].value,
+  );
 
   useEffect(() => {
     dispatch(fetchUsersYouSharedWith());
@@ -70,19 +72,16 @@ export default function WorkflowSharingFilters({
   }, [dispatch]);
 
   useEffect(() => {
-    setDynamicOptions(usersSharedWithYouOptions);
-  }, [usersSharedWithYou, usersSharedWithYouOptions]);
-
-  useEffect(() => {
-    if (selectedFilterOption.value === sharingFilterOptions[0].value) {
-      if (!isEqual(ownedByFilter, selectedUser?.value)) {
+    // synchronise local state with parent state
+    if (selectedFilterOption === OWNED_BY) {
+      if (!isEqual(ownedByFilter, selectedUser)) {
         setSharedWithFilter(undefined);
-        setOwnedByFilter(selectedUser?.value);
+        setOwnedByFilter(selectedUser);
       }
     } else {
-      if (!isEqual(sharedWithFilter, selectedUser?.value)) {
+      if (!isEqual(sharedWithFilter, selectedUser)) {
+        setSharedWithFilter(selectedUser);
         setOwnedByFilter(undefined);
-        setSharedWithFilter(selectedUser?.value);
       }
     }
   }, [
@@ -91,54 +90,47 @@ export default function WorkflowSharingFilters({
     setOwnedByFilter,
     setSharedWithFilter,
     selectedUser,
-    selectedFilterOption.value,
+    selectedFilterOption,
   ]);
 
   const handleSelectedFilterOptionChange = (_, { value }) => {
-    const selectedOption = sharingFilterOptions.find(
-      (option) => option.value === value,
-    );
-    setSelectedFilterOption(selectedOption);
-
-    if (value === sharingFilterOptions[0].value) {
-      setDynamicOptions(usersSharedWithYouOptions);
-      setSelectedUser(usersSharedWithYouOptions[0]);
+    setSelectedFilterOption(value);
+
+    if (value === OWNED_BY) {
+      setSelectedUser(usersSharedWithYouOptions[0].value);
     } else {
-      setDynamicOptions(usersYouSharedWithOptions);
-      setSelectedUser(usersYouSharedWithOptions[0]);
+      setSelectedUser(usersYouSharedWithOptions[0].value);
     }
   };
 
   const handleSelectedUserChange = (_, { value }) => {
-    const selectedUser = dynamicOptions.find(
-      (option) => option.value === value,
-    );
-    setSelectedUser(selectedUser);
+    setSelectedUser(value);
   };
 
   return (
     <Grid.Column mobile={16} tablet={7} computer={6}>
       <div style={{ display: "flex" }}>
         <Dropdown
-          text={selectedFilterOption.text}
           fluid
-          closeOnChange
           selection
           options={sharingFilterOptions}
           onChange={handleSelectedFilterOptionChange}
-          defaultValue={selectedFilterOption.value}
-          id={styles["sharing-filter-dropdown"]}
+          value={selectedFilterOption}
+          className={styles["sharing-filter-dropdown"]}
         />
         <Dropdown
-          text={selectedUser?.text || "you"}
           fluid
           selection
           search
           scrolling
-          options={dynamicOptions}
+          options={
+            selectedFilterOption === OWNED_BY
+              ? usersSharedWithYouOptions
+              : usersYouSharedWithOptions
+          }
           onChange={handleSelectedUserChange}
-          value={selectedUser?.value || "you"}
-          id={styles["selected-user-dropdown"]}
+          value={selectedUser}
+          className={styles["selected-user-dropdown"]}
         />
       </div>
     </Grid.Column>
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.module.scss b/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.module.scss
index 979d8be..ccc6068 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.module.scss
+++ b/reana-ui/src/pages/workflowList/components/WorkflowSharingFilter.module.scss
@@ -8,39 +8,20 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
-#sharing-filter-dropdown {
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+:global(.ui.selection.dropdown).sharing-filter-dropdown {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-#sharing-filter-dropdown:hover,
-#sharing-filter-dropdown:focus,
-#sharing-filter-dropdown:active {
-  z-index: 2;
-}
-
-#selected-user-dropdown {
-  border-top-left-radius: 0%;
-  border-bottom-left-radius: 0%;
-  margin-left: -1px;
-  overflow: hidden;
-}
-
-#selected-user-dropdown.input {
+:global(.ui.selection.dropdown).selected-user-dropdown {
   border-top-left-radius: 0%;
   border-bottom-left-radius: 0%;
-  margin-left: -1px;
-}
-
-#selected-user-dropdown > div[aria-atomic="true"] {
-  max-width: 105px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 14+2px;
-  margin-bottom: -2px;
-}
-
-#selected-user-dropdown[aria-expanded="true"] {
-  overflow: visible;
+  border-left: 0;
+
+  > div[aria-atomic="true"] {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
diff --git a/reana-ui/src/reducers.js b/reana-ui/src/reducers.js
index 49d1b6a..4532867 100644
--- a/reana-ui/src/reducers.js
+++ b/reana-ui/src/reducers.js
@@ -45,24 +45,13 @@ import {
   OPEN_STOP_WORKFLOW_MODAL,
   CLOSE_STOP_WORKFLOW_MODAL,
   WARNING,
-  USERS_SHARED_WITH_YOU_FETCH,
   USERS_SHARED_WITH_YOU_RECEIVED,
-  USERS_SHARED_WITH_YOU_FETCH_ERROR,
-  USERS_YOU_SHARED_WITH_FETCH,
   USERS_YOU_SHARED_WITH_RECEIVED,
-  USERS_YOU_SHARED_WITH_FETCH_ERROR,
   OPEN_SHARE_WORKFLOW_MODAL,
   CLOSE_SHARE_WORKFLOW_MODAL,
   WORKFLOW_SHARE_STATUS_FETCH,
   WORKFLOW_SHARE_STATUS_RECEIVED,
-  WORKFLOW_SHARE_INIT,
-  WORKFLOW_SHARED_SUCCESSFULLY,
-  WORKFLOW_SHARED_ERROR,
-  WORKFLOW_SHARE_FINISH,
   WORKFLOW_SHARE_STATUS_FETCH_ERROR,
-  WORKFLOW_UNSHARE_INIT,
-  WORKFLOW_UNSHARED,
-  WORKFLOW_UNSHARE_ERROR,
 } from "~/actions";
 import { USER_ERROR } from "./errors";
 
@@ -135,6 +124,7 @@ const sharingInitialState = {
   usersWorkflowWasSharedWith: [],
   usersWorkflowWasNotSharedWith: [],
   userWorkflowWasUnsharedWith: null,
+  sharedWith: {},
 };
 
 const notification = (state = notificationInitialState, action) => {
@@ -319,22 +309,6 @@ const workflows = (state = workflowsInitialState, action) => {
       return { ...state, workflowShareModal: { open: false, workflow: null } };
     case WORKFLOW_LIST_REFRESH:
       return { ...state, workflowRefresh: Math.random() };
-    case WORKFLOW_SHARE_STATUS_FETCH:
-      return { ...state, loadingWorkflowShareStatus: true };
-    case WORKFLOW_SHARE_STATUS_RECEIVED:
-      return {
-        ...state,
-        workflows: {
-          ...state.workflows,
-          [action.id]: {
-            ...state.workflows[action.id],
-            sharedWith: action.workflow_share_status,
-          },
-        },
-        loadingWorkflowShareStatus: false,
-      };
-    case WORKFLOW_SHARE_STATUS_FETCH_ERROR:
-      return { ...state, loadingWorkflowShareStatus: false };
 
     default:
       return state;
@@ -414,66 +388,32 @@ const quota = (state = quotaInitialState, action) => {
 
 const sharing = (state = sharingInitialState, action) => {
   switch (action.type) {
-    case USERS_SHARED_WITH_YOU_FETCH:
-      return { ...state };
     case USERS_SHARED_WITH_YOU_RECEIVED:
       return {
         ...state,
-        usersSharedWithYou: action.users_shared_with_you,
-      };
-    case USERS_SHARED_WITH_YOU_FETCH_ERROR:
-      return { ...state };
-    case USERS_YOU_SHARED_WITH_FETCH:
-      return {
-        ...state,
+        usersSharedWithYou: action.usersSharedYouWith,
       };
     case USERS_YOU_SHARED_WITH_RECEIVED:
       return {
         ...state,
-        usersYouSharedWith: action.users_you_shared_with,
-      };
-    case USERS_YOU_SHARED_WITH_FETCH_ERROR:
-      return { ...state };
-    case WORKFLOW_SHARE_INIT:
-      return {
-        ...state,
-        loadingWorkflowShare: true,
-        usersWorkflowWasSharedWith: [],
-        usersWorkflowWasNotSharedWith: [],
-      };
-    case WORKFLOW_SHARED_SUCCESSFULLY:
-      return {
-        ...state,
-        usersWorkflowWasSharedWith: action.users_shared_with,
+        usersYouSharedWith: action.usersYouSharedWith,
       };
-    case WORKFLOW_SHARED_ERROR:
-      return {
-        ...state,
-        usersWorkflowWasNotSharedWith: action.users_not_shared_with,
-      };
-    case WORKFLOW_SHARE_FINISH:
-      return {
-        ...state,
-        loadingWorkflowShare: false,
-      };
-    case WORKFLOW_UNSHARE_INIT:
-      return {
-        ...state,
-        unshareError: null,
-        loadingWorkflowUnshare: true,
-      };
-    case WORKFLOW_UNSHARED:
-      return {
-        ...state,
-        loadingWorkflowUnshare: false,
-        userWorkflowWasUnsharedWith: action.user_email_to_unshare_with,
-      };
-    case WORKFLOW_UNSHARE_ERROR:
+    case WORKFLOW_SHARE_STATUS_FETCH:
+      return { ...state, loadingWorkflowShareStatus: true };
+    case WORKFLOW_SHARE_STATUS_RECEIVED:
       return {
         ...state,
-        loadingWorkflowUnshare: false,
-        unshareError: action.error_message,
+        sharedWith: {
+          ...state.sharedWith,
+          [action.id]: {
+            ...state.sharedWith[action.id],
+            sharedWith: action.sharedWith,
+          },
+        },
+        loadingWorkflowShareStatus: false,
       };
+    case WORKFLOW_SHARE_STATUS_FETCH_ERROR:
+      return { ...state, loadingWorkflowShareStatus: false };
 
     default:
       return state;
diff --git a/reana-ui/src/selectors.js b/reana-ui/src/selectors.js
index c4f26a0..d6b4250 100644
--- a/reana-ui/src/selectors.js
+++ b/reana-ui/src/selectors.js
@@ -24,7 +24,6 @@ export const getUserQuota = (state) => state.quota;
 
 // Auth
 export const isSignedIn = (state) => !!state.auth.email;
-export const getUserId = (state) => state.auth.id;
 export const getUserEmail = (state) => state.auth.email;
 export const getUserFullName = (state) => state.auth.fullName;
 export const getUserFetchError = (state) => state.auth.error[USER_ERROR.fetch];
@@ -60,12 +59,6 @@ export const getWorkflowShareModalOpen = (state) =>
   state.workflows.workflowShareModal.open;
 export const getWorkflowShareModalItem = (state) =>
   state.workflows.workflowShareModal.workflow;
-export const getWorkflowShareStatus = (id) => (state) =>
-  state.workflows.workflows &&
-  state.workflows.workflows[id] &&
-  state.workflows.workflows[id].sharedWith;
-export const getLoadingWorkflowShareStatus = (state) =>
-  state.workflows && state.workflows.loadingWorkflowShareStatus;
 export const getWorkflowRefresh = (state) => state.workflows.workflowRefresh;
 
 // Details
@@ -100,3 +93,9 @@ export const getUnshareError = (state) =>
   state.sharing && state.sharing.unshareError;
 export const getUserWorkflowWasUnsharedWith = (state) =>
   state.sharing && state.sharing.userWorkflowWasUnsharedWith;
+export const getWorkflowShareStatus = (id) => (state) =>
+  state.sharing.sharedWith &&
+  state.sharing.sharedWith[id] &&
+  state.sharing.sharedWith[id].sharedWith;
+export const getLoadingWorkflowShareStatus = (state) =>
+  state.sharing && state.sharing.loadingWorkflowShareStatus;
diff --git a/reana-ui/src/util.js b/reana-ui/src/util.js
index 1416cfc..ecb5c1b 100644
--- a/reana-ui/src/util.js
+++ b/reana-ui/src/util.js
@@ -60,6 +60,7 @@ export function parseWorkflows(workflows) {
     workflow.running = typeof running === "object" ? running.total : 0;
     workflow.failed = typeof failed === "object" ? failed.total : 0;
     workflow.launcherURL = workflow.launcher_url;
+    workflow.ownerEmail = workflow.owner_email;
     workflow = parseWorkflowDates(workflow);
 
     obj[workflow.id] = workflow;