diff --git a/static/js/portico/tabbed-instructions.js b/static/js/portico/tabbed-instructions.js
new file mode 100644
index 0000000000..487a52ac76
--- /dev/null
+++ b/static/js/portico/tabbed-instructions.js
@@ -0,0 +1,63 @@
+function detect_user_os() {
+    if (/Android/i.test(navigator.userAgent)) {
+        return "android";
+    }
+    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+        return "ios";
+    }
+    if (/Mac/i.test(navigator.userAgent)) {
+        return "mac";
+    }
+    if (/Win/i.test(navigator.userAgent)) {
+        return "windows";
+    }
+    if (/Linux/i.test(navigator.userAgent)) {
+        return "linux";
+    }
+    return "mac"; // if unable to determine OS return Mac by default
+}
+
+function activate_correct_tab($codeSection) {
+    var user_os = detect_user_os();
+    var desktop_os = ["mac", "linux", "windows"];
+    const $li = $codeSection.find("ul.nav li");
+    const $blocks = $codeSection.find(".blocks div");
+
+    $li.each(function () {
+        const language = this.dataset.language;
+        $(this).removeClass("active");
+        if (language === user_os) {
+            $(this).addClass("active");
+        }
+
+        if (desktop_os.indexOf(user_os) !== -1 && language === "desktop-web") {
+            $(this).addClass("active");
+        }
+    });
+
+    $blocks.each(function () {
+        const language = this.dataset.language;
+        $(this).removeClass("active");
+        if (language === user_os) {
+            $(this).addClass("active");
+        }
+
+        if (desktop_os.indexOf(user_os) !== -1 && language === "desktop-web") {
+            $(this).addClass("active");
+        }
+    });
+
+    // if no tab was activated, just activate the first one
+    var active_list_items = $li.filter(".active");
+    if (!active_list_items.length) {
+        $li.first().addClass("active");
+        var language = $li.first()[0].dataset.language;
+        $blocks.filter("[data-language=" + language + "]").addClass("active");
+    }
+}
+
+(function () {
+$(".code-section").each(function () {
+    activate_correct_tab($(this));
+});
+}());
diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json
index dbef816b6e..61f5f44ce9 100644
--- a/tools/webpack.assets.json
+++ b/tools/webpack.assets.json
@@ -51,7 +51,8 @@
     "help": [
             "./node_modules/simplebar/dist/simplebar.css",
             "./node_modules/simplebar/dist/simplebar.js",
-            "./static/js/portico/help.js"
+            "./static/js/portico/help.js",
+            "./static/js/portico/tabbed-instructions.js"
     ],
     "katex": "./node_modules/katex/dist/katex.min.js",
     "landing-page": [
diff --git a/zerver/lib/bugdown/tabbed_sections.py b/zerver/lib/bugdown/tabbed_sections.py
index d8c8eb6a42..e371c490e1 100644
--- a/zerver/lib/bugdown/tabbed_sections.py
+++ b/zerver/lib/bugdown/tabbed_sections.py
@@ -34,6 +34,8 @@ DIV_TAB_CONTENT_TEMPLATE = """
 </div>
 """.strip()
 
+# If adding new entries here, also check if you need to update
+# tabbed-instructions.js
 TAB_DISPLAY_NAMES = {
     'desktop-web': 'Desktop/Web',
     'ios': 'iOS',