diff --git a/web/public/locales/cs/translation.json b/web/public/locales/cs/translation.json
index 26f7527..bf4b356 100644
--- a/web/public/locales/cs/translation.json
+++ b/web/public/locales/cs/translation.json
@@ -209,6 +209,7 @@
   "sidebar": {
     "downloadForFirefox": "Stáhnout pro Firefox",
     "downloadForEdge": "Stáhnout pro Edge",
+    "downloadForSafari": "Stáhnout pro Safari",
     "downloadForChrome": "Stáhnout pro Chrome",
     "trending": "Populární",
     "searchPlaceholder": "Vyhledávejte napříč uživateli, tagy, URL…",
diff --git a/web/public/locales/de/translation.json b/web/public/locales/de/translation.json
index 9f9829f..896e669 100644
--- a/web/public/locales/de/translation.json
+++ b/web/public/locales/de/translation.json
@@ -32,6 +32,7 @@
   "sidebar": {
     "downloadForFirefox": "Für Firefox herunterladen",
     "downloadForEdge": "Für Edge herunterladen",
+    "downloadForSafari": "Für Safari herunterladen",
     "downloadForChrome": "Für Chrome herunterladen",
     "getExtension": "Hol dir die Erweiterung",
     "trending": "Im Trend",
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index 533fd85..8eb4b2c 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -34,6 +34,7 @@
     "extensionTagline": "Highlight, annotate, and bookmark from any page.",
     "downloadForFirefox": "Download for Firefox",
     "downloadForEdge": "Download for Edge",
+    "downloadForSafari": "Download for Safari",
     "downloadForChrome": "Download for Chrome",
     "trending": "Trending",
     "nothingTrending": "Nothing trending right now.",
diff --git a/web/public/locales/es/translation.json b/web/public/locales/es/translation.json
index ff0305b..3f2cf6f 100644
--- a/web/public/locales/es/translation.json
+++ b/web/public/locales/es/translation.json
@@ -34,6 +34,7 @@
     "extensionTagline": "Resalta, anota y guarda marcadores desde cualquier página.",
     "downloadForFirefox": "Descargar para Firefox",
     "downloadForEdge": "Descargar para Edge",
+    "downloadForSafari": "Descargar para Safari",
     "downloadForChrome": "Descargar para Chrome",
     "trending": "Tendencias",
     "nothingTrending": "No hay nada en tendencia ahora mismo.",
diff --git a/web/src/components/navigation/RightSidebar.tsx b/web/src/components/navigation/RightSidebar.tsx
index 81fdfe8..7412f81 100644
--- a/web/src/components/navigation/RightSidebar.tsx
+++ b/web/src/components/navigation/RightSidebar.tsx
@@ -29,11 +29,14 @@ export default function RightSidebar({ onNavigate }: RightSidebarProps) {
     else window.location.href = path;
   };
   const [tags, setTags] = useState<Tag[]>([]);
-  const [browser] = useState<"chrome" | "firefox" | "edge" | "other">(() => {
+  const [browser] = useState<
+    "chrome" | "firefox" | "edge" | "safari" | "other"
+  >(() => {
     if (typeof navigator === "undefined") return "other";
     const ua = navigator.userAgent;
     if (/Edg\//i.test(ua)) return "edge";
     if (/Firefox/i.test(ua)) return "firefox";
+    if (/^((?!chrome|android).)*safari/i.test(ua)) return "safari";
     if (/Chrome/i.test(ua)) return "chrome";
     return "other";
   });
@@ -142,7 +145,9 @@ export default function RightSidebar({ onNavigate }: RightSidebarProps) {
       ? "https://addons.mozilla.org/en-US/firefox/addon/margin/"
       : browser === "edge"
         ? "https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
-        : "https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa";
+        : browser === "safari"
+          ? "https://apps.apple.com/us/app/margin-for-safari/id6773549512"
+          : "https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa";
 
   return (
     <aside className="hidden xl:block w-[320px] shrink-0 sticky top-0 h-screen overflow-y-auto px-6 py-6">
@@ -219,7 +224,9 @@ export default function RightSidebar({ onNavigate }: RightSidebarProps) {
               ? t("sidebar.downloadForFirefox")
               : browser === "edge"
                 ? t("sidebar.downloadForEdge")
-                : t("sidebar.downloadForChrome")}
+                : browser === "safari"
+                  ? t("sidebar.downloadForSafari")
+                  : t("sidebar.downloadForChrome")}
           </a>
         </div>
 
diff --git a/web/src/views/About.tsx b/web/src/views/About.tsx
index a38c18e..3f99fb3 100644
--- a/web/src/views/About.tsx
+++ b/web/src/views/About.tsx
@@ -30,7 +30,7 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { AppleIcon, TangledIcon } from "../components/common/Icons";
-import { FaFirefox, FaEdge } from "react-icons/fa";
+import { FaFirefox, FaEdge, FaSafari } from "react-icons/fa";
 const noteLexiconText = `{
   "lexicon": 1,
   "id": "at.margin.note",
@@ -354,6 +354,7 @@ const STORE_LINKS = {
     "https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa",
   firefox: "https://addons.mozilla.org/en-US/firefox/addon/margin/",
   edge: "https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn",
+  safari: "https://apps.apple.com/us/app/margin-for-safari/id6773549512",
   ios: "https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3",
 } as const;
 
@@ -364,19 +365,29 @@ export default function About() {
   const [browser] = React.useState<Browser>(detectBrowser);
 
   const primaryStore: keyof typeof STORE_LINKS =
-    browser === "firefox" ? "firefox" : browser === "edge" ? "edge" : "chrome";
+    browser === "firefox"
+      ? "firefox"
+      : browser === "edge"
+        ? "edge"
+        : browser === "safari"
+          ? "safari"
+          : "chrome";
   const PrimaryIcon =
     primaryStore === "firefox"
       ? FaFirefox
       : primaryStore === "edge"
         ? FaEdge
-        : Chrome;
+        : primaryStore === "safari"
+          ? FaSafari
+          : Chrome;
   const primaryLabel =
     primaryStore === "firefox"
       ? "Firefox"
       : primaryStore === "edge"
         ? "Edge"
-        : "Chrome";
+        : primaryStore === "safari"
+          ? "Safari"
+          : "Chrome";
 
   const capabilities: { icon: LucideIcon; title: string; desc: string }[] = [
     {
@@ -682,6 +693,13 @@ export default function About() {
               active={primaryStore === "edge"}
             />
             ,{" "}
+            <InstallLink
+              href={STORE_LINKS.safari}
+              icon={<FaSafari size={17} />}
+              label="Safari"
+              active={primaryStore === "safari"}
+            />
+            ,{" "}
             <span className="text-surface-500 dark:text-surface-400">
               {t("about.landing.install.or")}
             </span>{" "}