diff --git a/scm-ui/ui-api/src/login.ts b/scm-ui/ui-api/src/login.ts
index b4daab0eb4..3ef4425e59 100644
--- a/scm-ui/ui-api/src/login.ts
+++ b/scm-ui/ui-api/src/login.ts
@@ -104,23 +104,22 @@ export const useLogout = () => {
   const link = useIndexLink("logout");
   const reset = useReset();
 
-  const { mutate, isLoading, error, data } = useMutation<LogoutResponse, Error, unknown>(() =>
-    apiClient.delete(link!).then(r => (r.status === 200 ? r.json() : {}))
+  const { mutate, isLoading, error, data } = useMutation<LogoutResponse, Error, unknown>(
+    () => apiClient.delete(link!).then(r => (r.status === 200 ? r.json() : {})),
+    {
+      onSuccess: response => {
+        if (response?.logoutRedirect) {
+          window.location.assign(response.logoutRedirect);
+        }
+        reset();
+      }
+    }
   );
 
   const logout = () => {
     mutate({});
   };
 
-  useEffect(() => {
-    if (data?.logoutRedirect) {
-      window.location.assign(data.logoutRedirect);
-    }
-    if (data) {
-      reset();
-    }
-  }, [data, reset]);
-
   return {
     logout: link && !data ? logout : undefined,
     isLoading,
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 3decdfae60..b89821b4cd 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -3734,24 +3734,11 @@ Array [
     className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
   >
     <div
-      className="is-flex is-align-items-center ml-5 my-4 mr-3"
+      className="is-flex is-align-items-center"
     >
-      <div
-        className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO ml-1"
-      >
-        <span
-          className="tooltip has-tooltip-right"
-          data-tooltip="breadcrumb.copyPermalink"
-        >
-          <i
-            className="fas fa-link has-text-inherit"
-            onClick={[Function]}
-          />
-        </span>
-      </div>
       <nav
         aria-label="breadcrumbs"
-        className="Breadcrumb__BreadcrumbNav-zvtb4t-1 caWANn breadcrumb sources-breadcrumb ml-1 mb-0"
+        className="Breadcrumb__BreadcrumbNav-zvtb4t-1 gyUWqH breadcrumb sources-breadcrumb ml-1 mb-0"
       >
         <ul>
           <li>
@@ -3818,6 +3805,19 @@ Array [
             </a>
           </li>
         </ul>
+        <span
+          className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO ml-1"
+        >
+          <span
+            className="tooltip has-tooltip-right"
+            data-tooltip="breadcrumb.copyPermalink"
+          >
+            <i
+              className="fas fa-link has-text-inherit"
+              onClick={[Function]}
+            />
+          </span>
+        </span>
       </nav>
     </div>
     <hr
@@ -4368,24 +4368,11 @@ Array [
     className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
   >
     <div
-      className="is-flex is-align-items-center ml-5 my-4 mr-3"
+      className="is-flex is-align-items-center"
     >
-      <div
-        className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO ml-1"
-      >
-        <span
-          className="tooltip has-tooltip-right"
-          data-tooltip="breadcrumb.copyPermalink"
-        >
-          <i
-            className="fas fa-link has-text-inherit"
-            onClick={[Function]}
-          />
-        </span>
-      </div>
       <nav
         aria-label="breadcrumbs"
-        className="Breadcrumb__BreadcrumbNav-zvtb4t-1 caWANn breadcrumb sources-breadcrumb ml-1 mb-0"
+        className="Breadcrumb__BreadcrumbNav-zvtb4t-1 gyUWqH breadcrumb sources-breadcrumb ml-1 mb-0"
       >
         <ul>
           <li>
@@ -4502,6 +4489,19 @@ Array [
             </a>
           </li>
         </ul>
+        <span
+          className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO ml-1"
+        >
+          <span
+            className="tooltip has-tooltip-right"
+            data-tooltip="breadcrumb.copyPermalink"
+          >
+            <i
+              className="fas fa-link has-text-inherit"
+              onClick={[Function]}
+            />
+          </span>
+        </span>
       </nav>
     </div>
     <hr