diff --git a/studio/components/CustomToolMenu.tsx b/studio/components/CustomToolMenu.tsx
index 2967c1573..2110bcba0 100644
--- a/studio/components/CustomToolMenu.tsx
+++ b/studio/components/CustomToolMenu.tsx
@@ -1,12 +1,17 @@
 import { ToolMenuProps } from "sanity";
-import { Inline } from "@sanity/ui";
-import { LinkButton } from "./linkButton/LinkButton";
+import { Inline, Stack } from "@sanity/ui";
+import { ToolMenuLinkButton } from "./toolMenuLinkButton/ToolMenuLinkButton";
 
 export default function CustomToolMenu(props: ToolMenuProps) {
+  const Wrapper = props.context === "topbar" ? Inline : Stack;
   return (
-    <Inline>
+    <Wrapper space={4}>
       {props.renderDefault(props)}
-      <LinkButton value="/shared" />
-    </Inline>
+      <ToolMenuLinkButton
+        value={"/shared"}
+        label={"Shared Studio"}
+        context={props.context}
+      />
+    </Wrapper>
   );
 }
diff --git a/studio/components/linkButton/LinkButton.tsx b/studio/components/linkButton/LinkButton.tsx
deleted file mode 100644
index 8f146f577..000000000
--- a/studio/components/linkButton/LinkButton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ArrowRightIcon } from "@sanity/icons";
-import styles from "./linkButton.module.css";
-
-interface LinkButtonProps {
-  value?: string;
-}
-
-export const LinkButton = ({ value }: LinkButtonProps) => {
-  return (
-    <a className={styles.wrapper} href={value}>
-      <span className={styles.text}>Shared Studio</span>
-    </a>
-  );
-};
diff --git a/studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx b/studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx
new file mode 100644
index 000000000..601f29fc5
--- /dev/null
+++ b/studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx
@@ -0,0 +1,25 @@
+import styles from "./toolMenuLinkButton.module.css";
+import { useTheme } from "@sanity/ui";
+
+interface LinkButtonProps {
+  label: string;
+  value?: string;
+  context: "topbar" | "sidebar";
+}
+
+export const ToolMenuLinkButton = ({
+  label,
+  value,
+  context,
+}: LinkButtonProps) => {
+  const theme = useTheme();
+  const prefersDark = theme.sanity.v2?.color._dark ?? false;
+  return (
+    <a
+      className={`${styles.wrapper}${context === "sidebar" ? ` ${styles.inSidebar}` : ""}${prefersDark ? ` ${styles.darkTheme}` : ""}`}
+      href={value}
+    >
+      <span className={styles.text}>{label}</span>
+    </a>
+  );
+};
diff --git a/studio/components/linkButton/linkButton.module.css b/studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css
similarity index 69%
rename from studio/components/linkButton/linkButton.module.css
rename to studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css
index 522a640a7..e25e9450c 100644
--- a/studio/components/linkButton/linkButton.module.css
+++ b/studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css
@@ -8,10 +8,18 @@
   padding: 0.2rem 0.5rem;
 }
 
+.wrapper.inSidebar {
+  padding: 0.5rem 0.75rem;
+}
+
 .wrapper:hover {
   background: #f5f5f7;
 }
 
+.darkTheme.wrapper:hover {
+  background: #191a24;
+}
+
 .text {
   display: flex;
   align-items: center;
@@ -19,9 +27,9 @@
   font-weight: 500;
   color: #323545;
   letter-spacing: 0;
-  font-size: 13px;
   gap: 0.2rem;
-  line-height: 19px;
+  font-size: 0.8125rem;
+  line-height: calc(19 / 13);
 
   &::after {
     content: "";
@@ -32,3 +40,11 @@
     background-color: #323545;
   }
 }
+
+.darkTheme .text {
+  color: #bec0cd;
+
+  &::after {
+    background-color: #bec0cd;
+  }
+}