diff --git a/package-lock.json b/package-lock.json
index c3f55e5ca9..90c5f0bd7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
         "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
         "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-        "@openedx/frontend-build": "^14.6.6",
+        "@openedx/frontend-build": "^14.6.17",
         "@openedx/frontend-plugin-framework": "^1.8.0",
         "@openedx/paragon": "^23.5.0",
         "@redux-devtools/extension": "^3.3.0",
@@ -48,7 +48,7 @@
         "classnames": "2.5.1",
         "codemirror": "^6.0.0",
         "email-validator": "2.0.4",
-        "fast-xml-parser": "5.3.7",
+        "fast-xml-parser": "5.11.1",
         "file-saver": "^2.0.5",
         "formik": "2.4.9",
         "frontend-components-tinymce-advanced-plugins": "^1.0.3",
@@ -3933,9 +3933,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz",
+      "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==",
       "cpu": [
         "arm64"
       ],
@@ -3945,19 +3945,19 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+        "@img/sharp-libvips-darwin-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
+      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
       "cpu": [
         "x64"
       ],
@@ -3967,19 +3967,38 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+        "@img/sharp-libvips-darwin-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
+      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz",
+      "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==",
       "cpu": [
         "arm64"
       ],
@@ -3993,9 +4012,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
+      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
       "cpu": [
         "x64"
       ],
@@ -4009,9 +4028,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
+      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
       "cpu": [
         "arm"
       ],
@@ -4028,9 +4047,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
+      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
       "cpu": [
         "arm64"
       ],
@@ -4047,9 +4066,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
+      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
       "cpu": [
         "ppc64"
       ],
@@ -4066,9 +4085,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
+      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
       "cpu": [
         "riscv64"
       ],
@@ -4085,9 +4104,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
+      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
       "cpu": [
         "s390x"
       ],
@@ -4104,9 +4123,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
+      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
       "cpu": [
         "x64"
       ],
@@ -4123,9 +4142,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
+      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
       "cpu": [
         "arm64"
       ],
@@ -4142,9 +4161,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
+      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
       "cpu": [
         "x64"
       ],
@@ -4161,9 +4180,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
+      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
       "cpu": [
         "arm"
       ],
@@ -4176,19 +4195,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+        "@img/sharp-libvips-linux-arm": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
+      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
       "cpu": [
         "arm64"
       ],
@@ -4201,19 +4220,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+        "@img/sharp-libvips-linux-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
+      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
       "cpu": [
         "ppc64"
       ],
@@ -4226,19 +4245,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+        "@img/sharp-libvips-linux-ppc64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
+      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
       "cpu": [
         "riscv64"
       ],
@@ -4251,19 +4270,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+        "@img/sharp-libvips-linux-riscv64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
+      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
       "cpu": [
         "s390x"
       ],
@@ -4276,19 +4295,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "@img/sharp-libvips-linux-s390x": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
+      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
       "cpu": [
         "x64"
       ],
@@ -4301,19 +4320,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "@img/sharp-libvips-linux-x64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
+      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
       "cpu": [
         "arm64"
       ],
@@ -4326,19 +4345,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
+      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
       "cpu": [
         "x64"
       ],
@@ -4351,38 +4370,54 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz",
+      "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
+      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
       "cpu": [
         "wasm32"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
+        "@img/sharp-wasm32": "0.35.4"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
+      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
       "cpu": [
         "arm64"
       ],
@@ -4392,16 +4427,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
+      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
       "cpu": [
         "ia32"
       ],
@@ -4411,16 +4446,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
+      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
       "cpu": [
         "x64"
       ],
@@ -4430,7 +4465,7 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
@@ -5602,6 +5637,18 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@nodable/entities": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@nodable/entities/-/entities-3.0.0.tgz",
+      "integrity": "sha512-8L9xFeTYKhm49xfIypoe2W5wV1m/3Z58kT+7kR9A8OyFxcPduI4VmxaUMQyKYrRjUoLLSXv6EKKID5Tvj9cUVw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodable"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5682,9 +5729,9 @@
       "link": true
     },
     "node_modules/@openedx/frontend-build": {
-      "version": "14.6.13",
-      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.6.13.tgz",
-      "integrity": "sha512-dh+AiJOeu4TkaDUXd5eyU1Fg1eHUDO7UDya0xGnh5vluN7wcMdC8M8nN1UaFEB43ZwJoqcIxcA11sb+GGkC2Bg==",
+      "version": "14.6.17",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.6.17.tgz",
+      "integrity": "sha512-3qOS3deYwvFN/81SKyND5U4CAptmm3Lo6UgLcE43gzoHxNS/XUZbOhPq0jqlC14B/O3vWqovQ3Phm38fhvh8iA==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@babel/cli": "^7.24.8",
@@ -5744,7 +5791,7 @@
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.85.1",
         "sass-loader": "^13.3.3",
-        "sharp": "^0.34.3",
+        "sharp": "^0.35.0",
         "source-map-loader": "^4.0.2",
         "style-loader": "^3.3.4",
         "ts-jest": "^29.1.4",
@@ -9535,9 +9582,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.11.13",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.13.tgz",
-      "integrity": "sha512-k9HNuUVMlqVjQ9UHzfPjIqiDbWw7WqT1AoT7GL8VwvF3r0ZfArtgiSPAlmupyNquNgOJHTuH4CKYf8ttMTWBTQ==",
+      "version": "2.11.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.20.tgz",
+      "integrity": "sha512-H0ulySigv6icDJ1F7SjtdCD6PrhTpdYCmP0CactWy1+ekh0AFd0o1Wn5T8b+hnTmdBx19u9yhL6wvCylXMY7zw==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -9918,9 +9965,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001809",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz",
-      "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==",
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "funding": [
         {
           "type": "opencollective",
@@ -10274,9 +10321,9 @@
       "license": "MIT"
     },
     "node_modules/colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.10.0.tgz",
+      "integrity": "sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw==",
       "license": "MIT"
     },
     "node_modules/colorette": {
@@ -11493,9 +11540,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.4.12",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.12.tgz",
-      "integrity": "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.13.tgz",
+      "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -13078,9 +13125,9 @@
       "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
-      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.7.tgz",
+      "integrity": "sha512-dOvZVzjdZdz7phd9v6jCbwxrBW3fK6n8Rc0CtdmM4bumzMnxywBYhuph6J819RRw/ku+rLbelwfMunktuzVVHg==",
       "funding": [
         {
           "type": "github",
@@ -13093,10 +13140,26 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fast-xml-builder": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.3.1.tgz",
+      "integrity": "sha512-pIM/1n3ntFXKYrUZwW7QCK0gAW7XY+wzj1YMIV3tLDvPj/V+zTGJK5e3/4WJfwj0qWw2ElNXiTixda/R+3YSug==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "path-expression-matcher": "^1.6.2",
+        "xml-naming": "^0.3.0"
+      }
+    },
     "node_modules/fast-xml-parser": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.7.tgz",
-      "integrity": "sha512-JzVLro9NQv92pOM/jTCR6mHlJh2FGwtomH8ZQjhFj/R29P2Fnj38OgPJVtcvYw6SuKClhgYuwUZf5b3rd8u2mA==",
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.11.1.tgz",
+      "integrity": "sha512-TBw6K/fxoQGGjCmZDw9w/ZwP3uDcnTM4YH/g+PFRWr8sbe5idXtxNN6vITh4+1ruCZaho6uBFurElsA7F0zzgw==",
       "funding": [
         {
           "type": "github",
@@ -13105,7 +13168,12 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "strnum": "^2.1.2"
+        "@nodable/entities": "^3.0.0",
+        "fast-xml-builder": "^1.2.0",
+        "is-unsafe": "^2.0.0",
+        "path-expression-matcher": "^1.6.2",
+        "strnum": "^2.4.2",
+        "xml-naming": "^0.3.0"
       },
       "bin": {
         "fxparser": "src/cli/cli.js"
@@ -15653,6 +15721,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-unsafe": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-unsafe/-/is-unsafe-2.0.2.tgz",
+      "integrity": "sha512-HgbIHPBH0KHHCcjLfGsCvhtPTVxjaAZlXjwdz7/GQC40SjSe4sfQsar8J5VFo8JOSbarkpV0OLG95bbaNd9aAQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/is-valid-path": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
@@ -18834,6 +18914,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.6.2.tgz",
+      "integrity": "sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -22179,47 +22274,52 @@
       "license": "MIT"
     },
     "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.4.tgz",
+      "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@img/colour": "^1.0.0",
+        "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
+        "semver": "^7.8.5"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
+        "@img/sharp-darwin-arm64": "0.35.4",
+        "@img/sharp-darwin-x64": "0.35.4",
+        "@img/sharp-freebsd-wasm32": "0.35.4",
+        "@img/sharp-libvips-darwin-arm64": "1.3.3",
+        "@img/sharp-libvips-darwin-x64": "1.3.3",
+        "@img/sharp-libvips-linux-arm": "1.3.3",
+        "@img/sharp-libvips-linux-arm64": "1.3.3",
+        "@img/sharp-libvips-linux-ppc64": "1.3.3",
+        "@img/sharp-libvips-linux-riscv64": "1.3.3",
+        "@img/sharp-libvips-linux-s390x": "1.3.3",
+        "@img/sharp-libvips-linux-x64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
+        "@img/sharp-linux-arm": "0.35.4",
+        "@img/sharp-linux-arm64": "0.35.4",
+        "@img/sharp-linux-ppc64": "0.35.4",
+        "@img/sharp-linux-riscv64": "0.35.4",
+        "@img/sharp-linux-s390x": "0.35.4",
+        "@img/sharp-linux-x64": "0.35.4",
+        "@img/sharp-linuxmusl-arm64": "0.35.4",
+        "@img/sharp-linuxmusl-x64": "0.35.4",
+        "@img/sharp-webcontainers-wasm32": "0.35.4",
+        "@img/sharp-win32-arm64": "0.35.4",
+        "@img/sharp-win32-ia32": "0.35.4",
+        "@img/sharp-win32-x64": "0.35.4"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
     "node_modules/sharp/node_modules/semver": {
@@ -22914,9 +23014,9 @@
       }
     },
     "node_modules/strnum": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.4.1.tgz",
-      "integrity": "sha512-M9eUSMT2dCB2cTNPG7UYj6KuK7RJR2SN2+yCV/fTW3xzTCS6EaGZ5pSMgDIjB7r8zSfTGk+dvvn9rTjpVS9Mwg==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.4.2.tgz",
+      "integrity": "sha512-rDG3Ah4TV0k1hWvLSzkZtMmLN9+eS+h3knq4MP6A42Y3Yh5qGNnOUs1jJkoSr8FG5dsL28c7KgkIBzSEykqtuw==",
       "funding": [
         {
           "type": "github",
@@ -23289,9 +23389,9 @@
       "dev": true
     },
     "node_modules/svgo": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.4.tgz",
-      "integrity": "sha512-GsNRis4e8jxn2Y9ENz/8lbJ93CstG8svtMnuRaHbiF2LTJ5tK0/q3t/URPq9Zc7zVWBJnNnJMIp6bevK7bSmNg==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.5.tgz",
+      "integrity": "sha512-8SQMzdrvWaD8deUmrnYB+ASyxBVgWUOilg+A75nE/76WdLpj6LopCwiAVvkzkcqy/9b7t2Mg7faFLjg0ZRcZ3w==",
       "license": "MIT",
       "dependencies": {
         "commander": "^7.2.0",
@@ -25222,6 +25322,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/xml-naming": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/xml-naming/-/xml-naming-0.3.0.tgz",
+      "integrity": "sha512-ghig2TBE/H11aOVgmahA3MhimvkBr6JIYknH/Dhdk10nXwdbIqBJsbfMxpvFPG8bAw77gN29aQWvKpmVoPlvPQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
diff --git a/package.json b/package.json
index 2704b17a69..21fe4a5365 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-    "@openedx/frontend-build": "^14.6.6",
+    "@openedx/frontend-build": "^14.6.17",
     "@openedx/frontend-plugin-framework": "^1.8.0",
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
@@ -72,7 +72,7 @@
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
-    "fast-xml-parser": "5.3.7",
+    "fast-xml-parser": "5.11.1",
     "file-saver": "^2.0.5",
     "formik": "2.4.9",
     "frontend-components-tinymce-advanced-plugins": "^1.0.3",
diff --git a/plugins/course-apps/proctoring/Settings.test.jsx b/plugins/course-apps/proctoring/Settings.test.jsx
index 6a07c7143c..4d137efc98 100644
--- a/plugins/course-apps/proctoring/Settings.test.jsx
+++ b/plugins/course-apps/proctoring/Settings.test.jsx
@@ -470,10 +470,13 @@ describe('ProctoredExamSettings', () => {
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
-      // (1) for studio settings
-      // (2) for course details
-      expect(axiosMock.history.get.length).toBe(2);
-      expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
+      // With no exam service URL configured, no request should be made to the exams
+      // service for provider options. (Total GET count is not asserted because the
+      // CourseAuthoringProvider also fetches course details and waffle flags.)
+      const examProvidersRequested = axiosMock.history.get.some((req) => req.url.includes('/api/v1/providers'));
+      expect(examProvidersRequested).toBe(false);
+      const studioSettingsRequested = axiosMock.history.get.some((req) => req.url.includes('proctored_exam_settings'));
+      expect(studioSettingsRequested).toBe(true);
     });
 
     it('Selected LTI proctoring provider is shown on page load', async () => {
diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index bc444bd7cb..b62f6dbbeb 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -10,6 +10,8 @@ import { type UnitXBlock, type XBlock } from '@src/data/types';
 import { CourseDetailsData } from './data/api';
 import { useCourseDetails } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getCourseOutlinePermissions } from '@src/authz/permissionHelpers';
 
 export type ModalState = {
   value?: XBlock | UnitXBlock;
@@ -29,6 +31,9 @@ export type CourseAuthoringContextData = {
   currentUnlinkModalData?: ModalState;
   openUnlinkModal: (value: ModalState) => void;
   closeUnlinkModal: () => void;
+  isLoadingPermissions: boolean;
+  canEditCourseContent: boolean;
+  canPublishCourseContent: boolean;
 };
 
 /**
@@ -58,6 +63,12 @@ export const CourseAuthoringProvider = ({
     closeUnlinkModal,
   ] = useToggleWithValue<ModalState>();
 
+  const {
+    canEditCourseContent,
+    canPublishCourseContent,
+    isLoading: isLoadingUserPermissions,
+  } = useCourseUserPermissions(courseId, getCourseOutlinePermissions(courseId));
+
   const getUnitUrl = (locator: string) => `/course/${courseId}/container/${locator}`;
 
   /**
@@ -78,6 +89,9 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
+    isLoadingPermissions: isLoadingUserPermissions,
+    canEditCourseContent,
+    canPublishCourseContent,
   }), [
     courseId,
     courseDetails,
@@ -89,6 +103,9 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
+    canEditCourseContent,
+    canPublishCourseContent,
+    isLoadingUserPermissions,
   ]);
 
   return (
diff --git a/src/advanced-settings/AdvancedSettings.test.tsx b/src/advanced-settings/AdvancedSettings.test.tsx
index 9ed3f144aa..0332aafa1f 100644
--- a/src/advanced-settings/AdvancedSettings.test.tsx
+++ b/src/advanced-settings/AdvancedSettings.test.tsx
@@ -52,6 +52,7 @@ describe('<AdvancedSettings />', () => {
     jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: false,
+      canViewAdvancedSettings: true,
       canManageAdvancedSettings: true,
     } as ReturnType<typeof useCourseUserPermissions>);
   });
@@ -175,6 +176,7 @@ describe('<AdvancedSettings />', () => {
     jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
+      canViewAdvancedSettings: true,
       canManageAdvancedSettings: true,
     } as ReturnType<typeof useCourseUserPermissions>);
     render();
@@ -192,7 +194,7 @@ describe('<AdvancedSettings />', () => {
     jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      canManageAdvancedSettings: false,
+      canViewAdvancedSettings: false,
     } as ReturnType<typeof useCourseUserPermissions>);
     render();
     expect(await screen.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
@@ -203,7 +205,7 @@ describe('<AdvancedSettings />', () => {
     jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      canManageAdvancedSettings: false,
+      canViewAdvancedSettings: false,
     } as ReturnType<typeof useCourseUserPermissions>);
     axiosMock
       .onGet(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`)
@@ -212,4 +214,21 @@ describe('<AdvancedSettings />', () => {
     expect(await screen.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
     expect(screen.queryByText(/Under Construction/i)).not.toBeInTheDocument();
   });
+
+  it('should show view-only alert and disable editing when user has view but not manage permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      canViewAdvancedSettings: true,
+      canManageAdvancedSettings: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
+    render();
+    expect(await screen.findByTestId('viewOnlyPermissionsAlert')).toBeInTheDocument();
+    expect(await screen.findByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    const textarea = screen.getByLabelText(/Advanced Module List/i);
+    expect(textarea).toBeDisabled();
+    expect(screen.queryByText(messages.buttonSaveText.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.buttonCancelText.defaultMessage)).not.toBeInTheDocument();
+  });
 });
diff --git a/src/advanced-settings/AdvancedSettings.tsx b/src/advanced-settings/AdvancedSettings.tsx
index 997d6ffaee..3eae6ead40 100644
--- a/src/advanced-settings/AdvancedSettings.tsx
+++ b/src/advanced-settings/AdvancedSettings.tsx
@@ -13,6 +13,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useCourseUserPermissions } from '@src/authz/hooks';
 import { getAdvancedSettingsPermissions } from '@src/authz/permissionHelpers';
 import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import ViewOnlyPermissionsAlert from '@src/generic/ViewOnlyPermissionsAlert';
 import AlertProctoringError from '@src/generic/AlertProctoringError';
 import { LoadingSpinner } from '@src/generic/Loading';
 import InternetConnectionAlert from '@src/generic/internet-connection-alert';
@@ -45,6 +46,7 @@ const AdvancedSettings = () => {
 
   const {
     isLoading: isLoadingUserPermissions,
+    canViewAdvancedSettings,
     canManageAdvancedSettings,
   } = useCourseUserPermissions(courseId, getAdvancedSettingsPermissions(courseId));
 
@@ -102,7 +104,7 @@ const AdvancedSettings = () => {
     );
   }
 
-  if (!canManageAdvancedSettings) {
+  if (!canViewAdvancedSettings) {
     return <PermissionDeniedAlert />;
   }
 
@@ -201,6 +203,7 @@ const AdvancedSettings = () => {
                 subtitle={intl.formatMessage(messages.headingSubtitle)}
                 title={intl.formatMessage(messages.headingTitle)}
                 contentTitle={intl.formatMessage(messages.policy)}
+                banner={!canManageAdvancedSettings ? <ViewOnlyPermissionsAlert /> : null}
               />
               <article>
                 <div>
@@ -246,6 +249,7 @@ const AdvancedSettings = () => {
                             handleBlur={handleSettingBlur}
                             isEditableState={isEditableState}
                             setIsEditableState={setIsEditableState}
+                            disabled={!canManageAdvancedSettings}
                           />
                         );
                       })}
diff --git a/src/advanced-settings/setting-card/SettingCard.test.jsx b/src/advanced-settings/setting-card/SettingCard.test.tsx
similarity index 51%
rename from src/advanced-settings/setting-card/SettingCard.test.jsx
rename to src/advanced-settings/setting-card/SettingCard.test.tsx
index cb2fd25aba..78316e6156 100644
--- a/src/advanced-settings/setting-card/SettingCard.test.jsx
+++ b/src/advanced-settings/setting-card/SettingCard.test.tsx
@@ -1,8 +1,13 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '@src/testUtils';
 
-import SettingCard from './SettingCard';
+import SettingCard, { type SettingCardProps } from './SettingCard';
 import messages from './messages';
 
 const setEdited = jest.fn();
@@ -25,10 +30,9 @@ jest.mock('react-textarea-autosize', () =>
     />
   )));
 
-const RootWrapper = () => (
-  <IntlProvider locale="en">
+const renderComponent = (props: Partial<SettingCardProps> = {}) =>
+  render(
     <SettingCard
-      isOn
       name="settingName"
       setEdited={setEdited}
       setIsEditableState={setIsEditableState}
@@ -37,48 +41,42 @@ const RootWrapper = () => (
       handleBlur={handleBlur}
       isEditableState
       saveSettingsPrompt={false}
-    />
-  </IntlProvider>
-);
+      {...props}
+    />,
+  );
 
 describe('<SettingCard />', () => {
-  afterEach(() => jest.clearAllMocks());
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   it('renders the setting card with the provided data', () => {
-    const { getByText, getByLabelText } = render(<RootWrapper />);
-    const cardTitle = getByText(/Setting Name/i);
-    const input = getByLabelText(/Setting Name/i);
+    renderComponent();
+    const cardTitle = screen.getByText(/Setting Name/i);
+    const input = screen.getByLabelText(/Setting Name/i);
     expect(cardTitle).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input.value).toBe(JSON.stringify(settingData.value, null, 4));
+    expect(input).toHaveValue(JSON.stringify(settingData.value, null, 4));
   });
+
   it('displays the deprecated status when the setting is deprecated', () => {
-    const deprecatedSettingData = { ...settingData, deprecated: true };
-    const { getByText } = render(
-      <IntlProvider locale="en">
-        <SettingCard
-          isOn
-          name="settingName"
-          setEdited={setEdited}
-          setIsEditableState={setIsEditableState}
-          showSaveSettingsPrompt={showSaveSettingsPrompt}
-          settingData={deprecatedSettingData}
-          handleBlur={handleBlur}
-          isEditable={false}
-          saveSettingsPrompt
-        />
-      </IntlProvider>,
-    );
-    const deprecatedStatus = getByText(messages.deprecated.defaultMessage);
-    expect(deprecatedStatus).toBeInTheDocument();
+    renderComponent({
+      settingData: { ...settingData, deprecated: true },
+      isEditableState: false,
+      saveSettingsPrompt: true,
+    });
+    expect(screen.getByText(messages.deprecated.defaultMessage)).toBeInTheDocument();
   });
+
   it('does not display the deprecated status when the setting is not deprecated', () => {
-    const { queryByText } = render(<RootWrapper />);
-    expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
+    renderComponent();
+    expect(screen.queryByText(messages.deprecated.defaultMessage)).toBeNull();
   });
+
   it('calls setEdited on blur', async () => {
     const user = userEvent.setup();
-    const { getByLabelText } = render(<RootWrapper />);
-    const inputBox = getByLabelText(/Setting Name/i);
+    renderComponent();
+    const inputBox = screen.getByLabelText(/Setting Name/i);
     fireEvent.focus(inputBox);
     await user.clear(inputBox);
     await user.type(inputBox, '3, 2, 1');
@@ -91,4 +89,9 @@ describe('<SettingCard />', () => {
       expect(handleBlur).toHaveBeenCalled();
     });
   });
+
+  it('disables the setting input when `disabled` is true', () => {
+    renderComponent({ disabled: true });
+    expect(screen.getByLabelText(/Setting Name/i)).toBeDisabled();
+  });
 });
diff --git a/src/advanced-settings/setting-card/SettingCard.tsx b/src/advanced-settings/setting-card/SettingCard.tsx
index e7dedd7df4..3d93cde881 100644
--- a/src/advanced-settings/setting-card/SettingCard.tsx
+++ b/src/advanced-settings/setting-card/SettingCard.tsx
@@ -9,13 +9,29 @@ import {
   useToggle,
 } from '@openedx/paragon';
 import { InfoOutline, Warning } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import messages from './messages';
 
+export interface SettingCardProps {
+  name: string;
+  settingData: {
+    deprecated?: boolean;
+    help?: string;
+    displayName?: string;
+    value?: unknown;
+  };
+  handleBlur: () => void;
+  setEdited: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+  showSaveSettingsPrompt: (show: boolean) => void;
+  saveSettingsPrompt: boolean;
+  isEditableState: boolean;
+  setIsEditableState: (isEditable: boolean) => void;
+  disabled?: boolean;
+}
+
 const SettingCard = ({
   name,
   settingData,
@@ -25,7 +41,8 @@ const SettingCard = ({
   saveSettingsPrompt,
   isEditableState,
   setIsEditableState,
-}) => {
+  disabled = false,
+}: SettingCardProps) => {
   const intl = useIntl();
   const { deprecated, help, displayName } = settingData;
   const initialValue = JSON.stringify(settingData.value, null, 4);
@@ -83,7 +100,7 @@ const SettingCard = ({
                   <div
                     className="p-2 x-small rounded modal-popup-content"
                     // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: help }}
+                    dangerouslySetInnerHTML={{ __html: help ?? '' }}
                   />
                 </ModalPopup>
                 <ActionRow.Spacer />
@@ -99,6 +116,7 @@ const SettingCard = ({
                 onChange={handleSettingChange}
                 aria-label={displayName}
                 onBlur={handleCardBlur}
+                disabled={disabled}
               />
             </Form.Group>
           </Card.Section>
@@ -113,26 +131,4 @@ const SettingCard = ({
   );
 };
 
-SettingCard.propTypes = {
-  settingData: PropTypes.shape({
-    deprecated: PropTypes.bool,
-    help: PropTypes.string,
-    displayName: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.bool,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.array,
-    ]),
-  }).isRequired,
-  setEdited: PropTypes.func.isRequired,
-  showSaveSettingsPrompt: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  handleBlur: PropTypes.func.isRequired,
-  saveSettingsPrompt: PropTypes.bool.isRequired,
-  isEditableState: PropTypes.bool.isRequired,
-  setIsEditableState: PropTypes.func.isRequired,
-};
-
 export default SettingCard;
diff --git a/src/authz/constants.ts b/src/authz/constants.ts
index 028a395c3d..f1b0db0b80 100644
--- a/src/authz/constants.ts
+++ b/src/authz/constants.ts
@@ -17,8 +17,11 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 
 export const COURSE_PERMISSIONS = {
   VIEW_COURSE: 'courses.view_course',
+  CREATE_COURSE: 'courses.create_course',
   EDIT_COURSE_CONTENT: 'courses.edit_course_content',
+  PUBLISH_COURSE_CONTENT: 'courses.publish_course_content',
 
+  VIEW_ADVANCED_SETTINGS: 'courses.view_advanced_settings',
   MANAGE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
 
   VIEW_GRADING_SETTINGS: 'courses.view_grading_settings',
@@ -41,7 +44,10 @@ export const COURSE_PERMISSIONS = {
 
   VIEW_COURSE_TEAM: 'courses.view_course_team',
 
+  VIEW_GROUP_CONFIGURATIONS: 'courses.view_group_configurations',
   MANAGE_GROUP_CONFIGURATIONS: 'courses.manage_group_configurations',
+
+  VIEW_CERTIFICATES: 'courses.view_certificates',
   MANAGE_CERTIFICATES: 'courses.manage_certificates',
 
   VIEW_CHECKLISTS: 'courses.view_checklists',
diff --git a/src/authz/permissionHelpers.test.ts b/src/authz/permissionHelpers.test.ts
index 7798b9d5ca..45b00e370f 100644
--- a/src/authz/permissionHelpers.test.ts
+++ b/src/authz/permissionHelpers.test.ts
@@ -93,17 +93,26 @@ describe('permissionHelpers', () => {
     });
 
     describe('getAdvancedSettingsPermissions', () => {
-      it('returns MANAGE permission with the correct action and scope', () => {
+      it('returns VIEW and MANAGE permissions with the correct actions and scope', () => {
         const result = getAdvancedSettingsPermissions(courseId);
 
-        expect(result.canManageAdvancedSettings.action).toBe(COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS);
-        expect(result.canManageAdvancedSettings.scope).toBe(courseId);
+        expect(result).toEqual({
+          canViewAdvancedSettings: {
+            action: COURSE_PERMISSIONS.VIEW_ADVANCED_SETTINGS,
+            scope: courseId,
+          },
+          canManageAdvancedSettings: {
+            action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
+            scope: courseId,
+          },
+        });
       });
 
       it('uses the provided courseId as scope', () => {
         const otherId = 'course-v1:another+test+run';
         const result = getAdvancedSettingsPermissions(otherId);
 
+        expect(result.canViewAdvancedSettings.scope).toBe(otherId);
         expect(result.canManageAdvancedSettings.scope).toBe(otherId);
       });
     });
@@ -164,6 +173,10 @@ describe('permissionHelpers', () => {
           action: COURSE_PERMISSIONS.EDIT_COURSE_CONTENT,
           scope: courseId,
         },
+        canPublishCourseContent: {
+          action: COURSE_PERMISSIONS.PUBLISH_COURSE_CONTENT,
+          scope: courseId,
+        },
       });
     });
   });
@@ -195,10 +208,14 @@ describe('permissionHelpers', () => {
   });
 
   describe('getGroupConfigurationsPermissions', () => {
-    it('returns MANAGE_GROUP_CONFIGURATIONS permission with the correct action and scope', () => {
+    it('returns VIEW_GROUP_CONFIGURATIONS and MANAGE_GROUP_CONFIGURATIONS permissions with the correct actions and scope', () => {
       const result = getGroupConfigurationsPermissions(courseId);
 
       expect(result).toEqual({
+        canViewGroupConfigurations: {
+          action: COURSE_PERMISSIONS.VIEW_GROUP_CONFIGURATIONS,
+          scope: courseId,
+        },
         canManageGroupConfigurations: {
           action: COURSE_PERMISSIONS.MANAGE_GROUP_CONFIGURATIONS,
           scope: courseId,
@@ -208,10 +225,14 @@ describe('permissionHelpers', () => {
   });
 
   describe('getCertificatesPermissions', () => {
-    it('returns MANAGE_CERTIFICATES permission with the correct action and scope', () => {
+    it('returns VIEW and MANAGE permissions with the correct actions and scope', () => {
       const result = getCertificatesPermissions(courseId);
 
       expect(result).toEqual({
+        canViewCertificates: {
+          action: COURSE_PERMISSIONS.VIEW_CERTIFICATES,
+          scope: courseId,
+        },
         canManageCertificates: {
           action: COURSE_PERMISSIONS.MANAGE_CERTIFICATES,
           scope: courseId,
diff --git a/src/authz/permissionHelpers.ts b/src/authz/permissionHelpers.ts
index 3520e80f10..1a1cb1878a 100644
--- a/src/authz/permissionHelpers.ts
+++ b/src/authz/permissionHelpers.ts
@@ -61,6 +61,10 @@ export const getPagesAndResourcesPermissions = (courseId: string) => ({
 });
 
 export const getAdvancedSettingsPermissions = (courseId: string) => ({
+  canViewAdvancedSettings: {
+    action: COURSE_PERMISSIONS.VIEW_ADVANCED_SETTINGS,
+    scope: courseId,
+  },
   canManageAdvancedSettings: {
     action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
     scope: courseId,
@@ -75,6 +79,10 @@ export const getCourseOutlinePermissions = (courseId: string) => ({
     action: COURSE_PERMISSIONS.EDIT_COURSE_CONTENT,
     scope: courseId,
   },
+  canPublishCourseContent: {
+    action: COURSE_PERMISSIONS.PUBLISH_COURSE_CONTENT,
+    scope: courseId,
+  },
 });
 
 export const getLibraryUpdatesPermissions = (courseId: string) => ({
@@ -92,6 +100,10 @@ export const getCourseTeamPermissions = (courseId: string) => ({
 });
 
 export const getGroupConfigurationsPermissions = (courseId: string) => ({
+  canViewGroupConfigurations: {
+    action: COURSE_PERMISSIONS.VIEW_GROUP_CONFIGURATIONS,
+    scope: courseId,
+  },
   canManageGroupConfigurations: {
     action: COURSE_PERMISSIONS.MANAGE_GROUP_CONFIGURATIONS,
     scope: courseId,
@@ -99,6 +111,10 @@ export const getGroupConfigurationsPermissions = (courseId: string) => ({
 });
 
 export const getCertificatesPermissions = (courseId: string) => ({
+  canViewCertificates: {
+    action: COURSE_PERMISSIONS.VIEW_CERTIFICATES,
+    scope: courseId,
+  },
   canManageCertificates: {
     action: COURSE_PERMISSIONS.MANAGE_CERTIFICATES,
     scope: courseId,
diff --git a/src/certificates/Certificates.test.tsx b/src/certificates/Certificates.test.tsx
index 5c7a622635..f4ac8dd7d0 100644
--- a/src/certificates/Certificates.test.tsx
+++ b/src/certificates/Certificates.test.tsx
@@ -18,6 +18,7 @@ const mockPermissions = (overrides = {}) =>
   jest.mocked(useCourseUserPermissions).mockReturnValue({
     isLoading: false,
     isAuthzEnabled: true,
+    canViewCertificates: true,
     canManageCertificates: true,
     ...overrides,
   } as ReturnType<typeof useCourseUserPermissions>);
@@ -38,7 +39,7 @@ describe('Certificates', () => {
   });
 
   it('shows PermissionDeniedAlert when user lacks manage certificates permission', async () => {
-    mockPermissions({ canManageCertificates: false });
+    mockPermissions({ canViewCertificates: false });
     axiosMock
       .onGet(getCertificatesApiUrl(courseId))
       .reply(200, certificatesDataMock);
@@ -47,6 +48,16 @@ describe('Certificates', () => {
     expect(screen.queryByText(messages.withoutModesText.defaultMessage)).not.toBeInTheDocument();
   });
 
+  it('renders content in view-only mode when user can view but not manage', async () => {
+    mockPermissions({ canViewCertificates: true, canManageCertificates: false });
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, certificatesDataMock);
+    renderComponent();
+    expect(await screen.findByTestId('certificates-list')).toBeInTheDocument();
+    expect(screen.getByTestId('viewOnlyPermissionsAlert')).toBeInTheDocument();
+  });
+
   it('renders WithoutModes when there are certificates but no certificate modes', async () => {
     const noModesMock = {
       ...certificatesDataMock,
diff --git a/src/certificates/Certificates.tsx b/src/certificates/Certificates.tsx
index 1d5a16642a..a8ddef281a 100644
--- a/src/certificates/Certificates.tsx
+++ b/src/certificates/Certificates.tsx
@@ -1,8 +1,5 @@
 import { Helmet } from 'react-helmet';
 
-import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useCourseUserPermissions } from '@src/authz/hooks';
-import { getCertificatesPermissions } from '@src/authz/permissionHelpers';
 import PermissionDeniedAlert from '@src/generic/PermissionDeniedAlert';
 import Placeholder from '../editors/Placeholder';
 import Loading from '../generic/Loading';
@@ -14,6 +11,7 @@ import CertificateCreateForm from './certificate-create-form/CertificateCreateFo
 import CertificateEditForm from './certificate-edit-form/CertificateEditForm';
 import { MODE_STATES } from './data/constants';
 import MainLayout from './layout/MainLayout';
+import { useCertificatesContext } from './context';
 
 const MODE_COMPONENTS = {
   [MODE_STATES.noModes]: CertificateWithoutModes,
@@ -24,7 +22,6 @@ const MODE_COMPONENTS = {
 };
 
 const Certificates = () => {
-  const { courseId } = useCourseAuthoringContext();
   const {
     certificates,
     componentMode,
@@ -34,12 +31,9 @@ const Certificates = () => {
     hasCertificateModes,
   } = useCertificatesData();
 
-  const {
-    isLoading: isLoadingUserPermissions,
-    canManageCertificates,
-  } = useCourseUserPermissions(courseId, getCertificatesPermissions(courseId));
+  const { canViewCertificates } = useCertificatesContext();
 
-  if (!isLoadingUserPermissions && !canManageCertificates) {
+  if (!canViewCertificates) {
     return <PermissionDeniedAlert />;
   }
 
diff --git a/src/certificates/certificate-details/CertificateDetails.test.tsx b/src/certificates/certificate-details/CertificateDetails.test.tsx
index 281d4007b4..70cc773332 100644
--- a/src/certificates/certificate-details/CertificateDetails.test.tsx
+++ b/src/certificates/certificate-details/CertificateDetails.test.tsx
@@ -8,6 +8,8 @@ import {
 } from '@src/testUtils';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { CertificatesProvider } from '@src/certificates/context';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 
 import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
 import { certificatesDataMock } from '../__mocks__';
@@ -25,6 +27,19 @@ const defaultProps: CertificateDetialsProps = {
   detailsCourseNumber: certificatesDataMock.courseNumber,
 };
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn(),
+}));
+
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewCertificates: true,
+    canManageCertificates: true,
+    ...overrides,
+  } as ReturnType<typeof useCourseUserPermissions>);
+
 const renderComponent = (props = defaultProps) =>
   render(
     <CourseAuthoringProvider courseId={courseId}>
@@ -37,6 +52,8 @@ const renderComponent = (props = defaultProps) =>
 describe('CertificateDetails', () => {
   beforeEach(() => {
     ({ axiosMock } = initializeMocks());
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mockPermissions();
     axiosMock
       .onGet(getCertificatesApiUrl(courseId))
       .reply(200, certificatesDataMock);
@@ -88,4 +105,15 @@ describe('CertificateDetails', () => {
     await screen.findByText(messages.detailsSectionTitle.defaultMessage);
     expect(screen.getByText(courseTitleOverride)).toBeInTheDocument();
   });
+
+  it('hides edit and delete buttons in view-only mode', async () => {
+    mockPermissions({ canManageCertificates: false });
+    renderComponent();
+
+    await screen.findByText(messages.detailsSectionTitle.defaultMessage);
+    expect(screen.queryByRole('button', { name: commonMessages.editTooltip.defaultMessage })).not
+      .toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: commonMessages.deleteTooltip.defaultMessage })).not
+      .toBeInTheDocument();
+  });
 });
diff --git a/src/certificates/certificate-details/CertificateDetails.tsx b/src/certificates/certificate-details/CertificateDetails.tsx
index 5a68dbdb83..03cd9e95d2 100644
--- a/src/certificates/certificate-details/CertificateDetails.tsx
+++ b/src/certificates/certificate-details/CertificateDetails.tsx
@@ -14,6 +14,7 @@ import ModalNotification from '../../generic/modal-notification';
 import commonMessages from '../messages';
 import messages from './messages';
 import useCertificateDetails from './hooks/useCertificateDetails';
+import { useCertificatesContext } from '@src/certificates/context';
 
 export interface CertificateDetialsProps {
   certificateId: number;
@@ -31,6 +32,7 @@ const CertificateDetails = ({
   courseNumberOverride,
 }: CertificateDetialsProps) => {
   const intl = useIntl();
+  const { canManageCertificates } = useCertificatesContext();
   const {
     isConfirmOpen,
     confirmOpen,
@@ -48,24 +50,26 @@ const CertificateDetails = ({
       title={intl.formatMessage(messages.detailsSectionTitle)}
       className="certificate-details"
       data-testid="certificate-details"
-      actions={
-        <Stack direction="horizontal" gap={2}>
-          <IconButtonWithTooltip
-            src={EditOutlineIcon}
-            iconAs={Icon}
-            tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
-            alt={intl.formatMessage(commonMessages.editTooltip)}
-            onClick={isCertificateActive ? editModalOpen : handleEditAll}
-          />
-          <IconButtonWithTooltip
-            src={DeleteOutlineIcon}
-            iconAs={Icon}
-            tooltipContent={<div>{intl.formatMessage(commonMessages.deleteTooltip)}</div>}
-            alt={intl.formatMessage(commonMessages.deleteTooltip)}
-            onClick={confirmOpen}
-          />
-        </Stack>
-      }
+      actions={canManageCertificates ?
+        (
+          <Stack direction="horizontal" gap={2}>
+            <IconButtonWithTooltip
+              src={EditOutlineIcon}
+              iconAs={Icon}
+              tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
+              alt={intl.formatMessage(commonMessages.editTooltip)}
+              onClick={isCertificateActive ? editModalOpen : handleEditAll}
+            />
+            <IconButtonWithTooltip
+              src={DeleteOutlineIcon}
+              iconAs={Icon}
+              tooltipContent={<div>{intl.formatMessage(commonMessages.deleteTooltip)}</div>}
+              alt={intl.formatMessage(commonMessages.deleteTooltip)}
+              onClick={confirmOpen}
+            />
+          </Stack>
+        ) :
+        undefined}
     >
       <Stack>
         <Stack direction="horizontal" gap={1.5} className="certificate-details__info">
diff --git a/src/certificates/certificate-signatories/CertificateSignatories.test.tsx b/src/certificates/certificate-signatories/CertificateSignatories.test.tsx
index 6fab2b4a26..965769380b 100644
--- a/src/certificates/certificate-signatories/CertificateSignatories.test.tsx
+++ b/src/certificates/certificate-signatories/CertificateSignatories.test.tsx
@@ -1,4 +1,7 @@
 import { initializeMocks, render, screen, within, userEvent } from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { CertificatesProvider } from '@src/certificates/context';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 import { signatoriesMock } from '../__mocks__';
 import commonMessages from '../messages';
@@ -20,7 +23,11 @@ const mockArrayHelpers = {
 
 const renderComponent = (props) =>
   render(
-    <CertificateSignatories {...props} />,
+    <CourseAuthoringProvider courseId="course-123">
+      <CertificatesProvider>
+        <CertificateSignatories {...props} />
+      </CertificatesProvider>
+    </CourseAuthoringProvider>,
   );
 
 const defaultProps = {
@@ -38,6 +45,7 @@ const defaultProps = {
 describe('CertificateSignatories', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
 
     mockUseEditSignatory.mockReturnValue({
       toggleEditSignatory: jest.fn(),
@@ -72,6 +80,7 @@ describe('CertificateSignatories', () => {
 describe('CertificateSignatories - real useEditSignatory', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
 
     // Use the real implementation so handleDeleteSignatory actually calls arrayHelpers.remove
     const realUseEditSignatory = jest.requireActual('./hooks/useEditSignatory').default;
diff --git a/src/certificates/certificate-signatories/signatory/Signatory.test.tsx b/src/certificates/certificate-signatories/signatory/Signatory.test.tsx
index 9df5c3e4d4..1264f03aa4 100644
--- a/src/certificates/certificate-signatories/signatory/Signatory.test.tsx
+++ b/src/certificates/certificate-signatories/signatory/Signatory.test.tsx
@@ -1,4 +1,8 @@
 import { initializeMocks, render, screen, userEvent } from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { CertificatesProvider } from '@src/certificates/context';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 
 import { signatoriesMock } from '../../__mocks__';
 import commonMessages from '../../messages';
@@ -7,9 +11,26 @@ import Signatory from './Signatory';
 
 const mockHandleEdit = jest.fn();
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn(),
+}));
+
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewCertificates: true,
+    canManageCertificates: true,
+    ...overrides,
+  } as ReturnType<typeof useCourseUserPermissions>);
+
 const renderSignatory = (props) =>
   render(
-    <Signatory {...props} />,
+    <CourseAuthoringProvider courseId="course-123">
+      <CertificatesProvider>
+        <Signatory {...props} />
+      </CertificatesProvider>
+    </CourseAuthoringProvider>,
   );
 
 const defaultProps = { ...signatoriesMock[0], handleEdit: mockHandleEdit, index: 0 };
@@ -17,6 +38,8 @@ const defaultProps = { ...signatoriesMock[0], handleEdit: mockHandleEdit, index:
 describe('Signatory Component', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mockPermissions();
   });
 
   it('renders signatory data in view mode', () => {
@@ -45,4 +68,12 @@ describe('Signatory Component', () => {
 
     expect(mockHandleEdit).toHaveBeenCalled();
   });
+
+  it('hides edit button in view-only mode', () => {
+    mockPermissions({ canManageCertificates: false });
+    renderSignatory(defaultProps);
+
+    expect(screen.queryByRole('button', { name: commonMessages.editTooltip.defaultMessage })).not
+      .toBeInTheDocument();
+  });
 });
diff --git a/src/certificates/certificate-signatories/signatory/Signatory.tsx b/src/certificates/certificate-signatories/signatory/Signatory.tsx
index 7a26dd7bed..c98e363b1b 100644
--- a/src/certificates/certificate-signatories/signatory/Signatory.tsx
+++ b/src/certificates/certificate-signatories/signatory/Signatory.tsx
@@ -12,6 +12,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import commonMessages from '../../messages';
 import messages from '../messages';
+import { useCertificatesContext } from '@src/certificates/context';
 
 interface SignatoryProps {
   name: string;
@@ -31,6 +32,7 @@ const Signatory = ({
   handleEdit,
 }: SignatoryProps) => {
   const intl = useIntl();
+  const { canManageCertificates } = useCertificatesContext();
 
   return (
     <div className="bg-light-200 p-2.5 signatory" data-testid="signatory">
@@ -49,14 +51,16 @@ const Signatory = ({
         </Stack>
       </Stack>
 
-      <IconButtonWithTooltip
-        className="signatory__action-button"
-        src={EditOutlineIcon}
-        iconAs={Icon}
-        alt={intl.formatMessage(commonMessages.editTooltip)}
-        tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
-        onClick={handleEdit}
-      />
+      {canManageCertificates && (
+        <IconButtonWithTooltip
+          className="signatory__action-button"
+          src={EditOutlineIcon}
+          iconAs={Icon}
+          alt={intl.formatMessage(commonMessages.editTooltip)}
+          tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
+          onClick={handleEdit}
+        />
+      )}
       <div className="signatory__image-container">
         {signatureImagePath && (
           <Image
diff --git a/src/certificates/context.tsx b/src/certificates/context.tsx
index ee302e8233..990a4547ee 100644
--- a/src/certificates/context.tsx
+++ b/src/certificates/context.tsx
@@ -1,6 +1,8 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 import { MODE_STATES } from './data/constants';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getCertificatesPermissions } from '@src/authz/permissionHelpers';
 import {
   useCreateCertificate,
   useDeleteCertificate,
@@ -16,6 +18,8 @@ export type CertificatesContextData = {
   setComponentMode: (mode: ModeState) => void;
   savingIsSuccess: boolean;
   savingErrorMessage?: string;
+  canViewCertificates: boolean;
+  canManageCertificates: boolean;
   activationStatusMutation: UseMutationResult;
   updateCertificateMutation: UseMutationResult;
   deleteCertificateMutation: UseMutationResult;
@@ -30,6 +34,12 @@ const CertificatesContext = createContext<CertificatesContextData | undefined>(u
 export const CertificatesProvider = ({ children }) => {
   const { courseId } = useCourseAuthoringContext();
   const [componentMode, setComponentMode] = useState<ModeState>(MODE_STATES.noModes);
+
+  const {
+    canViewCertificates,
+    canManageCertificates,
+  } = useCourseUserPermissions(courseId, getCertificatesPermissions(courseId));
+
   const activationStatusMutation = useUpdateCertificateActiveStatus(courseId);
   const updateCertificateMutation = useUpdateCertificate(courseId);
   const deleteCertificateMutation = useDeleteCertificate(courseId);
@@ -49,6 +59,8 @@ export const CertificatesProvider = ({ children }) => {
     const contextValue = {
       componentMode,
       setComponentMode,
+      canViewCertificates,
+      canManageCertificates,
       activationStatusMutation,
       updateCertificateMutation,
       deleteCertificateMutation,
@@ -61,6 +73,8 @@ export const CertificatesProvider = ({ children }) => {
   }, [
     componentMode,
     setComponentMode,
+    canViewCertificates,
+    canManageCertificates,
     activationStatusMutation,
     updateCertificateMutation,
   ]);
diff --git a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.tsx b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.tsx
index e8a332b0f8..dd5f2b006a 100644
--- a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.tsx
+++ b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.tsx
@@ -5,6 +5,8 @@ import {
   userEvent,
 } from '@src/testUtils';
 import { CertificatesProvider, useCertificatesContext } from '@src/certificates/context';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { MODE_STATES } from '../data/constants';
 import messages from '../messages';
 import EmptyCertificatesWithModes from './EmptyCertificatesWithModes';
@@ -15,6 +17,19 @@ const ComponentModeDisplay = () => {
   return <div data-testid="component-mode">{componentMode}</div>;
 };
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn(),
+}));
+
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewCertificates: true,
+    canManageCertificates: true,
+    ...overrides,
+  } as ReturnType<typeof useCourseUserPermissions>);
+
 const renderComponent = () =>
   render(
     <CourseAuthoringProvider courseId="1">
@@ -28,6 +43,8 @@ const renderComponent = () =>
 describe('EmptyCertificatesWithModes', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mockPermissions();
   });
 
   it('renders correctly', () => {
@@ -47,4 +64,13 @@ describe('EmptyCertificatesWithModes', () => {
 
     expect(screen.getByTestId('component-mode')).toHaveTextContent(MODE_STATES.create);
   });
+
+  it('hides add button in view-only mode', () => {
+    mockPermissions({ canManageCertificates: false });
+    renderComponent();
+
+    expect(screen.getByText(messages.noCertificatesText.defaultMessage)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.setupCertificateBtn.defaultMessage })).not
+      .toBeInTheDocument();
+  });
 });
diff --git a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.tsx b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.tsx
index e748ee25df..f238d542b7 100644
--- a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.tsx
+++ b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.tsx
@@ -8,7 +8,7 @@ import { useCertificatesContext } from '../context';
 
 const EmptyCertificatesWithModes = () => {
   const intl = useIntl();
-  const { setComponentMode } = useCertificatesContext();
+  const { setComponentMode, canManageCertificates } = useCertificatesContext();
   const handleCreateMode = () => {
     setComponentMode(MODE_STATES.create);
   };
@@ -19,12 +19,14 @@ const EmptyCertificatesWithModes = () => {
         <ActionRow>
           <span className="small">{intl.formatMessage(messages.noCertificatesText)}</span>
           <ActionRow.Spacer />
-          <Button
-            iconBefore={AddIcon}
-            onClick={handleCreateMode}
-          >
-            {intl.formatMessage(messages.setupCertificateBtn)}
-          </Button>
+          {canManageCertificates && (
+            <Button
+              iconBefore={AddIcon}
+              onClick={handleCreateMode}
+            >
+              {intl.formatMessage(messages.setupCertificateBtn)}
+            </Button>
+          )}
         </ActionRow>
       </Card.Section>
     </Card>
diff --git a/src/certificates/layout/MainLayout.tsx b/src/certificates/layout/MainLayout.tsx
index a6c4563075..227fae49e9 100644
--- a/src/certificates/layout/MainLayout.tsx
+++ b/src/certificates/layout/MainLayout.tsx
@@ -4,6 +4,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { SavingErrorAlert } from '@src/generic/saving-error-alert';
 import SubHeader from '@src/generic/sub-header/SubHeader';
+import ViewOnlyPermissionsAlert from '@src/generic/ViewOnlyPermissionsAlert';
 import messages from '../messages';
 import CertificatesSidebar from './certificates-sidebar/CertificatesSidebar';
 import HeaderButtons from './header-buttons/HeaderButtons';
@@ -20,6 +21,7 @@ const MainLayout = ({ showHeaderButtons = false, children }: MainLayoutProps) =>
   const {
     savingIsSuccess,
     savingErrorMessage,
+    canManageCertificates,
   } = useCertificatesContext();
 
   useEffect(() => {
@@ -39,6 +41,7 @@ const MainLayout = ({ showHeaderButtons = false, children }: MainLayoutProps) =>
           headerActions={showHeaderButtons ?
             <HeaderButtons /> :
             null}
+          banner={!canManageCertificates ? <ViewOnlyPermissionsAlert className="mb-3" /> : null}
         />
         <section>
           <Layout
diff --git a/src/certificates/layout/header-buttons/HeaderButtons.test.tsx b/src/certificates/layout/header-buttons/HeaderButtons.test.tsx
index 78382ecc52..1b10636c07 100644
--- a/src/certificates/layout/header-buttons/HeaderButtons.test.tsx
+++ b/src/certificates/layout/header-buttons/HeaderButtons.test.tsx
@@ -1,4 +1,5 @@
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 
 import {
   render,
@@ -7,6 +8,7 @@ import {
   screen,
   userEvent,
 } from '@src/testUtils';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { getCertificatesApiUrl, getUpdateCertificateActiveStatusApiUrl } from '../../data/api';
 import { certificatesDataMock } from '../../__mocks__';
 import messages from '../../messages';
@@ -16,6 +18,19 @@ import { CertificatesProvider } from '@src/certificates/context';
 let axiosMock;
 const courseId = 'course-123';
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn(),
+}));
+
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewCertificates: true,
+    canManageCertificates: true,
+    ...overrides,
+  } as ReturnType<typeof useCourseUserPermissions>);
+
 const renderComponent = () =>
   render(
     <CourseAuthoringProvider courseId={courseId}>
@@ -29,6 +44,8 @@ describe('HeaderButtons Component', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mockPermissions();
     axiosMock
       .onGet(getCertificatesApiUrl(courseId))
       .reply(200, certificatesDataMock);
@@ -106,4 +123,16 @@ describe('HeaderButtons Component', () => {
     expect(screen.queryByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).not
       .toBeInTheDocument();
   });
+
+  it('hides activate button in view-only mode', async () => {
+    mockPermissions({ canManageCertificates: false });
+    renderComponent();
+
+    await waitFor(() => screen.getByRole('link', { name: messages.headingActionsPreview.defaultMessage }));
+
+    expect(screen.queryByRole('button', { name: messages.headingActionsActivate.defaultMessage })).not
+      .toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).not
+      .toBeInTheDocument();
+  });
 });
diff --git a/src/certificates/layout/header-buttons/HeaderButtons.tsx b/src/certificates/layout/header-buttons/HeaderButtons.tsx
index 6dd15b15ad..2930486444 100644
--- a/src/certificates/layout/header-buttons/HeaderButtons.tsx
+++ b/src/certificates/layout/header-buttons/HeaderButtons.tsx
@@ -8,16 +8,18 @@ import {
 
 import messages from '../../messages';
 import useHeaderButtons from './hooks/useHeaderButtons';
+import { useCertificatesContext } from '@src/certificates/context';
 
 const HeaderButtons = () => {
   const intl = useIntl();
+  const { canManageCertificates } = useCertificatesContext();
   const {
     previewUrl,
     courseModes,
     dropdowmItem,
-    isCertificateActive,
     setDropdowmItem,
     handleActivationStatus,
+    isCertificateActive,
   } = useHeaderButtons();
 
   return (
@@ -34,14 +36,16 @@ const HeaderButtons = () => {
       >
         {intl.formatMessage(messages.headingActionsPreview)}
       </Button>
-      <Button
-        variant="outline-primary"
-        onClick={handleActivationStatus}
-      >
-        {isCertificateActive
-          ? intl.formatMessage(messages.headingActionsDeactivate)
-          : intl.formatMessage(messages.headingActionsActivate)}
-      </Button>
+      {canManageCertificates && (
+        <Button
+          variant="outline-primary"
+          onClick={handleActivationStatus}
+        >
+          {isCertificateActive
+            ? intl.formatMessage(messages.headingActionsDeactivate)
+            : intl.formatMessage(messages.headingActionsActivate)}
+        </Button>
+      )}
     </>
   );
 };
diff --git a/src/container-comparison/CompareContainersWidget.test.tsx b/src/container-comparison/CompareContainersWidget.test.tsx
index 347bd3aa72..0ac83cde0e 100644
--- a/src/container-comparison/CompareContainersWidget.test.tsx
+++ b/src/container-comparison/CompareContainersWidget.test.tsx
@@ -16,7 +16,7 @@ describe('CompareContainersWidget', () => {
   });
 
   test('renders the component with a title', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
+    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId, mockGetCourseContainerChildren.sectionId);
     axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
     render(
       <CompareContainersWidget
@@ -57,11 +57,14 @@ describe('CompareContainersWidget', () => {
 
   test('calls onRowClick when a row is clicked and updates diff view', async () => {
     // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, {
-      publishedDisplayName: 'Test Title',
-    });
     axiosMock.onGet(
-      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
+      getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId, mockGetCourseContainerChildren.sectionId),
+    ).reply(200, { publishedDisplayName: 'Test Title' });
+    axiosMock.onGet(
+      getLibraryContainerApiUrl(
+        'lct:org1:Demo_course_generated:subsection:subsection-0',
+        mockGetCourseContainerChildren.subsectionId,
+      ),
     ).reply(200, { publishedDisplayName: 'subsection block 0' });
 
     const user = userEvent.setup();
@@ -97,11 +100,14 @@ describe('CompareContainersWidget', () => {
 
   test('should show removed container diff state', async () => {
     // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, {
-      publishedDisplayName: 'Test Title',
-    });
     axiosMock.onGet(
-      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
+      getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId, mockGetCourseContainerChildren.sectionId),
+    ).reply(200, { publishedDisplayName: 'Test Title' });
+    axiosMock.onGet(
+      getLibraryContainerApiUrl(
+        'lct:org1:Demo_course_generated:subsection:subsection-0',
+        mockGetCourseContainerChildren.subsectionId,
+      ),
     ).reply(200, { publishedDisplayName: 'subsection block 0' });
 
     const user = userEvent.setup();
@@ -124,9 +130,12 @@ describe('CompareContainersWidget', () => {
 
   test('should show new added container diff state', async () => {
     // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, {
-      publishedDisplayName: 'Test Title',
-    });
+    axiosMock.onGet(
+      getLibraryContainerApiUrl(
+        mockGetContainerMetadata.sectionId,
+        'block-v1:UNIX+UX1+2025_T3+type@section+block@0-new',
+      ),
+    ).reply(200, { publishedDisplayName: 'Test Title' });
     axiosMock.onGet(
       getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
     ).reply(200, { publishedDisplayName: 'subsection block 0' });
@@ -145,7 +154,10 @@ describe('CompareContainersWidget', () => {
   });
 
   test('should show alert if the only change is a single text component with local overrides', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
+    const url = getLibraryContainerApiUrl(
+      mockGetContainerMetadata.sectionId,
+      mockGetCourseContainerChildren.sectionShowsAlertSingleText,
+    );
     axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
     render(
       <CompareContainersWidget
@@ -163,7 +175,10 @@ describe('CompareContainersWidget', () => {
   });
 
   test('should show alert if the only changes is multiple text components with local overrides', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
+    const url = getLibraryContainerApiUrl(
+      mockGetContainerMetadata.sectionId,
+      mockGetCourseContainerChildren.sectionShowsAlertMultipleText,
+    );
     axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
     render(
       <CompareContainersWidget
diff --git a/src/container-comparison/CompareContainersWidget.tsx b/src/container-comparison/CompareContainersWidget.tsx
index d964a259b6..e1639438b4 100644
--- a/src/container-comparison/CompareContainersWidget.tsx
+++ b/src/container-comparison/CompareContainersWidget.tsx
@@ -71,12 +71,16 @@ const CompareContainersWidgetInner = ({
     data: libData,
     isError: isLibError,
     error: libError,
-  } = useContainerChildren<Container | LibraryBlockMetadata>(state === 'removed' ? undefined : upstreamBlockId, true);
+  } = useContainerChildren<Container | LibraryBlockMetadata>(
+    state === 'removed' ? undefined : upstreamBlockId,
+    true,
+    downstreamBlockId,
+  );
   const {
     data: containerData,
     isError: isContainerTitleError,
     error: containerTitleError,
-  } = useContainer(upstreamBlockId);
+  } = useContainer(upstreamBlockId, downstreamBlockId);
 
   const result = useMemo(() => {
     if ((!data || !libData) && !['added', 'removed'].includes(state || '')) {
diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index bc97222ff7..55e28655e0 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -9,6 +9,7 @@ import { getClipboardUrl } from '@src/generic/data/api';
 import { ContainerType } from '@src/generic/key-utils';
 import { getDownstreamApiUrl } from '@src/generic/unlink-modal/data/api';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import {
   act,
   fireEvent,
@@ -552,6 +553,11 @@ const renderComponent = () =>
 describe('<CourseOutline />', () => {
   beforeEach(async () => {
     const mocks = initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mocks.validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
     selectedContainerId = undefined;
     // restore index mock — use reorder outline spec (section[0] has 2 subsections for configure/drag tests)
     courseOutlineIndexMock = buildTestOutline({
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 1bc151a171..6174941c6f 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -51,6 +51,8 @@ const CourseOutline = () => {
   const location = useLocation();
   const {
     courseId,
+    canEditCourseContent,
+    isLoadingPermissions,
   } = useCourseAuthoringContext();
   const {
     courseUsageKey,
@@ -94,7 +96,14 @@ const CourseOutline = () => {
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
 
   const isInternetConnectionAlertFailed = savingStatus === RequestStatus.FAILED;
-  const isReIndexShow = Boolean(reindexLink);
+  const isReIndexShow = canEditCourseContent && Boolean(reindexLink);
+
+  // The header's "+ Add" button creates course content, so gate its visibility behind the
+  // edit permission. This is scoped to the header actions and leaves the outline tree unaffected.
+  const headerCourseActions = useMemo(
+    () => ({ ...courseActions, childAddable: canEditCourseContent && courseActions.childAddable }),
+    [courseActions, canEditCourseContent],
+  );
 
   const handleAddBlock = useCreateCourseBlock(courseId);
   const pasteMutation = usePasteItem(courseId);
@@ -169,7 +178,7 @@ const CourseOutline = () => {
     }
   }, [location, courseId, courseName]);
 
-  if (isLoading) {
+  if (isLoading || isLoadingPermissions) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (
       <Row className="m-0 mt-4 justify-content-center">
@@ -249,7 +258,7 @@ const CourseOutline = () => {
                 headerNavigationsActions={headerNavigationsActions}
                 isDisabledReindexButton={isDisabledReindexButton}
                 hasSections={Boolean(sections.length)}
-                courseActions={courseActions}
+                courseActions={headerCourseActions}
                 errors={errors}
                 sections={sections}
               />
diff --git a/src/course-outline/OutlineNode.tsx b/src/course-outline/OutlineNode.tsx
index 5881792589..934b0cdf0a 100644
--- a/src/course-outline/OutlineNode.tsx
+++ b/src/course-outline/OutlineNode.tsx
@@ -105,7 +105,7 @@ const OutlineNode = ({
 
   const { activeId, overId } = useContext(DragContext);
   const { selectedContainerState, openContainerSidebar, setSelectedContainerState } = useOutlineSidebarContext();
-  const { courseId, openUnlinkModal, getUnitUrl } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, getUnitUrl, canEditCourseContent } = useCourseAuthoringContext();
   const duplicateMutation = useDuplicateItem(courseId);
   const { openPublishModal } = useCourseOutlineContext();
   const queryClient = useQueryClient();
@@ -236,7 +236,7 @@ const OutlineNode = ({
     else { onOrderChange(effectiveSection, getPossibleMoves!(index, 1)); }
   };
 
-  const isDraggable = model.isDraggable(actions, isHeaderVisible);
+  const isDraggable = canEditCourseContent && model.isDraggable(actions, isHeaderVisible);
 
   const titleComponent = depth < 2 ?
     (
@@ -335,7 +335,6 @@ const OutlineNode = ({
                 {...(depth === 2 ?
                   {
                     isVertical: true,
-                    enableCopyPasteUnits: blk.enableCopyPasteUnits ?? false,
                     onClickCopy: () => copyToClipboard(blk.id),
                     discussionEnabled: blk.discussionEnabled,
                     discussionsSettings,
@@ -348,11 +347,16 @@ const OutlineNode = ({
                 readyToSync={blk.upstreamInfo?.readyToSync}
               />
               <div
-                className={levelConfig.contentClass}
+                className={classNames(levelConfig.contentClass, {
+                  // `item-children` pulls the content 2.75rem to the right so it spans
+                  // under the drag handle column. Without the handle there is no column
+                  // to fill, and the negative margin would overflow the card.
+                  'item-children': isDraggable,
+                })}
                 data-testid={levelConfig.contentTestId}
                 onClick={(e) => onClickCard(e, false)}
               >
-                {depth === 0 && onOpenHighlightsModal && (
+                {canEditCourseContent && depth === 0 && onOpenHighlightsModal && (
                   <div className="outline-section__status mb-1">
                     <Button
                       className="p-0 bg-transparent"
@@ -381,14 +385,14 @@ const OutlineNode = ({
               })}
             >
               {children}
-              {actions.childAddable && (
+              {canEditCourseContent && actions.childAddable && (
                 <OutlineAddChildButtons
                   childType={levelConfig.containerType!}
                   parentLocator={blk.id}
                   grandParentLocator={depth === 1 ? parentSection?.id : undefined}
                 />
               )}
-              {showPaste && (
+              {canEditCourseContent && showPaste && (
                 <PasteComponent
                   className="mt-4 border-gray-500 rounded-0"
                   text={intl.formatMessage(outlineNodeMessages.pasteButton)}
diff --git a/src/course-outline/OutlineTree.tsx b/src/course-outline/OutlineTree.tsx
index 118aea4507..f7936acb70 100644
--- a/src/course-outline/OutlineTree.tsx
+++ b/src/course-outline/OutlineTree.tsx
@@ -17,6 +17,7 @@ import {
 } from './drag-helper/utils';
 import { applyReorderMove } from './drag-helper/utils';
 import { type Depth, LEVEL_NAMES } from './outline-level';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export interface OutlineTreeProps {
   sections: XBlock[];
@@ -81,6 +82,8 @@ const OutlineTree = ({
     await commitSectionReorder(sectionListIds);
   }, [sections, previewSections, commitSectionReorder]);
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const handleSubsectionOrderChange = useCallback(
     async (section: XBlock, moveDetails: SubsectionMoveDetails | null) => {
       applyReorderMove(moveDetails, section, previewSections, commitSubsectionReorder);
@@ -180,7 +183,7 @@ const OutlineTree = ({
                     )}
                   </SortableContext>
                 </DraggableList>
-                {courseActions.childAddable && (
+                {canEditCourseContent && courseActions.childAddable && (
                   <OutlineAddChildButtons
                     childType={ContainerType.Section}
                     parentLocator={courseUsageKey}
@@ -190,7 +193,7 @@ const OutlineTree = ({
             ) :
             (
               <EmptyPlaceholder>
-                {courseActions.childAddable ?
+                {canEditCourseContent && courseActions.childAddable ?
                   (
                     <OutlineAddChildButtons
                       childType={ContainerType.Section}
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index 3b8c7a22a6..d31ca5c5dd 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -8,6 +8,7 @@ import {
   waitFor,
 } from '@src/testUtils';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
 import { userEvent } from '@testing-library/user-event';
 import { renderCard, setupCardTestMocks } from '../__mocks__/testSetup';
@@ -66,6 +67,13 @@ const cardHeaderProps = {
   },
 };
 
+let validateUserPermissionsMock;
+
+const mockPermissions = (canEditCourseContent = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canEditCourseContent });
+  validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent });
+};
+
 const renderComponent = (props?: object, entry = '/') => {
   const titleComponent = (
     <TitleButton
@@ -99,7 +107,9 @@ const renderComponent = (props?: object, entry = '/') => {
 
 describe('<CardHeader />', () => {
   beforeEach(() => {
-    setupCardTestMocks();
+    const mocks = setupCardTestMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions(true);
     useUpdateCourseBlockNameMock.isPending = false;
     useUpdateCourseBlockNameMock.mutate.mockClear();
     useUpdateCourseBlockNameMock.mutateAsync.mockClear();
@@ -579,4 +589,31 @@ describe('<CardHeader />', () => {
     await act(async () => fireEvent.click(unlinkMenuItem));
     expect(onClickUnlinkMock).toHaveBeenCalled();
   });
+
+  describe('canEditCourseContent permission', () => {
+    it('renders the rename button and actions menu when canEditCourseContent is true', async () => {
+      mockPermissions(true);
+      renderComponent();
+
+      expect(await screen.findByTestId('subsection-edit-button')).toBeInTheDocument();
+      expect(await screen.findByTestId('subsection-card-header__menu')).toBeInTheDocument();
+    });
+
+    it('does not render the rename button when canEditCourseContent is false', async () => {
+      mockPermissions(false);
+      renderComponent();
+
+      expect(await screen.findByText(cardHeaderProps.title)).toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-edit-button')).not.toBeInTheDocument();
+    });
+
+    it('does not render the actions menu when canEditCourseContent is false', async () => {
+      mockPermissions(false);
+      renderComponent();
+
+      expect(await screen.findByText(cardHeaderProps.title)).toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-card-header__menu')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-card-header__menu-button')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 458817f2eb..fd2a60c384 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -6,7 +6,7 @@ import {
   useState,
 } from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { useSearchParams } from 'react-router-dom';
 import {
   Dropdown,
@@ -57,7 +57,6 @@ interface CardHeaderProps {
   namePrefix: string;
   proctoringExamConfigurationLink?: string;
   actions: XBlockActions;
-  enableCopyPasteUnits?: boolean;
   isVertical?: boolean;
   isSequential?: boolean;
   discussionEnabled?: boolean;
@@ -96,7 +95,6 @@ const CardHeader = ({
   titleComponent,
   namePrefix,
   actions,
-  enableCopyPasteUnits,
   isVertical,
   isSequential,
   proctoringExamConfigurationLink,
@@ -117,7 +115,7 @@ const CardHeader = ({
     setCurrentPageKey('align');
     onClickManageTags?.();
   }, [setCurrentPageKey, cardId]);
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, canEditCourseContent, canPublishCourseContent } = useCourseAuthoringContext();
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   // Set true by any Escape keydown handler; checked in handleEditSubmit
   // to prevent blur-after-Escape from saving the dirty titleValue.
@@ -285,15 +283,18 @@ const CardHeader = ({
           (
             <Stack direction="horizontal" gap={2}>
               {titleComponent}
-              <IconButtonWithTooltip
-                className="item-card-button-icon"
-                data-testid={`${namePrefix}-edit-button`}
-                alt={intl.formatMessage(messages.altButtonRename)}
-                tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
-                iconAs={EditIcon}
-                onClick={onEditClick}
-                disabled={editMutation.isPending}
-              />
+              {canEditCourseContent &&
+                (
+                  <IconButtonWithTooltip
+                    className="item-card-button-icon"
+                    data-testid={`${namePrefix}-edit-button`}
+                    alt={intl.formatMessage(messages.altButtonRename)}
+                    tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
+                    iconAs={EditIcon}
+                    onClick={onEditClick}
+                    disabled={editMutation.isPending}
+                  />
+                )}
             </Stack>
           )}
         <div className="ml-auto d-flex">
@@ -313,105 +314,110 @@ const CardHeader = ({
               onClick={onClickSync}
             />
           )}
-          <Dropdown data-testid={`${namePrefix}-card-header__menu`}>
-            <Dropdown.Toggle
-              className="item-card-header__menu"
-              id={`${namePrefix}-card-header__menu`}
-              data-testid={`${namePrefix}-card-header__menu-button`}
-              as={IconButton}
-              src={MoveVertIcon}
-              alt={`${namePrefix}-card-header__menu`}
-              iconAs={Icon}
-            />
-            <Dropdown.Menu>
-              {isSequential && proctoringExamConfigurationLink && (
-                <Dropdown.Item
-                  as={Hyperlink}
-                  target="_blank"
-                  destination={fullProctoringExamConfigurationLink()}
-                  href={fullProctoringExamConfigurationLink()}
-                  externalLinkTitle={intl.formatMessage(messages.proctoringLinkTooltip)}
-                >
-                  {intl.formatMessage(messages.menuProctoringLinkText)}
-                </Dropdown.Item>
-              )}
-              <Dropdown.Item
-                data-testid={`${namePrefix}-card-header__menu-publish-button`}
-                disabled={isDisabledPublish}
-                onClick={onClickPublish}
-              >
-                {intl.formatMessage(messages.menuPublish)}
-              </Dropdown.Item>
-              <Dropdown.Item
-                data-testid={`${namePrefix}-card-header__menu-configure-button`}
-                disabled={editMutation.isPending}
-                onClick={onConfigureClick}
-              >
-                {intl.formatMessage(messages.menuConfigure)}
-              </Dropdown.Item>
-              {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+          {canEditCourseContent && (
+            <Dropdown data-testid={`${namePrefix}-card-header__menu`}>
+              <Dropdown.Toggle
+                className="item-card-header__menu"
+                id={`${namePrefix}-card-header__menu`}
+                data-testid={`${namePrefix}-card-header__menu-button`}
+                as={IconButton}
+                src={MoveVertIcon}
+                alt={`${namePrefix}-card-header__menu`}
+                iconAs={Icon}
+              />
+              <Dropdown.Menu>
+                {isSequential && proctoringExamConfigurationLink && (
+                  <Dropdown.Item
+                    as={Hyperlink}
+                    target="_blank"
+                    destination={fullProctoringExamConfigurationLink()}
+                    href={fullProctoringExamConfigurationLink()}
+                    externalLinkTitle={intl.formatMessage(messages.proctoringLinkTooltip)}
+                  >
+                    {intl.formatMessage(messages.menuProctoringLinkText)}
+                  </Dropdown.Item>
+                )}
+                {canPublishCourseContent &&
+                  (
+                    <Dropdown.Item
+                      data-testid={`${namePrefix}-card-header__menu-publish-button`}
+                      disabled={isDisabledPublish}
+                      onClick={onClickPublish}
+                    >
+                      {intl.formatMessage(messages.menuPublish)}
+                    </Dropdown.Item>
+                  )}
                 <Dropdown.Item
-                  data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
+                  data-testid={`${namePrefix}-card-header__menu-configure-button`}
                   disabled={editMutation.isPending}
-                  onClick={openManageTagsDrawer}
+                  onClick={onConfigureClick}
                 >
-                  {intl.formatMessage(messages.menuManageTags)}
+                  {intl.formatMessage(messages.menuConfigure)}
                 </Dropdown.Item>
-              )}
+                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+                  <Dropdown.Item
+                    data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
+                    disabled={editMutation.isPending}
+                    onClick={openManageTagsDrawer}
+                  >
+                    {intl.formatMessage(messages.menuManageTags)}
+                  </Dropdown.Item>
+                )}
 
-              {isVertical && enableCopyPasteUnits && (
-                <Dropdown.Item onClick={onClickCopy}>
-                  {intl.formatMessage(messages.menuCopy)}
-                </Dropdown.Item>
-              )}
-              {actions.duplicable && (
-                <Dropdown.Item
-                  data-testid={`${namePrefix}-card-header__menu-duplicate-button`}
-                  onClick={onClickDuplicate}
-                >
-                  {intl.formatMessage(messages.menuDuplicate)}
-                </Dropdown.Item>
-              )}
-              {actions.draggable && (
-                <>
+                {isVertical && (
+                  <Dropdown.Item onClick={onClickCopy}>
+                    {intl.formatMessage(messages.menuCopy)}
+                  </Dropdown.Item>
+                )}
+                {actions.duplicable && (
                   <Dropdown.Item
-                    data-testid={`${namePrefix}-card-header__menu-move-up-button`}
-                    onClick={onClickMoveUp}
-                    disabled={!actions.allowMoveUp}
+                    data-testid={`${namePrefix}-card-header__menu-duplicate-button`}
+                    onClick={onClickDuplicate}
                   >
-                    {intl.formatMessage(messages.menuMoveUp)}
+                    {intl.formatMessage(messages.menuDuplicate)}
                   </Dropdown.Item>
+                )}
+                {actions.draggable && (
+                  <>
+                    <Dropdown.Item
+                      data-testid={`${namePrefix}-card-header__menu-move-up-button`}
+                      onClick={onClickMoveUp}
+                      disabled={!actions.allowMoveUp}
+                    >
+                      {intl.formatMessage(messages.menuMoveUp)}
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      data-testid={`${namePrefix}-card-header__menu-move-down-button`}
+                      onClick={onClickMoveDown}
+                      disabled={!actions.allowMoveDown}
+                    >
+                      {intl.formatMessage(messages.menuMoveDown)}
+                    </Dropdown.Item>
+                  </>
+                )}
+                {((actions.unlinkable ?? null) !== null || actions.deletable) && <Dropdown.Divider />}
+                {(actions.unlinkable ?? null) !== null && (
                   <Dropdown.Item
-                    data-testid={`${namePrefix}-card-header__menu-move-down-button`}
-                    onClick={onClickMoveDown}
-                    disabled={!actions.allowMoveDown}
+                    data-testid={`${namePrefix}-card-header__menu-unlink-button`}
+                    onClick={onClickUnlink}
+                    disabled={!actions.unlinkable}
+                    className="allow-hover-on-disabled"
+                    title={!actions.unlinkable ? intl.formatMessage(messages.menuUnlinkDisabledTooltip) : undefined}
                   >
-                    {intl.formatMessage(messages.menuMoveDown)}
+                    {intl.formatMessage(messages.menuUnlink)}
                   </Dropdown.Item>
-                </>
-              )}
-              {((actions.unlinkable ?? null) !== null || actions.deletable) && <Dropdown.Divider />}
-              {(actions.unlinkable ?? null) !== null && (
-                <Dropdown.Item
-                  data-testid={`${namePrefix}-card-header__menu-unlink-button`}
-                  onClick={onClickUnlink}
-                  disabled={!actions.unlinkable}
-                  className="allow-hover-on-disabled"
-                  title={!actions.unlinkable ? intl.formatMessage(messages.menuUnlinkDisabledTooltip) : undefined}
-                >
-                  {intl.formatMessage(messages.menuUnlink)}
-                </Dropdown.Item>
-              )}
-              {actions.deletable && (
-                <Dropdown.Item
-                  data-testid={`${namePrefix}-card-header__menu-delete-button`}
-                  onClick={onClickDelete}
-                >
-                  {intl.formatMessage(messages.menuDelete)}
-                </Dropdown.Item>
-              )}
-            </Dropdown.Menu>
-          </Dropdown>
+                )}
+                {actions.deletable && (
+                  <Dropdown.Item
+                    data-testid={`${namePrefix}-card-header__menu-delete-button`}
+                    onClick={onClickDelete}
+                  >
+                    <FormattedMessage {...messages.menuDelete} />
+                  </Dropdown.Item>
+                )}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </div>
       </div>
     </>
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index 4a95b4d19b..992375b00a 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -19,7 +19,8 @@ export const getCourseOutlineIndexApiUrl = (
   courseId: string,
 ) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
 
-export const getCourseDetailsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_details/${courseId}`;
+export const getCourseDetailsApiUrl = (courseId) =>
+  `${getApiBaseUrl()}/api/contentstore/v3/course_details/${courseId}/`;
 
 export const getCourseBestPracticesApiUrl = ({
   courseId,
diff --git a/src/course-outline/outline-level.ts b/src/course-outline/outline-level.ts
index aea3ad9e0a..15ae1587fc 100644
--- a/src/course-outline/outline-level.ts
+++ b/src/course-outline/outline-level.ts
@@ -89,7 +89,7 @@ export const LEVEL_CONFIG: Record<Depth, LevelConfig> = {
   },
   1: {
     name: 'subsection',
-    contentClass: 'subsection-card__content item-children',
+    contentClass: 'subsection-card__content',
     contentTestId: 'subsection-card__content',
     childContainerClass: 'subsection-card__units',
     childContainerTestId: 'subsection-card__units',
@@ -99,7 +99,7 @@ export const LEVEL_CONFIG: Record<Depth, LevelConfig> = {
   },
   2: {
     name: 'unit',
-    contentClass: 'unit-card__content item-children',
+    contentClass: 'unit-card__content',
     contentTestId: 'unit-card__content',
     iconSize: 'xs',
     background: { background: '#fdfdfd' },
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index e95adfce4f..7f35350e83 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -14,25 +14,28 @@ import { OutlineAlignSidebar } from './OutlineAlignSidebar';
 import OutlineHelpSidebar from './OutlineHelpSidebar';
 import { InfoSidebar } from './info-sidebar/InfoSidebar';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type OutlineSidebarPages = {
   info: SidebarPage;
   help: SidebarPage;
-  add: SidebarPage;
+  add?: SidebarPage;
   align?: SidebarPage;
 };
 
-const getOutlineSidebarPages = () => ({
+const getOutlineSidebarPages = (canEditCourseContent: boolean = false) => ({
   info: {
     component: InfoSidebar,
     icon: Info,
     title: messages.sidebarButtonInfo,
   },
-  add: {
-    component: AddSidebar,
-    icon: Plus,
-    title: messages.sidebarButtonAdd,
-  },
+  ...(canEditCourseContent && {
+    add: {
+      component: AddSidebar,
+      icon: Plus,
+      title: messages.sidebarButtonAdd,
+    },
+  }),
   ...(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && {
     align: {
       component: OutlineAlignSidebar,
@@ -84,9 +87,11 @@ type OutlineSidebarPagesProviderProps = {
 };
 
 export const OutlineSidebarPagesProvider = ({ children }: OutlineSidebarPagesProviderProps) => {
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   // align page is sometimes not added when getOutlineSidebarPages() is called at the top level.
   // So if we call it inside the hook, getConfig has updated values and align page is added.
-  const sidebarPages = useMemo(getOutlineSidebarPages, []);
+  const sidebarPages = useMemo(() => getOutlineSidebarPages(canEditCourseContent), [canEditCourseContent]);
 
   return (
     <OutlineSidebarPagesContext.Provider value={sidebarPages}>
diff --git a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
index 9bcb1b3c3d..a5557c6cc4 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
@@ -133,7 +133,7 @@ const SettingsTab = () => {
             />
           )
       )}
-      {perms.canManageGroupConfigurations && (
+      {perms.canViewGroupConfigurations && (
         <HelpSidebarLink
           as="span"
           pathToPage={`/course/${courseId}/${groupConfigurations}`}
@@ -141,7 +141,7 @@ const SettingsTab = () => {
           isNewPage
         />
       )}
-      {perms.canManageAdvancedSettings && (
+      {perms.canViewAdvancedSettings && (
         <HelpSidebarLink
           as="span"
           pathToPage={`/course/${courseId}/${advancedSettings}`}
diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
index 9f79791c92..2db6461454 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
@@ -56,6 +56,8 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     courseId,
     openUnlinkModal,
     getUnitUrl: jest.fn(),
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx
new file mode 100644
index 0000000000..d9f81857a8
--- /dev/null
+++ b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx
@@ -0,0 +1,56 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+} from '@src/testUtils';
+
+import messages from '../messages';
+import { PublishButon } from './PublishButon';
+
+const mockCourseAuthoringContext = {
+  canPublishCourseContent: true,
+};
+
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => mockCourseAuthoringContext,
+}));
+
+const onClickMock = jest.fn();
+
+// The button's accessible name is the publish label plus the draft status,
+// e.g. "Publish Changes (Draft)".
+const publishButtonName = new RegExp(messages.publishContainerButton.defaultMessage, 'i');
+
+describe('<PublishButon />', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockCourseAuthoringContext.canPublishCourseContent = true;
+    onClickMock.mockClear();
+  });
+
+  it('renders the publish button when the user can publish course content', async () => {
+    render(<PublishButon onClick={onClickMock} />);
+
+    expect(
+      await screen.findByRole('button', { name: publishButtonName }),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onClick when the button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<PublishButon onClick={onClickMock} />);
+
+    await user.click(await screen.findByRole('button', { name: publishButtonName }));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render the button when the user cannot publish course content', () => {
+    mockCourseAuthoringContext.canPublishCourseContent = false;
+    render(<PublishButon onClick={onClickMock} />);
+
+    expect(
+      screen.queryByRole('button', { name: publishButtonName }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
index c932a577d1..eaab37d8dc 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
@@ -1,22 +1,29 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import messages from '../messages';
 
 interface Props {
   onClick: () => void;
 }
 
-export const PublishButon = ({ onClick }: Props) => (
-  <Button
-    variant="outline-primary w-100 rounded status-button draft-status"
-    className="m-1"
-    onClick={onClick}
-  >
-    <strong className="mr-1">
-      <FormattedMessage
-        {...messages.publishContainerButton}
-      />
-    </strong>
-    <FormattedMessage {...messages.draftText} />
-  </Button>
-);
+export const PublishButon = ({ onClick }: Props) => {
+  const { canPublishCourseContent } = useCourseAuthoringContext();
+
+  if (!canPublishCourseContent) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline-primary w-100 rounded status-button draft-status"
+      className="m-1"
+      onClick={onClick}
+    >
+      <strong className="mr-1">
+        <FormattedMessage {...messages.publishContainerButton} />
+      </strong>
+      <FormattedMessage {...messages.draftText} />
+    </Button>
+  );
+};
diff --git a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
index 3ec946a0cc..9607073fef 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
@@ -7,7 +7,9 @@ import {
 import userEvent from '@testing-library/user-event';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { VisibilityTypes } from '@src/data/constants';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { VisibilitySection } from './VisibilitySection';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   ...jest.requireActual('@src/course-outline/data/apiHooks'),
@@ -22,14 +24,30 @@ const defaultProps = {
   onChange: jest.fn(),
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+const renderWithWrapper = (children) => {
+  render(children, {
+    extraWrapper: WrapperProvider,
+  });
+};
+
+let validateUserPermissionsMock;
+
 describe('VisibilitySection component', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
     mockUseCourseItemData.mockReturnValue({ data: undefined });
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
   });
 
   it('renders title and buttons', async () => {
-    render(<VisibilitySection {...defaultProps} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
     expect(await screen.findByText('Visibility')).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeInTheDocument();
@@ -38,7 +56,7 @@ describe('VisibilitySection component', () => {
   it('clicking staff only calls onChange with staff and hideAfterDue false', async () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Staff Only' }));
     await waitFor(async () => {
@@ -50,7 +68,7 @@ describe('VisibilitySection component', () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Student Visible' }));
     await waitFor(async () => {
@@ -63,7 +81,7 @@ describe('VisibilitySection component', () => {
     const onChange = jest.fn();
     // initial data not staff only
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: false } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     const checkbox = await screen.findByRole('checkbox');
     await user.click(checkbox);
@@ -76,7 +94,7 @@ describe('VisibilitySection component', () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: true } });
-    render(<VisibilitySection {...defaultProps} isSubsection={false} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} isSubsection={false} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Staff Only' }));
     await waitFor(async () => {
@@ -88,7 +106,27 @@ describe('VisibilitySection component', () => {
     const onChange = jest.fn();
     // when item is staff only, checkbox should not be present
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
     expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
   });
+
+  it('disables both visibility buttons when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
+
+    expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeDisabled();
+  });
+
+  it('disables the hide-after-due checkbox when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: false } });
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
+
+    expect(await screen.findByRole('checkbox')).toBeDisabled();
+  });
 });
diff --git a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
index 75793104fb..fc69365bd8 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
@@ -7,6 +7,7 @@ import { SidebarSection } from '@src/generic/sidebar';
 import { useFieldDraft } from '@src/hooks/useFieldDraft';
 import { useMemo } from 'react';
 import messages from '../messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props<T = Partial<ConfigureSubsectionData>> {
   itemId: string;
@@ -22,6 +23,7 @@ interface State {
 export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) => {
   const intl = useIntl();
   const { data: itemData } = useCourseItemData(itemId);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const serverState = useMemo<State>(() => ({
     isVisibleToStaffOnly: itemData?.visibilityState === VisibilityTypes.STAFF_ONLY,
@@ -42,12 +44,14 @@ export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) =>
     >
       <ButtonGroup toggle>
         <Button
+          disabled={!canEditCourseContent}
           variant={localState?.isVisibleToStaffOnly ? 'outline-primary' : 'primary'}
           onClick={() => setLocalState((prev) => ({ ...prev, isVisibleToStaffOnly: false }))}
         >
           <FormattedMessage {...messages.subsectionVisibilityStudentVisible} />
         </Button>
         <Button
+          disabled={!canEditCourseContent}
           variant={localState?.isVisibleToStaffOnly ? 'primary' : 'outline-primary'}
           onClick={() =>
             setLocalState((prev) => ({
@@ -61,6 +65,7 @@ export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) =>
       </ButtonGroup>
       {isSubsection && !localState?.isVisibleToStaffOnly && (
         <Form.Checkbox
+          disabled={!canEditCourseContent}
           checked={localState?.hideAfterDue}
           className="mt-2"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/src/course-outline/status-bar/StatusBar.test.tsx b/src/course-outline/status-bar/StatusBar.test.tsx
index 597c20b7e7..21d2ea7175 100644
--- a/src/course-outline/status-bar/StatusBar.test.tsx
+++ b/src/course-outline/status-bar/StatusBar.test.tsx
@@ -1,8 +1,10 @@
 import { VIDEO_SHARING_OPTIONS } from '@src/course-outline/constants';
 import { CourseOutlineStatusBar } from '@src/course-outline/data/types';
 import { initializeMocks, render, screen } from '@src/testUtils';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { StatusBar, StatusBarProps } from './StatusBar';
 import messages from './messages';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 const courseId = 'course-v1:123';
 const isLoading = false;
@@ -36,6 +38,13 @@ jest.mock('@src/course-outline/data/apiHooks', () => ({
     isLoading: false,
   }),
 }));
+
+let validateUserPermissionsMock;
+const mockPermissions = (canEditCourseContent = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canEditCourseContent });
+  validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent });
+};
+
 const mockOpenEnableHighlightsModal = jest.fn();
 const mockHandleVideoSharingOptionChange = jest.fn();
 
@@ -49,13 +58,18 @@ const renderComponent = (props?: Partial<StatusBarProps>) =>
       handleVideoSharingOptionChange={mockHandleVideoSharingOptionChange}
       {...props}
     />,
+    {
+      extraWrapper: ({ children }) => <CourseAuthoringProvider courseId={courseId}>{children}</CourseAuthoringProvider>,
+    },
   );
 
 describe('<StatusBar />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
     jest.useFakeTimers();
     jest.setSystemTime(new Date('2013-03-05'));
+    mockPermissions(true);
   });
 
   it('renders StatusBar component correctly', async () => {
@@ -145,6 +159,29 @@ describe('<StatusBar />', () => {
     expect(await screen.findByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
   });
 
+  it('does not render the enable highlights button when canEditCourseContent is false', async () => {
+    mockPermissions(false);
+    renderComponent();
+
+    // Wait for the status bar to render, then confirm the enable button is absent.
+    expect(await screen.findByText('Feb 05, 2013 - Apr 09, 2013')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Enable highlights emails' })).not.toBeInTheDocument();
+  });
+
+  it('still shows the enabled highlights message when canEditCourseContent is false', async () => {
+    mockPermissions(false);
+    renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        highlightsEnabledForMessaging: true,
+      },
+    });
+
+    // The "enabled" message is informational (not an edit action), so it renders regardless of permission.
+    expect(await screen.findByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Enable highlights emails' })).not.toBeInTheDocument();
+  });
+
   it('does render video sharing dropdown if enabled', async () => {
     renderComponent({
       statusBarData: {
diff --git a/src/course-outline/status-bar/StatusBar.tsx b/src/course-outline/status-bar/StatusBar.tsx
index 634292a2f1..cfed93b1dc 100644
--- a/src/course-outline/status-bar/StatusBar.tsx
+++ b/src/course-outline/status-bar/StatusBar.tsx
@@ -29,6 +29,7 @@ import { useHelpUrls } from '@src/help-urls/hooks';
 
 import messages from './messages';
 import { NotificationStatusIcon } from './NotificationStatusIcon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 const CourseBadge = ({ startDate, endDate }: { startDate: Moment; endDate: Moment; }) => {
   const now = moment().utc();
@@ -192,19 +193,23 @@ const Highlights = ({ highlightsEnabledForMessaging, openEnableHighlightsModal }
 }) => {
   const intl = useIntl();
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   if (highlightsEnabledForMessaging) {
     return (
       <span data-testid="highlights-enabled-span" className="small">
         {intl.formatMessage(messages.highlightEmailsEnabled)}
       </span>
     );
-  } else {
-    return (
-      <Button data-testid="highlights-enable-button" size="sm" onClick={openEnableHighlightsModal}>
-        {intl.formatMessage(messages.highlightEmailsButton)}
-      </Button>
-    );
   }
+  if (!canEditCourseContent) {
+    return null;
+  }
+  return (
+    <Button data-testid="highlights-enable-button" size="sm" onClick={openEnableHighlightsModal}>
+      {intl.formatMessage(messages.highlightEmailsButton)}
+    </Button>
+  );
 };
 
 const VideoSharingDropdown = ({ handleVideoSharingOptionChange, videoSharingOptions }: {
diff --git a/src/course-unit/CourseUnit.test.tsx b/src/course-unit/CourseUnit.test.tsx
index b8fe42485b..e8f6332b7e 100644
--- a/src/course-unit/CourseUnit.test.tsx
+++ b/src/course-unit/CourseUnit.test.tsx
@@ -1,5 +1,7 @@
 import fetchMock from 'fetch-mock-jest';
 import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   camelCaseObject,
   getConfig,
@@ -57,7 +59,7 @@ import {
   clipboardMockResponse,
   courseOutlineInfoMock,
 } from './__mocks__';
-import { clipboardUnit } from '../__mocks__';
+import { clipboardUnit, clipboardXBlock } from '../__mocks__';
 import { executeThunk } from '../utils';
 import pasteNotificationsMessages from './clipboard/paste-notification/messages';
 import headerTitleMessages from './header-title/messages';
@@ -84,6 +86,7 @@ let axiosMock;
 let store;
 let mockShowToast;
 let mockCloseToast;
+let validateUserPermissionsMock;
 const courseId = '123';
 const blockId = courseSectionVerticalMock.xblock_info.id;
 const sequenceId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5';
@@ -156,6 +159,14 @@ describe('<CourseUnit />', () => {
     mockShowToast = mocks.mockShowToast;
     mockCloseToast = mocks.mockCloseToast;
     axiosMock = mocks.axiosMock;
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      isLoading: false,
+      canViewCourse: true,
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
     axiosMock
       .onGet(getClipboardUrl())
       .reply(200, clipboardUnit);
@@ -939,7 +950,7 @@ describe('<CourseUnit />', () => {
 
     const unitHeaderTitle = screen.getByTestId('unit-header-title');
 
-    const editTitleButton = within(unitHeaderTitle).getByRole('button', {
+    const editTitleButton = await within(unitHeaderTitle).findByRole('button', {
       name: headerTitleMessages.altButtonEdit.defaultMessage,
     });
     await user.click(editTitleButton);
@@ -1589,7 +1600,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1650,7 +1661,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
 
       await waitFor(() => {
@@ -1716,7 +1727,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1777,7 +1788,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1840,7 +1851,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -2573,6 +2584,92 @@ describe('<CourseUnit />', () => {
     });
   });
 
+  describe('Add component authorization (authz)', () => {
+    let waffleFlagsSpy;
+
+    beforeEach(() => {
+      // Enable authz so `canEditCourseContent` is driven by the mocked permissions API
+      // rather than falling back to `true`.
+      waffleFlagsSpy = mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    });
+
+    afterEach(() => {
+      // Restore the real `useWaffleFlags` so the spy doesn't leak into later tests
+      // (jest is not configured to restore mocks automatically).
+      waffleFlagsSpy?.mockRestore();
+    });
+
+    it('renders the add-component strip when authz grants edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: true,
+        canPublishCourseContent: true,
+      });
+
+      render(<RootWrapper />);
+
+      expect(
+        await screen.findByRole('heading', { name: addComponentMessages.title.defaultMessage }),
+      ).toBeInTheDocument();
+    });
+
+    it('hides the add-component strip when authz denies edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: false,
+        canPublishCourseContent: false,
+      });
+
+      render(<RootWrapper />);
+
+      // Wait for the unit to finish rendering (the xblock iframe is always present)...
+      await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
+      // ...then confirm the add-component strip is gated out by the missing permission.
+      expect(
+        screen.queryByRole('heading', { name: addComponentMessages.title.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders the paste-component button when authz grants edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: true,
+        canPublishCourseContent: true,
+      });
+      // Put a component (a non-structural block) on the clipboard so the paste button can appear.
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock.onGet(getClipboardUrl()).reply(200, clipboardXBlock);
+      axiosMock.onGet(getCourseSectionVerticalApiUrl(blockId)).reply(200, courseSectionVerticalMock);
+      axiosMock.onGet(getCourseVerticalChildrenApiUrl(blockId)).reply(200, courseVerticalChildrenMock);
+
+      render(<RootWrapper />);
+
+      expect(
+        await screen.findByRole('button', { name: messages.pasteButtonText.defaultMessage }),
+      ).toBeInTheDocument();
+    });
+
+    it('hides the paste-component button when authz denies edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: false,
+        canPublishCourseContent: false,
+      });
+      // Same clipboard setup as the granted case, so only the missing permission can hide the button.
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock.onGet(getClipboardUrl()).reply(200, clipboardXBlock);
+      axiosMock.onGet(getCourseSectionVerticalApiUrl(blockId)).reply(200, courseSectionVerticalMock);
+      axiosMock.onGet(getCourseVerticalChildrenApiUrl(blockId)).reply(200, courseVerticalChildrenMock);
+
+      render(<RootWrapper />);
+
+      await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
+      expect(
+        screen.queryByRole('button', { name: messages.pasteButtonText.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it('renders and navigates to the new HTML XBlock editor after xblock duplicating', async () => {
     const updatedCourseVerticalChildrenMock = JSON.parse(JSON.stringify(courseVerticalChildrenMock));
     // Convert the second child from drag and drop to HTML:
@@ -2636,7 +2733,7 @@ describe('<CourseUnit />', () => {
 
     // Edit button should be enabled even for library imported units
     const unitHeaderTitle = screen.getByTestId('unit-header-title');
-    const editButton = within(unitHeaderTitle).getByRole(
+    const editButton = await within(unitHeaderTitle).findByRole(
       'button',
       { name: 'Edit' },
     );
diff --git a/src/course-unit/CourseUnit.tsx b/src/course-unit/CourseUnit.tsx
index 6a558de793..c162a3c0f6 100644
--- a/src/course-unit/CourseUnit.tsx
+++ b/src/course-unit/CourseUnit.tsx
@@ -164,7 +164,7 @@ const StatusBar = ({ courseUnit }: { courseUnit: any; }) => {
 const CourseUnit = () => {
   const intl = useIntl();
   const { blockId } = useParams();
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, canEditCourseContent } = useCourseAuthoringContext();
   const urls = useHelpUrls(['syncLibraryUpdates']);
 
   if (courseId === undefined) {
@@ -359,7 +359,8 @@ const CourseUnit = () => {
                     courseVerticalChildren={courseVerticalChildren.children}
                   />
                 )}
-                {!readOnly && showPasteXBlock && canPasteComponent && isUnitVerticalType && sharedClipboardData
+                {canEditCourseContent && !readOnly && showPasteXBlock && canPasteComponent && isUnitVerticalType &&
+                  sharedClipboardData
                   && /* istanbul ignore next */ (
                     <PasteComponent
                       clipboardData={sharedClipboardData}
@@ -370,7 +371,7 @@ const CourseUnit = () => {
                       text={intl.formatMessage(messages.pasteButtonText)}
                     />
                   )}
-                {!readOnly && blockId && (
+                {canEditCourseContent && !readOnly && blockId && (
                   <AddComponent
                     parentLocator={blockId}
                     isSplitTestType={isSplitTestType}
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
index 2e2923d272..6405826d1f 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { Button, Dropdown } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Plus as PlusIcon, ContentPasteGo as ContentPasteGoIcon } from '@openedx/paragon/icons/';
 
 import messages from '../messages';
 import UnitButton from './UnitButton';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 const SequenceNavigationDropdown = ({
   unitId,
@@ -14,6 +15,7 @@ const SequenceNavigationDropdown = ({
   showPasteUnit,
 }) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   return (
     <Dropdown className="sequence-navigation-dropdown">
@@ -34,22 +36,25 @@ const SequenceNavigationDropdown = ({
             unitId={buttonUnitId}
           />
         ))}
-        <Button
-          as={Dropdown.Item}
-          variant="outline-primary"
-          iconBefore={PlusIcon}
-          onClick={handleAddNewSequenceUnit}
-        >
-          {intl.formatMessage(messages.newUnitBtnText)}
-        </Button>
-        {showPasteUnit && (
+        {canEditCourseContent &&
+          (
+            <Button
+              as={Dropdown.Item}
+              variant="outline-primary"
+              iconBefore={PlusIcon}
+              onClick={handleAddNewSequenceUnit}
+            >
+              <FormattedMessage {...messages.newUnitBtnText} />
+            </Button>
+          )}
+        {canEditCourseContent && showPasteUnit && (
           <Button
             as={Dropdown.Item}
             variant="outline-primary"
             iconBefore={ContentPasteGoIcon}
             onClick={handlePasteNewSequenceUnit}
           >
-            {intl.formatMessage(messages.pasteAsNewUnitLink)}
+            <FormattedMessage {...messages.pasteAsNewUnitLink} />
           </Button>
         )}
       </Dropdown.Menu>
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
index 0f4ca66bff..b57deff504 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -23,7 +23,7 @@ const SequenceNavigationTabs = ({
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const sequenceId = useSelector(getSequenceId);
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, canEditCourseContent } = useCourseAuthoringContext();
   const courseUnit = useSelector(getCourseUnitData);
   const sequenceChildAddable = courseUnit?.ancestorInfo?.ancestors?.[0]?.actions?.childAddable;
 
@@ -67,7 +67,7 @@ const SequenceNavigationTabs = ({
               isActive={unitId === buttonUnitId}
             />
           ))}
-          {sequenceChildAddable && (
+          {canEditCourseContent && sequenceChildAddable && (
             <Button
               className="sequence-navigation-tabs-action-btn"
               variant="outline-primary"
@@ -77,7 +77,7 @@ const SequenceNavigationTabs = ({
               {intl.formatMessage(messages.newUnitBtnText)}
             </Button>
           )}
-          {showPasteUnit && (
+          {canEditCourseContent && showPasteUnit && (
             <Button
               className="sequence-navigation-tabs-action-btn"
               variant="outline-primary"
diff --git a/src/course-unit/header-navigations/HeaderNavigations.test.tsx b/src/course-unit/header-navigations/HeaderNavigations.test.tsx
index 12394aa3fb..b9d9838322 100644
--- a/src/course-unit/header-navigations/HeaderNavigations.test.tsx
+++ b/src/course-unit/header-navigations/HeaderNavigations.test.tsx
@@ -1,11 +1,18 @@
 import userEvent from '@testing-library/user-event';
 import { getConfig, setConfig } from '@edx/frontend-platform';
-import { render, initializeMocks, screen } from '@src/testUtils';
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import HeaderNavigations from './HeaderNavigations';
 import messages from './messages';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 const handleViewLiveFn = jest.fn();
 const handlePreviewFn = jest.fn();
@@ -18,6 +25,10 @@ const headerNavigationsActions = {
   handleEdit: handleEditFn,
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
 const renderComponent = (props) =>
   render(
     <IntlProvider locale="en">
@@ -27,6 +38,9 @@ const renderComponent = (props) =>
         {...props}
       />
     </IntlProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
 
 jest.mock('../unit-sidebar/UnitSidebarContext', () => ({
@@ -36,9 +50,15 @@ jest.mock('../unit-sidebar/UnitSidebarContext', () => ({
   }),
 }));
 
+let validateUserPermissionsMock;
 describe('<HeaderNavigations />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
   });
 
   it('render HeaderNavigations component correctly', () => {
@@ -111,10 +131,33 @@ describe('<HeaderNavigations />', () => {
     const user = userEvent.setup();
     renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
 
-    const addButton = screen.getByRole('button', { name: /add/i });
+    // The Add button is gated behind `canEditCourseContent`, which is only known once
+    // the (async) permissions query resolves, so wait for it rather than querying synchronously.
+    const addButton = await screen.findByRole('button', { name: /add/i });
     expect(addButton).toBeInTheDocument();
     await user.click(addButton);
 
     expect(mockSetCurrentPageKey).toHaveBeenCalledWith('add', null);
   });
+
+  it('hides the Add button on the unit page when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
+    expect(await screen.findByRole('button', { name: messages.previewButton.defaultMessage })).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.addButton.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  ['libraryContent', 'splitTest'].forEach((category) => {
+    it(`hides the Edit button on the ${category} page when the user cannot edit course content`, async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent({ category: COURSE_BLOCK_NAMES[category].id });
+      await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+      expect(screen.queryByRole('button', { name: messages.editButton.defaultMessage })).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/course-unit/header-navigations/HeaderNavigations.tsx b/src/course-unit/header-navigations/HeaderNavigations.tsx
index a8e41153a3..ae92939a33 100644
--- a/src/course-unit/header-navigations/HeaderNavigations.tsx
+++ b/src/course-unit/header-navigations/HeaderNavigations.tsx
@@ -15,6 +15,7 @@ import { COURSE_BLOCK_NAMES } from '@src/constants';
 import messages from './messages';
 import { isUnitPageNewDesignEnabled } from '../utils';
 import { useUnitSidebarContext } from '../unit-sidebar/UnitSidebarContext';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type HeaderNavigationActions = {
   handleViewLive: () => void;
@@ -46,6 +47,8 @@ const HeaderNavigations = ({
     handleEdit,
   } = headerNavigationsActions;
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const { setCurrentPageKey, readOnly } = useUnitSidebarContext();
 
   const showNewDesignButtons = isUnitPageNewDesignEnabled();
@@ -68,7 +71,7 @@ const HeaderNavigations = ({
               >
                 {intl.formatMessage(messages.infoButton)}
               </Button>
-              {!readOnly && (
+              {canEditCourseContent && !readOnly && (
                 <Button
                   variant="outline-primary"
                   iconBefore={Add}
@@ -103,7 +106,8 @@ const HeaderNavigations = ({
          * Action buttons used in legacy libraries content page and split test page
          */
       }
-      {[COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.splitTest.id].includes(category) && (
+      {canEditCourseContent &&
+        [COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.splitTest.id].includes(category) && (
         <Button
           iconBefore={EditIcon}
           variant="outline-primary"
diff --git a/src/course-unit/header-title/HeaderTitle.test.tsx b/src/course-unit/header-title/HeaderTitle.test.tsx
index ef7511e3bf..2a900a257b 100644
--- a/src/course-unit/header-title/HeaderTitle.test.tsx
+++ b/src/course-unit/header-title/HeaderTitle.test.tsx
@@ -1,7 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig, setConfig } from '@edx/frontend-platform';
-import { initializeMocks, render, screen } from '@src/testUtils';
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
 import userEvent from '@testing-library/user-event';
 import { executeThunk } from '@src/utils';
 
@@ -11,6 +16,8 @@ import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { courseSectionVerticalMock } from '../__mocks__';
 import HeaderTitle from './HeaderTitle';
 import messages from './messages';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 const blockId = '123';
 const unitTitle = 'Getting Started';
@@ -21,8 +28,12 @@ const handleConfigureSubmit = jest.fn();
 let store;
 let axiosMock;
 
-const renderComponent = (props?: any) =>
-  render(
+const renderComponent = (props?: any) => {
+  const WrapperProvider = ({ children }) => (
+    <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+  );
+
+  return render(
     <IframeProvider>
       <HeaderTitle
         unitTitle={unitTitle}
@@ -33,12 +44,20 @@ const renderComponent = (props?: any) =>
         {...props}
       />,
     </IframeProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
-
+};
 describe('<HeaderTitle />', () => {
+  let validateUserPermissionsMock;
   beforeEach(async () => {
     const mocks = initializeMocks();
-
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
     store = mocks.reduxStore;
     axiosMock = mocks.axiosMock;
     axiosMock
@@ -47,7 +66,7 @@ describe('<HeaderTitle />', () => {
     await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
   });
 
-  it('render HeaderTitle component correctly', () => {
+  it('render HeaderTitle component correctly', async () => {
     setConfig({
       ...getConfig(),
       ENABLE_UNIT_PAGE_NEW_DESIGN: false,
@@ -55,11 +74,11 @@ describe('<HeaderTitle />', () => {
     renderComponent();
 
     expect(screen.getByText(unitTitle)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
   });
 
-  it('render HeaderTitle with open edit form', () => {
+  it('render HeaderTitle with open edit form', async () => {
     setConfig({
       ...getConfig(),
       ENABLE_UNIT_PAGE_NEW_DESIGN: false,
@@ -70,7 +89,7 @@ describe('<HeaderTitle />', () => {
 
     expect(screen.getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
     expect(screen.getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeEnabled();
   });
 
@@ -97,7 +116,7 @@ describe('<HeaderTitle />', () => {
 
     renderComponent();
 
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeEnabled();
   });
 
@@ -105,7 +124,7 @@ describe('<HeaderTitle />', () => {
     const user = userEvent.setup();
     renderComponent();
 
-    const editTitleButton = screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage });
+    const editTitleButton = await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage });
     await user.click(editTitleButton);
     expect(handleTitleEdit).toHaveBeenCalledTimes(1);
   });
@@ -127,4 +146,33 @@ describe('<HeaderTitle />', () => {
     expect(titleField).toHaveValue(`${unitTitle} 1 2`);
     expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
   });
+
+  it('hides the Edit button when the user cannot edit course content (legacy design)', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: false,
+    });
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.altButtonSettings.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.altButtonEdit.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('hides the Edit button when the user cannot edit course content (new design)', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+    expect(screen.getByText(unitTitle)).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.altButtonEdit.defaultMessage })).not.toBeInTheDocument();
+  });
 });
diff --git a/src/course-unit/header-title/HeaderTitle.tsx b/src/course-unit/header-title/HeaderTitle.tsx
index 67991c98b5..0cf31bf5f5 100644
--- a/src/course-unit/header-title/HeaderTitle.tsx
+++ b/src/course-unit/header-title/HeaderTitle.tsx
@@ -21,6 +21,7 @@ import { getCourseUnitData } from '../data/selectors';
 import { updateQueryPendingStatus } from '../data/slice';
 import messages from './messages';
 import { isUnitPageNewDesignEnabled } from '../utils';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 type HeaderTitleProps = {
   unitTitle: string;
@@ -47,6 +48,7 @@ const HeaderTitle = ({
   const [titleValue, setTitleValue] = useState(unitTitle);
   const currentItemData = useSelector(getCourseUnitData);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const isXBlockComponent = [
     COURSE_BLOCK_NAMES.libraryContent.id,
@@ -97,12 +99,15 @@ const HeaderTitle = ({
           </Form.Group>
         ) :
         unitTitle}
-      <IconButton
-        alt={intl.formatMessage(messages.altButtonEdit)}
-        className="ml-1 flex-shrink-0 edit-button"
-        iconAs={EditIcon}
-        onClick={handleTitleEdit}
-      />
+      {canEditCourseContent &&
+        (
+          <IconButton
+            alt={intl.formatMessage(messages.altButtonEdit)}
+            className="ml-1 flex-shrink-0 edit-button"
+            iconAs={EditIcon}
+            onClick={handleTitleEdit}
+          />
+        )}
       {!isUnitPageNewDesignEnabled() && (
         <>
           <IconButton
diff --git a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
index 56cd476610..d3ca2d7c56 100644
--- a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
+++ b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
@@ -1,11 +1,17 @@
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { render } from '@testing-library/react';
+import {
+  initializeMocks,
+  render,
+  screen,
+} from '@src/testUtils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import userEvent from '@testing-library/user-event';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 import initializeStore from '../../../../store';
 import { executeThunk } from '../../../../utils';
@@ -22,19 +28,28 @@ let axiosMock;
 let queryClient;
 const courseId = '123';
 
-const renderComponent = (props = {}) =>
-  render(
-    <AppProvider store={store}>
+const renderComponent = (props = {}) => {
+  const WrapperProvider = ({ children }) => (
+    <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+  );
+  return render(
+    <AppProvider store={store} wrapWithRouter={false}>
       <IntlProvider locale="en">
         <QueryClientProvider client={queryClient}>
           <ActionButtons {...props} />
         </QueryClientProvider>
       </IntlProvider>
     </AppProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
+};
 
 describe('<ActionButtons />', () => {
+  let validateUserPermissionsMock;
   beforeEach(async () => {
+    const mocks = initializeMocks();
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
@@ -44,6 +59,13 @@ describe('<ActionButtons />', () => {
       },
     });
 
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
+
     store = initializeStore();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
@@ -67,24 +89,58 @@ describe('<ActionButtons />', () => {
     await executeThunk(fetchCourseSectionVerticalData(courseId), store.dispatch);
   });
 
-  it('render ActionButtons component with Copy to clipboard', () => {
-    const { getByRole } = renderComponent();
+  it('render ActionButtons component with Copy to clipboard', async () => {
+    renderComponent();
 
-    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+    const copyXBlockBtn = await screen.findByRole('button', {
+      name: messages.actionButtonCopyUnitTitle.defaultMessage,
+    });
     expect(copyXBlockBtn).toBeInTheDocument();
   });
 
   it('click on the Copy to clipboard button updates clipboardData', async () => {
     const user = userEvent.setup();
-    const { getByRole } = renderComponent();
+    renderComponent();
 
-    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+    const copyXBlockBtn = await screen.findByRole('button', {
+      name: messages.actionButtonCopyUnitTitle.defaultMessage,
+    });
 
     await user.click(copyXBlockBtn);
     expect(axiosMock.history.post.length).toBe(1);
     expect(axiosMock.history.post[0].data).toBe(
       JSON.stringify({ usage_key: courseSectionVerticalMock.xblock_info.id }),
     );
-    jest.resetAllMocks();
+  });
+
+  it('hides the Publish button when the user cannot publish course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: false,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonPublishTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('hides the Discard changes and Copy buttons when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+      canPublishCourseContent: true,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.actionButtonPublishTitle.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonDiscardChangesTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
index c86636d577..1738feec3c 100644
--- a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
+++ b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
@@ -6,6 +6,7 @@ import { Divider } from '@src/generic/divider';
 import { getCanEdit, getCourseUnitData } from '@src/course-unit/data/selectors';
 import { useClipboard } from '@src/generic/clipboard';
 import messages from '../../messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface ActionButtonsProps {
   openDiscardModal: () => void;
@@ -23,14 +24,14 @@ const ActionButtons = ({
     id,
     published,
     hasChanges,
-    enableCopyPasteUnits,
   } = useSelector(getCourseUnitData);
   const canEdit = useSelector(getCanEdit);
   const { copyToClipboard } = useClipboard();
+  const { canPublishCourseContent, canEditCourseContent } = useCourseAuthoringContext();
 
   return (
     <>
-      {(!published || hasChanges) && (
+      {(!published || hasChanges) && canPublishCourseContent && (
         <Button
           size="sm"
           className="mt-3.5"
@@ -40,7 +41,7 @@ const ActionButtons = ({
           {intl.formatMessage(messages.actionButtonPublishTitle)}
         </Button>
       )}
-      {(published && hasChanges) && (
+      {(published && hasChanges) && canEditCourseContent && (
         <Button
           size="sm"
           variant="link"
@@ -50,7 +51,7 @@ const ActionButtons = ({
           {intl.formatMessage(messages.actionButtonDiscardChangesTitle)}
         </Button>
       )}
-      {enableCopyPasteUnits && canEdit && !hideCopyButton && (
+      {canEdit && !hideCopyButton && canEditCourseContent && (
         <>
           <Divider className="course-unit-sidebar-footer__divider" />
           <Button
diff --git a/src/course-unit/preview-changes/index.tsx b/src/course-unit/preview-changes/index.tsx
index 82a9f0a3ff..37eabf1eec 100644
--- a/src/course-unit/preview-changes/index.tsx
+++ b/src/course-unit/preview-changes/index.tsx
@@ -160,6 +160,7 @@ export const PreviewLibraryXBlockChanges = ({
       <CompareChangesWidget
         usageKey={blockData.upstreamBlockId}
         oldUsageKey={blockData.downstreamBlockId}
+        courseId={blockData.downstreamBlockId}
         oldTitle={isTextWithLocalChanges ? blockData.displayName : undefined}
         oldVersion={blockData.upstreamBlockVersionSynced || 'published'}
         newVersion="published"
diff --git a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
index a90ad0bd43..6902cc70de 100644
--- a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
@@ -1,5 +1,7 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
 import { UnitSidebarProvider } from './UnitSidebarContext';
 
@@ -18,16 +20,19 @@ jest.mock('react-router-dom', () => ({
 
 const renderComponent = () =>
   render(
-    <IframeProvider>
-      <UnitSidebarProvider readOnly={false}>
-        <UnitAlignSidebar />
-      </UnitSidebarProvider>
-    </IframeProvider>,
+    <CourseAuthoringProvider courseId={'courseId'}>
+      <IframeProvider>
+        <UnitSidebarProvider readOnly={false}>
+          <UnitAlignSidebar />
+        </UnitSidebarProvider>
+      </IframeProvider>
+    </CourseAuthoringProvider>,
   );
 
 describe('OutlineAlignSidebar', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags();
   });
 
   it('renders ContentTagsDrawer with the correct id and variant', () => {
diff --git a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx
new file mode 100644
index 0000000000..2b57ea4268
--- /dev/null
+++ b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx
@@ -0,0 +1,120 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useUnitSidebarContext } from './UnitSidebarContext';
+import { UnitSidebarPagesProvider, useUnitSidebarPagesContext } from './UnitSidebarPagesContext';
+
+jest.mock('./UnitSidebarContext', () => ({
+  useUnitSidebarContext: jest.fn(),
+}));
+
+const mockUseUnitSidebarContext = useUnitSidebarContext as jest.Mock;
+
+/**
+ * Test consumer that renders one node per available sidebar page so the tests can assert
+ * which pages the provider exposes (and whether they are disabled).
+ */
+const PagesConsumer = () => {
+  const pages = useUnitSidebarPagesContext();
+  return (
+    <div>
+      {Object.entries(pages).map(([key, page]) => (
+        <div
+          key={key}
+          data-testid={`page-${key}`}
+          data-disabled={page?.disabled ? 'true' : 'false'}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = () =>
+  render(
+    <UnitSidebarPagesProvider>
+      <PagesConsumer />
+    </UnitSidebarPagesProvider>,
+    { extraWrapper: WrapperProvider },
+  );
+
+describe('<UnitSidebarPagesProvider />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: false,
+      selectedComponentId: undefined,
+      currentItemCategory: 'vertical',
+    });
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  it('always exposes the info page', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+  });
+
+  it('includes the add page when the user can edit course content and it is not read-only', async () => {
+    renderComponent();
+
+    // The add page is gated behind `canEditCourseContent`, which is only known once the (async)
+    // permissions query resolves, so wait for it rather than querying synchronously.
+    expect(await screen.findByTestId('page-add')).toBeInTheDocument();
+  });
+
+  it('excludes the add page when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+
+    // Info always renders; wait for the permissions query to settle, then confirm the add page is gone.
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByTestId('page-add')).not.toBeInTheDocument();
+  });
+
+  it('excludes the add page when the sidebar is read-only even if the user can edit', async () => {
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: true,
+      selectedComponentId: undefined,
+      currentItemCategory: 'vertical',
+    });
+    renderComponent();
+
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByTestId('page-add')).not.toBeInTheDocument();
+  });
+
+  it('marks the add page as disabled when a component is selected', async () => {
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: false,
+      selectedComponentId: 'block-v1:org+course+run+type@html+block@test',
+      currentItemCategory: 'vertical',
+    });
+    renderComponent();
+
+    const addPage = await screen.findByTestId('page-add');
+    expect(addPage).toHaveAttribute('data-disabled', 'true');
+  });
+});
diff --git a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
index 18b821a841..f5fd8a3652 100644
--- a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
+++ b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
@@ -9,6 +9,7 @@ import { AddSidebar } from './AddSidebar';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
 import { useUnitSidebarContext } from './UnitSidebarContext';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type UnitSidebarPages = {
   info: SidebarPage;
@@ -16,7 +17,7 @@ export type UnitSidebarPages = {
   align?: SidebarPage;
 };
 
-const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean) => {
+const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean, canEditCourseContent: boolean) => {
   const showAlignSidebar = getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true';
 
   return {
@@ -25,7 +26,7 @@ const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean) => {
       icon: Info,
       title: messages.sidebarButtonInfo,
     },
-    ...(!readOnly && {
+    ...(!readOnly && canEditCourseContent && {
       add: {
         component: AddSidebar,
         icon: Plus,
@@ -87,13 +88,15 @@ export const UnitSidebarPagesProvider = ({ children }: UnitSidebarPagesProviderP
     currentItemCategory,
   } = useUnitSidebarContext();
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const hasComponentSelected = selectedComponentId !== undefined;
   const isSplitTest = currentItemCategory === 'split_test';
   const disableAdd = hasComponentSelected || isSplitTest;
 
   const sidebarPages = useMemo(
-    () => getUnitSidebarPages(readOnly, disableAdd),
-    [readOnly, disableAdd],
+    () => getUnitSidebarPages(readOnly, disableAdd, canEditCourseContent),
+    [readOnly, disableAdd, canEditCourseContent],
   );
 
   return (
diff --git a/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx b/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
index 1f286e7f24..88071f8166 100644
--- a/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
@@ -47,6 +47,8 @@ jest.mock('@src/course-unit/data/selectors', () => ({
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 'course-v1:UNIX+UX1+2025_T3',
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
index 1ff11800bd..6d44cbede2 100644
--- a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
@@ -5,6 +5,8 @@ import {
   waitFor,
 } from '@src/testUtils';
 import userEvent from '@testing-library/user-event';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { GenericUnitInfoSettings } from './GenericUnitInfoSettings';
 
 // Mock UnitTab subcomponents: Access is irrelevant here; Discussion becomes a simple
@@ -33,16 +35,31 @@ const baseProps = {
   configureHook: useFakeConfigure as any,
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderWithWrapper = (children) =>
+  render(children, {
+    extraWrapper: WrapperProvider,
+  });
+
 describe('GenericUnitInfoSettings', () => {
+  let validateUserPermissionsMock;
+
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
     mutate.mockClear();
+    // Leave authz disabled by default so `canEditCourseContent` synchronously falls back to
+    // `true` and the visibility buttons are enabled/clickable. Gating tests re-enable authz.
+    mockWaffleFlags();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
   });
 
   it('commits staff-only visibility when "Staff Only" is clicked', async () => {
     const user = userEvent.setup();
     const updateCallback = jest.fn();
-    render(<GenericUnitInfoSettings {...baseProps} updateCallback={updateCallback} />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} updateCallback={updateCallback} />);
 
     await user.click(screen.getByRole('button', { name: 'Staff Only' }));
 
@@ -57,7 +74,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('opens the confirmation modal and commits student-visible on confirm', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
 
     await user.click(screen.getByRole('button', { name: 'Student Visible' }));
     // Modal opens; confirm.
@@ -73,7 +90,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('does not commit when the confirmation modal is cancelled', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
 
     await user.click(screen.getByRole('button', { name: 'Student Visible' }));
     await user.click(screen.getByRole('button', { name: 'Cancel' }));
@@ -83,7 +100,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('commits the discussion toggle', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
 
     await user.click(screen.getByRole('checkbox', { name: 'discussion' }));
 
@@ -94,4 +111,22 @@ describe('GenericUnitInfoSettings', () => {
       )
     );
   });
+
+  it('disables both visibility buttons when the user cannot edit course content', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
+
+    expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeDisabled();
+  });
+
+  it('enables both visibility buttons when the user can edit course content', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Student Visible' })).not.toBeDisabled());
+    expect(screen.getByRole('button', { name: 'Staff Only' })).not.toBeDisabled();
+  });
 });
diff --git a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
index deadec5cd6..1630c980e9 100644
--- a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
@@ -12,6 +12,7 @@ import { useFieldDraft } from '@src/hooks/useFieldDraft';
 import ModalNotification from '@src/generic/modal-notification';
 import { InfoOutline } from '@openedx/paragon/icons';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface UnitInfoSettingsProps {
   id: string;
@@ -44,6 +45,7 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
   const visibleToStaffOnly = visibilityState === UNIT_VISIBILITY_STATES.staffOnly;
   const mutateFn = configureHook();
   const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const handleUpdate = (
     isVisible: boolean,
@@ -121,12 +123,14 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
         >
           <ButtonGroup toggle>
             <Button
+              disabled={!canEditCourseContent}
               variant={localState?.isVisible ? 'outline-primary' : 'primary'}
               onClick={openVisibleModal}
             >
               <FormattedMessage {...messages.sidebarInfoVisibilityStudentLabel} />
             </Button>
             <Button
+              disabled={!canEditCourseContent}
               variant={localState?.isVisible ? 'primary' : 'outline-primary'}
               onClick={() => setLocalState((prev) => ({ ...prev, isVisible: true }))}
             >
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
index 554680082e..ef978703cb 100644
--- a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
@@ -53,6 +53,8 @@ jest.mock('@src/course-unit/data/selectors', () => ({
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 'course-v1:UNIX+UX1+2025_T3',
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx
new file mode 100644
index 0000000000..47d316bfc2
--- /dev/null
+++ b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx
@@ -0,0 +1,114 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import { getConfig, setConfig } from '@edx/frontend-platform';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import UnitVisibilityInfo from './UnitVisibilityInfo';
+import messages from './messages';
+
+const mockSetCurrentTabKey = jest.fn();
+
+jest.mock('../UnitSidebarContext', () => ({
+  useUnitSidebarContext: () => ({
+    setCurrentTabKey: mockSetCurrentTabKey,
+  }),
+}));
+
+const defaultProps = {
+  openVisibleModal: jest.fn(),
+  visibleToStaffOnly: false,
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = (props = {}) =>
+  render(<UnitVisibilityInfo {...defaultProps} {...props} />, {
+    extraWrapper: WrapperProvider,
+  });
+
+describe('<UnitVisibilityInfo />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  describe('new design', () => {
+    beforeEach(() => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+      });
+    });
+
+    it('renders the edit visibility button and navigates to settings when the user can edit', async () => {
+      const user = userEvent.setup();
+      renderComponent();
+
+      // The edit button is gated behind `canEditCourseContent`, which is only known once the
+      // (async) permissions query resolves, so wait for it rather than querying synchronously.
+      const editButton = await screen.findByRole('button', { name: messages.visibilityEditButton.defaultMessage });
+      await user.click(editButton);
+      expect(mockSetCurrentTabKey).toHaveBeenCalledWith('settings');
+    });
+
+    it('does not render the edit visibility button when the user cannot edit course content', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent();
+
+      // The visibility label always renders; wait for the permissions query to settle, then
+      // confirm the gated edit button never appears.
+      expect(await screen.findByText(messages.visibilityAllLearnersTitle.defaultMessage)).toBeInTheDocument();
+      await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+      expect(
+        screen.queryByRole('button', { name: messages.visibilityEditButton.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('legacy design', () => {
+    beforeEach(() => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_UNIT_PAGE_NEW_DESIGN: false,
+      });
+    });
+
+    it('disables the visibility checkbox when the user cannot edit course content', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent();
+
+      expect(
+        await screen.findByRole('checkbox', { name: messages.visibilityCheckboxTitle.defaultMessage }),
+      ).toBeDisabled();
+    });
+
+    it('enables the visibility checkbox when the user can edit course content', async () => {
+      renderComponent();
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole('checkbox', { name: messages.visibilityCheckboxTitle.defaultMessage }),
+        ).not.toBeDisabled()
+      );
+    });
+  });
+});
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
index b013f76850..3126245c77 100644
--- a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
@@ -15,6 +15,7 @@ import { Edit, Groups, Lock } from '@openedx/paragon/icons';
 import { useConfigureUnitWithPageUpdates } from '@src/course-unit/data/apiHooks';
 import messages from './messages';
 import { useUnitSidebarContext } from '../UnitSidebarContext';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface UnitVisibilityInfoProps {
   openVisibleModal: () => void;
@@ -46,6 +47,7 @@ const LegacyVisibilityInfo = ({
 
   const { blockId } = useParams();
   const publishMutation = useConfigureUnitWithPageUpdates();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const handleCourseUnitVisibility = () => {
     /* istanbul ignore next */
@@ -87,6 +89,7 @@ const LegacyVisibilityInfo = ({
         checked={hasExplicitStaffLock}
         onChange={hasExplicitStaffLock ? null : handleCourseUnitVisibility}
         onClick={hasExplicitStaffLock ? openVisibleModal : null}
+        disabled={!canEditCourseContent}
       >
         <FormattedMessage {...messages.visibilityCheckboxTitle} />
       </Form.Checkbox>
@@ -100,6 +103,7 @@ const UnitVisibilityInfoContent = ({
 }: UnitVisibilityInfoContentProps) => {
   const intl = useIntl();
   const { setCurrentTabKey } = useUnitSidebarContext();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const { selectedPartitionIndex, selectedGroupsLabel } = userPartitionInfo ?? {};
   const hasGroups = selectedPartitionIndex !== -1 && !Number.isNaN(selectedPartitionIndex) && selectedGroupsLabel;
@@ -135,12 +139,15 @@ const UnitVisibilityInfoContent = ({
         <span className="font-weight-bold text-primary-700">
           {labelMessages}
         </span>
-        <IconButton
-          src={Edit}
-          alt={intl.formatMessage(messages.visibilityEditButton)}
-          size="inline"
-          onClick={() => setCurrentTabKey('settings')}
-        />
+        {canEditCourseContent &&
+          (
+            <IconButton
+              src={Edit}
+              alt={intl.formatMessage(messages.visibilityEditButton)}
+              size="inline"
+              onClick={() => setCurrentTabKey('settings')}
+            />
+          )}
       </Stack>
       {secondLabelMessages}
     </>
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.js b/src/editors/containers/ProblemEditor/data/OLXParser.js
index 43817b91d9..46a578812d 100644
--- a/src/editors/containers/ProblemEditor/data/OLXParser.js
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.js
@@ -261,7 +261,7 @@ export class OLXParser {
         const preservedFeedback = preservedAnswers[index].filter(answer =>
           Object.keys(answer).includes(`${option}hint`)
         );
-        let title = String(element['#text']);
+        let title = String(element['#text'] ?? '');
 
         if (isComplexAnswer && preservedAnswer) {
           title = this.richTextBuilder.build(preservedAnswer);
@@ -281,7 +281,7 @@ export class OLXParser {
     } else {
       const preservedAnswer = preservedAnswers[0].filter(answer => !Object.keys(answer).includes(`${option}hint`));
       const preservedFeedback = preservedAnswers[0].filter(answer => Object.keys(answer).includes(`${option}hint`));
-      let title = String(choice['#text']);
+      let title = String(choice['#text'] ?? '');
 
       if (isComplexAnswer && preservedAnswer) {
         title = this.richTextBuilder.build(preservedAnswer);
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.test.js b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
index fceb9de2c4..993c66b77a 100644
--- a/src/editors/containers/ProblemEditor/data/OLXParser.test.js
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
@@ -1,3 +1,4 @@
+import dropdownTemplate from '@src/editors/data/constants/basicProblemTemplates/dropdown';
 import { OLXParser } from './OLXParser';
 import {
   checkboxesOLXWithFeedbackAndHintsOLX,
@@ -134,6 +135,13 @@ describe('OLXParser', () => {
         expect(problemType).toEqual(ProblemTypeKeys.NUMERIC);
       });
     });
+    describe('given the blank dropdown template', () => {
+      const olxparser = new OLXParser(dropdownTemplate.olx);
+      const { answers } = olxparser.parseMultipleChoiceAnswers('optionresponse', 'optioninput', 'option');
+      it('should leave every answer empty, so the editor shows its placeholder', () => {
+        expect(answers.map(answer => answer.title)).toEqual(['', '', '']);
+      });
+    });
     describe('given dropdown olx with feedback and hints', () => {
       const problemType = dropdownOlxParser.getProblemType();
       it('should equal ProblemTypeKeys.DROPDOWN', () => {
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
index 94d055a4a6..be8449ee63 100644
--- a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
+++ b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
@@ -377,7 +377,7 @@ class ReactStateOLXParser {
       }
     });
     answerObject[problemType].push({
-      textline: { '#text': '' },
+      textline: [{ '#text': '' }],
       ':@': { '@_size': get(this.problemState, 'additionalAttributes.textline.size', 20) },
     });
     return answerObject;
@@ -489,7 +489,7 @@ class ReactStateOLXParser {
         }
       }
     });
-    answerObject[problemType].push({ formulaequationinput: { '#text': '' } });
+    answerObject[problemType].push({ formulaequationinput: [{ '#text': '' }] });
     return answerObject;
   }
 
diff --git a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
index eed9eeeaf9..d1bb48dae8 100644
--- a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
+++ b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
@@ -875,6 +875,10 @@ export const labelDescriptionQuestionOLX = {
   <em class="olx_description">Watch out, boiling water is hot</em>`,
 };
 
+// NOTE: fast-xml-parser >= 5.7.3 unconditionally escapes quotes inside attribute values (a security
+// hardening change that ignores `processEntities: false`), so single quotes in the `style` attribute
+// come back as `&apos;` after a parse/build round-trip. `&apos;` is valid XML/HTML and browsers render
+// it identically, so the expected outputs below use the escaped form.
 export const htmlEntityTestOLX = {
   rawOLX: `<problem>
   <multiplechoiceresponse>
@@ -907,9 +911,9 @@ export const htmlEntityTestOLX = {
     ],
   },
   question: `<p>What is the content of the register x2 after executing the following three lines of instructions?</p>
-  <p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>`,
+  <p><span style="font-family: &apos;courier new&apos;, courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>`,
   solutionExplanation:
-    `<p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions&#160;&#160;&#160;&#160;comment<br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = 0x1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x2 = x1 &lt;&lt; 4 = 0x10<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = x2 - x1 = 0x10 - 0x01 = 0xf</strong></span></p>`,
+    `<p><span style="font-family: &apos;courier new&apos;, courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions&#160;&#160;&#160;&#160;comment<br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = 0x1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x2 = x1 &lt;&lt; 4 = 0x10<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = x2 - x1 = 0x10 - 0x01 = 0xf</strong></span></p>`,
 };
 
 export const numberParseTestOLX = {
@@ -928,22 +932,22 @@ export const numberParseTestOLX = {
     answers: [
       {
         id: 'A',
-        title: `<span style="font-family: 'courier new', courier;"><strong>0x10</strong></span>`,
+        title: `<span style="font-family: &apos;courier new&apos;, courier;"><strong>0x10</strong></span>`,
         correct: false,
       },
       {
         id: 'B',
-        title: `<span style="font-family: 'courier new', courier;"><strong>0x0f</strong></span>`,
+        title: `<span style="font-family: &apos;courier new&apos;, courier;"><strong>0x0f</strong></span>`,
         correct: true,
       },
       {
         id: 'C',
-        title: `<span style="font-family: 'courier new', courier;"><strong>0x07</strong></span>`,
+        title: `<span style="font-family: &apos;courier new&apos;, courier;"><strong>0x07</strong></span>`,
         correct: false,
       },
       {
         id: 'D',
-        title: `<span style="font-family: 'courier new', courier;"><strong>0009</strong></span>`,
+        title: `<span style="font-family: &apos;courier new&apos;, courier;"><strong>0009</strong></span>`,
         correct: false,
       },
     ],
diff --git a/src/files-and-videos/generic/FileMenu.test.tsx b/src/files-and-videos/generic/FileMenu.test.tsx
index 06706b7739..1d8ee81738 100644
--- a/src/files-and-videos/generic/FileMenu.test.tsx
+++ b/src/files-and-videos/generic/FileMenu.test.tsx
@@ -132,7 +132,7 @@ describe('FileMenu', () => {
 
       expect(screen.queryByText('Copy video ID')).not.toBeInTheDocument();
       expect(screen.queryByText('Download')).not.toBeInTheDocument();
-      expect(screen.getByText('Info')).toBeInTheDocument();
+      expect(screen.getByText('Info and transcripts')).toBeInTheDocument();
     });
   });
 });
diff --git a/src/files-and-videos/generic/FileMenu.tsx b/src/files-and-videos/generic/FileMenu.tsx
index 29b58a5568..bc9e84ed9d 100644
--- a/src/files-and-videos/generic/FileMenu.tsx
+++ b/src/files-and-videos/generic/FileMenu.tsx
@@ -70,7 +70,7 @@ const FileMenu = ({
           </>
         )}
         <Dropdown.Item onClick={openAssetInfo}>
-          <FormattedMessage {...messages.infoTitle} />
+          <FormattedMessage {...(fileType === 'video' ? messages.infoAndTranscriptsTitle : messages.infoTitle)} />
         </Dropdown.Item>
         {permissions.canDeleteFiles && (
           <>
diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx
index d2064958b5..b5f0022775 100644
--- a/src/files-and-videos/generic/FileTable.jsx
+++ b/src/files-and-videos/generic/FileTable.jsx
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
@@ -24,6 +30,7 @@ import {
   MoreInfoColumn,
   FilterStatus,
   Footer,
+  TranscriptColumn,
 } from './table-components';
 import ApiStatusToast from './ApiStatusToast';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
@@ -42,6 +49,7 @@ const FileTable = ({
   maxFileSize,
   thumbnailPreview,
   infoModalSidebar,
+  infoModalContentUnderPreview = /** @type {(file: any) => React.ReactNode} */ (/* istanbul ignore next */ () => null),
   permissions = {
     canCreateFiles: true,
     canDeleteFiles: true,
@@ -203,10 +211,31 @@ const FileTable = ({
       }),
   };
 
-  const hasMoreInfoColumn = tableColumns.filter(col => col.id === 'moreInfo').length === 1;
-  if (!hasMoreInfoColumn) {
-    tableColumns.push({ ...moreInfoColumn });
-  }
+  const handleOpenFileInfoRef = useRef(handleOpenFileInfo);
+  handleOpenFileInfoRef.current = handleOpenFileInfo;
+
+  // Copy the caller's columns instead of mutating them. Memoized (with the ref above)
+  // so the columns identity stays stable across re-renders: a new identity makes
+  // DataTable reset its internal state.
+  const columns = useMemo(() => {
+    const cols = [...tableColumns];
+    if (cols.filter(col => col.id === 'moreInfo').length !== 1) {
+      cols.push({ ...moreInfoColumn });
+    }
+    const transcriptColIndex = cols.findIndex(col => col.id === 'transcriptStatus');
+    if (transcriptColIndex !== -1) {
+      cols[transcriptColIndex] = {
+        ...cols[transcriptColIndex],
+        Cell: ({ row }) => (
+          <TranscriptColumn
+            row={row}
+            handleOpenFileInfo={(file) => handleOpenFileInfoRef.current(file)}
+          />
+        ),
+      };
+    }
+    return cols;
+  }, [tableColumns]);
 
   return (
     <div className="files-table">
@@ -235,7 +264,7 @@ const FileTable = ({
         initialState={initialState}
         tableActions={headerActions}
         bulkActions={headerActions}
-        columns={tableColumns}
+        columns={columns}
         itemCount={files.length}
         pageCount={pageCount}
         data={files}
@@ -322,6 +351,7 @@ const FileTable = ({
           usagePathStatus={usagePathStatus}
           error={usageErrorMessages}
           sidebar={infoModalSidebar}
+          contentUnderPreview={infoModalContentUnderPreview(selectedRows[0].original)}
         />
       )}
     </div>
@@ -354,6 +384,8 @@ FileTable.propTypes = {
   maxFileSize: PropTypes.number.isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   infoModalSidebar: PropTypes.func.isRequired,
+  // Render function `(file) => ReactNode` shown in the info modal under the file preview.
+  infoModalContentUnderPreview: PropTypes.func,
   permissions: PropTypes.shape({
     canCreateFiles: PropTypes.bool,
     canDeleteFiles: PropTypes.bool,
diff --git a/src/files-and-videos/generic/InfoModal.jsx b/src/files-and-videos/generic/InfoModal.jsx
index 85862bcaa2..54e542a058 100644
--- a/src/files-and-videos/generic/InfoModal.jsx
+++ b/src/files-and-videos/generic/InfoModal.jsx
@@ -24,6 +24,7 @@ const InfoModal = ({
   usagePathStatus,
   error,
   sidebar,
+  contentUnderPreview = /* istanbul ignore next */ null,
 }) => {
   const intl = useIntl();
   const [activeTab, setActiveTab] = useState('fileInfo');
@@ -75,6 +76,7 @@ const InfoModal = ({
                 thumbnailPreview={thumbnailPreview}
                 imageSize={{ width: '503px', height: '281px' }}
               />
+              {contentUnderPreview}
               <div>
                 <div className="row m-0 font-weight-bold">
                   <FormattedMessage {...messages.usageTitle} />
@@ -114,6 +116,7 @@ InfoModal.propTypes = {
   error: PropTypes.arrayOf(PropTypes.string).isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   sidebar: PropTypes.func.isRequired,
+  contentUnderPreview: PropTypes.node,
 };
 
 InfoModal.defaultProps = {
diff --git a/src/files-and-videos/generic/messages.ts b/src/files-and-videos/generic/messages.ts
index bb4badf86f..303e8c6bab 100644
--- a/src/files-and-videos/generic/messages.ts
+++ b/src/files-and-videos/generic/messages.ts
@@ -115,6 +115,11 @@ const messages = defineMessages({
     defaultMessage: 'Info',
     description: 'Label for info button in card menu dropdown',
   },
+  infoAndTranscriptsTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.infoAndTranscriptsTitle',
+    defaultMessage: 'Info and transcripts',
+    description: 'Label for video info button in card menu dropdown',
+  },
   downloadEncodingsTitle: {
     id: 'course-authoring.files-and-uploads.cardMenu.downloadEncodingsTitle',
     defaultMessage: 'Download video list (.csv)',
@@ -214,6 +219,11 @@ const messages = defineMessages({
     defaultMessage: 'Upload a file',
     description: 'Accessible (screen reader) label for file input',
   },
+  transcriptCountLabel: {
+    id: 'course-authoring.videos-page.table.transcriptColumn.message',
+    defaultMessage: '{numOfTranscripts, plural, =0 {No transcripts available} one {{numOfTranscripts} transcript available} other {{numOfTranscripts} transcripts available}}',
+    description: 'Message with the number of transcripts available for a video',
+  },
 });
 
 export default messages;
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
index 03b76691fd..21e1e9f0dd 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
@@ -122,7 +122,7 @@ const MoreInfoColumn = ({
             variant="tertiary"
             onClick={() => handleOpenFileInfo(row.original)}
           >
-            <FormattedMessage {...messages.infoTitle} />
+            <FormattedMessage {...(fileType === 'video' ? messages.infoAndTranscriptsTitle : messages.infoTitle)} />
           </MenuItem>
 
           {permissions.canDeleteFiles && (
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.test.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.test.jsx
index 0e58c00fff..0bb4179af8 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.test.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.test.jsx
@@ -159,7 +159,7 @@ describe('MoreInfoColumn', () => {
 
       expect(screen.queryByText('Copy video ID')).not.toBeInTheDocument();
       expect(screen.queryByText('Download')).not.toBeInTheDocument();
-      expect(screen.getByText('Info')).toBeInTheDocument();
+      expect(screen.getByText('Info and transcripts')).toBeInTheDocument();
     });
 
     it('calls handleBulkDownload when Download is clicked', async () => {
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
index 230a7e259a..46060c6578 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
@@ -1,26 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Icon } from '@openedx/paragon';
+import { Button, Icon } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';
 import { TRANSCRIPT_FAILURE_STATUSES } from '../../../videos-page/data/constants';
+import messages from '../../messages';
 
-const TranscriptColumn = ({ row }) => {
+const TranscriptColumn = ({ row, handleOpenFileInfo = /** @type {((file: any) => void) | null} */ (null) }) => {
   const { transcripts, transcriptionStatus } = row.original;
-  const numOfTranscripts = transcripts?.length;
-  const transcriptMessage = numOfTranscripts > 0 ? `(${numOfTranscripts}) available` : null;
+  const numOfTranscripts = transcripts?.length ?? 0;
+  const label = <FormattedMessage {...messages.transcriptCountLabel} values={{ numOfTranscripts }} />;
 
   return (
     <div className="row m-0 align-items-center">
       {TRANSCRIPT_FAILURE_STATUSES.includes(transcriptionStatus) && (
         <Icon src={Info} size="sm" className="mr-2 text-danger-500" />
       )}
-      <FormattedMessage
-        id="course-authoring.videos-page.table.transcriptColumn.message"
-        description="Message with the number of transcripts available"
-        defaultMessage="{message}"
-        values={{ message: transcriptMessage }}
-      />
+      {handleOpenFileInfo ?
+        (
+          <Button
+            variant="link"
+            size="inline"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleOpenFileInfo(row.original);
+            }}
+          >
+            {label}
+          </Button>
+        ) :
+        label}
     </div>
   );
 };
@@ -32,6 +41,7 @@ TranscriptColumn.propTypes = {
       transcriptionStatus: PropTypes.string.isRequired,
     }.isRequired,
   }.isRequired,
+  handleOpenFileInfo: PropTypes.func,
 };
 
 export default TranscriptColumn;
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.test.tsx b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.test.tsx
new file mode 100644
index 0000000000..165c0c0857
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.test.tsx
@@ -0,0 +1,42 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+} from '@src/testUtils';
+import TranscriptColumn from './TranscriptColumn';
+
+const rowWith = (transcripts: string[], transcriptionStatus = '') => ({
+  original: { transcripts, transcriptionStatus },
+});
+
+describe('TranscriptColumn', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('pluralizes the transcript count', () => {
+    const { rerender } = render(<TranscriptColumn row={rowWith(['en'])} />);
+    expect(screen.getByText('1 transcript available')).toBeInTheDocument();
+
+    rerender(<TranscriptColumn row={rowWith(['en', 'es', 'fr'])} />);
+    expect(screen.getByText('3 transcripts available')).toBeInTheDocument();
+
+    rerender(<TranscriptColumn row={rowWith([])} />);
+    expect(screen.getByText('No transcripts available')).toBeInTheDocument();
+  });
+
+  it('renders plain text when no handler is provided', () => {
+    render(<TranscriptColumn row={rowWith(['en'])} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('opens the file info from the count link, including when there are no transcripts yet', () => {
+    const handleOpenFileInfo = jest.fn();
+    const row = rowWith([]);
+    render(<TranscriptColumn row={row} handleOpenFileInfo={handleOpenFileInfo} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'No transcripts available' }));
+    expect(handleOpenFileInfo).toHaveBeenCalledWith(row.original);
+  });
+});
diff --git a/src/files-and-videos/index.scss b/src/files-and-videos/index.scss
index ee5c3d58c8..bd8b97c9ad 100644
--- a/src/files-and-videos/index.scss
+++ b/src/files-and-videos/index.scss
@@ -79,3 +79,13 @@
 .video-upload-warning-text {
   font-size: 18px;
 }
+
+.transcript-upload-button {
+  border-radius: 5px;
+  border: 2px solid;
+
+  &:focus::before,
+  &:focus-visible::before {
+    display: none !important;
+  }
+}
diff --git a/src/files-and-videos/videos-page/CourseVideosTable.tsx b/src/files-and-videos/videos-page/CourseVideosTable.tsx
index 1aeb4c69a1..0840505754 100644
--- a/src/files-and-videos/videos-page/CourseVideosTable.tsx
+++ b/src/files-and-videos/videos-page/CourseVideosTable.tsx
@@ -29,6 +29,7 @@ import {
 } from '@src/files-and-videos/videos-page/data/thunks';
 import { getFormattedDuration, resampleFile } from '@src/files-and-videos/videos-page/data/utils';
 import VideoInfoModalSidebar from '@src/files-and-videos/videos-page/info-sidebar';
+import InfoTab from '@src/files-and-videos/videos-page/info-sidebar/InfoTab';
 import messages from '@src/files-and-videos/videos-page/messages';
 import TranscriptSettings from '@src/files-and-videos/videos-page/transcript-settings';
 import UploadModal from '@src/files-and-videos/videos-page/upload-modal';
@@ -159,9 +160,8 @@ export const CourseVideosTable = () => {
       handleAddThumbnail,
       videoImageSettings,
     });
-  const infoModalSidebar = (video, activeTab, setActiveTab) => (
-    <VideoInfoModalSidebar video={video} activeTab={activeTab} setActiveTab={setActiveTab} />
-  );
+  const infoModalSidebar = (video) => <VideoInfoModalSidebar video={video} />;
+  const infoModalContentUnderPreview = (video) => <InfoTab video={video} />;
   const maxFileSize = videoUploadMaxFileSize * 1073741824;
   const transcriptColumn = {
     id: 'transcriptStatus',
@@ -279,6 +279,7 @@ export const CourseVideosTable = () => {
                 maxFileSize,
                 thumbnailPreview,
                 infoModalSidebar,
+                infoModalContentUnderPreview,
                 files: videos,
               }}
             />
diff --git a/src/files-and-videos/videos-page/VideosPage.test.tsx b/src/files-and-videos/videos-page/VideosPage.test.tsx
index 4a39689213..91e2ddb042 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.tsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.tsx
@@ -502,10 +502,10 @@ describe('Videos page', () => {
             });
 
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
+          fireEvent.click(screen.getByText(messages.infoAndTranscriptsTitle.defaultMessage));
 
           await waitFor(() => {
-            expect(screen.getByText(messages.infoTitle.defaultMessage)).toBeVisible();
+            expect(screen.getByText(messages.usageTitle.defaultMessage)).toBeVisible();
           });
 
           const { usageStatus } = store.getState().videos;
@@ -521,15 +521,12 @@ describe('Videos page', () => {
 
           axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
+          fireEvent.click(screen.getByText(messages.infoAndTranscriptsTitle.defaultMessage));
           await waitFor(() => {
             expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
           });
 
-          const infoTab = screen.getAllByRole('tab')[0];
-          expect(infoTab).toBeVisible();
-
-          expect(infoTab).toHaveClass('active');
+          expect(screen.getByText(messages.usageTitle.defaultMessage)).toBeVisible();
         });
 
         it('should open video info modal and show transcript tab', async () => {
@@ -538,16 +535,12 @@ describe('Videos page', () => {
 
           axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
+          fireEvent.click(screen.getByText(messages.infoAndTranscriptsTitle.defaultMessage));
           await waitFor(() => {
             expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
           });
 
-          const transcriptTab = screen.getAllByRole('tab')[1];
-          fireEvent.click(transcriptTab);
-          expect(transcriptTab).toBeVisible();
-
-          expect(transcriptTab).toHaveClass('active');
+          expect(screen.getByText('Transcript (0)')).toBeVisible();
         });
 
         it('should show transcript error', async () => {
@@ -556,12 +549,11 @@ describe('Videos page', () => {
 
           axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID3/usage`).reply(201, { usageLocations: [] });
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
-
-          const transcriptTab = screen.getAllByRole('tab')[1];
-          fireEvent.click(transcriptTab);
+          fireEvent.click(screen.getByText(messages.infoAndTranscriptsTitle.defaultMessage));
 
-          expect(screen.getByText('Transcript (1)')).toBeVisible();
+          await waitFor(() => {
+            expect(screen.getByText('Transcript (1)')).toBeVisible();
+          });
         });
       });
 
@@ -712,7 +704,7 @@ describe('Videos page', () => {
 
         axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID3/usage`).reply(404);
         fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-        fireEvent.click(screen.getByText('Info'));
+        fireEvent.click(screen.getByText(messages.infoAndTranscriptsTitle.defaultMessage));
         await executeThunk(
           getUsagePaths({
             courseId,
diff --git a/src/files-and-videos/videos-page/data/api.js b/src/files-and-videos/videos-page/data/api.js
index b6d1f41d82..655c27aea5 100644
--- a/src/files-and-videos/videos-page/data/api.js
+++ b/src/files-and-videos/videos-page/data/api.js
@@ -75,12 +75,21 @@ export async function downloadTranscript({
   apiUrl,
   filename,
 }) {
-  const { data } = await getAuthenticatedHttpClient()
-    .get(`${getApiBaseUrl()}${apiUrl}?edx_video_id=${videoId}&language_code=${language}`);
+  const data = await fetchTranscriptContent({ videoId, language, apiUrl });
   const file = new Blob([data], { type: 'text/plain;charset=utf-8' });
   saveAs(file, filename);
 }
 
+export async function fetchTranscriptContent({
+  videoId,
+  language,
+  apiUrl,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getApiBaseUrl()}${apiUrl}?edx_video_id=${videoId}&language_code=${language}`);
+  return data;
+}
+
 export async function uploadTranscript({
   videoId,
   newLanguage,
diff --git a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx
index c46fe8a305..25fe9a3c4f 100644
--- a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx
@@ -1,14 +1,35 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { Button, Stack } from '@openedx/paragon';
-import { Add } from '@openedx/paragon/icons';
+import {
+  Button,
+  Icon,
+  IconButton,
+  Spinner,
+  Stack,
+  Toast,
+} from '@openedx/paragon';
+import {
+  Add,
+  CheckCircle,
+  Delete,
+  Error as ErrorIcon,
+  FileUpload,
+  Article,
+} from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { getLanguages, getSortedTranscripts } from '../data/utils';
 import Transcript from './transcript-item';
+import LanguageSelect from './transcript-item/LanguageSelect';
+import { FileInput, useFileInput } from '../../generic';
 import {
   deleteVideoTranscript,
   downloadVideoTranscript,
@@ -17,6 +38,7 @@ import {
 } from '../data/thunks';
 import { RequestStatus } from '../../../data/constants';
 import messages from './messages';
+import { isValidSrt } from '../transcript-editor/srtUtils';
 
 const TranscriptTab = ({
   video,
@@ -35,9 +57,44 @@ const TranscriptTab = ({
     transcriptDownloadHandlerUrl,
   } = videoTranscriptSettings;
   const { transcripts, id, displayName } = video;
-  const languages = getLanguages(transcriptAvailableLanguages);
+  const languages = useMemo(
+    () => getLanguages(transcriptAvailableLanguages),
+    [transcriptAvailableLanguages],
+  );
   let sortedTranscripts = getSortedTranscripts(languages, transcripts);
   const [previousSelection, setPreviousSelection] = useState(sortedTranscripts);
+  const [isAddingTranscript, setIsAddingTranscript] = useState(false);
+  const [newLanguage, setNewLanguage] = useState('');
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [pendingFileName, setPendingFileName] = useState('');
+  const [isSubmittingNewTranscript, setIsSubmittingNewTranscript] = useState(false);
+  const [isSubmittingReplace, setIsSubmittingReplace] = useState(false);
+  const [showAddTranscriptError, setShowAddTranscriptError] = useState(false);
+  const [showAddedToast, setShowAddedToast] = useState(false);
+  const [invalidSrtFile, setInvalidSrtFile] = useState(false);
+
+  const addTranscriptFileInput = useFileInput({
+    onAddFile: (files) => {
+      const [file] = files;
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (!isValidSrt(e.target.result)) {
+          setInvalidSrtFile(true);
+          setSelectedFile(null);
+        } else {
+          setInvalidSrtFile(false);
+          setSelectedFile(file);
+          setShowAddTranscriptError(false);
+        }
+      };
+      reader.readAsText(file);
+    },
+    setSelectedRows: () => {},
+    setAddOpen: () => {},
+  });
 
   useEffect(() => {
     dispatch(resetErrors({ errorType: 'transcript' }));
@@ -45,22 +102,59 @@ const TranscriptTab = ({
     setPreviousSelection(sortedTranscripts);
   }, [transcripts]);
 
-  const handleAddEmptyTranscript = () => {
-    setPreviousSelection(['', ...previousSelection]);
-    if (divRef?.current?.scrollTo) {
-      divRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+  useEffect(() => {
+    if (isAddingTranscript) {
+      const firstAvailableLanguage = Object.keys(languages).find((lang) => !previousSelection.includes(lang));
+      setNewLanguage(firstAvailableLanguage || '');
+      setSelectedFile(null);
     }
-  };
+  }, [isAddingTranscript]);
+
+  useEffect(() => {
+    if (!isAddingTranscript || !isSubmittingNewTranscript) {
+      return;
+    }
+
+    if (transcriptStatus === RequestStatus.SUCCESSFUL) {
+      setIsSubmittingNewTranscript(false);
+      setPendingFileName('');
+      setIsAddingTranscript(false);
+      setSelectedFile(null);
+      setShowAddTranscriptError(false);
+      setShowAddedToast(true);
+    }
+
+    if (transcriptStatus === RequestStatus.FAILED) {
+      setIsSubmittingNewTranscript(false);
+      setPendingFileName('');
+      setSelectedFile(null);
+      setShowAddTranscriptError(true);
+    }
+  }, [isAddingTranscript, isSubmittingNewTranscript, transcriptStatus]);
+
+  useEffect(() => {
+    if (!isSubmittingReplace) {
+      return;
+    }
+    if (transcriptStatus === RequestStatus.SUCCESSFUL) {
+      setIsSubmittingReplace(false);
+      setShowAddedToast(true);
+    }
+    if (transcriptStatus === RequestStatus.FAILED) {
+      setIsSubmittingReplace(false);
+    }
+  }, [isSubmittingReplace, transcriptStatus]);
 
   const handleTranscript = (data, actionType) => {
     const {
       language,
-      newLanguage,
+      newLanguage: transcriptNewLanguage,
       file,
     } = data;
     dispatch(resetErrors({ errorType: 'transcript' }));
     switch (actionType) {
       case 'delete':
+        /* istanbul ignore if -- legacy empty-row path; the add form no longer creates empty rows */
         if (isEmpty(language)) {
           const updatedSelection = previousSelection;
           updatedSelection.shift();
@@ -83,26 +177,48 @@ const TranscriptTab = ({
         }));
         break;
       case 'upload':
+        if (!isEmpty(language)) {
+          setIsSubmittingReplace(true);
+        }
         dispatch(uploadVideoTranscript({
           language,
           videoId: id,
           apiUrl: transcriptUploadHandlerUrl,
-          newLanguage,
+          newLanguage: transcriptNewLanguage,
           file,
           transcripts,
         }));
         break;
+      /* istanbul ignore next */
       default:
         break;
     }
   };
 
+  const availableLanguages = Object.entries(languages)
+    .filter(([lang]) => !previousSelection.includes(lang));
+
+  const handleSubmitNewTranscript = () => {
+    /* istanbul ignore if -- the submit button is disabled in this state */
+    if (!newLanguage || !selectedFile) {
+      return;
+    }
+    setShowAddTranscriptError(false);
+    setIsSubmittingNewTranscript(true);
+    setPendingFileName(selectedFile.name);
+    handleTranscript({
+      language: '',
+      newLanguage,
+      file: selectedFile,
+    }, 'upload');
+  };
+
   return (
     <Stack gap={3}>
-      <div ref={divRef} style={{ overflowY: 'auto', maxHeight: '310px' }} className="px-1 py-2">
+      <div ref={divRef} style={{ overflowY: 'auto' }} className="px-1 py-2">
         <ErrorAlert
           hideHeading={false}
-          isError={transcriptStatus === RequestStatus.FAILED && !isEmpty(errors.transcript)}
+          isError={!isAddingTranscript && transcriptStatus === RequestStatus.FAILED && !isEmpty(errors.transcript)}
         >
           <ul className="p-0">
             {errors.transcript.map(message => (
@@ -112,30 +228,157 @@ const TranscriptTab = ({
             ))}
           </ul>
         </ErrorAlert>
-        {previousSelection.map((transcript, idx) => (
-          <Transcript
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            {...{
-              languages,
-              transcript,
-              previousSelection,
-              handleTranscript,
-            }}
-          />
-        ))}
-      </div>
-      <div className="border-top border-light-400">
-        <Button
-          variant="link"
-          iconBefore={Add}
-          size="sm"
-          className="text-primary-500 justify-content-start pl-0 pt-3"
-          onClick={handleAddEmptyTranscript}
-        >
-          {intl.formatMessage(messages.uploadButtonLabel)}
-        </Button>
+        {isAddingTranscript ?
+          (
+            <Stack gap={3}>
+              <div className="h4 mb-0">{intl.formatMessage(messages.newTranscriptTitle)}</div>
+
+              <div>
+                <LanguageSelect
+                  options={languages}
+                  value={newLanguage}
+                  placeholderText={intl.formatMessage(messages.languageSelectPlaceholder)}
+                  previousSelection={previousSelection}
+                  className="col-12 p-0"
+                  handleSelect={(lang) => {
+                    setNewLanguage(lang);
+                    setShowAddTranscriptError(false);
+                  }}
+                />
+              </div>
+
+              {!selectedFile && !isSubmittingNewTranscript && (
+                <Button
+                  variant="outline-primary"
+                  iconBefore={FileUpload}
+                  className="justify-content-center w-100 mb-0 transcript-upload-button"
+                  onClick={addTranscriptFileInput.click}
+                >
+                  {intl.formatMessage(messages.uploadFileLabel)}
+                </Button>
+              )}
+
+              {isSubmittingNewTranscript ?
+                (
+                  <Stack direction="horizontal" className="align-items-center text-gray-700 py-1">
+                    <Spinner animation="border" size="sm" className="mr-2" />
+                    <span className="small">{pendingFileName}</span>
+                  </Stack>
+                ) :
+                null}
+
+              {selectedFile && !isSubmittingNewTranscript ?
+                (
+                  <Stack
+                    direction="horizontal"
+                    className="align-items-center justify-content-between rounded py-1 transcript-tab__file-row"
+                  >
+                    <Stack
+                      direction="horizontal"
+                      gap={2}
+                      className="align-items-center text-gray-700 overflow-hidden transcript-tab__file-name-wrap"
+                    >
+                      <Icon src={Article} size="sm" className="flex-shrink-0" />
+                      <span className="text-truncate transcript-tab__file-name">{selectedFile.name}</span>
+                    </Stack>
+                    <IconButton
+                      src={Delete}
+                      iconAs={Icon}
+                      alt={intl.formatMessage(messages.removeSelectedFileLabel)}
+                      onClick={() => setSelectedFile(null)}
+                      className="flex-shrink-0"
+                    />
+                  </Stack>
+                ) :
+                null}
+
+              {showAddTranscriptError && (
+                <Stack direction="horizontal" gap={2} className="align-items-center text-danger-500">
+                  <Icon src={ErrorIcon} size="xs" />
+                  <span>{intl.formatMessage(messages.addTranscriptFailedLabel)}</span>
+                </Stack>
+              )}
+
+              {invalidSrtFile && (
+                <Stack direction="horizontal" gap={2} className="align-items-center text-danger-500">
+                  <Icon src={ErrorIcon} size="xs" />
+                  <span>{intl.formatMessage(messages.invalidSrtFormat)}</span>
+                </Stack>
+              )}
+
+              {!selectedFile && <div className="small text-gray-500">{intl.formatMessage(messages.uploadHelpText)}
+              </div>}
+
+              <Stack direction="horizontal" gap={3} className="justify-content-end">
+                <Button
+                  variant="tertiary"
+                  disabled={isSubmittingNewTranscript}
+                  onClick={() => {
+                    setIsAddingTranscript(false);
+                    setSelectedFile(null);
+                    setPendingFileName('');
+                    setIsSubmittingNewTranscript(false);
+                    setShowAddTranscriptError(false);
+                    setInvalidSrtFile(false);
+                  }}
+                >
+                  {intl.formatMessage(messages.cancelButtonLabel)}
+                </Button>
+                <Button
+                  disabled={!selectedFile || !newLanguage || isSubmittingNewTranscript}
+                  onClick={handleSubmitNewTranscript}
+                >
+                  {intl.formatMessage(messages.addTranscriptButtonLabel)}
+                </Button>
+              </Stack>
+
+              <FileInput
+                key="new-transcript-input"
+                fileInput={addTranscriptFileInput}
+                supportedFileFormats={['.srt']}
+                allowMultiple={false}
+              />
+            </Stack>
+          ) :
+          (
+            <>
+              {previousSelection.map((transcript, idx) => (
+                <Transcript
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={idx}
+                  {...{
+                    languages,
+                    transcript,
+                    previousSelection,
+                    handleTranscript,
+                    video,
+                    transcriptSettings: videoTranscriptSettings,
+                  }}
+                />
+              ))}
+            </>
+          )}
       </div>
+      {!isAddingTranscript && (
+        <div className="border-top border-light-400">
+          <Button
+            variant="link"
+            iconBefore={Add}
+            size="sm"
+            className="text-primary-500 justify-content-start pl-0 pt-3"
+            onClick={() => setIsAddingTranscript(true)}
+            disabled={availableLanguages.length === 0}
+          >
+            {intl.formatMessage(messages.uploadButtonLabel)}
+          </Button>
+        </div>
+      )}
+      <Toast show={showAddedToast} onClose={() => setShowAddedToast(false)}>
+        <Stack direction="horizontal" gap={2} className="align-items-center">
+          <Icon src={CheckCircle} className="text-success" />
+          <span>{intl.formatMessage(messages.newTranscriptAddedLabel)}</span>
+        </Stack>
+      </Toast>
     </Stack>
   );
 };
diff --git a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx
index 656214024d..3b9faa735b 100644
--- a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx
@@ -4,7 +4,9 @@ import {
   fireEvent,
   screen,
   waitFor,
+  within,
 } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 import ReactDOM from 'react-dom';
 
@@ -27,8 +29,8 @@ import {
 
 import { getApiBaseUrl } from '../data/api';
 import messages from './messages';
-import genericMessages from '../../generic/messages';
 import transcriptRowMessages from './transcript-item/messages';
+import editorMessages from '../transcript-editor/messages';
 import VideosPageProvider from '../VideosPageProvider';
 import { deleteVideoTranscript } from '../data/thunks';
 
@@ -51,20 +53,42 @@ const defaultProps = {
 
 let axiosMock;
 let store;
+let queryClient;
 jest.mock('file-saver');
 
 const renderComponent = (props) => {
   render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <VideosPageProvider courseId={courseId}>
-          <TranscriptTab video={props} />
-        </VideosPageProvider>
-      </AppProvider>
-    </IntlProvider>,
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          <VideosPageProvider courseId={courseId}>
+            <TranscriptTab video={props} />
+          </VideosPageProvider>
+        </AppProvider>
+      </IntlProvider>
+    </QueryClientProvider>,
   );
 };
 
+const openAddForm = async () => {
+  const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
+  await act(async () => {
+    fireEvent.click(addButton);
+  });
+};
+
+const selectLanguage = async (languageText, dropdownEl = null) => {
+  const dropdown = dropdownEl || screen.getByTestId('language-select-dropdown');
+  await act(async () => {
+    fireEvent.click(dropdown);
+  });
+  const allMatches = screen.getAllByText(languageText);
+  const option = allMatches.find(el => el.closest('.pgn__menu')) || allMatches[allMatches.length - 1];
+  await act(async () => {
+    fireEvent.click(option);
+  });
+};
+
 describe('TranscriptTab', () => {
   beforeEach(async () => {
     initializeMockApp({
@@ -77,97 +101,92 @@ describe('TranscriptTab', () => {
     });
     store = initializeStore(initialState);
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    axiosMock.onGet(/course_waffle_flags/).reply(200, {});
   });
 
   describe('with no transcripts preloaded', () => {
     it('should have add transcript button', async () => {
       renderComponent(defaultProps);
       const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
-      const transcriptRow = screen.queryByTestId('transcript', { exact: false });
+      const transcriptRow = screen.queryByTestId('transcript-', { exact: false });
       expect(addButton).toBeInTheDocument();
       expect(transcriptRow).toBeNull();
     });
 
-    it('should delete empty transcript row', async () => {
+    it('should open and cancel new transcript form', async () => {
       renderComponent(defaultProps);
-      const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
-      await act(async () => {
-        fireEvent.click(addButton);
-      });
-
-      const deleteButton = screen.getByLabelText('delete empty transcript');
-      await act(async () => {
-        fireEvent.click(deleteButton);
-      });
+      await openAddForm();
 
-      expect(screen.getByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeVisible();
+      expect(screen.getByText(messages.newTranscriptTitle.defaultMessage)).toBeVisible();
 
-      const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+      const cancelButton = screen.getByText(messages.cancelButtonLabel.defaultMessage);
       await act(async () => {
-        fireEvent.click(confirmButton);
+        fireEvent.click(cancelButton);
       });
 
-      expect(screen.queryByTestId('transcript-')).toBeNull();
+      expect(screen.queryByText(messages.newTranscriptTitle.defaultMessage)).toBeNull();
     });
 
     describe('uploadVideoTranscript as add function', () => {
-      let addButton;
-      const file = new File(['(⌐□_□)'], 'download.srt', { type: 'text/srt' });
-      beforeEach(async () => {
-        renderComponent(defaultProps);
-        addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
-
-        await act(async () => {
-          fireEvent.click(addButton);
-        });
-      });
+      const srtContent = '1\n00:00:00,000 --> 00:00:01,000\nTest\n';
+      const file = new File([srtContent], 'download.srt', { type: 'text/srt' });
 
       it('should upload new transcript', async () => {
         const user = userEvent.setup();
+        renderComponent(defaultProps);
         axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(204);
+
+        await openAddForm();
+        await selectLanguage('Arabic');
+
         await act(async () => {
-          const addFileInput = screen.getByLabelText(genericMessages.fileInputAriaLabel.defaultMessage);
-          expect(addFileInput).toBeInTheDocument();
+          fireEvent.click(screen.getByText(messages.uploadFileLabel.defaultMessage));
+        });
+        const fileInputs = document.querySelectorAll('input[type="file"]');
+        await act(async () => {
+          await user.upload(fileInputs[fileInputs.length - 1], file);
+        });
 
-          await user.upload(addFileInput, file);
+        const submitButton = screen.getByText(messages.addTranscriptButtonLabel.defaultMessage);
+        await act(async () => {
+          fireEvent.click(submitButton);
         });
-        const addStatus = store.getState().videos.transcriptStatus;
 
+        const addStatus = store.getState().videos.transcriptStatus;
         expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
       });
 
-      it('should show default error message', async () => {
+      it('should show default error message on upload failure', async () => {
         const user = userEvent.setup();
+        renderComponent(defaultProps);
         axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404);
-        await act(async () => {
-          const addFileInput = screen.getByLabelText(genericMessages.fileInputAriaLabel.defaultMessage);
-          await user.upload(addFileInput, file);
-        });
-        const addStatus = store.getState().videos.transcriptStatus;
 
-        expect(addStatus).toEqual(RequestStatus.FAILED);
+        await openAddForm();
+        await selectLanguage('Arabic');
 
-        expect(screen.getAllByText('Failed to add .')[0]).toBeVisible();
-      });
+        await act(async () => {
+          fireEvent.click(screen.getByText(messages.uploadFileLabel.defaultMessage));
+        });
+        const fileInputs = document.querySelectorAll('input[type="file"]');
+        await act(async () => {
+          await user.upload(fileInputs[fileInputs.length - 1], file);
+        });
 
-      it('should show api provided error message', async () => {
-        const user = userEvent.setup();
-        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404, { error: 'api error' });
+        const submitButton = screen.getByText(messages.addTranscriptButtonLabel.defaultMessage);
         await act(async () => {
-          const addFileInput = screen.getByLabelText(genericMessages.fileInputAriaLabel.defaultMessage);
-          await user.upload(addFileInput, file);
+          fireEvent.click(submitButton);
         });
-        const addStatus = store.getState().videos.transcriptStatus;
 
+        const addStatus = store.getState().videos.transcriptStatus;
         expect(addStatus).toEqual(RequestStatus.FAILED);
-
-        expect(screen.getAllByText('api error')[0]).toBeVisible();
       });
     });
   });
 
-  describe('with one transcripts preloaded', () => {
+  describe('with one transcript preloaded', () => {
     const updatedProps = { ...defaultProps, transcripts: ['ar'] };
+
     beforeEach(() => {
       renderComponent(updatedProps);
     });
@@ -195,12 +214,12 @@ describe('TranscriptTab', () => {
         await waitFor(() => {
           fireEvent.click(cancelButton);
         });
-
         expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
       });
 
       it('should open delete confirmation modal and handle delete', async () => {
-        const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+        const confirmButton = screen.getAllByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage)
+          .find(el => el.closest('.btn-danger') || el.classList.contains('btn-danger'));
         axiosMock.onDelete(`${getApiBaseUrl()}/transcript_delete/${courseId}/mOckID0/ar`).reply(204);
         await act(async () => {
           fireEvent.click(confirmButton);
@@ -215,14 +234,13 @@ describe('TranscriptTab', () => {
           );
         });
         const deleteStatus = store.getState().videos.transcriptStatus;
-
         expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
-
         expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
       });
 
-      it('should show error message', async () => {
-        const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+      it('should show error message on delete failure', async () => {
+        const confirmButton = screen.getAllByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage)
+          .find(el => el.closest('.btn-danger') || el.classList.contains('btn-danger'));
         axiosMock.onDelete(`${getApiBaseUrl()}/transcript_delete/${courseId}/mOckID0/ar`).reply(404);
         await act(async () => {
           fireEvent.click(confirmButton);
@@ -237,11 +255,8 @@ describe('TranscriptTab', () => {
           );
         });
         const deleteStatus = store.getState().videos.transcriptStatus;
-
         expect(deleteStatus).toEqual(RequestStatus.FAILED);
-
         expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
-
         expect(screen.getAllByText('Failed to delete ar transcript.')[0]).toBeVisible();
       });
     });
@@ -266,11 +281,10 @@ describe('TranscriptTab', () => {
           fireEvent.click(downloadButton);
         });
         const downloadStatus = store.getState().videos.transcriptStatus;
-
         expect(downloadStatus).toEqual(RequestStatus.SUCCESSFUL);
       });
 
-      it('should show error message', async () => {
+      it('should show error message on download failure', async () => {
         const filename = 'mOckID0.mp4-ar.srt';
         axiosMock.onGet(
           `${getApiBaseUrl()}/transcript_download/?edx_video_id=${updatedProps.id}&language_code=ar`,
@@ -279,9 +293,7 @@ describe('TranscriptTab', () => {
           fireEvent.click(downloadButton);
         });
         const downloadStatus = store.getState().videos.transcriptStatus;
-
         expect(downloadStatus).toEqual(RequestStatus.FAILED);
-
         expect(screen.getAllByText(`Failed to download ${filename}.`)[0]).toBeVisible();
       });
     });
@@ -289,19 +301,15 @@ describe('TranscriptTab', () => {
 
   describe('with multiple transcripts preloaded', () => {
     describe('uploadVideoTranscript as replace function', () => {
-      const file = new File(['(⌐□_□)'], 'download.srt', { type: 'text/srt' });
+      const srtContent = '1\n00:00:00,000 --> 00:00:01,000\nTest\n';
+      const file = new File([srtContent], 'download.srt', { type: 'text/srt' });
+
       beforeEach(async () => {
         const updatedProps = { ...defaultProps, transcripts: ['fr', 'ar'] };
         renderComponent(updatedProps);
-        const dropdownButton = screen.getAllByTestId('language-select-dropdown')[0];
-        await waitFor(() => {
-          fireEvent.click(dropdownButton);
-        });
 
-        const englishOption = screen.getByText('English');
-        await act(async () => {
-          fireEvent.click(englishOption);
-        });
+        const dropdownButtons = screen.getAllByTestId('language-select-dropdown');
+        await selectLanguage('English', dropdownButtons[0]);
 
         const menuButton = screen.getByTestId('ar-transcript-menu');
         await waitFor(() => {
@@ -318,33 +326,139 @@ describe('TranscriptTab', () => {
         axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(204);
 
         await act(async () => {
-          const addFileInput = screen.getAllByLabelText(genericMessages.fileInputAriaLabel.defaultMessage)[0];
-          await user.upload(addFileInput, file);
+          const fileInputs = document.querySelectorAll('input[type="file"]');
+          await user.upload(fileInputs[0], file);
         });
-        const addStatus = store.getState().videos.transcriptStatus;
 
+        const addStatus = store.getState().videos.transcriptStatus;
         expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
 
         const updatedTranscripts = store.getState().models.videos[defaultProps.id].transcripts;
-
         expect(updatedTranscripts).toEqual(['fr', 'en']);
       });
 
-      it('should show error message', async () => {
+      it('should show error message on replace failure', async () => {
         const user = userEvent.setup();
         axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404);
 
         await act(async () => {
-          const addFileInput = screen.getAllByLabelText(genericMessages.fileInputAriaLabel.defaultMessage)[0];
-          await user.upload(addFileInput, file);
+          const fileInputs = document.querySelectorAll('input[type="file"]');
+          await user.upload(fileInputs[0], file);
         });
 
         const addStatus = store.getState().videos.transcriptStatus;
-
         expect(addStatus).toEqual(RequestStatus.FAILED);
-
         expect(screen.getAllByText('Failed to replace ar with en.')[0]).toBeVisible();
       });
     });
   });
+  describe('add transcript form interactions', () => {
+    const srt = '1\n00:00:01,000 --> 00:00:02,000\nHello\n';
+    const chooseFile = async (file) => {
+      await act(async () => {
+        fireEvent.change(document.querySelector('input[type="file"]'), { target: { files: file ? [file] : [] } });
+      });
+    };
+
+    it('shows the selected SRT and lets the user remove it before submitting', async () => {
+      renderComponent(defaultProps);
+      await openAddForm();
+      await chooseFile(new File([srt], 'valid.srt', { type: 'text/srt' }));
+      expect(await screen.findByText('valid.srt')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole('button', { name: messages.removeSelectedFileLabel.defaultMessage }));
+      await waitFor(() => expect(screen.queryByText('valid.srt')).not.toBeInTheDocument());
+    });
+
+    it('rejects an invalid SRT file on add', async () => {
+      renderComponent(defaultProps);
+      await openAddForm();
+      await chooseFile(new File(['not an srt'], 'bad.srt', { type: 'text/srt' }));
+      expect(await screen.findByText(messages.invalidSrtFormat.defaultMessage)).toBeInTheDocument();
+      expect(screen.queryByText('bad.srt')).not.toBeInTheDocument();
+    });
+
+    it('ignores an empty file selection', async () => {
+      renderComponent(defaultProps);
+      await openAddForm();
+      await chooseFile(null);
+      expect(screen.queryByText(messages.invalidSrtFormat.defaultMessage)).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: messages.addTranscriptButtonLabel.defaultMessage })).toBeDisabled();
+    });
+
+    it('filters the language list from the search box and reports no results', async () => {
+      renderComponent(defaultProps);
+      await openAddForm();
+      await act(async () => {
+        fireEvent.click(screen.getByTestId('language-select-dropdown'));
+      });
+      const search = screen.getByPlaceholderText(transcriptRowMessages.searchLanguagesPlaceholder.defaultMessage);
+      fireEvent.change(search, { target: { value: 'zzzz' } });
+      expect(screen.getByText(transcriptRowMessages.noLanguageResults.defaultMessage)).toBeInTheDocument();
+      fireEvent.change(search, { target: { value: 'Eng' } });
+      const options = screen.getAllByText('English');
+      await act(async () => {
+        fireEvent.click(options[options.length - 1]);
+      });
+      expect(screen.getByTestId('language-select-dropdown')).toHaveTextContent('English');
+    });
+
+    it('submits a new transcript, then shows a dismissible success toast', async () => {
+      axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(204);
+      renderComponent(defaultProps);
+      await openAddForm();
+      await chooseFile(new File([srt], 'valid.srt', { type: 'text/srt' }));
+      await screen.findByText('valid.srt');
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: messages.addTranscriptButtonLabel.defaultMessage }));
+      });
+      expect(await screen.findByText(messages.newTranscriptAddedLabel.defaultMessage)).toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole('button', { name: /close/i }));
+      await waitFor(() =>
+        expect(screen.queryByText(messages.newTranscriptAddedLabel.defaultMessage)).not.toBeInTheDocument()
+      );
+    });
+  });
+
+  describe('transcript row interactions', () => {
+    const rowProps = { ...defaultProps, transcripts: ['ar'] };
+    // The row's hidden file input is rendered as a sibling of the row element, first in document order.
+    const rowFileInput = () => document.querySelectorAll('input[type="file"]')[0];
+
+    it('rejects an invalid SRT file on replace', async () => {
+      renderComponent(rowProps);
+      await act(async () => {
+        fireEvent.change(rowFileInput(), { target: { files: [new File(['nope'], 'bad.srt', { type: 'text/srt' })] } });
+      });
+      expect(await screen.findByText(messages.invalidSrtFormat.defaultMessage)).toBeInTheDocument();
+    });
+
+    it('ignores an empty replace selection', async () => {
+      renderComponent(rowProps);
+      await act(async () => {
+        fireEvent.change(rowFileInput(), { target: { files: [] } });
+      });
+      expect(screen.queryByText(messages.invalidSrtFormat.defaultMessage)).not.toBeInTheDocument();
+    });
+
+    it('opens the transcript editor from the row menu and closes it again', async () => {
+      axiosMock.onGet(/edx_video_id/).reply(200, '');
+      renderComponent(rowProps);
+      const row = screen.getByTestId('transcript-ar');
+      fireEvent.click(within(row).getByRole('button', { name: 'Actions dropdown' }));
+      await act(async () => {
+        fireEvent.click(await screen.findByText(transcriptRowMessages.editTranscript.defaultMessage));
+      });
+      expect(await screen.findByRole('button', { name: editorMessages.insertCueLabel.defaultMessage }))
+        .toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole('button', { name: editorMessages.cancelButtonLabel.defaultMessage }));
+      await waitFor(() =>
+        expect(screen.queryByRole('button', { name: editorMessages.insertCueLabel.defaultMessage })).not
+          .toBeInTheDocument()
+      );
+    });
+  });
 });
diff --git a/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
index d567c54e3c..82381e456d 100644
--- a/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
@@ -1,46 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Tabs,
-  Tab,
-} from '@openedx/paragon';
-import InfoTab from './InfoTab';
+import { Stack } from '@openedx/paragon';
 import TranscriptTab from './TranscriptTab';
 import messages from './messages';
-import { TRANSCRIPT_FAILURE_STATUSES } from '../data/constants';
 
 const VideoInfoModalSidebar = ({
   video,
-  activeTab,
-  setActiveTab,
 }) => {
   const intl = useIntl();
 
   return (
-    <Tabs
-      id="controlled-info-sidebar-tab"
-      activeKey={activeTab}
-      onSelect={(tab) => setActiveTab(tab)}
-    >
-      <Tab eventKey="fileInfo" title={intl.formatMessage(messages.infoTabTitle)}>
-        <InfoTab {...{ video }} />
-      </Tab>
-      <Tab
-        eventKey="fileTranscripts"
-        title={intl.formatMessage(
-          messages.transcriptTabTitle,
-          { transcriptCount: video.transcripts.length },
-        )}
-        notification={TRANSCRIPT_FAILURE_STATUSES.includes(video.transcriptionStatus) && (
-          <span>
-            <span className="sr-only">{intl.formatMessage(messages.notificationScreenReaderText)}</span>
-          </span>
-        )}
-      >
-        <TranscriptTab {...{ video }} />
-      </Tab>
-    </Tabs>
+    <Stack gap={2}>
+      <div className="font-weight-bold pb-2 border-bottom border-light-400">
+        {intl.formatMessage(messages.transcriptTabTitle, { transcriptCount: video.transcripts.length })}
+      </div>
+      <TranscriptTab {...{ video }} />
+    </Stack>
   );
 };
 
@@ -54,8 +30,6 @@ VideoInfoModalSidebar.propTypes = {
     transcripts: PropTypes.arrayOf(PropTypes.string),
     transcriptionStatus: PropTypes.string.isRequired,
   }),
-  activeTab: PropTypes.string.isRequired,
-  setActiveTab: PropTypes.func.isRequired,
 };
 
 VideoInfoModalSidebar.defaultProps = {
diff --git a/src/files-and-videos/videos-page/info-sidebar/messages.ts b/src/files-and-videos/videos-page/info-sidebar/messages.ts
index a1823e4667..7246ad4205 100644
--- a/src/files-and-videos/videos-page/info-sidebar/messages.ts
+++ b/src/files-and-videos/videos-page/info-sidebar/messages.ts
@@ -40,6 +40,56 @@ const messages = defineMessages({
     defaultMessage: 'Add a transcript',
     description: 'Label for upload button',
   },
+  newTranscriptTitle: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.newTranscript.title',
+    defaultMessage: 'New transcript',
+    description: 'Heading shown when adding a new transcript',
+  },
+  uploadFileLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.uploadFile.label',
+    defaultMessage: 'Upload file',
+    description: 'Label for selecting a transcript file',
+  },
+  uploadHelpText: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.uploadFile.helpText',
+    defaultMessage: 'SRT file, max 25MB',
+    description: 'Help text shown under transcript upload button',
+  },
+  languageSelectPlaceholder: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.languageSelectPlaceholder',
+    defaultMessage: 'Select language',
+    description: 'Placeholder for language selector in new transcript form',
+  },
+  cancelButtonLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.cancel.label',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button text in new transcript form',
+  },
+  addTranscriptButtonLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.addTranscript.label',
+    defaultMessage: 'Add transcript',
+    description: 'Submit button label in new transcript form',
+  },
+  removeSelectedFileLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.removeSelectedFile.label',
+    defaultMessage: 'Remove selected file',
+    description: 'Accessible label for removing selected transcript file',
+  },
+  addTranscriptFailedLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.addTranscript.failed',
+    defaultMessage: 'Upload failed, please try again',
+    description: 'Inline error shown when adding transcript fails',
+  },
+  invalidSrtFormat: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.invalidSrtFormat',
+    defaultMessage: 'Invalid SRT format. Please upload a valid .srt file.',
+    description: 'Error shown when uploaded transcript file has invalid SRT content',
+  },
+  newTranscriptAddedLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.addTranscript.success',
+    defaultMessage: 'New transcript added',
+    description: 'Toast message shown when adding transcript succeeds',
+  },
 });
 
 export default messages;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
index e1a57cd9cf..d26b20a5b1 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
@@ -1,15 +1,23 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import {
   Button,
+  Form,
   Icon,
   ModalPopup,
   Menu,
   MenuItem,
   useToggle,
 } from '@openedx/paragon';
-import { Check, ExpandMore, ExpandLess } from '@openedx/paragon/icons';
+import messages from './messages';
+import {
+  Check,
+  ExpandMore,
+  ExpandLess,
+  Search,
+} from '@openedx/paragon/icons';
 import { isEmpty } from 'lodash';
 
 const LanguageSelect = ({
@@ -18,39 +26,68 @@ const LanguageSelect = ({
   options,
   handleSelect,
   placeholderText,
+  className = 'col-9 p-0',
 }) => {
+  const intl = useIntl();
   const currentSelection = isEmpty(value) ? placeholderText : options[value];
 
   const [isOpen, , close, toggle] = useToggle();
   const [target, setTarget] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+  const filteredOptions = Object.entries(options).filter(([, text]) => (
+    text?.toLowerCase().includes(normalizedQuery)
+  ));
+
+  const handleClose = () => {
+    setSearchQuery('');
+    close();
+  };
 
   return (
     <>
-      <div className="col-9 p-0">
+      <div className={className}>
         <Button
           variant="tertiary"
           size="sm"
-          className="border border-gray-700 justify-content-between"
+          className="border border-gray-700 justify-content-between language-select-dropdown-btn"
           style={{ minWidth: '100%' }}
           id={`language-select-dropdown-${currentSelection}`}
           data-testid="language-select-dropdown"
-          iconAfter={isOpen ? ExpandLess : ExpandMore}
           onClick={toggle}
           ref={setTarget}
         >
-          {currentSelection}
+          <span className="language-select-dropdown-btn__text">{currentSelection}</span>
+          <span className="language-select-dropdown-btn__divider" />
+          <Icon src={isOpen ? ExpandLess : ExpandMore} />
         </Button>
       </div>
       <ModalPopup
         placement="bottom-end"
         positionRef={target}
         isOpen={isOpen}
-        onClose={close}
-        onEscapeKey={close}
+        onClose={handleClose}
+        onEscapeKey={handleClose}
       >
         <Menu className="language-select">
           <div>
-            {Object.entries(options).map(([valueKey, text]) => {
+            <div className="px-2 pb-2 pt-1">
+              <Form.Control
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={intl.formatMessage(messages.searchLanguagesPlaceholder)}
+                controlClassName="w-100"
+                floatingLabel={null}
+              />
+            </div>
+            {filteredOptions.length === 0 && (
+              <div className="px-3 py-2 small text-muted">
+                <FormattedMessage {...messages.noLanguageResults} />
+              </div>
+            )}
+            {filteredOptions.map(([valueKey, text]) => {
               if (valueKey === value) {
                 return (
                   <MenuItem
@@ -72,7 +109,7 @@ const LanguageSelect = ({
                     size="sm"
                     onClick={() => {
                       handleSelect(valueKey);
-                      close();
+                      handleClose();
                     }}
                     key={`${valueKey}-item`}
                   >
@@ -95,7 +132,7 @@ const LanguageSelect = ({
           </div>
         </Menu>
         <div className="row justify-content-center">
-          <Icon src={ExpandMore} size="xs" />
+          <Icon src={Search} size="xs" />
         </div>
       </ModalPopup>
     </>
@@ -108,6 +145,7 @@ LanguageSelect.propTypes = {
   handleSelect: PropTypes.func.isRequired,
   placeholderText: PropTypes.string.isRequired,
   previousSelection: PropTypes.arrayOf(PropTypes.string).isRequired,
+  className: PropTypes.string,
 };
 
 export default LanguageSelect;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss
index 9e893d971f..09127601fc 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss
@@ -1,3 +1,22 @@
+.language-select-dropdown-btn {
+  border-radius: 6px !important;
+  border-color: var(--pgn-color-gray-500) !important;
+
+  &__text {
+    flex: 1;
+    text-align: left;
+  }
+
+  &__divider {
+    display: inline-block;
+    width: 1px;
+    height: 1rem;
+    background-color: var(--pgn-color-gray-500);
+    margin: 0 .5rem;
+    align-self: center;
+  }
+}
+
 .language-select {
   padding: 8px 0;
   margin: 0;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
index 77301d7010..4b1feba4c8 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
@@ -1,29 +1,38 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Card,
+  ActionRow,
+  AlertModal,
   Button,
   Icon,
   IconButton,
+  Stack,
   useToggle,
 } from '@openedx/paragon';
-import { DeleteOutline } from '@openedx/paragon/icons';
+import { DeleteOutline, Error as ErrorIcon } from '@openedx/paragon/icons';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { isEmpty } from 'lodash';
 import LanguageSelect from './LanguageSelect';
 import TranscriptMenu from './TranscriptMenu';
 import messages from './messages';
+import sidebarMessages from '../messages';
 import { FileInput, useFileInput } from '../../../generic';
+import TranscriptEditor from '../../transcript-editor';
+import { isValidSrt } from '../../transcript-editor/srtUtils';
 
 const Transcript = ({
   languages,
   transcript,
   previousSelection,
   handleTranscript,
+  video,
+  transcriptSettings,
 }) => {
   const intl = useIntl();
   const [isConfirmationOpen, openConfirmation, closeConfirmation] = useToggle();
   const [newLanguage, setNewLanguage] = useState(transcript);
+  const [editorLanguage, setEditorLanguage] = useState('');
+  const [invalidSrtFile, setInvalidSrtFile] = useState(false);
   const language = transcript;
 
   useEffect(() => {
@@ -33,11 +42,23 @@ const Transcript = ({
   const input = useFileInput({
     onAddFile: (files) => {
       const [file] = files;
-      handleTranscript({
-        file,
-        language,
-        newLanguage,
-      }, 'upload');
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (!isValidSrt(e.target.result)) {
+          setInvalidSrtFile(true);
+        } else {
+          setInvalidSrtFile(false);
+          handleTranscript({
+            file,
+            language,
+            newLanguage,
+          }, 'upload');
+        }
+      };
+      reader.readAsText(file);
     },
     setSelectedRows: () => {},
     setAddOpen: () => {},
@@ -52,70 +73,81 @@ const Transcript = ({
 
   return (
     <>
-      {isConfirmationOpen ?
-        (
-          <Card className="my-2">
-            <Card.Header className="h3" title={<FormattedMessage {...messages.deleteConfirmationHeader} />} />
-            <Card.Body>
-              <Card.Section>
-                <FormattedMessage {...messages.deleteConfirmationMessage} />
-              </Card.Section>
-              <Card.Footer>
-                <Button size="sm" variant="tertiary" className="mb-2 mb-sm-0" onClick={closeConfirmation}>
-                  <FormattedMessage {...messages.cancelDeleteLabel} />
-                </Button>
-                <Button
-                  variant="danger"
-                  className="mb-2 mb-sm-0"
-                  size="sm"
-                  onClick={() => {
-                    handleTranscript({ language: transcript }, 'delete');
-                    closeConfirmation();
-                  }}
-                >
-                  <FormattedMessage {...messages.confirmDeleteLabel} />
-                </Button>
-              </Card.Footer>
-            </Card.Body>
-          </Card>
-        ) :
-        (
-          <div
-            className="row m-0 align-items-center justify-content-between"
-            key={`transcript-${language}`}
-            data-testid={`transcript-${language}`}
-          >
-            <LanguageSelect
-              options={languages}
-              value={newLanguage}
-              placeholderText={intl.formatMessage(messages.languageSelectPlaceholder)}
-              previousSelection={previousSelection}
-              handleSelect={updateLangauge}
+      <div
+        className="row m-0 align-items-center justify-content-between"
+        data-testid={`transcript-${language}`}
+      >
+        <LanguageSelect
+          options={languages}
+          value={newLanguage}
+          placeholderText={intl.formatMessage(messages.languageSelectPlaceholder)}
+          previousSelection={previousSelection}
+          handleSelect={updateLangauge}
+        />
+        {transcript === '' ?
+          (
+            <IconButton
+              iconAs={Icon}
+              src={DeleteOutline}
+              onClick={openConfirmation}
+              alt={intl.formatMessage(messages.deleteEmptyTranscriptLabel)}
             />
-            {transcript === '' ?
-              (
-                <IconButton
-                  iconAs={Icon}
-                  src={DeleteOutline}
-                  onClick={openConfirmation}
-                  alt="delete empty transcript"
-                />
-              ) :
-              (
-                <TranscriptMenu
-                  {...{
-                    language,
-                    newLanguage,
-                    setNewLanguage,
-                    handleTranscript,
-                    input,
-                    launchDeleteConfirmation: openConfirmation,
-                  }}
-                />
-              )}
-          </div>
-        )}
+          ) :
+          (
+            <TranscriptMenu
+              {...{
+                language,
+                newLanguage,
+                setNewLanguage,
+                handleTranscript,
+                input,
+                launchDeleteConfirmation: openConfirmation,
+                onEdit: setEditorLanguage,
+              }}
+            />
+          )}
+      </div>
+      {invalidSrtFile && (
+        <Stack direction="horizontal" gap={2} className="align-items-center text-danger-500 mt-1">
+          <Icon src={ErrorIcon} size="xs" />
+          <span className="small">{intl.formatMessage(sidebarMessages.invalidSrtFormat)}</span>
+        </Stack>
+      )}
+      <AlertModal
+        title={<FormattedMessage {...messages.deleteConfirmationHeader} />}
+        isOpen={isConfirmationOpen}
+        onClose={closeConfirmation}
+        footerNode={
+          <ActionRow>
+            <Button size="sm" variant="tertiary" onClick={closeConfirmation}>
+              <FormattedMessage {...messages.cancelDeleteLabel} />
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={() => {
+                handleTranscript({ language: transcript }, 'delete');
+                closeConfirmation();
+              }}
+            >
+              <FormattedMessage {...messages.confirmDeleteLabel} />
+            </Button>
+          </ActionRow>
+        }
+      >
+        <p>
+          <FormattedMessage {...messages.deleteConfirmationMessage} />
+        </p>
+      </AlertModal>
       <FileInput key="transcript-input" fileInput={input} supportedFileFormats={['.srt']} />
+      <TranscriptEditor
+        isOpen={Boolean(editorLanguage)}
+        onClose={() => setEditorLanguage('')}
+        video={video}
+        language={editorLanguage}
+        languages={languages}
+        transcriptSettings={transcriptSettings}
+      />
     </>
   );
 };
@@ -125,6 +157,15 @@ Transcript.propTypes = {
   transcript: PropTypes.string.isRequired,
   previousSelection: PropTypes.arrayOf(PropTypes.string).isRequired,
   handleTranscript: PropTypes.func.isRequired,
+  video: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    downloadLink: PropTypes.string,
+  }).isRequired,
+  transcriptSettings: PropTypes.shape({
+    transcriptDownloadHandlerUrl: PropTypes.string.isRequired,
+    transcriptUploadHandlerUrl: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default Transcript;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.test.tsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.test.tsx
new file mode 100644
index 0000000000..8071e75541
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.test.tsx
@@ -0,0 +1,35 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+} from '@src/testUtils';
+import Transcript from './Transcript';
+
+describe('Transcript (new, empty row)', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('opens the file picker once a language is chosen for the new transcript', () => {
+    const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click').mockImplementation(() => {});
+    render(
+      <Transcript
+        languages={{ ar: 'Arabic', en: 'English' }}
+        transcript=""
+        previousSelection={['']}
+        handleTranscript={jest.fn()}
+        video={{ id: 'vid-1', displayName: 'My Video' }}
+        transcriptSettings={{
+          transcriptDownloadHandlerUrl: '/transcript_download/',
+          transcriptUploadHandlerUrl: '/transcript_upload/',
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('language-select-dropdown'));
+    fireEvent.click(screen.getByText('Arabic'));
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+  });
+});
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
index 5f321691e8..e9ca341158 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
@@ -19,6 +19,7 @@ export const TranscriptActionMenu = ({
   launchDeleteConfirmation,
   handleTranscript,
   input,
+  onEdit = () => {},
 }) => {
   const [isOpen, , close, toggle] = useToggle();
   const [target, setTarget] = useState(null);
@@ -39,19 +40,30 @@ export const TranscriptActionMenu = ({
         onClose={close}
         onEscapeKey={close}
       >
-        <Menu className="transcript-menu">
+        <Menu className="transcript-menu overflow-hidden">
           <MenuItem
             as={Button}
             variant="tertiary"
-            key={`transcript-actions-${language}-replace`}
-            onClick={input.click}
+            onClick={() => {
+              onEdit(language);
+              close();
+            }}
+          >
+            <FormattedMessage {...messages.editTranscript} />
+          </MenuItem>
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            onClick={() => {
+              input.click();
+              close();
+            }}
           >
             <FormattedMessage {...messages.replaceTranscript} />
           </MenuItem>
           <MenuItem
             as={Button}
             variant="tertiary"
-            key={`transcript-actions-${language}-download`}
             onClick={() => handleTranscript({ language }, 'download')}
           >
             <FormattedMessage {...messages.downloadTranscript} />
@@ -60,7 +72,6 @@ export const TranscriptActionMenu = ({
           <MenuItem
             as={Button}
             variant="tertiary"
-            key={`transcript-actions-${language}-delete`}
             onClick={launchDeleteConfirmation}
           >
             <FormattedMessage {...messages.deleteTranscript} />
@@ -75,6 +86,7 @@ TranscriptActionMenu.propTypes = {
   language: PropTypes.string.isRequired,
   handleTranscript: PropTypes.func.isRequired,
   launchDeleteConfirmation: PropTypes.func.isRequired,
+  onEdit: PropTypes.func,
   input: PropTypes.shape({
     click: PropTypes.func.isRequired,
   }).isRequired,
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.test.tsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.test.tsx
new file mode 100644
index 0000000000..b790aaeef0
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.test.tsx
@@ -0,0 +1,39 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+} from '@src/testUtils';
+import { TranscriptActionMenu } from './TranscriptMenu';
+import messages from './messages';
+
+describe('TranscriptActionMenu', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  const renderMenu = (props = {}) =>
+    render(
+      <TranscriptActionMenu
+        language="ar"
+        launchDeleteConfirmation={jest.fn()}
+        handleTranscript={jest.fn()}
+        input={{ click: jest.fn() }}
+        {...props}
+      />,
+    );
+
+  it('calls onEdit with the language and closes the menu', () => {
+    const onEdit = jest.fn();
+    renderMenu({ onEdit });
+    fireEvent.click(screen.getByRole('button', { name: 'Actions dropdown' }));
+    fireEvent.click(screen.getByText(messages.editTranscript.defaultMessage));
+    expect(onEdit).toHaveBeenCalledWith('ar');
+  });
+
+  it('tolerates a missing onEdit handler', () => {
+    renderMenu();
+    fireEvent.click(screen.getByRole('button', { name: 'Actions dropdown' }));
+    expect(() => fireEvent.click(screen.getByText(messages.editTranscript.defaultMessage))).not.toThrow();
+  });
+});
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.ts b/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.ts
index d7d5e0d52e..e25303abe7 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.ts
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.ts
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  editTranscript: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.editTranscript',
+    defaultMessage: 'Edit transcript',
+    description: 'Message Presented To user for action to edit transcript',
+  },
   fileSizeError: {
     id: 'course-authoriong.video-uploads.file-info.transcript.error.fileSizeError',
     defaultMessage: 'Transcript file size exceeds the maximum. Please try again.',
@@ -46,6 +51,21 @@ const messages = defineMessages({
     defaultMessage: 'Delete this transcript?',
     description: 'Title for Warning which allows users to select next step in the process of deleting a transcript',
   },
+  searchLanguagesPlaceholder: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.searchLanguagesPlaceholder',
+    defaultMessage: 'Search languages',
+    description: 'Placeholder for the search box in the transcript language selector',
+  },
+  noLanguageResults: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.noLanguageResults',
+    defaultMessage: 'No results',
+    description: 'Shown in the transcript language selector when no languages match the search',
+  },
+  deleteEmptyTranscriptLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.deleteEmptyTranscript',
+    defaultMessage: 'Delete empty transcript',
+    description: 'Accessible label for the button that removes an empty transcript row',
+  },
 });
 
 export default messages;
diff --git a/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.scss b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.scss
new file mode 100644
index 0000000000..cf282811b1
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.scss
@@ -0,0 +1,218 @@
+.transcript-editor-modal {
+  &__video-container {
+    background: var(--pgn-color-black);
+    height: clamp(8rem, 40vh, 32rem);
+  }
+
+  &__video {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+    background: var(--pgn-color-black);
+    object-fit: contain;
+  }
+
+  &.pgn__modal {
+    width: 80vw;
+    max-width: 80vw;
+    height: 95vh;
+    max-height: 95vh;
+    overflow: hidden;
+
+    .pgn__modal-header,
+    .pgn__modal-footer {
+      flex: 0 0 auto;
+    }
+  }
+
+  .pgn__modal-body {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .pgn__modal-body-content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+
+  &__cue-list {
+    min-height: 0;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
+  }
+
+  &__cue-wrapper {
+    border-left: 3px solid transparent;
+    border-radius: .375rem;
+    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
+    transition: border-color .15s ease;
+
+    &.transcript-editor-modal__cue--active {
+      background: linear-gradient(90deg, rgb(0 117 180 / .08) 0%, transparent 100%);
+      border-left: 3px solid var(--pgn-color-info-500);
+      border-radius: .25rem;
+      box-shadow: 0 0 0 2px rgb(0 117 180 / .2);
+
+      .transcript-editor-modal__cue-text.form-control {
+        border-color: var(--pgn-color-info-500) !important;
+        background: var(--pgn-color-white) !important;
+        color: var(--pgn-color-gray-900);
+        font-weight: 500;
+      }
+
+      .transcript-editor-modal__time.form-control {
+         border-color: var(--pgn-color-info-500);
+         color: var(--pgn-color-gray-900);
+      }
+    }
+  }
+
+  &__cue-row {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  &__cue-text-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+
+    .pgn__form-control-feedback {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      font-size: .75rem;
+      white-space: nowrap;
+      margin-top: .1rem;
+    }
+  }
+
+  &__cue-text.form-control {
+    resize: none;
+    font-size: .875rem;
+    border-radius: .25rem;
+    padding: .25rem .4rem;
+    border: 1px solid transparent !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+    &:hover {
+      border: 1px solid var(--pgn-color-gray-300) !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    &:focus {
+      border: 1px solid var(--pgn-color-info-500) !important;
+      background: var(--pgn-color-white) !important;
+      box-shadow: 0 0 0 2px rgb(0 117 180 / .2) !important;
+      outline: none !important;
+    }
+
+    &.is-invalid {
+      border: 1px solid var(--pgn-color-danger-500) !important;
+      background: var(--pgn-color-danger-100) !important;
+      box-shadow: none !important;
+    }
+  }
+
+  &__time-wrap {
+    flex: 0 0 auto;
+    width: 8rem;
+
+    .pgn__form-control-decorator-group {
+      width: 100%;
+    }
+  }
+
+  &__time.form-control {
+    width: 100%;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: .65rem;
+    padding: .15rem .25rem;
+    height: auto;
+    border: 1px solid var(--pgn-color-gray-300);
+    border-radius: .25rem;
+    color: var(--pgn-color-gray-700);
+    background: var(--pgn-color-white);
+
+    &:focus {
+      outline: none;
+      border-color: var(--pgn-color-info-500);
+      box-shadow: 0 0 0 2px rgb(0 117 180 / .2);
+    }
+  }
+
+  &__time-sep {
+    color: var(--pgn-color-gray-500);
+    flex-shrink: 0;
+  }
+
+  &__cue-row .btn-icon {
+    flex-shrink: 0;
+  }
+
+  &__insert-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 0;
+    visibility: hidden;
+    transition: height .15s ease;
+  }
+
+  &__insert-divider-line {
+    width: 100%;
+    position: absolute;
+    margin: 0;
+    border: 0;
+    border-top: 1px dashed var(--pgn-color-light-500);
+    z-index: 0;
+  }
+
+  &__insert-btn.btn {
+    background: var(--pgn-color-white);
+    border: 1px dashed var(--pgn-color-gray-500);
+    color: var(--pgn-color-gray-700);
+    font-size: .75rem;
+    padding: .15rem .6rem;
+    border-radius: 999px;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__cue-wrapper:hover &__insert-divider {
+    height: 2rem;
+    visibility: visible;
+  }
+
+  @media (width <= 767.98px) {
+    &.pgn__modal {
+      width: calc(100vw - 1rem);
+      max-width: calc(100vw - 1rem);
+      height: calc(100vh - .5rem);
+      max-height: calc(100vh - .5rem);
+      margin: 0;
+    }
+  }
+
+  @media (width <= 991.98px) {
+    &__cue-text-wrap {
+      flex-basis: 100%;
+    }
+
+    &__time-wrap {
+      flex: 1 1 7.5rem;
+      max-width: 9rem;
+    }
+  }
+}
diff --git a/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.test.tsx b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.test.tsx
new file mode 100644
index 0000000000..859318454d
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.test.tsx
@@ -0,0 +1,403 @@
+import type MockAdapter from 'axios-mock-adapter';
+import { logError } from '@edx/frontend-platform/logging';
+
+import {
+  act,
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import TranscriptEditor from './TranscriptEditor';
+import messages from './messages';
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+const SRT = [
+  '1',
+  '00:00:01,000 --> 00:00:02,000',
+  'Hello',
+  '',
+  '2',
+  '00:00:03,000 --> 00:00:04,000',
+  'World',
+].join('\n');
+
+const defaultProps = {
+  isOpen: true,
+  onClose: jest.fn(),
+  language: 'en',
+  languages: { en: 'English' },
+  video: {
+    id: 'vid-1',
+    displayName: 'My Video',
+    downloadLink: 'https://cdn.example.com/video.mp4',
+  },
+  transcriptSettings: {
+    transcriptDownloadHandlerUrl: '/transcript_download/',
+    transcriptUploadHandlerUrl: '/transcript_upload/',
+  },
+};
+
+let axiosMock: MockAdapter;
+let playSpy: jest.SpyInstance;
+
+const readFileText = (blob: Blob) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsText(blob);
+  });
+
+// Lets an in-flight request settle and React process the result, so assertions run
+// after any state update the response would have triggered.
+const flushPendingResponses = () =>
+  act(async () => {
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+  });
+
+const renderEditor = (props = {}) => render(<TranscriptEditor {...defaultProps} {...props} />);
+
+const mockTranscript = (body: string = SRT) => {
+  axiosMock.onGet(/transcript_download/).reply(200, body);
+};
+
+beforeAll(() => {
+  // jsdom does not implement these; the component guards on their presence.
+  global.URL.createObjectURL = jest.fn(() => 'blob:mock-track');
+  global.URL.revokeObjectURL = jest.fn();
+  Element.prototype.scrollTo = jest.fn();
+});
+
+beforeEach(() => {
+  ({ axiosMock } = initializeMocks());
+  jest.clearAllMocks();
+  playSpy = jest.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  playSpy.mockRestore();
+  jest.useRealTimers();
+});
+
+describe('TranscriptEditor', () => {
+  it('fetches the transcript for the video/language and renders its cues', async () => {
+    mockTranscript();
+    renderEditor();
+
+    expect(await screen.findByDisplayValue('Hello')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('World')).toBeInTheDocument();
+    expect(screen.getByText('English')).toBeInTheDocument();
+    expect(axiosMock.history.get[0].url).toContain(
+      '/transcript_download/?edx_video_id=vid-1&language_code=en',
+    );
+  });
+
+  it('shows a distinct error alert when the transcript fails to load', async () => {
+    axiosMock.onGet(/transcript_download/).reply(500);
+    renderEditor();
+
+    expect(await screen.findByText(messages.loadFailedLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.queryByText(messages.saveFailedLabel.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('gives cue fields accessible names', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    expect(screen.getByRole('textbox', { name: 'Cue 1 text' })).toHaveValue('Hello');
+    expect(screen.getByRole('textbox', { name: 'Cue 1 start time' })).toHaveValue('00:00:01,000');
+    expect(screen.getByRole('textbox', { name: 'Cue 2 end time' })).toHaveValue('00:00:04,000');
+  });
+
+  it('preserves multi-line cue text through editing and saving', async () => {
+    mockTranscript();
+    axiosMock.onPost(/transcript_upload/).reply(200);
+    renderEditor();
+
+    const cueText = await screen.findByRole('textbox', { name: 'Cue 1 text' });
+    expect(cueText.tagName).toBe('TEXTAREA');
+    fireEvent.change(cueText, { target: { value: 'first line\nsecond line' } });
+    expect(screen.getByRole('textbox', { name: 'Cue 1 text' })).toHaveValue('first line\nsecond line');
+
+    fireEvent.click(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage }));
+    await waitFor(() => expect(axiosMock.history.post).toHaveLength(1));
+    const file = (axiosMock.history.post[0].data as FormData).get('file') as File;
+    expect(await readFileText(file)).toContain('00:00:01,000 --> 00:00:02,000\nfirst line\nsecond line');
+  });
+
+  it('saves edited cues as a re-uploaded SRT file and shows the saved indicator', async () => {
+    mockTranscript();
+    axiosMock.onPost(/transcript_upload/).reply(200);
+    renderEditor();
+
+    fireEvent.change(await screen.findByDisplayValue('Hello'), { target: { value: 'Hello edited' } });
+    fireEvent.click(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage }));
+
+    await waitFor(() => expect(axiosMock.history.post).toHaveLength(1));
+    const formData = axiosMock.history.post[0].data as FormData;
+    expect(formData.get('edx_video_id')).toBe('vid-1');
+    expect(formData.get('language_code')).toBe('en');
+    expect(formData.get('new_language_code')).toBe('en');
+    const file = formData.get('file') as File;
+    expect(file.name).toBe('My Video-en.srt');
+    expect(await readFileText(file)).toContain('Hello edited');
+
+    expect(await screen.findByText(messages.savedLabel.defaultMessage)).toBeInTheDocument();
+
+    // The "Saved" indicator clears itself after five seconds.
+    await waitFor(
+      () => expect(screen.queryByText(messages.savedLabel.defaultMessage)).not.toBeInTheDocument(),
+      { timeout: 6000 },
+    );
+  }, 15000);
+
+  it('surfaces save failures and logs the error', async () => {
+    mockTranscript();
+    axiosMock.onPost(/transcript_upload/).reply(500);
+    renderEditor();
+
+    fireEvent.change(await screen.findByDisplayValue('Hello'), { target: { value: 'Hello edited' } });
+    fireEvent.click(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage }));
+
+    expect(await screen.findByText(messages.saveFailedLabel.defaultMessage)).toBeInTheDocument();
+    expect(logError).toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage })).toBeEnabled();
+  });
+
+  it('closes immediately when there are no unsaved changes', async () => {
+    const onClose = jest.fn();
+    mockTranscript();
+    renderEditor({ onClose });
+
+    await screen.findByDisplayValue('Hello');
+    fireEvent.click(screen.getByRole('button', { name: messages.cancelButtonLabel.defaultMessage }));
+
+    expect(onClose).toHaveBeenCalledWith(false);
+    expect(screen.queryByText(messages.unsavedModalTitle.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('asks for confirmation before discarding unsaved changes', async () => {
+    const onClose = jest.fn();
+    mockTranscript();
+    renderEditor({ onClose });
+
+    fireEvent.change(await screen.findByDisplayValue('Hello'), { target: { value: 'Changed' } });
+    fireEvent.click(screen.getByRole('button', { name: messages.cancelButtonLabel.defaultMessage }));
+
+    expect(await screen.findByText(messages.unsavedModalDescription.defaultMessage)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: messages.keepEditingButtonLabel.defaultMessage }));
+    expect(onClose).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole('button', { name: messages.cancelButtonLabel.defaultMessage }));
+    fireEvent.click(await screen.findByRole('button', { name: messages.closeEditorButtonLabel.defaultMessage }));
+    expect(onClose).toHaveBeenCalledWith(false);
+  });
+
+  it('inserts a first cue into an empty transcript and flags empty text as invalid', async () => {
+    mockTranscript('');
+    renderEditor();
+
+    fireEvent.click(await screen.findByRole('button', { name: messages.insertCueLabel.defaultMessage }));
+
+    expect(screen.getByDisplayValue('00:00:00,000')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('00:00:02,000')).toBeInTheDocument();
+    expect(screen.getByText(messages.invalidCueTextLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage })).toBeDisabled();
+  });
+
+  it('inserts a cue after an existing one and deletes cues', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    fireEvent.click(screen.getAllByRole('button', { name: messages.insertCueLabel.defaultMessage })[0]);
+    // New cue starts where the first cue ends, capped at the next cue's start.
+    expect(screen.getAllByDisplayValue('00:00:02,000')).toHaveLength(2);
+    expect(screen.getAllByDisplayValue('00:00:03,000')).toHaveLength(2);
+
+    const deleteButtons = screen.getAllByRole('button', { name: messages.deleteCueLabel.defaultMessage });
+    expect(deleteButtons).toHaveLength(3);
+    fireEvent.click(deleteButtons[1]);
+    expect(screen.getAllByRole('button', { name: messages.deleteCueLabel.defaultMessage })).toHaveLength(2);
+  });
+
+  it('normalizes timestamp edits on blur and flags invalid ranges', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    const start = screen.getByDisplayValue('00:00:03,000');
+    fireEvent.change(start, { target: { value: '00:00:03.500' } });
+    // Dots are normalized to commas while typing...
+    expect(screen.getByDisplayValue('00:00:03,500')).toBeInTheDocument();
+    fireEvent.blur(screen.getByDisplayValue('00:00:03,500'), { target: { value: '00:00:03,500' } });
+    expect(screen.getByDisplayValue('00:00:03,500')).toBeInTheDocument();
+
+    // ...and an end time before the start time is flagged, disabling Save.
+    const end = screen.getByDisplayValue('00:00:04,000');
+    fireEvent.change(end, { target: { value: '00:00:01,000' } });
+    expect(screen.getByText(messages.invalidTimestampLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage })).toBeDisabled();
+  });
+
+  it('seeks the preview on cue play, ignoring interrupted play() but logging other errors', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    const abortError = new Error('interrupted');
+    abortError.name = 'AbortError';
+    playSpy.mockRejectedValueOnce(abortError);
+
+    const seekButtons = screen.getAllByRole('button', { name: messages.seekCueLabel.defaultMessage });
+    fireEvent.click(seekButtons[0]);
+    await waitFor(() => expect(playSpy).toHaveBeenCalledTimes(1));
+    expect(logError).not.toHaveBeenCalled();
+    // Seeking into the first cue's range marks it active.
+    expect(document.querySelector('.transcript-editor-modal__cue--active')).not.toBeNull();
+
+    playSpy.mockRejectedValueOnce(new Error('autoplay blocked'));
+    fireEvent.click(seekButtons[1]);
+    await waitFor(() => expect(logError).toHaveBeenCalledTimes(1));
+  });
+  it('leaves invalid timestamps unchanged on blur, for both start and end fields', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    const start = screen.getByRole('textbox', { name: 'Cue 1 start time' });
+    fireEvent.change(start, { target: { value: '00:00:01,5' } });
+    fireEvent.blur(start, { target: { value: '00:00:01,5' } });
+    expect(start).toHaveValue('00:00:01,5');
+
+    const end = screen.getByRole('textbox', { name: 'Cue 1 end time' });
+    fireEvent.change(end, { target: { value: '00:00:02,5' } });
+    fireEvent.blur(end, { target: { value: '00:00:02,5' } });
+    expect(end).toHaveValue('00:00:02,5');
+  });
+
+  it('updates the active cue from video timeupdate events', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+    Object.defineProperty(video, 'currentTime', { value: 1.5, configurable: true });
+    fireEvent.timeUpdate(video);
+    await waitFor(() => expect(document.querySelector('.transcript-editor-modal__cue--active')).not.toBeNull());
+  });
+
+  it('does not close while a save is in progress', async () => {
+    mockTranscript();
+    let finishSave: (value: [number]) => void = () => {};
+    axiosMock.onPost(/transcript_upload/).reply(() =>
+      new Promise<[number]>((resolve) => {
+        finishSave = resolve;
+      })
+    );
+    const onClose = jest.fn();
+    renderEditor({ onClose });
+
+    fireEvent.change(await screen.findByDisplayValue('Hello'), { target: { value: 'Hello edited' } });
+    fireEvent.click(screen.getByRole('button', { name: messages.saveButtonLabel.defaultMessage }));
+    await screen.findAllByText(messages.saveInProgressLabel.defaultMessage);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).not.toHaveBeenCalled();
+
+    finishSave([200]);
+    expect(await screen.findByText(messages.savedLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('falls back to setting scrollTop when scrollTo is unavailable', async () => {
+    const original = Element.prototype.scrollTo;
+    Object.defineProperty(Element.prototype, 'scrollTo', { value: undefined, configurable: true, writable: true });
+    try {
+      mockTranscript();
+      renderEditor();
+      await screen.findByDisplayValue('Hello');
+      fireEvent.click(screen.getAllByRole('button', { name: messages.seekCueLabel.defaultMessage })[0]);
+      await waitFor(() => expect(document.querySelector('.transcript-editor-modal__cue--active')).not.toBeNull());
+    } finally {
+      Object.defineProperty(Element.prototype, 'scrollTo', { value: original, configurable: true, writable: true });
+    }
+  });
+
+  // The fetch effect guards every state update behind an isMounted flag, so a response
+  // that lands after the editor closes must neither render nor report anything.
+  it.each([
+    ['a transcript', () => mockTranscript()],
+    ['a load failure', () => {
+      axiosMock.onGet(/transcript_download/).reply(500);
+    }],
+  ])('ignores %s that arrives after the editor unmounted', async (_label, mockResponse) => {
+    mockResponse();
+    const { unmount } = renderEditor();
+    unmount();
+    await waitFor(() => expect(axiosMock.history.get).toHaveLength(1));
+
+    await flushPendingResponses();
+
+    expect(screen.queryByDisplayValue('Hello')).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.loadFailedLabel.defaultMessage)).not.toBeInTheDocument();
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  it('closes the unsaved-changes dialog with Escape', async () => {
+    mockTranscript();
+    renderEditor();
+    fireEvent.change(await screen.findByDisplayValue('Hello'), { target: { value: 'Changed' } });
+    fireEvent.click(screen.getByRole('button', { name: messages.cancelButtonLabel.defaultMessage }));
+    const description = await screen.findByText(messages.unsavedModalDescription.defaultMessage);
+
+    fireEvent.keyDown(description, { key: 'Escape', code: 'Escape', keyCode: 27 });
+    await waitFor(() =>
+      expect(screen.queryByText(messages.unsavedModalDescription.defaultMessage)).not.toBeInTheDocument()
+    );
+  });
+  it('inserts after the last cue using a default two-second window', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    const insertButtons = screen.getAllByRole('button', { name: messages.insertCueLabel.defaultMessage });
+    fireEvent.click(insertButtons[insertButtons.length - 1]);
+    // Last cue ends at 00:00:04,000, so the new cue spans 04,000 -> 06,000.
+    expect(screen.getAllByDisplayValue('00:00:04,000')).toHaveLength(2);
+    expect(screen.getByDisplayValue('00:00:06,000')).toBeInTheDocument();
+  });
+
+  it('falls back to the language code when no display name is configured', async () => {
+    mockTranscript();
+    renderEditor({ languages: {} });
+    await screen.findByDisplayValue('Hello');
+    expect(screen.getByText('en')).toBeInTheDocument();
+  });
+
+  it('renders without fetching when no language is selected', () => {
+    renderEditor({ language: undefined, languages: undefined });
+    expect(axiosMock.history.get).toHaveLength(0);
+    expect(screen.getByRole('button', { name: messages.insertCueLabel.defaultMessage })).toBeInTheDocument();
+  });
+  it('uses a plain two-second window when the next cue starts before the current one ends', async () => {
+    mockTranscript();
+    renderEditor();
+    await screen.findByDisplayValue('Hello');
+
+    // Push cue 1's end past cue 2's start (00:00:03,000), then insert after cue 1.
+    const end = screen.getByRole('textbox', { name: 'Cue 1 end time' });
+    fireEvent.change(end, { target: { value: '00:00:05,000' } });
+    fireEvent.click(screen.getAllByRole('button', { name: messages.insertCueLabel.defaultMessage })[0]);
+    expect(screen.getAllByDisplayValue('00:00:05,000')).toHaveLength(2);
+    expect(screen.getByDisplayValue('00:00:07,000')).toBeInTheDocument();
+  });
+});
diff --git a/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.tsx b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.tsx
new file mode 100644
index 0000000000..a908d0f863
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/TranscriptEditor.tsx
@@ -0,0 +1,660 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { SyntheticEvent } from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  Button,
+  Form,
+  Icon,
+  IconButton,
+  ModalDialog,
+  Spinner,
+  Stack,
+} from '@openedx/paragon';
+import {
+  Add,
+  CheckCircle,
+  DeleteOutline,
+  Info,
+  PlayArrow,
+} from '@openedx/paragon/icons';
+
+import { fetchTranscriptContent, uploadTranscript } from '@src/files-and-videos/videos-page/data/api';
+import {
+  formatTimestamp,
+  parseSrt,
+  parseTimestamp,
+  serializeSrt,
+} from './srtUtils';
+import type { Cue } from './srtUtils';
+import messages from './messages';
+import './TranscriptEditor.scss';
+
+type EditorCue = Cue & { id: string; };
+type SaveStatus = 'idle' | 'saving' | 'saved';
+
+interface TranscriptEditorProps {
+  isOpen: boolean;
+  onClose: (submitted: boolean) => void;
+  video: {
+    id: string;
+    displayName: string;
+    downloadLink?: string | null;
+  };
+  language?: string;
+  languages?: Record<string, string>;
+  transcriptSettings: {
+    transcriptDownloadHandlerUrl: string;
+    transcriptUploadHandlerUrl: string;
+  };
+}
+
+const toVttTimestamp = (timestamp: string) => timestamp.replace(',', '.');
+const TIMESTAMP_REGEX = /^\d{2}:\d{2}:\d{2},\d{3}$/;
+const hasInvalidCueText = (text = '') => {
+  const lines = text.split(/\r?\n/);
+  return text.trim().length === 0 || lines.some((line) => line.trim().length === 0);
+};
+
+const serializeVtt = (cues: Cue[]) => {
+  const body = cues
+    .map((cue, index) =>
+      `${index + 1}\n${toVttTimestamp(cue.startTime)} --> ${toVttTimestamp(cue.endTime)}\n${cue.text}`
+    )
+    .join('\n\n');
+
+  return `WEBVTT\n\n${body}`;
+};
+
+const TranscriptEditor = ({
+  isOpen,
+  onClose,
+  video,
+  language = '',
+  languages = {},
+  transcriptSettings,
+}: TranscriptEditorProps) => {
+  const intl = useIntl();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const cueIdRef = useRef(0);
+  const cueListRef = useRef<HTMLDivElement | null>(null);
+  const cueWrapperRefs = useRef<Record<string, HTMLDivElement>>({});
+  const pendingFocusId = useRef<string | null>(null);
+
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [cues, setCues] = useState<EditorCue[]>([]);
+  const [captionTrackUrl, setCaptionTrackUrl] = useState('');
+  const [currentTime, setCurrentTime] = useState(0);
+  const [initialCuesSnapshot, setInitialCuesSnapshot] = useState('[]');
+  const [isUnsavedModalOpen, setIsUnsavedModalOpen] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');
+
+  const attachCueIds = (nextCues: (Cue & { id?: string; })[]): EditorCue[] =>
+    nextCues.map((cue) => ({
+      ...cue,
+      id: cue.id ?? `cue-${cueIdRef.current++}`,
+    }));
+
+  const serializeComparableCues = (nextCues: Cue[]) =>
+    JSON.stringify(nextCues.map((cue) => ({
+      startTime: cue.startTime,
+      endTime: cue.endTime,
+      text: cue.text,
+    })));
+
+  const hasUnsavedChanges = useMemo(
+    () => serializeComparableCues(cues) !== initialCuesSnapshot,
+    [cues, initialCuesSnapshot],
+  );
+
+  const hasInvalidCueTextInEditor = useMemo(
+    () => cues.some((cue) => hasInvalidCueText(cue.text)),
+    [cues],
+  );
+
+  const hasInvalidTimestamp = (cue: Cue) => (
+    !TIMESTAMP_REGEX.test(cue.startTime)
+    || !TIMESTAMP_REGEX.test(cue.endTime)
+    || parseTimestamp(cue.endTime) <= parseTimestamp(cue.startTime)
+  );
+
+  const hasInvalidTimestampsInEditor = useMemo(
+    () => cues.some(hasInvalidTimestamp),
+    [cues],
+  );
+
+  const activeCueId = useMemo(() => {
+    const activeCue = cues.find((cue) => (
+      TIMESTAMP_REGEX.test(cue.startTime)
+      && TIMESTAMP_REGEX.test(cue.endTime)
+      && currentTime >= parseTimestamp(cue.startTime)
+      && currentTime < parseTimestamp(cue.endTime)
+    ));
+
+    return activeCue?.id || null;
+  }, [cues, currentTime]);
+
+  useEffect(() => {
+    if (pendingFocusId.current) {
+      const wrapper = cueWrapperRefs.current[pendingFocusId.current];
+      const el = wrapper?.querySelector<HTMLTextAreaElement>('textarea');
+      if (el) {
+        el.focus();
+        pendingFocusId.current = null;
+      }
+    }
+  }, [cues]);
+
+  useEffect(() => {
+    const cueList = cueListRef.current;
+    const activeCue = activeCueId ? cueWrapperRefs.current[activeCueId] : null;
+
+    if (!cueList || !activeCue) {
+      return;
+    }
+
+    const cueListRect = cueList.getBoundingClientRect();
+    const activeCueRect = activeCue.getBoundingClientRect();
+    const nextScrollTop = cueList.scrollTop
+      + activeCueRect.top
+      - cueListRect.top
+      - ((cueListRect.height - activeCueRect.height) / 2);
+
+    if (typeof cueList.scrollTo === 'function') {
+      cueList.scrollTo({
+        top: Math.max(0, nextScrollTop),
+        behavior: 'smooth',
+      });
+    } else {
+      cueList.scrollTop = Math.max(0, nextScrollTop);
+    }
+  }, [activeCueId]);
+
+  const inlineErrorMessage = saveError;
+
+  useEffect(() => {
+    if (!isOpen || !language) {
+      return undefined;
+    }
+
+    let isMounted = true;
+    setLoading(true);
+    setSaveError('');
+    setIsUnsavedModalOpen(false);
+    setCurrentTime(0);
+    setSaveStatus('idle');
+
+    fetchTranscriptContent({
+      videoId: video.id,
+      language,
+      apiUrl: transcriptSettings.transcriptDownloadHandlerUrl,
+    })
+      .then((text: string) => {
+        if (!isMounted) {
+          return undefined;
+        }
+        const parsedCues = parseSrt(text);
+        setCues(attachCueIds(parsedCues));
+        setInitialCuesSnapshot(serializeComparableCues(parsedCues));
+        return undefined;
+      })
+      .catch(() => {
+        if (!isMounted) {
+          return undefined;
+        }
+        setCues([]);
+        setInitialCuesSnapshot('[]');
+        setSaveError(intl.formatMessage(messages.loadFailedLabel));
+        return undefined;
+      })
+      .finally(() => {
+        if (isMounted) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    isOpen,
+    language,
+    video.id,
+    transcriptSettings.transcriptDownloadHandlerUrl,
+    intl,
+  ]);
+
+  const handleCueChange = (index: number, value: string) => {
+    setCues(prev =>
+      prev.map((cue, cueIndex) => (
+        cueIndex === index ? { ...cue, text: value } : cue
+      ))
+    );
+  };
+
+  const handleCueTimeChange = (index: number, field: 'startTime' | 'endTime', value: string) => {
+    const normalized = value
+      .replace(/\./g, ',')
+      .replace(/[^\d:,]/g, '')
+      .slice(0, 12);
+
+    setCues(prev =>
+      prev.map((cue, cueIndex) => (
+        cueIndex === index ? { ...cue, [field]: normalized } : cue
+      ))
+    );
+  };
+
+  const handleCueTimeBlur = (index: number, field: 'startTime' | 'endTime', value: string) => {
+    const normalized = value.replace(/\./g, ',').trim();
+    if (!TIMESTAMP_REGEX.test(normalized)) {
+      return;
+    }
+
+    setCues(prev =>
+      prev.map((cue, cueIndex) => (
+        cueIndex === index
+          ? { ...cue, [field]: formatTimestamp(parseTimestamp(normalized)) }
+          : cue
+      ))
+    );
+  };
+
+  const handleDeleteCue = (index: number) => {
+    setCues(prev => prev.filter((_, cueIndex) => cueIndex !== index));
+  };
+
+  const handleInsertCueAfter = (index: number) => {
+    setCues((prev) => {
+      // index === -1 means insert as the very first cue (empty list)
+      if (index === -1) {
+        const newId = `cue-${cueIdRef.current++}`;
+        pendingFocusId.current = newId;
+        return [{
+          id: newId,
+          startTime: formatTimestamp(0),
+          endTime: formatTimestamp(2),
+          text: '',
+        }];
+      }
+
+      const currentCue = prev[index];
+      /* istanbul ignore if -- insert buttons always pass a valid index */
+      if (!currentCue) {
+        return prev;
+      }
+
+      const currentEnd = parseTimestamp(currentCue.endTime);
+      const nextStart = prev[index + 1]
+        ? parseTimestamp(prev[index + 1].startTime)
+        : currentEnd + 2;
+
+      const insertedStart = currentEnd;
+      const insertedEnd = nextStart > currentEnd ? Math.min(currentEnd + 2, nextStart) : currentEnd + 2;
+
+      const newId = `cue-${cueIdRef.current++}`;
+      pendingFocusId.current = newId;
+      const newCue = {
+        id: newId,
+        startTime: formatTimestamp(insertedStart),
+        endTime: formatTimestamp(insertedEnd),
+        text: '',
+      };
+
+      const updated = [...prev];
+      updated.splice(index + 1, 0, newCue);
+      return updated;
+    });
+  };
+
+  const seekTo = (timeCode: string) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = parseTimestamp(timeCode);
+      const playPromise = videoRef.current.play();
+      if (playPromise !== undefined) {
+        playPromise.catch((error: Error) => {
+          if (error.name !== 'AbortError') {
+            logError(error);
+          }
+        });
+      }
+      setCurrentTime(parseTimestamp(timeCode));
+    }
+  };
+
+  const handleVideoTimeUpdate = (event: SyntheticEvent<HTMLVideoElement>) => {
+    setCurrentTime(event.currentTarget.currentTime);
+  };
+
+  useEffect(() => {
+    if (!cues.length) {
+      setCaptionTrackUrl('');
+      return undefined;
+    }
+
+    const vttBlob = new Blob([serializeVtt(cues)], { type: 'text/vtt' });
+    const nextUrl = URL.createObjectURL(vttBlob);
+    setCaptionTrackUrl(nextUrl);
+
+    return () => {
+      URL.revokeObjectURL(nextUrl);
+    };
+  }, [cues]);
+
+  useEffect(() => {
+    if (saveStatus !== 'saved') {
+      return undefined;
+    }
+
+    const timerId = setTimeout(() => {
+      setSaveStatus('idle');
+    }, 5000);
+
+    return () => clearTimeout(timerId);
+  }, [saveStatus]);
+
+  const handleSave = async () => {
+    const hasInvalidCueTextValue = cues.some((cue) => hasInvalidCueText(cue.text));
+    /* istanbul ignore if -- the save button is disabled in this state */
+    if (hasInvalidCueTextValue) {
+      return;
+    }
+
+    setSaving(true);
+    setSaveStatus('saving');
+    setSaveError('');
+
+    try {
+      const fileName = `${video.displayName}-${language}.srt`;
+      const file = new File([serializeSrt(cues)], fileName, { type: 'text/plain' });
+
+      await uploadTranscript({
+        videoId: video.id,
+        language,
+        newLanguage: language,
+        apiUrl: transcriptSettings.transcriptUploadHandlerUrl,
+        file,
+      });
+
+      setInitialCuesSnapshot(serializeComparableCues(cues));
+      setSaveStatus('saved');
+    } catch (error) {
+      logError(error as Error);
+      setSaveStatus('idle');
+      setSaveError(intl.formatMessage(messages.saveFailedLabel));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRequestClose = () => {
+    if (saving) {
+      return;
+    }
+
+    if (hasUnsavedChanges) {
+      setIsUnsavedModalOpen(true);
+      return;
+    }
+
+    onClose(false);
+  };
+
+  return (
+    <ModalDialog
+      isOpen={isOpen}
+      onClose={handleRequestClose}
+      hasCloseButton
+      isOverflowVisible={false}
+      title={video.displayName}
+      size="xl"
+      className="transcript-editor-modal"
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <div className="d-flex align-items-start justify-content-between w-100 pr-4">
+            <div>
+              <h3 className="font-weight-bold h3 mb-0">{video.displayName}</h3>
+              <h6 className="small text-gray-700 mt-1">{languages?.[language] || language}</h6>
+            </div>
+            {saveStatus === 'saving' && (
+              <div className="d-inline-flex align-items-center text-gray-700 small text-nowrap mt-1">
+                <Spinner
+                  animation="border"
+                  size="sm"
+                  className="mr-2"
+                  screenReaderText={intl.formatMessage(messages.saveInProgressLabel)}
+                />
+                <span>{intl.formatMessage(messages.saveInProgressLabel)}</span>
+              </div>
+            )}
+            {saveStatus === 'saved' && (
+              <div className="d-inline-flex align-items-center text-success small text-nowrap mt-1">
+                <Icon src={CheckCircle} className="mr-2" />
+                <span>{intl.formatMessage(messages.savedLabel)}</span>
+              </div>
+            )}
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body className="p-0 d-flex flex-column overflow-hidden">
+        {inlineErrorMessage && (
+          <Alert variant="danger" icon={Info} className="mx-4 mt-3 mb-0 flex-shrink-0">
+            {inlineErrorMessage}
+          </Alert>
+        )}
+        {loading ?
+          (
+            <div className="d-flex align-items-center justify-content-center py-5 flex-fill">
+              <Spinner animation="border" screenReaderText={intl.formatMessage(messages.loadingLabel)} />
+            </div>
+          ) :
+          (
+            <>
+              {video.downloadLink && (
+                <div className="transcript-editor-modal__video-container bg-black d-flex align-items-center justify-content-center flex-shrink-0 overflow-hidden">
+                  {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                  <video
+                    ref={videoRef}
+                    src={video.downloadLink}
+                    controls
+                    controlsList="nodownload"
+                    disablePictureInPicture
+                    onTimeUpdate={handleVideoTimeUpdate}
+                    onSeeked={handleVideoTimeUpdate}
+                    className="transcript-editor-modal__video"
+                  >
+                    <track
+                      key={captionTrackUrl}
+                      kind="captions"
+                      src={captionTrackUrl || ''}
+                      srcLang={language}
+                      label={language.toUpperCase()}
+                      default
+                    />
+                  </video>
+                </div>
+              )}
+
+              <div ref={cueListRef} className="transcript-editor-modal__cue-list overflow-auto flex-grow-1 px-4 py-3">
+                {cues.length === 0 && (
+                  <div className="d-flex justify-content-center py-4">
+                    <Button
+                      variant="outline-primary"
+                      size="sm"
+                      iconBefore={Add}
+                      onClick={() => handleInsertCueAfter(-1)}
+                    >
+                      {intl.formatMessage(messages.insertCueLabel)}
+                    </Button>
+                  </div>
+                )}
+                {cues.map((cue, index) => {
+                  const isActive = activeCueId === cue.id;
+                  const hasCueTextError = hasInvalidCueText(cue.text);
+                  return (
+                    <Stack
+                      key={cue.id}
+                      ref={(el: HTMLDivElement | null) => {
+                        if (el) {
+                          cueWrapperRefs.current[cue.id] = el;
+                        } else {
+                          delete cueWrapperRefs.current[cue.id];
+                        }
+                      }}
+                      gap={2}
+                      className={`px-3 py-2 transcript-editor-modal__cue-wrapper${
+                        isActive ? ' transcript-editor-modal__cue--active' : ''
+                      }`}
+                    >
+                      <Stack
+                        direction="horizontal"
+                        gap={2}
+                        className="transcript-editor-modal__cue-row flex-wrap flex-lg-nowrap align-items-center"
+                      >
+                        <div className="transcript-editor-modal__cue-text-wrap flex-grow-1">
+                          <Form.Control
+                            as="textarea"
+                            autoResize
+                            rows={1}
+                            value={cue.text}
+                            aria-label={intl.formatMessage(messages.cueTextLabel, { index: index + 1 })}
+                            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                              handleCueChange(index, e.target.value)}
+                            className="transcript-editor-modal__cue-text"
+                            isInvalid={hasCueTextError}
+                          />
+                          {hasCueTextError && (
+                            <Form.Control.Feedback type="invalid" hasIcon={false}>
+                              {intl.formatMessage(messages.invalidCueTextLabel)}
+                            </Form.Control.Feedback>
+                          )}
+                        </div>
+                        <div className="transcript-editor-modal__time-wrap">
+                          <Form.Control
+                            size="sm"
+                            type="text"
+                            value={cue.startTime}
+                            aria-label={intl.formatMessage(messages.cueStartTimeLabel, { index: index + 1 })}
+                            className="transcript-editor-modal__time"
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                              handleCueTimeChange(index, 'startTime', e.target.value)}
+                            onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
+                              handleCueTimeBlur(index, 'startTime', e.target.value)}
+                          />
+                        </div>
+                        <span className="transcript-editor-modal__time-sep">→</span>
+                        <div className="transcript-editor-modal__time-wrap">
+                          <Form.Control
+                            size="sm"
+                            type="text"
+                            value={cue.endTime}
+                            aria-label={intl.formatMessage(messages.cueEndTimeLabel, { index: index + 1 })}
+                            className="transcript-editor-modal__time"
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                              handleCueTimeChange(index, 'endTime', e.target.value)}
+                            onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
+                              handleCueTimeBlur(index, 'endTime', e.target.value)}
+                          />
+                        </div>
+                        <IconButton
+                          iconAs={Icon}
+                          src={PlayArrow}
+                          alt={intl.formatMessage(messages.seekCueLabel)}
+                          onClick={() => seekTo(cue.startTime)}
+                        />
+                        <IconButton
+                          iconAs={Icon}
+                          src={DeleteOutline}
+                          alt={intl.formatMessage(messages.deleteCueLabel)}
+                          onClick={() => handleDeleteCue(index)}
+                        />
+                      </Stack>
+                      {hasInvalidTimestamp(cue) && (
+                        <div className="text-danger small mt-n1">
+                          {intl.formatMessage(messages.invalidTimestampLabel)}
+                        </div>
+                      )}
+                      <div className="transcript-editor-modal__insert-divider">
+                        <hr className="transcript-editor-modal__insert-divider-line" />
+                        <Button
+                          variant="light"
+                          size="sm"
+                          iconBefore={Add}
+                          className="transcript-editor-modal__insert-btn"
+                          onClick={() => handleInsertCueAfter(index)}
+                        >
+                          {intl.formatMessage(messages.insertCueLabel)}
+                        </Button>
+                      </div>
+                    </Stack>
+                  );
+                })}
+              </div>
+            </>
+          )}
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <Button
+          variant="tertiary"
+          onClick={handleRequestClose}
+          disabled={saving}
+        >
+          {intl.formatMessage(messages.cancelButtonLabel)}
+        </Button>
+        <Button
+          onClick={handleSave}
+          disabled={saving || loading || !hasUnsavedChanges || hasInvalidCueTextInEditor ||
+            hasInvalidTimestampsInEditor}
+        >
+          {saving
+            ? intl.formatMessage(messages.saveInProgressLabel)
+            : intl.formatMessage(messages.saveButtonLabel)}
+        </Button>
+      </ModalDialog.Footer>
+
+      {isUnsavedModalOpen && (
+        <ModalDialog
+          isOpen
+          isOverflowVisible={false}
+          size="md"
+          title={intl.formatMessage(messages.unsavedModalTitle)}
+          onClose={() => setIsUnsavedModalOpen(false)}
+        >
+          <ModalDialog.Header>
+            <ModalDialog.Title>{intl.formatMessage(messages.unsavedModalTitle)}</ModalDialog.Title>
+          </ModalDialog.Header>
+          <ModalDialog.Body>
+            <p>{intl.formatMessage(messages.unsavedModalDescription)}</p>
+          </ModalDialog.Body>
+          <ModalDialog.Footer>
+            <Button variant="tertiary" onClick={() => setIsUnsavedModalOpen(false)}>
+              {intl.formatMessage(messages.keepEditingButtonLabel)}
+            </Button>
+            <Button
+              variant="danger"
+              onClick={() => {
+                setIsUnsavedModalOpen(false);
+                onClose(false);
+              }}
+            >
+              {intl.formatMessage(messages.closeEditorButtonLabel)}
+            </Button>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      )}
+    </ModalDialog>
+  );
+};
+
+export default TranscriptEditor;
diff --git a/src/files-and-videos/videos-page/transcript-editor/index.ts b/src/files-and-videos/videos-page/transcript-editor/index.ts
new file mode 100644
index 0000000000..678c3fcb31
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/index.ts
@@ -0,0 +1 @@
+export { default } from './TranscriptEditor';
diff --git a/src/files-and-videos/videos-page/transcript-editor/messages.ts b/src/files-and-videos/videos-page/transcript-editor/messages.ts
new file mode 100644
index 0000000000..f996064910
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/messages.ts
@@ -0,0 +1,101 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  loadingLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.loading',
+    defaultMessage: 'Loading transcript...',
+    description: 'Loading state for transcript editor',
+  },
+  saveButtonLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.save',
+    defaultMessage: 'Save',
+    description: 'Save button label for transcript editor',
+  },
+  cancelButtonLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button label for transcript editor',
+  },
+  saveFailedLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.saveFailed',
+    defaultMessage: 'Unable to save transcript, please try again.',
+    description: 'Error shown when transcript save fails',
+  },
+  saveInProgressLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.saving',
+    defaultMessage: 'Saving...',
+    description: 'Label shown while transcript save is in progress',
+  },
+  savedLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.saved',
+    defaultMessage: 'Saved',
+    description: 'Label shown when transcript save is successful',
+  },
+  insertCueLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.insertCue',
+    defaultMessage: 'Insert cue here',
+    description: 'Label for inserting a new cue between transcript cues',
+  },
+  deleteCueLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.deleteCue',
+    defaultMessage: 'Delete cue',
+    description: 'Accessible label for deleting a transcript cue',
+  },
+  seekCueLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.seekCue',
+    defaultMessage: 'Seek to cue time',
+    description: 'Accessible label for seek button in cue row',
+  },
+  invalidTimestampLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.invalidTimestamp',
+    defaultMessage: 'Please use valid cue times in HH:MM:SS,mmm format.',
+    description: 'Error shown when one or more cue timestamps are invalid',
+  },
+  unsavedModalTitle: {
+    id: 'course-authoring.video-uploads.transcriptEditor.unsavedModalTitle',
+    defaultMessage: 'Unsaved changes',
+    description: 'Title for unsaved changes warning modal',
+  },
+  unsavedModalDescription: {
+    id: 'course-authoring.video-uploads.transcriptEditor.unsavedModalDescription',
+    defaultMessage: 'Are you sure you want to leave the editor? All unsaved changes will be lost.',
+    description: 'Description for unsaved changes warning modal',
+  },
+  keepEditingButtonLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.keepEditing',
+    defaultMessage: 'Keep editing',
+    description: 'Button label to keep editing transcript changes',
+  },
+  closeEditorButtonLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.closeEditor',
+    defaultMessage: 'Leave editor',
+    description: 'Button label to close transcript editor and discard changes',
+  },
+  invalidCueTextLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.invalidCueText',
+    defaultMessage: 'Cue text cannot be empty.',
+    description: 'Error shown when one or more cue texts are empty',
+  },
+  loadFailedLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.loadFailed',
+    defaultMessage: 'Unable to load transcript, please try again.',
+    description: 'Error shown when the transcript could not be downloaded into the editor',
+  },
+  cueTextLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.cueTextLabel',
+    defaultMessage: 'Cue {index} text',
+    description: 'Accessible label for the text field of a transcript cue',
+  },
+  cueStartTimeLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.cueStartTimeLabel',
+    defaultMessage: 'Cue {index} start time',
+    description: 'Accessible label for the start timestamp field of a transcript cue',
+  },
+  cueEndTimeLabel: {
+    id: 'course-authoring.video-uploads.transcriptEditor.cueEndTimeLabel',
+    defaultMessage: 'Cue {index} end time',
+    description: 'Accessible label for the end timestamp field of a transcript cue',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/videos-page/transcript-editor/srtUtils.test.ts b/src/files-and-videos/videos-page/transcript-editor/srtUtils.test.ts
new file mode 100644
index 0000000000..039cbdec5a
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/srtUtils.test.ts
@@ -0,0 +1,99 @@
+import {
+  formatTimestamp,
+  isValidSrt,
+  parseSrt,
+  parseTimestamp,
+  serializeSrt,
+} from './srtUtils';
+
+const SRT = [
+  '1',
+  '00:00:01,000 --> 00:00:02,500',
+  'Hello there',
+  '',
+  '2',
+  '00:00:03,000 --> 00:00:04,000',
+  'Second cue',
+].join('\n');
+
+describe('parseSrt', () => {
+  it('parses indexed cue blocks', () => {
+    expect(parseSrt(SRT)).toEqual([
+      { startTime: '00:00:01,000', endTime: '00:00:02,500', text: 'Hello there' },
+      { startTime: '00:00:03,000', endTime: '00:00:04,000', text: 'Second cue' },
+    ]);
+  });
+
+  it('parses cue blocks without index lines', () => {
+    const noIndex = '00:00:01,000 --> 00:00:02,000\nHi\n\n00:00:03,000 --> 00:00:04,000\nBye';
+    expect(parseSrt(noIndex)).toEqual([
+      { startTime: '00:00:01,000', endTime: '00:00:02,000', text: 'Hi' },
+      { startTime: '00:00:03,000', endTime: '00:00:04,000', text: 'Bye' },
+    ]);
+  });
+
+  it('keeps multi-line cue text together', () => {
+    const multi = '1\n00:00:01,000 --> 00:00:02,000\nline one\nline two';
+    expect(parseSrt(multi)[0].text).toBe('line one\nline two');
+  });
+
+  it('drops blocks with a malformed timestamp line', () => {
+    const partiallyBroken = `${SRT}\n\n3\nnot a timestamp\nBroken`;
+    expect(parseSrt(partiallyBroken)).toHaveLength(2);
+  });
+
+  it('drops blocks that have fewer than two lines', () => {
+    expect(parseSrt(`${SRT}\n\nlonely line`)).toHaveLength(2);
+  });
+
+  it('returns an empty list for empty or non-string input', () => {
+    expect(parseSrt('')).toEqual([]);
+    expect(parseSrt(null)).toEqual([]);
+    expect(parseSrt(undefined)).toEqual([]);
+  });
+});
+
+describe('serializeSrt', () => {
+  it('re-numbers cues and round-trips through parseSrt', () => {
+    const cues = parseSrt(SRT);
+    const serialized = serializeSrt(cues);
+    expect(serialized.startsWith('1\n00:00:01,000 --> 00:00:02,500\nHello there')).toBe(true);
+    expect(parseSrt(serialized)).toEqual(cues);
+  });
+});
+
+describe('parseTimestamp / formatTimestamp', () => {
+  it('parses SRT timestamps into seconds', () => {
+    expect(parseTimestamp('01:02:03,450')).toBeCloseTo(3723.45);
+    expect(parseTimestamp('00:00:00,000')).toBe(0);
+    expect(parseTimestamp('00:01:00')).toBe(60);
+  });
+
+  it('formats seconds into SRT timestamps and round-trips', () => {
+    expect(formatTimestamp(3723.45)).toBe('01:02:03,450');
+    expect(parseTimestamp(formatTimestamp(59.999))).toBeCloseTo(59.999);
+  });
+
+  it('clamps negative and non-numeric input to zero', () => {
+    expect(formatTimestamp(-5)).toBe('00:00:00,000');
+    expect(formatTimestamp(NaN)).toBe('00:00:00,000');
+  });
+});
+
+describe('isValidSrt', () => {
+  it('accepts well-formed content, with or without index lines', () => {
+    expect(isValidSrt(SRT)).toBe(true);
+    expect(isValidSrt('00:00:01,000 --> 00:00:02,000\nHi')).toBe(true);
+  });
+
+  it('treats empty or blank content as a valid empty transcript', () => {
+    expect(isValidSrt('')).toBe(true);
+    expect(isValidSrt(null)).toBe(true);
+    expect(isValidSrt('   \n \n  ')).toBe(true);
+  });
+
+  it('rejects content where any block is malformed', () => {
+    expect(isValidSrt(`${SRT}\n\n3\nnot a timestamp\nBroken`)).toBe(false);
+    expect(isValidSrt('just some text')).toBe(false);
+  });
+});
diff --git a/src/files-and-videos/videos-page/transcript-editor/srtUtils.ts b/src/files-and-videos/videos-page/transcript-editor/srtUtils.ts
new file mode 100644
index 0000000000..dfacd9a5d9
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-editor/srtUtils.ts
@@ -0,0 +1,90 @@
+export interface Cue {
+  startTime: string;
+  endTime: string;
+  text: string;
+}
+
+export const parseSrt = (text: string | null | undefined): Cue[] => {
+  if (!text || typeof text !== 'string') {
+    return [];
+  }
+
+  return text
+    .trim()
+    .split(/\n\s*\n/)
+    .map((block) => block.split('\n'))
+    .map((lines): Cue | null => {
+      if (lines.length < 2) {
+        return null;
+      }
+
+      const hasIndex = /^\d+$/.test(lines[0].trim());
+      const timeLine = hasIndex ? lines[1] : lines[0];
+      const textLines = hasIndex ? lines.slice(2) : lines.slice(1);
+
+      const match = timeLine.match(/(\d{2}:\d{2}:\d{2},\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2},\d{3})/);
+      if (!match) {
+        return null;
+      }
+
+      return {
+        startTime: match[1],
+        endTime: match[2],
+        text: textLines.join('\n').trim(),
+      };
+    })
+    .filter((cue): cue is Cue => cue !== null);
+};
+
+export const serializeSrt = (cues: Cue[]): string =>
+  cues
+    .map((cue, index) => `${index + 1}\n${cue.startTime} --> ${cue.endTime}\n${cue.text}`)
+    .join('\n\n');
+
+export const parseTimestamp = (timestamp: string): number => {
+  const [hms, ms] = timestamp.split(',');
+  const [hours, minutes, seconds] = hms.split(':').map(Number);
+  return (hours * 3600) + (minutes * 60) + seconds + (Number(ms || 0) / 1000);
+};
+
+export const formatTimestamp = (totalSeconds: number): string => {
+  const safeSeconds = Math.max(0, Number(totalSeconds) || 0);
+  const hours = Math.floor(safeSeconds / 3600);
+  const minutes = Math.floor((safeSeconds % 3600) / 60);
+  const seconds = Math.floor(safeSeconds % 60);
+  const milliseconds = Math.round((safeSeconds - Math.floor(safeSeconds)) * 1000);
+
+  const pad2 = (value: number) => String(value).padStart(2, '0');
+  const pad3 = (value: number) => String(value).padStart(3, '0');
+
+  return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)},${pad3(milliseconds)}`;
+};
+
+/**
+ * Strictly validates SRT content.
+ * Returns true for empty/blank files (valid empty transcript).
+ * Returns false if the file has cue blocks where ANY block has a malformed
+ * timestamp line (partial corruption is not allowed).
+ */
+export const isValidSrt = (text: string | null | undefined): boolean => {
+  if (!text || typeof text !== 'string') {
+    return true;
+  }
+
+  const blocks = text.trim().split(/\n\s*\n/).filter((b) => b.trim().length > 0);
+  if (blocks.length === 0) {
+    return true;
+  }
+
+  const TIMESTAMP_LINE = /^\d{2}:\d{2}:\d{2},\d{3}\s*-->\s*\d{2}:\d{2}:\d{2},\d{3}/;
+
+  return blocks.every((block) => {
+    const lines = block.trim().split('\n').map((l) => l.trim());
+    if (lines.length < 2) {
+      return false;
+    }
+    const hasIndex = /^\d+$/.test(lines[0]);
+    const timeLine = hasIndex ? lines[1] : lines[0];
+    return TIMESTAMP_LINE.test(timeLine);
+  });
+};
diff --git a/src/generic/ExpandCollapseIconButton.test.tsx b/src/generic/ExpandCollapseIconButton.test.tsx
new file mode 100644
index 0000000000..4a4776647e
--- /dev/null
+++ b/src/generic/ExpandCollapseIconButton.test.tsx
@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ExpandCollapseIconButton from './ExpandCollapseIconButton';
+
+describe('<ExpandCollapseIconButton />', () => {
+  it('renders an invisible, disabled placeholder when canExpand is false, regardless of isExpanded, and ignores clicks', () => {
+    const onToggle = jest.fn();
+    render(
+      <ExpandCollapseIconButton
+        canExpand={false}
+        isExpanded
+        onToggle={onToggle}
+        expandLabel="Expand"
+        collapseLabel="Collapse"
+      />,
+    );
+
+    const button = screen.getByRole('button', { hidden: true });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-hidden', 'true');
+    expect(button).toHaveClass('invisible');
+
+    fireEvent.click(button);
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+
+  it('shows the expand-action label and aria-expanded="false" while collapsed, and calls onToggle when clicked', () => {
+    const onToggle = jest.fn();
+    render(
+      <ExpandCollapseIconButton
+        canExpand
+        isExpanded={false}
+        onToggle={onToggle}
+        expandLabel="Expand"
+        collapseLabel="Collapse"
+      />,
+    );
+
+    // The accessible name comes from `aria-label`, which this component
+    // sets to `expandLabel` while collapsed and `collapseLabel` while
+    // expanded.
+    const button = screen.getByRole('button', { name: 'Expand' });
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(button);
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the collapse-action label and aria-expanded="true" while expanded', () => {
+    render(
+      <ExpandCollapseIconButton
+        canExpand
+        isExpanded
+        expandLabel="Expand"
+        collapseLabel="Collapse"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'Collapse' });
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+});
diff --git a/src/generic/ExpandCollapseIconButton.tsx b/src/generic/ExpandCollapseIconButton.tsx
new file mode 100644
index 0000000000..34e03cb4a6
--- /dev/null
+++ b/src/generic/ExpandCollapseIconButton.tsx
@@ -0,0 +1,66 @@
+import { IconButton } from '@openedx/paragon';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+
+interface ExpandCollapseIconButtonProps {
+  canExpand: boolean;
+  isExpanded: boolean;
+  onToggle?: () => void;
+  /** Label for the "expand" action - shown while the row is collapsed. */
+  expandLabel: string;
+  /** Label for the "collapse" action - shown while the row is expanded. */
+  collapseLabel: string;
+  className?: string;
+}
+
+/** ExpandCollapseIconButton
+ * Shared disclosure button for one row of a tree or nested list, toggling
+ * between an expanded and a collapsed state.
+ *
+ * Takes plain booleans/callback rather than a TanStack `Row`, so it works
+ * equally for a `<ul>/<li>`-rendered tree and for a table row wrapping one.
+ * When the row has no children (`canExpand` is false), this renders an
+ * invisible, disabled placeholder icon instead of nothing, so every row's
+ * label still starts at the same horizontal position.
+ *
+ * `expandLabel`/`collapseLabel` are already-formatted strings, not
+ * message objects, so this component stays free of any particular i18n
+ * message set - each caller owns its own wording.
+ */
+const ExpandCollapseIconButton = ({
+  canExpand,
+  isExpanded,
+  onToggle,
+  expandLabel,
+  collapseLabel,
+  className,
+}: ExpandCollapseIconButtonProps) => {
+  if (!canExpand) {
+    return (
+      <IconButton
+        src={ExpandMore}
+        alt=""
+        size="sm"
+        className={className ? `${className} invisible` : 'invisible'}
+        disabled
+        tabIndex={-1}
+        aria-hidden
+      />
+    );
+  }
+
+  const label = isExpanded ? collapseLabel : expandLabel;
+
+  return (
+    <IconButton
+      src={isExpanded ? ExpandLess : ExpandMore}
+      onClick={onToggle}
+      alt={label}
+      aria-label={label}
+      aria-expanded={isExpanded}
+      size="sm"
+      className={className}
+    />
+  );
+};
+
+export default ExpandCollapseIconButton;
diff --git a/src/generic/configure-modal/ConfigureModal.test.tsx b/src/generic/configure-modal/ConfigureModal.test.tsx
index 941f4350ad..e002202d5b 100644
--- a/src/generic/configure-modal/ConfigureModal.test.tsx
+++ b/src/generic/configure-modal/ConfigureModal.test.tsx
@@ -1,10 +1,14 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { AccessManagedXBlockDataTypes } from '@src/data/types';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import * as authzApi from '@src/authz/data/api';
 import initializeStore from '../../store';
 import ConfigureModal from './ConfigureModal';
 import {
@@ -16,6 +20,7 @@ import {
 import messages from './messages';
 
 let store;
+let queryClient;
 const mockPathname = '/foo-bar';
 
 jest.mock('react-redux', () => ({
@@ -33,33 +38,54 @@ jest.mock('react-router-dom', () => ({
 const onCloseMock = jest.fn();
 const onConfigureSubmitMock = jest.fn();
 
+/**
+ * Common setup. Note `mockWaffleFlags()` leaves authz disabled, so
+ * `useCourseUserPermissions` synchronously falls back to granting every permission
+ * (`canEditCourseContent === true`). Tests that need the denied path re-enable authz
+ * and mock `validateUserPermissions` explicitly.
+ */
+const setupMocks = () => {
+  initializeMockApp({
+    authenticatedUser: {
+      userId: 3,
+      username: 'abc123',
+      administrator: true,
+      roles: [],
+    },
+  });
+  store = initializeStore();
+  queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  mockWaffleFlags();
+};
+
+// AppProvider supplies the Router that CourseAuthoringProvider (useNavigate) needs; the
+// QueryClientProvider is required for the course-details/permissions queries it runs.
+const withProviders = (ui: React.ReactNode) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <QueryClientProvider client={queryClient}>
+        <CourseAuthoringProvider courseId={'courseId'}>
+          {ui}
+        </CourseAuthoringProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
 const renderComponent = () =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentSectionMock as unknown as AccessManagedXBlockDataTypes}
-          isSelfPaced={false}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentSectionMock as unknown as AccessManagedXBlockDataTypes}
+      isSelfPaced={false}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Section', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders ConfigureModal component correctly', () => {
@@ -85,33 +111,20 @@ describe('<ConfigureModal /> for Section', () => {
 });
 
 const renderSubsectionComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-          isSelfPaced={false}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+      isSelfPaced={false}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Subsection', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders subsection ConfigureModal component correctly', () => {
@@ -176,32 +189,19 @@ describe('<ConfigureModal /> for Subsection', () => {
 });
 
 const renderUnitComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentUnitMock as unknown as AccessManagedXBlockDataTypes}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentUnitMock as unknown as AccessManagedXBlockDataTypes}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Unit', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders unit ConfigureModal component correctly', async () => {
@@ -246,33 +246,20 @@ describe('<ConfigureModal /> for Unit', () => {
 });
 
 const renderXBlockComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          isXBlockComponent
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentXBlockMock as unknown as AccessManagedXBlockDataTypes}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      isXBlockComponent
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentXBlockMock as unknown as AccessManagedXBlockDataTypes}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for XBlock', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders unit ConfigureModal component correctly', async () => {
@@ -315,36 +302,78 @@ describe('<ConfigureModal /> for XBlock', () => {
   });
 });
 
-describe('<ConfigureModal /> with enableTimedExams prop', () => {
+describe('<ConfigureModal /> permission gating', () => {
+  let validateUserPermissionsMock;
+
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
+    setupMocks();
+    // Enable authz so `canEditCourseContent` is driven by the mocked permissions API.
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = jest.spyOn(authzApi, 'validateUserPermissions');
+  });
+
+  it('disables the unit visibility, access and discussion controls when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId, getByRole } = renderUnitComponent();
+
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).toBeDisabled());
+    expect(getByTestId('group-type-select')).toBeDisabled();
+    expect(
+      getByRole('checkbox', { name: messages.discussionEnabledCheckbox.defaultMessage }),
+    ).toBeDisabled();
+  });
+
+  it('enables the unit visibility and access controls when the user can edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    const { getByTestId } = renderUnitComponent();
+
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).not.toBeDisabled());
+    expect(getByTestId('group-type-select')).not.toBeDisabled();
+  });
+
+  it('disables the group type select for an xblock when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId } = renderXBlockComponent();
 
-    store = initializeStore();
+    await waitFor(() => expect(getByTestId('group-type-select')).toBeDisabled());
+  });
+
+  it('hides the footer Cancel and Save buttons when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId, queryByRole } = renderUnitComponent();
+
+    // Wait for the modal body to render (the visibility checkbox is always present), then
+    // confirm the permission-gated footer actions are absent.
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).toBeInTheDocument());
+    expect(queryByRole('button', { name: messages.cancelButton.defaultMessage })).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: messages.saveButton.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('shows the footer Cancel and Save buttons when the user can edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    const { findByRole, getByRole } = renderUnitComponent();
+
+    expect(await findByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+  });
+});
+
+describe('<ConfigureModal /> with enableTimedExams prop', () => {
+  beforeEach(() => {
+    setupMocks();
   });
 
   const renderWithTimedExamsProps = (enableTimedExams = true) =>
-    render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <ConfigureModal
-            isOpen
-            onClose={onCloseMock}
-            onConfigureSubmit={onConfigureSubmitMock}
-            currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-            enableTimedExams={enableTimedExams}
-            isSelfPaced={false}
-          />
-        </IntlProvider>
-        ,
-      </AppProvider>,
-    );
+    render(withProviders(
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+        enableTimedExams={enableTimedExams}
+        isSelfPaced={false}
+      />,
+    ));
 
   it('passes enableTimedExams=true to AdvancedTab', async () => {
     const user = userEvent.setup();
@@ -412,20 +441,15 @@ describe('<ConfigureModal /> with enableTimedExams prop', () => {
   it('defaults enableTimedExams to false when not provided', async () => {
     const user = userEvent.setup();
 
-    const { getByRole } = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <ConfigureModal
-            isOpen
-            onClose={onCloseMock}
-            onConfigureSubmit={onConfigureSubmitMock}
-            currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-            isSelfPaced={false}
-          />
-        </IntlProvider>
-        ,
-      </AppProvider>,
-    );
+    const { getByRole } = render(withProviders(
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+        isSelfPaced={false}
+      />,
+    ));
 
     const advancedTab = getByRole('tab', {
       name: messages.advancedTabTitle.defaultMessage,
diff --git a/src/generic/configure-modal/ConfigureModal.tsx b/src/generic/configure-modal/ConfigureModal.tsx
index d8c46b8003..04bbdb5e64 100644
--- a/src/generic/configure-modal/ConfigureModal.tsx
+++ b/src/generic/configure-modal/ConfigureModal.tsx
@@ -19,6 +19,7 @@ import VisibilityTab from './VisibilityTab';
 import AdvancedTab from './AdvancedTab';
 import { UnitTab } from './UnitTab';
 import { PUBLISH_TYPES } from '@src/course-unit/constants';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props {
   isOpen: boolean;
@@ -44,6 +45,7 @@ const ConfigureModal = ({
   isOverflowVisible = false,
 }: Props) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   if (!currentItemData) {
     return null;
@@ -337,19 +339,21 @@ const ConfigureModal = ({
                   {renderModalBody(values, setFieldValue)}
                 </Form.Group>
               </ModalDialog.Body>
-              <ModalDialog.Footer className="pt-1">
-                <ActionRow>
-                  <ModalDialog.CloseButton variant="tertiary">
-                    {intl.formatMessage(messages.cancelButton)}
-                  </ModalDialog.CloseButton>
-                  <Button
-                    data-testid="configure-save-button"
-                    type="submit"
-                  >
-                    {intl.formatMessage(messages.saveButton)}
-                  </Button>
-                </ActionRow>
-              </ModalDialog.Footer>
+              {canEditCourseContent && (
+                <ModalDialog.Footer className="pt-1">
+                  <ActionRow>
+                    <ModalDialog.CloseButton variant="tertiary">
+                      {intl.formatMessage(messages.cancelButton)}
+                    </ModalDialog.CloseButton>
+                    <Button
+                      data-testid="configure-save-button"
+                      type="submit"
+                    >
+                      {intl.formatMessage(messages.saveButton)}
+                    </Button>
+                  </ActionRow>
+                </ModalDialog.Footer>
+              )}
             </Form>
           )}
         </Formik>
diff --git a/src/generic/configure-modal/UnitTab.tsx b/src/generic/configure-modal/UnitTab.tsx
index 852e9c9b99..83b01004ea 100644
--- a/src/generic/configure-modal/UnitTab.tsx
+++ b/src/generic/configure-modal/UnitTab.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type UserPartitionInfo = {
   selectablePartitions: {
@@ -45,16 +46,19 @@ export const DiscussionEditComponent = ({
 }: {
   discussionEnabled: boolean;
   handleDiscussionChange: (e: any) => void;
-}) => (
-  <>
-    <Form.Checkbox checked={discussionEnabled} onChange={handleDiscussionChange}>
-      <FormattedMessage {...messages.discussionEnabledCheckbox} />
-    </Form.Checkbox>
-    <p className="x-small font-weight-bold">
-      <FormattedMessage {...messages.discussionEnabledDescription} />
-    </p>
-  </>
-);
+}) => {
+  const { canEditCourseContent } = useCourseAuthoringContext();
+  return (
+    <>
+      <Form.Checkbox checked={discussionEnabled} onChange={handleDiscussionChange} disabled={!canEditCourseContent}>
+        <FormattedMessage {...messages.discussionEnabledCheckbox} />
+      </Form.Checkbox>
+      <p className="x-small font-weight-bold">
+        <FormattedMessage {...messages.discussionEnabledDescription} />
+      </p>
+    </>
+  );
+};
 
 export interface AccessEditComponentProps {
   selectedPartitionIndex?: number;
@@ -70,6 +74,7 @@ export const AccessEditComponent = ({
   selectedGroups,
 }: AccessEditComponentProps) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
   const checkIsDeletedGroup = (group) => {
     const isGroupSelected = selectedGroups.includes(group.id.toString());
 
@@ -92,6 +97,7 @@ export const AccessEditComponent = ({
         value={selectedPartitionIndex}
         onChange={handleSelect}
         data-testid="group-type-select"
+        disabled={!canEditCourseContent}
       >
         <option value="-1" key="-1">
           {userPartitionInfo?.selectedPartitionIndex === -1
@@ -132,6 +138,7 @@ export const AccessEditComponent = ({
                   type="checkbox"
                   value={`${group.id}`}
                   name="selectedGroups"
+                  disabled={!canEditCourseContent}
                 />
                 <div>
                   <Form.Label
@@ -169,7 +176,7 @@ export const UnitTab = ({
     selectedGroups,
     discussionEnabled,
   } = values;
-
+  const { canEditCourseContent } = useCourseAuthoringContext();
   const handleVisibilityChange = (e) => {
     setFieldValue('isVisibleToStaffOnly', e.target.checked);
   };
@@ -201,6 +208,7 @@ export const UnitTab = ({
             checked={isVisibleToStaffOnly}
             onChange={handleVisibilityChange}
             data-testid="unit-visibility-checkbox"
+            disabled={!canEditCourseContent}
           >
             <FormattedMessage {...messages.hideFromLearners} />
           </Form.Checkbox>
diff --git a/src/generic/help-sidebar/HelpSidebar.test.tsx b/src/generic/help-sidebar/HelpSidebar.test.tsx
index 6c1280b2a1..4c086d45b7 100644
--- a/src/generic/help-sidebar/HelpSidebar.test.tsx
+++ b/src/generic/help-sidebar/HelpSidebar.test.tsx
@@ -41,8 +41,8 @@ const mockCoursePermissions = (
     canViewScheduleAndDetails: true,
     canViewGradingSettings: true,
     canViewCourseTeam: true,
-    canManageGroupConfigurations: true,
-    canManageAdvancedSettings: true,
+    canViewGroupConfigurations: true,
+    canViewAdvancedSettings: true,
     ...permissions,
   } as unknown as ReturnType<typeof useCourseUserPermissions>);
 };
@@ -90,8 +90,8 @@ describe('HelpSidebar', () => {
     it.each([
       ['canViewScheduleAndDetails', messages.sidebarLinkToScheduleAndDetails],
       ['canViewGradingSettings', messages.sidebarLinkToGrading],
-      ['canManageGroupConfigurations', messages.sidebarLinkToGroupConfigurations],
-      ['canManageAdvancedSettings', messages.sidebarLinkToAdvancedSettings],
+      ['canViewGroupConfigurations', messages.sidebarLinkToGroupConfigurations],
+      ['canViewAdvancedSettings', messages.sidebarLinkToAdvancedSettings],
     ])('renders the %s link only when the permission is granted', async (permission, message) => {
       mockCoursePermissions({ [permission]: true });
       const { queryByText, unmount } = renderHelpSidebar(props);
@@ -129,8 +129,8 @@ describe('HelpSidebar', () => {
         canViewScheduleAndDetails: false,
         canViewGradingSettings: false,
         canViewCourseTeam: false,
-        canManageGroupConfigurations: false,
-        canManageAdvancedSettings: false,
+        canViewGroupConfigurations: false,
+        canViewAdvancedSettings: false,
       }, { isLoading: true });
       const { queryByText } = renderHelpSidebar(props);
 
diff --git a/src/generic/help-sidebar/HelpSidebar.tsx b/src/generic/help-sidebar/HelpSidebar.tsx
index 99c019c1eb..1ca15dce4b 100644
--- a/src/generic/help-sidebar/HelpSidebar.tsx
+++ b/src/generic/help-sidebar/HelpSidebar.tsx
@@ -100,7 +100,7 @@ const HelpSidebar = ({
                       />
                     )
                 )}
-                {showOtherLink(groupConfigurations) && perms.canManageGroupConfigurations && (
+                {showOtherLink(groupConfigurations) && perms.canViewGroupConfigurations && (
                   <HelpSidebarLink
                     pathToPage={`/course/${courseId}/${groupConfigurations}`}
                     title={intl.formatMessage(
@@ -109,7 +109,7 @@ const HelpSidebar = ({
                     isNewPage
                   />
                 )}
-                {showOtherLink(advancedSettings) && perms.canManageAdvancedSettings && (
+                {showOtherLink(advancedSettings) && perms.canViewAdvancedSettings && (
                   <HelpSidebarLink
                     pathToPage={`/course/${courseId}/${advancedSettings}`}
                     title={intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
diff --git a/src/generic/sidebar/Sidebar.tsx b/src/generic/sidebar/Sidebar.tsx
index 35a83739a1..b4e292e916 100644
--- a/src/generic/sidebar/Sidebar.tsx
+++ b/src/generic/sidebar/Sidebar.tsx
@@ -88,12 +88,17 @@ export function Sidebar<T extends SidebarPages>({
 }: SidebarProps<T>) {
   const intl = useIntl();
 
+  // currentPageKey may point to a page that isn't currently available (e.g. one hidden by
+  // permissions or a stale value coming from the URL). Fall back to the first available page
+  // so the sidebar renders instead of crashing on an undefined page.
+  const [fallbackPageKey] = Object.keys(pages) as (keyof T)[];
+  const effectivePageKey = pages[currentPageKey] ? currentPageKey : fallbackPageKey;
   const {
     component: SidebarComponent,
     icon: SidebarIcon,
     title,
-  } = pages[currentPageKey];
-  const activeKey = isOpen ? currentPageKey : undefined;
+  } = pages[effectivePageKey];
+  const activeKey = isOpen ? effectivePageKey : undefined;
 
   return (
     <Stack direction="horizontal" className="align-items-baseline flex-fill overflow-hidden" gap={2}>
diff --git a/src/generic/sidebar/SidebarTitle.test.tsx b/src/generic/sidebar/SidebarTitle.test.tsx
new file mode 100644
index 0000000000..3de7d666b4
--- /dev/null
+++ b/src/generic/sidebar/SidebarTitle.test.tsx
@@ -0,0 +1,118 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import { Newsstand } from '@openedx/paragon/icons';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { SidebarTitle } from './SidebarTitle';
+import messages from './messages';
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useCourseItemData: jest.fn(),
+}));
+
+const mockUseCourseItemData = useCourseItemData as jest.Mock;
+
+const menuProps = {
+  itemId: 'block-v1:org+course+run+type@vertical+block@test',
+  index: 0,
+  actions: {
+    deletable: true,
+    draggable: false,
+    childAddable: false,
+    duplicable: true,
+  },
+  onClickUnlink: jest.fn(),
+  onClickDelete: jest.fn(),
+  onClickViewLibrary: jest.fn(),
+};
+
+const defaultProps = {
+  title: 'Section title',
+  icon: Newsstand,
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = (props = {}) =>
+  render(<SidebarTitle {...defaultProps} {...props} />, {
+    extraWrapper: WrapperProvider,
+  });
+
+describe('<SidebarTitle />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    // InfoSidebarMenu renders `null` until this returns data, so provide a minimal item.
+    mockUseCourseItemData.mockReturnValue({ data: { id: menuProps.itemId } });
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  it('renders the title', () => {
+    renderComponent();
+
+    expect(screen.getByRole('heading', { name: defaultProps.title })).toBeInTheDocument();
+  });
+
+  it('does not render the back button when onBackBtnClick is not provided', () => {
+    renderComponent();
+
+    expect(screen.queryByRole('button', { name: messages.backBtnText.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('renders the back button and calls onBackBtnClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onBackBtnClick = jest.fn();
+    renderComponent({ onBackBtnClick });
+
+    const backBtn = screen.getByRole('button', { name: messages.backBtnText.defaultMessage });
+    expect(backBtn).toBeInTheDocument();
+    await user.click(backBtn);
+    expect(onBackBtnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the menu when the user can edit course content and menuProps are provided', async () => {
+    renderComponent({ menuProps });
+
+    // The menu is gated behind `canEditCourseContent`, which is only known once the (async)
+    // permissions query resolves, so wait for it rather than querying synchronously.
+    expect(
+      await screen.findByRole('button', { name: messages.itemMenuAlt.defaultMessage }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render the menu when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent({ menuProps });
+
+    // The title always renders; wait for the permissions query to settle, then confirm the
+    // gated menu never appears.
+    expect(screen.getByRole('heading', { name: defaultProps.title })).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.itemMenuAlt.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('does not render the menu when menuProps are not provided', async () => {
+    renderComponent();
+
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.itemMenuAlt.defaultMessage })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index 16c0ca4233..68bb2f3a87 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -3,6 +3,7 @@ import { Icon, IconButton, Stack } from '@openedx/paragon';
 import { ArrowBack } from '@openedx/paragon/icons';
 import messages from './messages';
 import { InfoSidebarMenu, InfoSidebarMenuProps } from './InfoSidebarMenu';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface SidebarTitleProps {
   /** Title of the section */
@@ -29,6 +30,7 @@ export const SidebarTitle = ({
   menuProps,
 }: SidebarTitleProps) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
   return (
     <>
       <div className="d-flex justify-content-between">
@@ -44,7 +46,7 @@ export const SidebarTitle = ({
           <Icon src={icon} className="mr-2 text-primary" />
           <h2 className="text-primary h3 mb-0">{title}</h2>
         </Stack>
-        {menuProps && <InfoSidebarMenu {...menuProps} />}
+        {canEditCourseContent && menuProps && <InfoSidebarMenu {...menuProps} />}
       </div>
       <hr className="border" style={{ marginLeft: '-1rem', marginRight: '-1rem' }} />
     </>
diff --git a/src/grading-settings/GradingSettings.test.jsx b/src/grading-settings/GradingSettings.test.jsx
index 8b9325f9ef..f6bd7010d7 100644
--- a/src/grading-settings/GradingSettings.test.jsx
+++ b/src/grading-settings/GradingSettings.test.jsx
@@ -11,7 +11,7 @@ import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { useCourseUserPermissions } from '@src/authz/hooks';
 
 import gradingSettings from './__mocks__/gradingSettings';
-import { getGradingSettingsApiUrl } from './data/api';
+import { getGradingSettingsApiUrl, getAuthoringGradingApiUrl } from './data/api';
 import * as apiHooks from './data/apiHooks';
 import GradingSettings from './GradingSettings';
 import messages from './messages';
@@ -45,7 +45,7 @@ describe('<GradingSettings />', () => {
       .onGet(getGradingSettingsApiUrl(courseId))
       .reply(200, gradingSettings);
     axiosMock
-      .onPost(getGradingSettingsApiUrl(courseId))
+      .onPatch(getAuthoringGradingApiUrl(courseId))
       .reply(200, {});
     axiosMock.onGet(getCourseSettingsApiUrl(courseId))
       .reply(200, {});
@@ -147,7 +147,7 @@ describe('<GradingSettings /> permissions', () => {
     Object.defineProperty(window, 'scrollTo', { value: jest.fn(), writable: true });
     const { axiosMock: mock } = mocks;
     mock.onGet(getGradingSettingsApiUrl(courseId)).reply(200, gradingSettings);
-    mock.onPost(getGradingSettingsApiUrl(courseId)).reply(200, {});
+    mock.onPatch(getAuthoringGradingApiUrl(courseId)).reply(200, {});
     mock.onGet(getCourseSettingsApiUrl(courseId)).reply(200, {});
     jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
diff --git a/src/grading-settings/data/api.js b/src/grading-settings/data/api.js
index e83ca2c647..52467e5455 100644
--- a/src/grading-settings/data/api.js
+++ b/src/grading-settings/data/api.js
@@ -4,9 +4,14 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { deepConvertingKeysToCamelCase, deepConvertingKeysToSnakeCase } from '../../utils';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
 export const getGradingSettingsApiUrl = (courseId) =>
   `${getApiBaseUrl()}/api/contentstore/v1/course_grading/${courseId}`;
 
+// v3 authoring_grading exposes only PATCH and has no GET, so the read stays on v1.
+export const getAuthoringGradingApiUrl = (courseId) =>
+  `${getApiBaseUrl()}/api/contentstore/v3/authoring_grading/${courseId}/`;
+
 /**
  * Get's grading setting for a course.
  * @param {string} courseId
@@ -26,6 +31,6 @@ export async function getGradingSettings(courseId) {
  */
 export async function sendGradingSettings(courseId, settings) {
   const { data } = await getAuthenticatedHttpClient()
-    .post(getGradingSettingsApiUrl(courseId), deepConvertingKeysToSnakeCase(settings));
+    .patch(getAuthoringGradingApiUrl(courseId), deepConvertingKeysToSnakeCase(settings));
   return camelCaseObject(data);
 }
diff --git a/src/group-configurations/GroupConfigurations.test.tsx b/src/group-configurations/GroupConfigurations.test.tsx
index 8906111152..0a014410fe 100644
--- a/src/group-configurations/GroupConfigurations.test.tsx
+++ b/src/group-configurations/GroupConfigurations.test.tsx
@@ -27,6 +27,7 @@ const mockPermissions = (overrides = {}) =>
   jest.mocked(useCourseUserPermissions).mockReturnValue({
     isLoading: false,
     isAuthzEnabled: true,
+    canViewGroupConfigurations: true,
     canManageGroupConfigurations: true,
     ...overrides,
   } as ReturnType<typeof useCourseUserPermissions>);
@@ -48,8 +49,8 @@ describe('<GroupConfigurations />', () => {
     mockPermissions();
   });
 
-  it('shows PermissionDeniedAlert when user lacks manage group configurations permission', async () => {
-    mockPermissions({ canManageGroupConfigurations: false });
+  it('shows PermissionDeniedAlert when user lacks view group configurations permission', async () => {
+    mockPermissions({ canViewGroupConfigurations: false, canManageGroupConfigurations: false });
     renderComponent();
     expect(await screen.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
     expect(screen.queryByText(messages.headingSubtitle.defaultMessage)).not.toBeInTheDocument();
@@ -79,6 +80,25 @@ describe('<GroupConfigurations />', () => {
     expect(screen.getByText(teamGroups.name)).toBeInTheDocument();
   });
 
+  it('hides every action button when the user can view but not manage group configurations', async () => {
+    mockPermissions({ canManageGroupConfigurations: false });
+    renderComponent();
+
+    const mainContent = await screen.findByTestId('group-configurations-main-content-wrapper');
+
+    expect(within(mainContent).getByText(contentGroups.name)).toBeInTheDocument();
+    expect(
+      within(mainContent).queryByText(contentGroupsMessages.addNewGroup.defaultMessage),
+    ).not.toBeInTheDocument();
+    expect(
+      within(mainContent).queryByText(experimentMessages.addNewGroup.defaultMessage),
+    ).not.toBeInTheDocument();
+    expect(within(mainContent).queryAllByTestId('content-group-card-header-edit')).toHaveLength(0);
+    expect(within(mainContent).queryAllByTestId('content-group-card-header-delete')).toHaveLength(0);
+    expect(within(mainContent).queryAllByTestId('configuration-card-header-edit')).toHaveLength(0);
+    expect(within(mainContent).queryAllByTestId('configuration-card-header-delete')).toHaveLength(0);
+  });
+
   it('does not render an empty section for enrollment track groups if it is empty', async () => {
     const shouldNotShowEnrollmentTrackResponse = {
       ...groupConfigurationResponseMock,
diff --git a/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx b/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx
deleted file mode 100644
index a576cf9855..0000000000
--- a/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import { contentGroupsMock } from '../__mocks__';
-import commonMessages from '../common/messages';
-import rootMessages from '../messages';
-import ContentGroupCard from './ContentGroupCard';
-
-const handleCreateMock = jest.fn();
-const handleDeleteMock = jest.fn();
-const handleEditMock = jest.fn();
-const contentGroupActions = {
-  handleCreate: handleCreateMock,
-  handleDelete: handleDeleteMock,
-  handleEdit: handleEditMock,
-};
-
-const handleEditGroupMock = jest.fn();
-const contentGroup = contentGroupsMock.groups[0];
-const contentGroupWithUsages = contentGroupsMock.groups[1];
-const contentGroupWithOnlyOneUsage = contentGroupsMock.groups[2];
-
-const renderComponent = (props = {}) =>
-  render(
-    <IntlProvider locale="en">
-      <ContentGroupCard
-        group={contentGroup}
-        groupNames={contentGroupsMock.groups?.map((group) => group.name)}
-        parentGroupId={contentGroupsMock.id}
-        contentGroupActions={contentGroupActions}
-        handleEditGroup={handleEditGroupMock}
-        {...props}
-      />
-    </IntlProvider>,
-  );
-
-describe('<ContentGroupCard />', () => {
-  it('renders component correctly', () => {
-    const { getByText, getByTestId } = renderComponent();
-    expect(getByText(contentGroup.name)).toBeInTheDocument();
-    expect(
-      getByText(
-        commonMessages.titleId.defaultMessage.replace('{id}', contentGroup.id),
-      ),
-    ).toBeInTheDocument();
-    expect(getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
-    expect(getByTestId('content-group-card-header-edit')).toBeInTheDocument();
-    expect(getByTestId('content-group-card-header-delete')).toBeInTheDocument();
-  });
-
-  it('expands/collapses the container group content on title click', async () => {
-    const user = userEvent.setup();
-    const {
-      getByText,
-      queryByTestId,
-      getByTestId,
-      queryByText,
-    } = renderComponent();
-    const cardTitle = getByTestId('configuration-card-header-button');
-    await user.click(cardTitle);
-    expect(queryByTestId('content-group-card-content')).toBeInTheDocument();
-    expect(
-      queryByText(rootMessages.notInUse.defaultMessage),
-    ).not.toBeInTheDocument();
-
-    await user.click(cardTitle);
-    expect(queryByTestId('content-group-card-content')).not.toBeInTheDocument();
-    expect(getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
-  });
-
-  it('renders content group badge with used only one location', () => {
-    const { queryByTestId } = renderComponent({
-      group: contentGroupWithOnlyOneUsage,
-    });
-    const usageBlock = queryByTestId('configuration-card-header-button-usage');
-    expect(usageBlock).toBeInTheDocument();
-  });
-
-  it('renders content group badge with used locations', () => {
-    const { queryByTestId } = renderComponent({
-      group: contentGroupWithUsages,
-    });
-    const usageBlock = queryByTestId('configuration-card-header-button-usage');
-    expect(usageBlock).toBeInTheDocument();
-  });
-
-  it('renders group controls without access to units', async () => {
-    const user = userEvent.setup();
-    const { queryByText, getByTestId } = renderComponent();
-    expect(
-      queryByText(commonMessages.accessTo.defaultMessage),
-    ).not.toBeInTheDocument();
-
-    const cardTitle = getByTestId('configuration-card-header-button');
-    await user.click(cardTitle);
-    expect(getByTestId('configuration-card-usage-empty')).toBeInTheDocument();
-  });
-});
diff --git a/src/group-configurations/content-groups-section/ContentGroupCard.test.tsx b/src/group-configurations/content-groups-section/ContentGroupCard.test.tsx
new file mode 100644
index 0000000000..330d7ae8a0
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupCard.test.tsx
@@ -0,0 +1,149 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '@src/testUtils';
+import deleteModalMessages from '@src/generic/delete-modal/messages';
+import { Group } from '@src/group-configurations/types';
+import { contentGroupsMock } from '../__mocks__';
+import commonMessages from '../common/messages';
+import rootMessages from '../messages';
+import messages from './messages';
+import ContentGroupCard from './ContentGroupCard';
+
+const courseId = 'course-v1:org+101+101';
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const contentGroupActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const handleEditGroupMock = jest.fn();
+const contentGroup = contentGroupsMock.groups[0] as Group;
+const contentGroupWithUsages = contentGroupsMock.groups[1] as Group;
+const contentGroupWithOnlyOneUsage = contentGroupsMock.groups[2] as Group;
+
+const renderComponent = (props = {}) =>
+  render(
+    <ContentGroupCard
+      group={contentGroup}
+      groupNames={contentGroupsMock.groups?.map((group) => group.name)}
+      parentGroupId={contentGroupsMock.id}
+      contentGroupActions={contentGroupActions}
+      handleEditGroup={handleEditGroupMock}
+      {...props}
+    />,
+    { path: '/course/:courseId/group_configurations', params: { courseId } },
+  );
+
+/** The card title is a button whose accessible name includes the group name and its id. */
+const getCardTitle = (group: Group) => screen.getByRole('button', { name: new RegExp(group.name) });
+
+describe('<ContentGroupCard />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders component correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText(contentGroup.name)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        commonMessages.titleId.defaultMessage.replace('{id}', String(contentGroup.id)),
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.actionEdit.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.actionDelete.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('expands/collapses the container group content on title click', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    const cardTitle = getCardTitle(contentGroup);
+
+    await user.click(cardTitle);
+    expect(screen.queryByText(rootMessages.notInUse.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: messages.courseOutline.defaultMessage })).toBeInTheDocument();
+
+    await user.click(cardTitle);
+    expect(screen.getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders content group badge with used only one location', () => {
+    renderComponent({ group: contentGroupWithOnlyOneUsage });
+
+    expect(screen.getByText('Used in 1 location')).toBeInTheDocument();
+  });
+
+  it('renders content group badge with used locations', () => {
+    renderComponent({ group: contentGroupWithUsages });
+
+    expect(
+      screen.getByText(`Used in ${contentGroupWithUsages.usage?.length} locations`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders group controls without access to units', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    expect(screen.queryByText(commonMessages.accessTo.defaultMessage)).not.toBeInTheDocument();
+
+    await user.click(getCardTitle(contentGroup));
+    expect(screen.getByRole('link', { name: messages.courseOutline.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('deletes the group with its parent id on delete confirmation', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await user.click(screen.getByRole('button', { name: messages.actionDelete.defaultMessage }));
+    await user.click(
+      screen.getByRole('button', { name: deleteModalMessages.deleteButton.defaultMessage }),
+    );
+
+    expect(handleDeleteMock).toHaveBeenCalledWith(contentGroupsMock.id, contentGroup.id);
+  });
+
+  it('does not delete when the card has no parent group id', async () => {
+    const user = userEvent.setup();
+    renderComponent({ parentGroupId: undefined });
+
+    await user.click(screen.getByRole('button', { name: messages.actionDelete.defaultMessage }));
+    await user.click(
+      screen.getByRole('button', { name: deleteModalMessages.deleteButton.defaultMessage }),
+    );
+
+    expect(handleDeleteMock).not.toHaveBeenCalled();
+  });
+
+  it('edits the group with its id on save', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await user.click(screen.getByRole('button', { name: messages.actionEdit.defaultMessage }));
+    const nameInput = screen.getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    await user.clear(nameInput);
+    await user.type(nameInput, 'Renamed group');
+    await user.click(
+      screen.getByRole('button', { name: messages.saveButton.defaultMessage }),
+    );
+
+    await waitFor(() => {
+      expect(handleEditGroupMock).toHaveBeenCalledWith(
+        contentGroup.id,
+        expect.objectContaining({ newGroupName: 'Renamed group' }),
+        expect.any(Function),
+      );
+    });
+  });
+});
diff --git a/src/group-configurations/content-groups-section/ContentGroupCard.jsx b/src/group-configurations/content-groups-section/ContentGroupCard.tsx
similarity index 62%
rename from src/group-configurations/content-groups-section/ContentGroupCard.jsx
rename to src/group-configurations/content-groups-section/ContentGroupCard.tsx
index 2121d3e993..4b44f14d0a 100644
--- a/src/group-configurations/content-groups-section/ContentGroupCard.jsx
+++ b/src/group-configurations/content-groups-section/ContentGroupCard.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Hyperlink,
@@ -15,27 +14,41 @@ import {
   EditOutline as EditOutlineIcon,
 } from '@openedx/paragon/icons';
 
-import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import DeleteModal from '@src/generic/delete-modal/DeleteModal';
+import { ContentGroupFormValues, Group, GroupActions } from '@src/group-configurations/types';
 import TitleButton from '../common/TitleButton';
 import UsageList from '../common/UsageList';
 import ContentGroupForm from './ContentGroupForm';
 import messages from './messages';
 
+interface ContentGroupCardProps {
+  group: Group;
+  groupNames?: string[];
+  parentGroupId?: number;
+  readOnly?: boolean;
+  contentGroupActions?: Partial<GroupActions>;
+  handleEditGroup?: (
+    id: number,
+    values: ContentGroupFormValues,
+    callbackToClose: () => void,
+  ) => void;
+}
+
 const ContentGroupCard = ({
   group,
-  groupNames,
+  groupNames = [],
   parentGroupId,
-  readOnly,
-  contentGroupActions,
+  readOnly = false,
+  contentGroupActions = {},
   handleEditGroup,
-}) => {
+}: ContentGroupCardProps) => {
   const { formatMessage } = useIntl();
   const { courseId } = useParams();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isEditMode, switchOnEditMode, switchOffEditMode] = useToggle(false);
   const [isOpenDeleteModal, openDeleteModal, closeDeleteModal] = useToggle(false);
   const { id, name, usage } = group;
-  const isUsedInLocation = !!usage.length;
+  const isUsedInLocation = !!usage?.length;
 
   const { href: outlineUrl } = new URL(
     `/course/${courseId}`,
@@ -44,7 +57,7 @@ const ContentGroupCard = ({
 
   const outlineComponentLink = (
     <Hyperlink destination={outlineUrl}>
-      {formatMessage(messages.courseOutline)}
+      <FormattedMessage {...messages.courseOutline} />
     </Hyperlink>
   );
 
@@ -53,7 +66,7 @@ const ContentGroupCard = ({
       className="small text-gray-700"
       data-testid="configuration-card-usage-empty"
     >
-      {formatMessage(messages.emptyContentGroups, { outlineComponentLink })}
+      <FormattedMessage {...messages.emptyContentGroups} values={{ outlineComponentLink }} />
     </span>
   );
 
@@ -62,7 +75,9 @@ const ContentGroupCard = ({
   };
 
   const handleDeleteGroup = () => {
-    contentGroupActions.handleDelete(parentGroupId, id);
+    if (parentGroupId !== undefined) {
+      contentGroupActions.handleDelete?.(parentGroupId, id);
+    }
     closeDeleteModal();
   };
 
@@ -76,7 +91,7 @@ const ContentGroupCard = ({
             isUsedInLocation={isUsedInLocation}
             overrideValue={name}
             onCancelClick={switchOffEditMode}
-            onEditClick={(values) => handleEditGroup(id, values, switchOffEditMode)}
+            onEditClick={(values: ContentGroupFormValues) => handleEditGroup?.(id, values, switchOffEditMode)}
           />
         ) :
         (
@@ -90,7 +105,7 @@ const ContentGroupCard = ({
               {!readOnly && (
                 <ActionRow className="ml-auto d-flex">
                   <IconButtonWithTooltip
-                    tooltipContent={formatMessage(messages.actionEdit)}
+                    tooltipContent={<FormattedMessage {...messages.actionEdit} />}
                     alt={formatMessage(messages.actionEdit)}
                     src={EditOutlineIcon}
                     iconAs={Icon}
@@ -99,11 +114,13 @@ const ContentGroupCard = ({
                   />
                   <IconButtonWithTooltip
                     className="configuration-card-header__delete-tooltip"
-                    tooltipContent={formatMessage(
-                      isUsedInLocation
-                        ? messages.deleteRestriction
-                        : messages.actionDelete,
-                    )}
+                    tooltipContent={
+                      <FormattedMessage
+                        {...(isUsedInLocation
+                          ? messages.deleteRestriction
+                          : messages.actionDelete)}
+                      />
+                    }
                     alt={formatMessage(messages.actionDelete)}
                     src={DeleteOutlineIcon}
                     iconAs={Icon}
@@ -124,7 +141,6 @@ const ContentGroupCard = ({
                     <UsageList
                       className="mt-2.5"
                       itemList={usage}
-                      key={usage.label}
                     />
                   ) :
                   guideHowToAdd}
@@ -142,61 +158,4 @@ const ContentGroupCard = ({
   );
 };
 
-ContentGroupCard.defaultProps = {
-  group: {
-    id: undefined,
-    name: '',
-    usage: [],
-    version: undefined,
-  },
-  readOnly: false,
-  groupNames: [],
-  parentGroupId: null,
-  handleEditGroup: null,
-  contentGroupActions: {},
-};
-
-ContentGroupCard.propTypes = {
-  group: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    usage: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ),
-    version: PropTypes.number.isRequired,
-    active: PropTypes.bool,
-    description: PropTypes.string,
-    groups: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.number,
-        name: PropTypes.string,
-        usage: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            url: PropTypes.string,
-          }),
-        ),
-        version: PropTypes.number,
-      }),
-    ),
-    parameters: PropTypes.shape({
-      courseId: PropTypes.string,
-    }),
-    readOnly: PropTypes.bool,
-    scheme: PropTypes.string,
-  }),
-  groupNames: PropTypes.arrayOf(PropTypes.string),
-  parentGroupId: PropTypes.number,
-  readOnly: PropTypes.bool,
-  handleEditGroup: PropTypes.func,
-  contentGroupActions: PropTypes.shape({
-    handleCreate: PropTypes.func,
-    handleDelete: PropTypes.func,
-    handleEdit: PropTypes.func,
-  }),
-};
-
 export default ContentGroupCard;
diff --git a/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx b/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx
deleted file mode 100644
index 725e713420..0000000000
--- a/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import userEvent from '@testing-library/user-event';
-import { render } from '@testing-library/react';
-
-import { contentGroupsMock } from '../__mocks__';
-import placeholderMessages from '../empty-placeholder/messages';
-import messages from './messages';
-import ContentGroupsSection from '.';
-
-const handleCreateMock = jest.fn();
-const handleDeleteMock = jest.fn();
-const handleEditMock = jest.fn();
-const contentGroupActions = {
-  handleCreate: handleCreateMock,
-  handleDelete: handleDeleteMock,
-  handleEdit: handleEditMock,
-};
-
-const renderComponent = (props = {}) =>
-  render(
-    <IntlProvider locale="en">
-      <ContentGroupsSection
-        availableGroup={contentGroupsMock}
-        contentGroupActions={contentGroupActions}
-        {...props}
-      />
-    </IntlProvider>,
-  );
-
-describe('<ContentGroupsSection />', () => {
-  it('renders component correctly', () => {
-    const { getByText, getByRole, getAllByTestId } = renderComponent();
-    expect(getByText(contentGroupsMock.name)).toBeInTheDocument();
-    expect(
-      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
-    ).toBeInTheDocument();
-
-    expect(getAllByTestId('content-group-card')).toHaveLength(
-      contentGroupsMock.groups.length,
-    );
-  });
-
-  it('renders empty section', () => {
-    const { getByTestId } = renderComponent({ availableGroup: {} });
-    expect(
-      getByTestId('group-configurations-empty-placeholder'),
-    ).toBeInTheDocument();
-  });
-
-  it('renders container with new group on create click if section is empty', async () => {
-    const user = userEvent.setup();
-    const { getByRole, getByTestId } = renderComponent({ availableGroup: {} });
-    await user.click(
-      getByRole('button', { name: placeholderMessages.button.defaultMessage }),
-    );
-    expect(getByTestId('content-group-form')).toBeInTheDocument();
-  });
-
-  it('renders container with new group on create click if section has groups', async () => {
-    const user = userEvent.setup();
-    const { getByRole, getByTestId } = renderComponent();
-    await user.click(
-      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
-    );
-    expect(getByTestId('content-group-form')).toBeInTheDocument();
-  });
-});
diff --git a/src/group-configurations/content-groups-section/ContentGroupsSection.test.tsx b/src/group-configurations/content-groups-section/ContentGroupsSection.test.tsx
new file mode 100644
index 0000000000..2b0bc554b4
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupsSection.test.tsx
@@ -0,0 +1,165 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '@src/testUtils';
+import { AvailableGroup } from '@src/group-configurations/types';
+import { contentGroupsMock } from '../__mocks__';
+import placeholderMessages from '../empty-placeholder/messages';
+import messages from './messages';
+import ContentGroupsSection from '.';
+
+const courseId = 'course-v1:org+101+101';
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const contentGroupActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const renderComponent = (props = {}) =>
+  render(
+    <ContentGroupsSection
+      availableGroup={contentGroupsMock as AvailableGroup}
+      contentGroupActions={contentGroupActions}
+      {...props}
+    />,
+    { path: '/course/:courseId/group_configurations', params: { courseId } },
+  );
+
+describe('<ContentGroupsSection />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders component correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText(contentGroupsMock.name)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    ).toBeInTheDocument();
+    contentGroupsMock.groups.forEach(({ name }) => {
+      expect(screen.getByRole('button', { name: new RegExp(name) })).toBeInTheDocument();
+    });
+  });
+
+  it('renders empty section', () => {
+    renderComponent({ availableGroup: {} });
+
+    expect(screen.getByText(placeholderMessages.title.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders container with new group on create click if section is empty', async () => {
+    const user = userEvent.setup();
+    renderComponent({ availableGroup: {} });
+
+    await user.click(
+      screen.getByRole('button', { name: placeholderMessages.button.defaultMessage }),
+    );
+
+    expect(screen.getByText(messages.newGroupHeader.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders container with new group on create click if section has groups', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await user.click(
+      screen.getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    );
+
+    expect(screen.getByText(messages.newGroupHeader.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('creates a group with the new name appended to the existing ones', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await user.click(
+      screen.getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    );
+    await user.type(
+      screen.getByPlaceholderText(messages.newGroupInputPlaceholder.defaultMessage),
+      'Brand new group',
+    );
+    await user.click(
+      screen.getByRole('button', { name: messages.createButton.defaultMessage }),
+    );
+
+    await waitFor(() => {
+      expect(handleCreateMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          groups: [
+            ...contentGroupsMock.groups,
+            expect.objectContaining({ name: 'Brand new group' }),
+          ],
+        }),
+        expect.any(Function),
+      );
+    });
+  });
+
+  it('edits a group by renaming only the matching one', async () => {
+    const user = userEvent.setup();
+    const [editedGroup] = contentGroupsMock.groups;
+    renderComponent();
+
+    await user.click(
+      screen.getAllByRole('button', { name: messages.actionEdit.defaultMessage })[0],
+    );
+    const nameInput = screen.getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    await user.clear(nameInput);
+    await user.type(nameInput, 'Renamed group');
+    await user.click(
+      screen.getByRole('button', { name: messages.saveButton.defaultMessage }),
+    );
+
+    await waitFor(() => {
+      expect(handleEditMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          groups: expect.arrayContaining([
+            { ...editedGroup, name: 'Renamed group' },
+          ]),
+        }),
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe('when readOnly', () => {
+    it('hides the add group button and the card action buttons', () => {
+      renderComponent({ readOnly: true });
+
+      contentGroupsMock.groups.forEach(({ name }) => {
+        expect(screen.getByRole('button', { name: new RegExp(name) })).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('button', { name: messages.addNewGroup.defaultMessage }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: messages.actionEdit.defaultMessage }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: messages.actionDelete.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders the read-only placeholder without the create button if section is empty', () => {
+      renderComponent({ availableGroup: {}, readOnly: true });
+
+      expect(
+        screen.getByText(placeholderMessages.readOnlyTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: placeholderMessages.button.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/group-configurations/content-groups-section/index.jsx b/src/group-configurations/content-groups-section/index.tsx
similarity index 75%
rename from src/group-configurations/content-groups-section/index.jsx
rename to src/group-configurations/content-groups-section/index.tsx
index 6f1edfd1ea..5525c3218d 100644
--- a/src/group-configurations/content-groups-section/index.jsx
+++ b/src/group-configurations/content-groups-section/index.tsx
@@ -1,25 +1,30 @@
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@openedx/paragon';
 import { Add as AddIcon } from '@openedx/paragon/icons';
 
-import { availableGroupPropTypes } from '../constants';
+import { AvailableGroup, ContentGroupFormValues, GroupActions } from '@src/group-configurations/types';
 import EmptyPlaceholder from '../empty-placeholder';
 import ContentGroupCard from './ContentGroupCard';
 import ContentGroupForm from './ContentGroupForm';
 import { initialContentGroupObject } from './utils';
 import messages from './messages';
 
+interface ContentGroupsSectionProps {
+  availableGroup: AvailableGroup;
+  contentGroupActions: GroupActions;
+  readOnly?: boolean;
+}
+
 const ContentGroupsSection = ({
   availableGroup,
   contentGroupActions,
-}) => {
-  const { formatMessage } = useIntl();
+  readOnly = false,
+}: ContentGroupsSectionProps) => {
   const [isNewGroupVisible, openNewGroup, hideNewGroup] = useToggle(false);
   const { id: parentGroupId, groups, name } = availableGroup;
   const groupNames = groups?.map((group) => group.name);
 
-  const handleCreateNewGroup = (values) => {
+  const handleCreateNewGroup = (values: ContentGroupFormValues) => {
     const updatedContentGroups = {
       ...availableGroup,
       groups: [
@@ -30,7 +35,11 @@ const ContentGroupsSection = ({
     contentGroupActions.handleCreate(updatedContentGroups, hideNewGroup);
   };
 
-  const handleEditContentGroup = (id, { newGroupName }, callbackToClose) => {
+  const handleEditContentGroup = (
+    id: number,
+    { newGroupName }: ContentGroupFormValues,
+    callbackToClose: () => void,
+  ) => {
     const updatedContentGroups = {
       ...availableGroup,
       groups: availableGroup.groups.map((group) => (group.id === id ? { ...group, name: newGroupName } : group)),
@@ -52,11 +61,12 @@ const ContentGroupsSection = ({
                 groupNames={groupNames}
                 parentGroupId={parentGroupId}
                 key={group.id}
+                readOnly={readOnly}
                 contentGroupActions={contentGroupActions}
                 handleEditGroup={handleEditContentGroup}
               />
             ))}
-            {!isNewGroupVisible && (
+            {!readOnly && !isNewGroupVisible && (
               <Button
                 className="mt-4"
                 variant="outline-primary"
@@ -64,13 +74,13 @@ const ContentGroupsSection = ({
                 iconBefore={AddIcon}
                 block
               >
-                {formatMessage(messages.addNewGroup)}
+                <FormattedMessage {...messages.addNewGroup} />
               </Button>
             )}
           </>
         ) :
         (
-          !isNewGroupVisible && <EmptyPlaceholder onCreateNewGroup={openNewGroup} />
+          !isNewGroupVisible && <EmptyPlaceholder onCreateNewGroup={openNewGroup} readOnly={readOnly} />
         )}
       {isNewGroupVisible && (
         <ContentGroupForm
@@ -83,13 +93,4 @@ const ContentGroupsSection = ({
   );
 };
 
-ContentGroupsSection.propTypes = {
-  availableGroup: PropTypes.shape(availableGroupPropTypes).isRequired,
-  contentGroupActions: PropTypes.shape({
-    handleCreate: PropTypes.func,
-    handleDelete: PropTypes.func,
-    handleEdit: PropTypes.func,
-  }).isRequired,
-};
-
 export default ContentGroupsSection;
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
deleted file mode 100644
index 592bb6ca18..0000000000
--- a/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import messages from './messages';
-import EmptyPlaceholder from '.';
-
-const onCreateNewGroup = jest.fn();
-
-const renderComponent = () =>
-  render(
-    <IntlProvider locale="en">
-      <EmptyPlaceholder onCreateNewGroup={onCreateNewGroup} />
-    </IntlProvider>,
-  );
-
-describe('<EmptyPlaceholder />', () => {
-  it('renders EmptyPlaceholder component correctly', () => {
-    const { getByText, getByRole } = renderComponent();
-
-    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
-    expect(getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
-  });
-});
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.tsx b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.tsx
new file mode 100644
index 0000000000..a2bc4098e2
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.tsx
@@ -0,0 +1,37 @@
+import { initializeMocks, render, screen } from '@src/testUtils';
+
+import messages from './messages';
+import EmptyPlaceholder from '.';
+
+const onCreateNewGroup = jest.fn();
+
+const renderComponent = (props = {}) => render(<EmptyPlaceholder onCreateNewGroup={onCreateNewGroup} {...props} />);
+
+describe('<EmptyPlaceholder />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders EmptyPlaceholder component correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('renders the read-only message without the create button when readOnly', () => {
+    renderComponent({ readOnly: true });
+
+    expect(screen.getByText(messages.readOnlyTitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.button.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('renders the read-only message without the create button when readOnly and isExperiment', () => {
+    renderComponent({ readOnly: true, isExperiment: true });
+
+    expect(screen.getByText(messages.readOnlyTitle.defaultMessage)).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.experimentalButton.defaultMessage }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/empty-placeholder/index.jsx b/src/group-configurations/empty-placeholder/index.jsx
deleted file mode 100644
index 80b780d1d5..0000000000
--- a/src/group-configurations/empty-placeholder/index.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Add as IconAdd } from '@openedx/paragon/icons';
-import { Button } from '@openedx/paragon';
-
-import messages from './messages';
-
-const EmptyPlaceholder = ({ onCreateNewGroup, isExperiment }) => {
-  const { formatMessage } = useIntl();
-  const titleMessage = isExperiment
-    ? messages.experimentalTitle
-    : messages.title;
-  const buttonMessage = isExperiment
-    ? messages.experimentalButton
-    : messages.button;
-
-  return (
-    <div
-      className="group-configurations-empty-placeholder bg-white"
-      data-testid="group-configurations-empty-placeholder"
-    >
-      <p className="mb-0 small text-gray-700">{formatMessage(titleMessage)}</p>
-      <Button
-        iconBefore={IconAdd}
-        onClick={onCreateNewGroup}
-      >
-        {formatMessage(buttonMessage)}
-      </Button>
-    </div>
-  );
-};
-
-EmptyPlaceholder.defaultProps = {
-  isExperiment: false,
-};
-
-EmptyPlaceholder.propTypes = {
-  onCreateNewGroup: PropTypes.func.isRequired,
-  isExperiment: PropTypes.bool,
-};
-
-export default EmptyPlaceholder;
diff --git a/src/group-configurations/empty-placeholder/index.tsx b/src/group-configurations/empty-placeholder/index.tsx
new file mode 100644
index 0000000000..d92bb44985
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/index.tsx
@@ -0,0 +1,47 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+
+import messages from './messages';
+
+interface EmptyPlaceholderProps {
+  onCreateNewGroup?: () => void;
+  isExperiment?: boolean;
+  readOnly?: boolean;
+}
+
+const EmptyPlaceholder = ({
+  onCreateNewGroup,
+  isExperiment = false,
+  readOnly = false,
+}: EmptyPlaceholderProps) => {
+  // Read-only users cannot create anything here, so the copy states the course has
+  // no group configurations instead of inviting them to add the first one.
+  const titleMessage = readOnly
+    ? messages.readOnlyTitle
+    : (isExperiment ? messages.experimentalTitle : messages.title);
+  const buttonMessage = isExperiment
+    ? messages.experimentalButton
+    : messages.button;
+
+  return (
+    <div
+      className="group-configurations-empty-placeholder bg-white"
+      data-testid="group-configurations-empty-placeholder"
+    >
+      <p className="mb-0 small text-gray-700">
+        <FormattedMessage {...titleMessage} />
+      </p>
+      {!readOnly && (
+        <Button
+          iconBefore={IconAdd}
+          onClick={onCreateNewGroup}
+        >
+          <FormattedMessage {...buttonMessage} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default EmptyPlaceholder;
diff --git a/src/group-configurations/empty-placeholder/messages.ts b/src/group-configurations/empty-placeholder/messages.ts
index 29fcf3b2cb..dcb15ca3cb 100644
--- a/src/group-configurations/empty-placeholder/messages.ts
+++ b/src/group-configurations/empty-placeholder/messages.ts
@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'You have not created any content groups yet.',
     description: 'Title displayed when there are no content groups created yet.',
   },
+  readOnlyTitle: {
+    id: 'course-authoring.group-configurations.empty-placeholder.read-only.title',
+    defaultMessage: 'No group configurations have been added to this course yet.',
+    description: 'Title displayed when there are no group configurations and the user cannot create them.',
+  },
   experimentalTitle: {
     id: 'course-authoring.group-configurations.experimental-empty-placeholder.title',
     defaultMessage: 'You have not created any group configurations yet.',
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentCard.test.tsx
similarity index 74%
rename from src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx
rename to src/group-configurations/experiment-configurations-section/ExperimentCard.test.tsx
index 0997dbd206..c92dd64a10 100644
--- a/src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx
+++ b/src/group-configurations/experiment-configurations-section/ExperimentCard.test.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
+import { initializeMocks, render, userEvent } from '@src/testUtils';
+import { AvailableGroup } from '@src/group-configurations/types';
 import { experimentGroupConfigurationsMock } from '../__mocks__';
 import commonMessages from '../common/messages';
+import messages from './messages';
 import ExperimentCard from './ExperimentCard';
 
 const handleCreateMock = jest.fn();
@@ -16,21 +15,26 @@ const experimentConfigurationActions = {
 };
 
 const onCreateMock = jest.fn();
-const experimentConfiguration = experimentGroupConfigurationsMock[0];
+const experimentConfiguration = experimentGroupConfigurationsMock[0] as AvailableGroup;
+
+const courseId = 'course-v1:org+101+101';
 
 const renderComponent = (props = {}) =>
   render(
-    <IntlProvider locale="en">
-      <ExperimentCard
-        configuration={experimentConfiguration}
-        experimentConfigurationActions={experimentConfigurationActions}
-        onCreate={onCreateMock}
-        {...props}
-      />
-    </IntlProvider>,
+    <ExperimentCard
+      configuration={experimentConfiguration}
+      experimentConfigurationActions={experimentConfigurationActions}
+      onCreate={onCreateMock}
+      {...props}
+    />,
+    { path: '/course/:courseId/group_configurations', params: { courseId } },
   );
 
 describe('<ExperimentCard />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   it('renders component correctly', () => {
     const { getByText, getByTestId } = renderComponent();
     expect(getByText(experimentConfiguration.name)).toBeInTheDocument();
@@ -38,7 +42,7 @@ describe('<ExperimentCard />', () => {
       getByText(
         commonMessages.titleId.defaultMessage.replace(
           '{id}',
-          experimentConfiguration.id,
+          String(experimentConfiguration.id),
         ),
       ),
     ).toBeInTheDocument();
@@ -77,6 +81,20 @@ describe('<ExperimentCard />', () => {
     ).toBeInTheDocument();
   });
 
+  it('hides the action buttons but keeps the outline link when readOnly', async () => {
+    const user = userEvent.setup();
+    const { queryByTestId, getByTestId, getByRole } = renderComponent({
+      configuration: { ...experimentConfiguration, usage: [] },
+      readOnly: true,
+    });
+    expect(queryByTestId('configuration-card-header-edit')).not.toBeInTheDocument();
+    expect(queryByTestId('configuration-card-header-delete')).not.toBeInTheDocument();
+
+    await user.click(getByTestId('configuration-card-header-button'));
+    expect(getByTestId('experiment-configuration-card-usage-empty')).toBeInTheDocument();
+    expect(getByRole('link', { name: messages.courseOutline.defaultMessage })).toBeInTheDocument();
+  });
+
   it('renders usage with validation error message', async () => {
     const user = userEvent.setup();
     const experimentConfigurationUpdated = {
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentCard.jsx b/src/group-configurations/experiment-configurations-section/ExperimentCard.tsx
similarity index 57%
rename from src/group-configurations/experiment-configurations-section/ExperimentCard.jsx
rename to src/group-configurations/experiment-configurations-section/ExperimentCard.tsx
index f5d26c1321..84beab270a 100644
--- a/src/group-configurations/experiment-configurations-section/ExperimentCard.jsx
+++ b/src/group-configurations/experiment-configurations-section/ExperimentCard.tsx
@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Hyperlink,
@@ -15,7 +14,8 @@ import {
   EditOutline as EditOutlineIcon,
 } from '@openedx/paragon/icons';
 
-import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import DeleteModal from '@src/generic/delete-modal/DeleteModal';
+import { AvailableGroup, GroupActions } from '@src/group-configurations/types';
 import TitleButton from '../common/TitleButton';
 import UsageList from '../common/UsageList';
 import ExperimentCardGroup from './ExperimentCardGroup';
@@ -23,12 +23,21 @@ import ExperimentForm from './ExperimentForm';
 import messages from './messages';
 import { initialExperimentConfiguration } from './constants';
 
+interface ExperimentCardProps {
+  configuration: AvailableGroup;
+  experimentConfigurationActions: GroupActions;
+  isExpandedByDefault?: boolean;
+  onCreate?: (configuration: AvailableGroup) => void;
+  readOnly?: boolean;
+}
+
 const ExperimentCard = ({
   configuration,
   experimentConfigurationActions,
-  isExpandedByDefault,
+  isExpandedByDefault = false,
   onCreate,
-}) => {
+  readOnly = false,
+}: ExperimentCardProps) => {
   const { formatMessage } = useIntl();
   const { courseId } = useParams();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -54,7 +63,7 @@ const ExperimentCard = ({
 
   const outlineComponentLink = (
     <Hyperlink destination={outlineUrl}>
-      {formatMessage(messages.courseOutline)}
+      <FormattedMessage {...messages.courseOutline} />
     </Hyperlink>
   );
 
@@ -63,7 +72,7 @@ const ExperimentCard = ({
       className="small text-gray-700"
       data-testid="experiment-configuration-card-usage-empty"
     >
-      {formatMessage(messages.emptyExperimentGroup, { outlineComponentLink })}
+      <FormattedMessage {...messages.emptyExperimentGroup} values={{ outlineComponentLink }} />
     </span>
   );
 
@@ -82,7 +91,7 @@ const ExperimentCard = ({
     closeDeleteModal();
   };
 
-  const handleEditConfiguration = (values) => {
+  const handleEditConfiguration = (values: AvailableGroup) => {
     experimentConfigurationActions.handleEdit(values, switchOffEditMode);
   };
 
@@ -103,7 +112,7 @@ const ExperimentCard = ({
           <div
             className="configuration-card"
             data-testid="configuration-card"
-            id={id}
+            id={String(id)}
           >
             <div className="configuration-card-header">
               <TitleButton
@@ -112,30 +121,34 @@ const ExperimentCard = ({
                 onTitleClick={() => setIsExpanded((prevState) => !prevState)}
                 isExperiment
               />
-              <ActionRow className="ml-auto d-flex">
-                <IconButtonWithTooltip
-                  tooltipContent={formatMessage(messages.actionEdit)}
-                  alt={formatMessage(messages.actionEdit)}
-                  src={EditOutlineIcon}
-                  iconAs={Icon}
-                  onClick={switchOnEditMode}
-                  data-testid="configuration-card-header-edit"
-                />
-                <IconButtonWithTooltip
-                  className="configuration-card-header__delete-tooltip"
-                  tooltipContent={formatMessage(
-                    isUsedInLocation
-                      ? messages.experimentConfigurationDeleteRestriction
-                      : messages.actionDelete,
-                  )}
-                  alt={formatMessage(messages.actionDelete)}
-                  src={DeleteOutlineIcon}
-                  iconAs={Icon}
-                  onClick={openDeleteModal}
-                  data-testid="configuration-card-header-delete"
-                  disabled={isUsedInLocation}
-                />
-              </ActionRow>
+              {!readOnly && (
+                <ActionRow className="ml-auto d-flex">
+                  <IconButtonWithTooltip
+                    tooltipContent={<FormattedMessage {...messages.actionEdit} />}
+                    alt={formatMessage(messages.actionEdit)}
+                    src={EditOutlineIcon}
+                    iconAs={Icon}
+                    onClick={switchOnEditMode}
+                    data-testid="configuration-card-header-edit"
+                  />
+                  <IconButtonWithTooltip
+                    className="configuration-card-header__delete-tooltip"
+                    tooltipContent={
+                      <FormattedMessage
+                        {...(isUsedInLocation
+                          ? messages.experimentConfigurationDeleteRestriction
+                          : messages.actionDelete)}
+                      />
+                    }
+                    alt={formatMessage(messages.actionDelete)}
+                    src={DeleteOutlineIcon}
+                    iconAs={Icon}
+                    onClick={openDeleteModal}
+                    data-testid="configuration-card-header-delete"
+                    disabled={isUsedInLocation}
+                  />
+                </ActionRow>
+              )}
             </div>
             {isExpanded && (
               <div
@@ -167,60 +180,4 @@ const ExperimentCard = ({
   );
 };
 
-ExperimentCard.defaultProps = {
-  configuration: {
-    id: undefined,
-    name: '',
-    usage: [],
-    version: undefined,
-  },
-  isExpandedByDefault: false,
-  onCreate: null,
-  experimentConfigurationActions: {},
-};
-
-ExperimentCard.propTypes = {
-  configuration: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    usage: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-        url: PropTypes.string,
-        validation: PropTypes.shape({
-          type: PropTypes.string,
-          text: PropTypes.string,
-        }),
-      }),
-    ),
-    version: PropTypes.number.isRequired,
-    active: PropTypes.bool,
-    description: PropTypes.string,
-    groups: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.number,
-        name: PropTypes.string,
-        usage: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            url: PropTypes.string,
-          }),
-        ),
-        version: PropTypes.number,
-      }),
-    ),
-    parameters: PropTypes.shape({
-      courseId: PropTypes.string,
-    }),
-    scheme: PropTypes.string,
-  }),
-  isExpandedByDefault: PropTypes.bool,
-  onCreate: PropTypes.func,
-  experimentConfigurationActions: PropTypes.shape({
-    handleCreate: PropTypes.func,
-    handleEdit: PropTypes.func,
-    handleDelete: PropTypes.func,
-  }),
-};
-
 export default ExperimentCard;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
deleted file mode 100644
index 731afbeaa6..0000000000
--- a/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import { experimentGroupConfigurationsMock } from '../__mocks__';
-import messages from './messages';
-import ExperimentConfigurationsSection from '.';
-
-const handleCreateMock = jest.fn();
-const handleDeleteMock = jest.fn();
-const handleEditMock = jest.fn();
-const mockPathname = '/foo-bar';
-const experimentConfigurationActions = {
-  handleCreate: handleCreateMock,
-  handleDelete: handleDeleteMock,
-  handleEdit: handleEditMock,
-};
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: mockPathname,
-  }),
-}));
-
-const renderComponent = (props) =>
-  render(
-    <IntlProvider locale="en">
-      <ExperimentConfigurationsSection
-        availableGroups={experimentGroupConfigurationsMock}
-        experimentConfigurationActions={experimentConfigurationActions}
-        {...props}
-      />
-    </IntlProvider>,
-  );
-
-describe('<ExperimentConfigurationsSection />', () => {
-  it('renders component correctly', () => {
-    const { getByText, getByRole, getAllByTestId } = renderComponent();
-    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
-    expect(
-      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
-    ).toBeInTheDocument();
-    expect(getAllByTestId('configuration-card')).toHaveLength(
-      experimentGroupConfigurationsMock.length,
-    );
-  });
-
-  it('renders empty section', () => {
-    const { getByTestId } = renderComponent({ availableGroups: [] });
-    expect(
-      getByTestId('group-configurations-empty-placeholder'),
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.tsx b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.tsx
new file mode 100644
index 0000000000..ed128a944f
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.tsx
@@ -0,0 +1,109 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '@src/testUtils';
+import { AvailableGroup } from '@src/group-configurations/types';
+import { experimentGroupConfigurationsMock } from '../__mocks__';
+import placeholderMessages from '../empty-placeholder/messages';
+import messages from './messages';
+import ExperimentConfigurationsSection from '.';
+
+const courseId = 'course-v1:org+101+101';
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const experimentConfigurationActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const renderComponent = (props = {}) =>
+  render(
+    <ExperimentConfigurationsSection
+      availableGroups={experimentGroupConfigurationsMock as AvailableGroup[]}
+      experimentConfigurationActions={experimentConfigurationActions}
+      {...props}
+    />,
+    { path: '/course/:courseId/group_configurations', params: { courseId } },
+  );
+
+describe('<ExperimentConfigurationsSection />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders component correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    ).toBeInTheDocument();
+    experimentGroupConfigurationsMock.forEach(({ name }) => {
+      expect(screen.getByRole('button', { name: new RegExp(name) })).toBeInTheDocument();
+    });
+  });
+
+  it('renders empty section', () => {
+    renderComponent({ availableGroups: [] });
+
+    expect(screen.getByText(placeholderMessages.experimentalTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('creates a configuration from the new configuration form', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await user.click(
+      screen.getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    );
+    await user.type(
+      screen.getByPlaceholderText(messages.experimentConfigurationNamePlaceholder.defaultMessage),
+      'New configuration',
+    );
+    await user.click(
+      screen.getByRole('button', { name: messages.experimentConfigurationCreate.defaultMessage }),
+    );
+
+    await waitFor(() => {
+      expect(handleCreateMock).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'New configuration' }),
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe('when readOnly', () => {
+    it('hides the add configuration button and the card action buttons', () => {
+      renderComponent({ readOnly: true });
+
+      experimentGroupConfigurationsMock.forEach(({ name }) => {
+        expect(screen.getByRole('button', { name: new RegExp(name) })).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('button', { name: messages.addNewGroup.defaultMessage }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: messages.actionEdit.defaultMessage }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: messages.actionDelete.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders the read-only placeholder without the create button if section is empty', () => {
+      renderComponent({ availableGroups: [], readOnly: true });
+
+      expect(
+        screen.getByText(placeholderMessages.readOnlyTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: placeholderMessages.experimentalButton.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/group-configurations/experiment-configurations-section/index.jsx b/src/group-configurations/experiment-configurations-section/index.tsx
similarity index 54%
rename from src/group-configurations/experiment-configurations-section/index.jsx
rename to src/group-configurations/experiment-configurations-section/index.tsx
index 26ec0b518f..4f025fd440 100644
--- a/src/group-configurations/experiment-configurations-section/index.jsx
+++ b/src/group-configurations/experiment-configurations-section/index.tsx
@@ -1,37 +1,42 @@
-import PropTypes from 'prop-types';
 import { Button, useToggle } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Add as AddIcon } from '@openedx/paragon/icons';
 
-import { useScrollToHashElement } from '../../hooks';
+import { AvailableGroup, GroupActions } from '@src/group-configurations/types';
+import { useScrollToHashElement } from '@src/hooks';
 import EmptyPlaceholder from '../empty-placeholder';
 import ExperimentForm from './ExperimentForm';
 import ExperimentCard from './ExperimentCard';
 import { initialExperimentConfiguration } from './constants';
 import messages from './messages';
 
+interface ExperimentConfigurationsSectionProps {
+  availableGroups?: AvailableGroup[];
+  experimentConfigurationActions: GroupActions;
+  readOnly?: boolean;
+}
+
 const ExperimentConfigurationsSection = ({
-  courseId,
-  availableGroups,
+  availableGroups = [],
   experimentConfigurationActions,
-}) => {
-  const { formatMessage } = useIntl();
+  readOnly = false,
+}: ExperimentConfigurationsSectionProps) => {
   const [
     isNewConfigurationVisible,
     openNewConfiguration,
     hideNewConfiguration,
   ] = useToggle(false);
 
-  const handleCreateConfiguration = (configuration) => {
+  const handleCreateConfiguration = (configuration: AvailableGroup) => {
     experimentConfigurationActions.handleCreate(configuration, hideNewConfiguration);
   };
 
-  const { elementWithHash } = useScrollToHashElement({ courseId, isLoading: true });
+  const { elementWithHash } = useScrollToHashElement({ isLoading: true });
 
   return (
     <div className="mt-2.5">
       <h2 className="lead text-black mb-3 configuration-section-name">
-        {formatMessage(messages.title)}
+        <FormattedMessage {...messages.title} />
       </h2>
       {availableGroups.length ?
         (
@@ -41,11 +46,12 @@ const ExperimentConfigurationsSection = ({
                 key={configuration.id}
                 configuration={configuration}
                 experimentConfigurationActions={experimentConfigurationActions}
-                isExpandedByDefault={configuration.id === +elementWithHash}
+                isExpandedByDefault={configuration.id === Number(elementWithHash)}
                 onCreate={handleCreateConfiguration}
+                readOnly={readOnly}
               />
             ))}
-            {!isNewConfigurationVisible && (
+            {!readOnly && !isNewConfigurationVisible && (
               <Button
                 className="mt-4"
                 variant="outline-primary"
@@ -53,7 +59,7 @@ const ExperimentConfigurationsSection = ({
                 iconBefore={AddIcon}
                 block
               >
-                {formatMessage(messages.addNewGroup)}
+                <FormattedMessage {...messages.addNewGroup} />
               </Button>
             )}
           </>
@@ -63,6 +69,7 @@ const ExperimentConfigurationsSection = ({
             <EmptyPlaceholder
               onCreateNewGroup={openNewConfiguration}
               isExperiment
+              readOnly={readOnly}
             />
           )
         )}
@@ -77,43 +84,4 @@ const ExperimentConfigurationsSection = ({
   );
 };
 
-ExperimentConfigurationsSection.defaultProps = {
-  availableGroups: [],
-};
-
-ExperimentConfigurationsSection.propTypes = {
-  availableGroups: PropTypes.arrayOf(
-    PropTypes.shape({
-      active: PropTypes.bool,
-      description: PropTypes.string,
-      groups: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.number,
-          name: PropTypes.string,
-          usage: PropTypes.arrayOf(
-            PropTypes.shape({
-              label: PropTypes.string,
-              url: PropTypes.string,
-            }),
-          ),
-          version: PropTypes.number,
-        }).isRequired,
-      ),
-      id: PropTypes.number,
-      name: PropTypes.string,
-      parameters: PropTypes.shape({
-        courseId: PropTypes.string,
-      }),
-      readOnly: PropTypes.bool,
-      scheme: PropTypes.string,
-      version: PropTypes.number,
-    }).isRequired,
-  ),
-  experimentConfigurationActions: PropTypes.shape({
-    handleCreate: PropTypes.func,
-    handleDelete: PropTypes.func,
-  }).isRequired,
-  courseId: PropTypes.string.isRequired,
-};
-
 export default ExperimentConfigurationsSection;
diff --git a/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx b/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx
deleted file mode 100644
index 3ffe151031..0000000000
--- a/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// @ts-check
-import { initializeMocks, render } from '../../testUtils';
-import GroupConfigurationSidebar from '.';
-import messages from './messages';
-
-const courseId = 'course-123';
-const enrollmentTrackTitle = messages.about_3_title.defaultMessage;
-const contentGroupTitle = messages.aboutTitle.defaultMessage;
-const experimentGroupTitle = messages.about_2_title.defaultMessage;
-
-const renderComponent = (props) => render(<GroupConfigurationSidebar courseId={courseId} {...props} />);
-
-describe('GroupConfigurationSidebar', () => {
-  beforeEach(() => {
-    initializeMocks();
-  });
-
-  it('renders all groups when all props are true', async () => {
-    const { findAllByRole } = renderComponent({
-      shouldShowExperimentGroups: true,
-      shouldShowContentGroup: true,
-      shouldShowEnrollmentTrackGroup: true,
-    });
-    const titles = await findAllByRole('heading', { level: 4 });
-
-    expect(titles[0]).toHaveTextContent(enrollmentTrackTitle);
-    expect(titles[1]).toHaveTextContent(contentGroupTitle);
-    expect(titles[2]).toHaveTextContent(experimentGroupTitle);
-  });
-
-  it('renders no groups when all props are false', async () => {
-    const { queryByText } = renderComponent({
-      shouldShowExperimentGroups: false,
-      shouldShowContentGroup: false,
-      shouldShowEnrollmentTrackGroup: false,
-    });
-
-    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
-    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
-    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
-  });
-
-  it('renders only content group when shouldShowContentGroup is true', async () => {
-    const { queryByText, getByText } = renderComponent({
-      shouldShowExperimentGroups: false,
-      shouldShowContentGroup: true,
-      shouldShowEnrollmentTrackGroup: false,
-    });
-
-    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
-    expect(getByText(contentGroupTitle)).toBeInTheDocument();
-    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
-  });
-
-  it('renders only experiment group when shouldShowExperimentGroups is true', async () => {
-    const { queryByText, getByText } = renderComponent({
-      shouldShowExperimentGroups: true,
-      shouldShowContentGroup: false,
-      shouldShowEnrollmentTrackGroup: false,
-    });
-
-    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
-    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
-    expect(getByText(experimentGroupTitle)).toBeInTheDocument();
-  });
-
-  it('renders only enrollment track group when shouldShowEnrollmentTrackGroup is true', async () => {
-    const { queryByText, getByText } = renderComponent({
-      shouldShowExperimentGroups: false,
-      shouldShowContentGroup: false,
-      shouldShowEnrollmentTrackGroup: true,
-    });
-
-    expect(getByText(enrollmentTrackTitle)).toBeInTheDocument();
-    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
-    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
-  });
-});
diff --git a/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.tsx b/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.tsx
new file mode 100644
index 0000000000..ca69123008
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.tsx
@@ -0,0 +1,102 @@
+import { initializeMocks, render, screen } from '@src/testUtils';
+
+import GroupConfigurationSidebar from '.';
+import messages from './messages';
+
+const courseId = 'course-123';
+const enrollmentTrackTitle = messages.about_3_title.defaultMessage;
+const contentGroupTitle = messages.aboutTitle.defaultMessage;
+const experimentGroupTitle = messages.about_2_title.defaultMessage;
+// The paragraphs explaining how to add, edit and delete groups are the only ones naming these
+// buttons, so they stand in for the instructions that read-only users should not see.
+const contentGroupInstructions = messages.aboutDescription_3_strong.defaultMessage;
+const experimentGroupInstructions = messages.about_2_description_2_strong.defaultMessage;
+
+const renderComponent = (props = {}) =>
+  render(
+    <GroupConfigurationSidebar
+      courseId={courseId}
+      shouldShowExperimentGroups={false}
+      shouldShowContentGroup={false}
+      shouldShowEnrollmentTrackGroup={false}
+      {...props}
+    />,
+  );
+
+describe('<GroupConfigurationSidebar />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders all groups when all props are true', async () => {
+    renderComponent({
+      shouldShowExperimentGroups: true,
+      shouldShowContentGroup: true,
+      shouldShowEnrollmentTrackGroup: true,
+    });
+    const titles = await screen.findAllByRole('heading', { level: 4 });
+
+    expect(titles[0]).toHaveTextContent(enrollmentTrackTitle);
+    expect(titles[1]).toHaveTextContent(contentGroupTitle);
+    expect(titles[2]).toHaveTextContent(experimentGroupTitle);
+  });
+
+  it('renders no groups when all props are false', () => {
+    renderComponent();
+
+    expect(screen.queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(screen.queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(screen.queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+
+  it('renders only content group when shouldShowContentGroup is true', () => {
+    renderComponent({ shouldShowContentGroup: true });
+
+    expect(screen.queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(screen.getByText(contentGroupTitle)).toBeInTheDocument();
+    expect(screen.queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+
+  it('renders only experiment group when shouldShowExperimentGroups is true', () => {
+    renderComponent({ shouldShowExperimentGroups: true });
+
+    expect(screen.queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(screen.queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(screen.getByText(experimentGroupTitle)).toBeInTheDocument();
+  });
+
+  it('renders only enrollment track group when shouldShowEnrollmentTrackGroup is true', () => {
+    renderComponent({ shouldShowEnrollmentTrackGroup: true });
+
+    expect(screen.getByText(enrollmentTrackTitle)).toBeInTheDocument();
+    expect(screen.queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(screen.queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+
+  it('renders the instructions to add, edit and delete groups by default', () => {
+    renderComponent({
+      shouldShowExperimentGroups: true,
+      shouldShowContentGroup: true,
+      shouldShowEnrollmentTrackGroup: true,
+    });
+
+    expect(screen.getByText(contentGroupInstructions)).toBeInTheDocument();
+    expect(screen.getByText(experimentGroupInstructions)).toBeInTheDocument();
+  });
+
+  it('hides the instructions to add, edit and delete groups when readOnly', () => {
+    renderComponent({
+      shouldShowExperimentGroups: true,
+      shouldShowContentGroup: true,
+      shouldShowEnrollmentTrackGroup: true,
+      readOnly: true,
+    });
+
+    expect(screen.queryByText(contentGroupInstructions)).not.toBeInTheDocument();
+    expect(screen.queryByText(experimentGroupInstructions)).not.toBeInTheDocument();
+    // The rest of the help text is still shown.
+    expect(screen.getByText(messages.aboutDescription_1.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.about_2_description_1.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.about_3_description_3.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/group-configuration-sidebar/index.jsx b/src/group-configurations/group-configuration-sidebar/index.tsx
similarity index 69%
rename from src/group-configurations/group-configuration-sidebar/index.jsx
rename to src/group-configurations/group-configuration-sidebar/index.tsx
index dc318b1d03..4a7c1a0866 100644
--- a/src/group-configurations/group-configuration-sidebar/index.jsx
+++ b/src/group-configurations/group-configuration-sidebar/index.tsx
@@ -1,27 +1,35 @@
 import { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';
 
-import { HelpSidebar } from '../../generic/help-sidebar';
-import { useHelpUrls } from '../../help-urls/hooks';
+import { HelpSidebar } from '@src/generic/help-sidebar';
+import { useHelpUrls } from '@src/help-urls/hooks';
 import { getSidebarData } from './utils';
 import messages from './messages';
 
+interface GroupConfigurationSidebarProps {
+  courseId: string;
+  shouldShowExperimentGroups: boolean;
+  shouldShowContentGroup: boolean;
+  shouldShowEnrollmentTrackGroup: boolean;
+  readOnly?: boolean;
+}
+
 const GroupConfigurationSidebar = ({
   courseId,
   shouldShowExperimentGroups,
   shouldShowContentGroup,
   shouldShowEnrollmentTrackGroup,
-}) => {
+  readOnly = false,
+}: GroupConfigurationSidebarProps) => {
   const intl = useIntl();
   const urls = useHelpUrls(['groupConfigurations', 'enrollmentTracks', 'contentGroups']);
   const sidebarData = getSidebarData({
-    messages,
     intl,
     shouldShowExperimentGroups,
     shouldShowContentGroup,
     shouldShowEnrollmentTrackGroup,
+    readOnly,
   });
 
   return (
@@ -36,15 +44,15 @@ const GroupConfigurationSidebar = ({
             <h4 className="help-sidebar-about-title">
               {title}
             </h4>
-            {paragraphs.map((text) => (
-              <p key={text} className="help-sidebar-about-descriptions">
-                {text}
+            {paragraphs.map(({ id, content }) => (
+              <p key={id} className="help-sidebar-about-descriptions">
+                {content}
               </p>
             ))}
             <Hyperlink
               target="_blank"
               showLaunchIcon={false}
-              href={urls[urlKey]}
+              destination={urls[urlKey]}
               className="mt-2 mb-3.5 sidebar-link"
             >
               {intl.formatMessage(messages.learnMoreBtn)}
@@ -56,11 +64,4 @@ const GroupConfigurationSidebar = ({
   );
 };
 
-GroupConfigurationSidebar.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  shouldShowContentGroup: PropTypes.bool.isRequired,
-  shouldShowExperimentGroups: PropTypes.bool.isRequired,
-  shouldShowEnrollmentTrackGroup: PropTypes.bool.isRequired,
-};
-
 export default GroupConfigurationSidebar;
diff --git a/src/group-configurations/group-configuration-sidebar/utils.jsx b/src/group-configurations/group-configuration-sidebar/utils.jsx
deleted file mode 100644
index 0d0cac6343..0000000000
--- a/src/group-configurations/group-configuration-sidebar/utils.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Compiles the sidebar data for the course authoring sidebar.
- *
- * @param {Object} messages - The localized messages.
- * @param {Object} intl - The intl object for formatting messages.
- * @param {boolean} shouldShowExperimentGroups - Flag to include experiment group configuration data.
- * @param {boolean} shouldShowContentGroup - Flag to include content group data.
- * @param {boolean} shouldShowEnrollmentTrackGroup - Flag to include enrollment track group data.
- * @returns {Object[]} The array of sidebar data groups.
- */
-const getSidebarData = ({
-  messages,
-  intl,
-  shouldShowExperimentGroups,
-  shouldShowContentGroup,
-  shouldShowEnrollmentTrackGroup,
-}) => {
-  const groups = [];
-
-  if (shouldShowEnrollmentTrackGroup) {
-    groups.push({
-      urlKey: 'enrollmentTracks',
-      title: intl.formatMessage(messages.about_3_title),
-      paragraphs: [
-        intl.formatMessage(messages.about_3_description_1),
-        intl.formatMessage(messages.about_3_description_2),
-        intl.formatMessage(messages.about_3_description_3),
-      ],
-    });
-  }
-  if (shouldShowContentGroup) {
-    groups.push({
-      urlKey: 'contentGroups',
-      title: intl.formatMessage(messages.aboutTitle),
-      paragraphs: [
-        intl.formatMessage(messages.aboutDescription_1),
-        intl.formatMessage(messages.aboutDescription_2),
-        intl.formatMessage(messages.aboutDescription_3, {
-          strongText: <strong>{intl.formatMessage(messages.aboutDescription_3_strong)}</strong>,
-          strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
-        }),
-      ],
-    });
-  }
-  if (shouldShowExperimentGroups) {
-    groups.push({
-      urlKey: 'groupConfigurations',
-      title: intl.formatMessage(messages.about_2_title),
-      paragraphs: [
-        intl.formatMessage(messages.about_2_description_1),
-        intl.formatMessage(messages.about_2_description_2, {
-          strongText: <strong>{intl.formatMessage(messages.about_2_description_2_strong)}</strong>,
-          strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
-        }),
-      ],
-    });
-  }
-  return groups;
-};
-
-export { getSidebarData };
diff --git a/src/group-configurations/group-configuration-sidebar/utils.tsx b/src/group-configurations/group-configuration-sidebar/utils.tsx
new file mode 100644
index 0000000000..b066818ef4
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/utils.tsx
@@ -0,0 +1,96 @@
+import { type IntlShape } from '@edx/frontend-platform/i18n';
+import { type ReactNode } from 'react';
+import type { MessageDescriptor } from 'react-intl';
+
+import messages from './messages';
+
+interface SidebarParagraph {
+  id: string;
+  content: ReactNode;
+}
+
+interface SidebarGroup {
+  urlKey: string;
+  title: string;
+  paragraphs: SidebarParagraph[];
+}
+
+interface GetSidebarDataArgs {
+  intl: IntlShape;
+  shouldShowExperimentGroups: boolean;
+  shouldShowContentGroup: boolean;
+  shouldShowEnrollmentTrackGroup: boolean;
+  readOnly?: boolean;
+}
+
+/** Formats a message into a paragraph keyed by its message id. */
+const paragraph = (
+  intl: IntlShape,
+  message: MessageDescriptor,
+  values?: Record<string, ReactNode>,
+): SidebarParagraph => ({
+  id: String(message.id),
+  content: intl.formatMessage(message, values),
+});
+
+/**
+ * Compiles the sidebar data for the course authoring sidebar.
+ *
+ * Read-only users cannot add, edit or delete anything on this page, so the paragraphs
+ * explaining how to do so are left out for them.
+ */
+const getSidebarData = ({
+  intl,
+  shouldShowExperimentGroups,
+  shouldShowContentGroup,
+  shouldShowEnrollmentTrackGroup,
+  readOnly = false,
+}: GetSidebarDataArgs): SidebarGroup[] => {
+  const groups: SidebarGroup[] = [];
+
+  if (shouldShowEnrollmentTrackGroup) {
+    groups.push({
+      urlKey: 'enrollmentTracks',
+      title: intl.formatMessage(messages.about_3_title),
+      paragraphs: [
+        paragraph(intl, messages.about_3_description_1),
+        paragraph(intl, messages.about_3_description_2),
+        paragraph(intl, messages.about_3_description_3),
+      ],
+    });
+  }
+  if (shouldShowContentGroup) {
+    groups.push({
+      urlKey: 'contentGroups',
+      title: intl.formatMessage(messages.aboutTitle),
+      paragraphs: [
+        paragraph(intl, messages.aboutDescription_1),
+        paragraph(intl, messages.aboutDescription_2),
+        ...(readOnly ? [] : [
+          paragraph(intl, messages.aboutDescription_3, {
+            strongText: <strong>{intl.formatMessage(messages.aboutDescription_3_strong)}</strong>,
+            strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
+          }),
+        ]),
+      ],
+    });
+  }
+  if (shouldShowExperimentGroups) {
+    groups.push({
+      urlKey: 'groupConfigurations',
+      title: intl.formatMessage(messages.about_2_title),
+      paragraphs: [
+        paragraph(intl, messages.about_2_description_1),
+        ...(readOnly ? [] : [
+          paragraph(intl, messages.about_2_description_2, {
+            strongText: <strong>{intl.formatMessage(messages.about_2_description_2_strong)}</strong>,
+            strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
+          }),
+        ]),
+      ],
+    });
+  }
+  return groups;
+};
+
+export { getSidebarData };
diff --git a/src/group-configurations/index.tsx b/src/group-configurations/index.tsx
index d362daee75..cdd4322219 100644
--- a/src/group-configurations/index.tsx
+++ b/src/group-configurations/index.tsx
@@ -39,6 +39,7 @@ const GroupConfigurations = () => {
 
   const {
     isLoading: isLoadingUserPermissions,
+    canViewGroupConfigurations,
     canManageGroupConfigurations,
   } = useCourseUserPermissions(courseId, getGroupConfigurationsPermissions(courseId));
 
@@ -53,7 +54,7 @@ const GroupConfigurations = () => {
     allGroupConfigurations = [],
   } = groupConfigurations ?? {};
 
-  if (!isLoadingUserPermissions && !canManageGroupConfigurations) {
+  if (!isLoadingUserPermissions && !canViewGroupConfigurations) {
     return <PermissionDeniedAlert />;
   }
 
@@ -120,13 +121,14 @@ const GroupConfigurations = () => {
                 <ContentGroupsSection
                   availableGroup={contentGroup}
                   contentGroupActions={contentGroupActions}
+                  readOnly={!canManageGroupConfigurations}
                 />
               )}
               {shouldShowExperimentGroups && (
                 <ExperimentConfigurationsSection
-                  courseId={courseId}
                   availableGroups={experimentGroupConfigurations}
                   experimentConfigurationActions={experimentConfigurationActions}
+                  readOnly={!canManageGroupConfigurations}
                 />
               )}
             </Stack>
@@ -137,6 +139,7 @@ const GroupConfigurations = () => {
               shouldShowExperimentGroups={shouldShowExperimentGroups}
               shouldShowContentGroup={!!contentGroup}
               shouldShowEnrollmentTrackGroup={!!enrollmentTrackGroup}
+              readOnly={!canManageGroupConfigurations}
             />
           </Layout.Element>
         </Layout>
diff --git a/src/group-configurations/types.ts b/src/group-configurations/types.ts
index 4341ff3b84..1760043c67 100644
--- a/src/group-configurations/types.ts
+++ b/src/group-configurations/types.ts
@@ -1,20 +1,33 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { AxiosError } from 'axios';
 
+export interface UsageValidation {
+  text: string;
+  type: string;
+}
+
 export interface Usage {
   label: string;
   url: string;
+  validation?: UsageValidation;
 }
 
 export interface Group {
   id: number;
   name: string;
-  usage?: Usage[];
+  usage?: Usage[] | null;
   version: number;
 }
 
+/** A group that has not been persisted yet -- the backend assigns its id. */
+export type NewGroup = Omit<Group, 'id'>;
+
+export interface ContentGroupFormValues {
+  newGroupName: string;
+}
+
 export interface AvailableGroupParameters {
-  courseId: string;
+  courseId?: string;
 }
 
 export interface AvailableGroup {
@@ -26,7 +39,28 @@ export interface AvailableGroup {
   parameters?: AvailableGroupParameters;
   readOnly?: boolean;
   scheme: string;
+  usage?: Usage[] | null;
   version: number;
 }
 
+/** The body sent when creating a group: the group being added has no id yet. */
+export interface GroupCreatePayload extends Omit<AvailableGroup, 'groups'> {
+  groups: (Group | NewGroup)[];
+}
+
 export type OnErrorCallbackFunc = (error: AxiosError) => void;
+
+/**
+ * Create/edit/delete handlers for a group configuration section.
+ *
+ * `handleDelete` takes the id of the thing being deleted, plus the id of the group
+ * within it for content groups, which are nested under a parent configuration.
+ *
+ * The create/edit handlers are async, but callers close their form from the callback
+ * rather than from the returned promise, so the return value is typed as `void`.
+ */
+export interface GroupActions {
+  handleCreate: (group: GroupCreatePayload, callbackToClose: () => void) => void;
+  handleEdit: (group: AvailableGroup, callbackToClose: () => void) => void;
+  handleDelete: (id: number, groupId?: number) => void;
+}
diff --git a/src/header/hooks.test.tsx b/src/header/hooks.test.tsx
index dbaf316b3a..c50d53e79f 100644
--- a/src/header/hooks.test.tsx
+++ b/src/header/hooks.test.tsx
@@ -279,12 +279,12 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: false,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewGradingSettings: true,
         canViewScheduleAndDetails: true,
         canViewCourseTeam: true,
-        canManageGroupConfigurations: true,
-        canManageCertificates: true,
+        canViewGroupConfigurations: true,
+        canViewCertificates: true,
       } as ReturnType<typeof useCourseUserPermissions>);
     });
 
@@ -314,7 +314,7 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewGradingSettings: true,
         canViewScheduleAndDetails: true,
       } as ReturnType<typeof useCourseUserPermissions>);
@@ -329,7 +329,7 @@ describe('header utils', () => {
       mockWaffleFlags({ enableAuthzCourseAuthoring: false });
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewCourseTeam: true,
       } as any);
       const actualItems =
@@ -352,7 +352,7 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewCourseTeam: true,
       } as any);
       const courseIdWithSpecialChars = 'course-v1:org+course+run';
@@ -369,7 +369,7 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageAdvancedSettings: false,
+        canViewAdvancedSettings: false,
         canViewGradingSettings: true,
         canViewScheduleAndDetails: true,
       } as ReturnType<typeof useCourseUserPermissions>);
@@ -399,7 +399,7 @@ describe('header utils', () => {
         isLoading: false,
         isAuthzEnabled: true,
         canViewScheduleAndDetails: true,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewGradingSettings: true,
       } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
@@ -415,7 +415,7 @@ describe('header utils', () => {
         isLoading: false,
         isAuthzEnabled: true,
         canViewScheduleAndDetails: false,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewGradingSettings: true,
       } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
@@ -431,7 +431,7 @@ describe('header utils', () => {
         isLoading: false,
         isAuthzEnabled: true,
         canViewGradingSettings: true,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewScheduleAndDetails: true,
       } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
@@ -447,7 +447,7 @@ describe('header utils', () => {
         isLoading: false,
         isAuthzEnabled: true,
         canViewGradingSettings: false,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewScheduleAndDetails: true,
       } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
@@ -462,7 +462,7 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageAdvancedSettings: true,
+        canViewAdvancedSettings: true,
         canViewGradingSettings: true,
         canViewScheduleAndDetails: true,
         canViewCourseTeam: true,
@@ -492,19 +492,19 @@ describe('header utils', () => {
       expect(actualItemsTitle).not.toContain('Roles and Permissions');
     });
 
-    it('when authz flag is enabled and user lacks canManageGroupConfigurations should not include group configurations option', () => {
+    it('when authz flag is enabled and user lacks canViewGroupConfigurations should not include group configurations option', () => {
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageGroupConfigurations: false,
+        canViewGroupConfigurations: false,
       } as any);
       const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result
         .current.map((item) => item.title);
       expect(actualItemsTitle).not.toContain('Group Configurations');
     });
 
-    it('when authz flag is enabled and user lacks canManageCertificates should not include certificates option', () => {
+    it('when authz flag is enabled and user lacks canViewCertificates should not include certificates option', () => {
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
       setConfig({
         ...getConfig(),
@@ -513,7 +513,7 @@ describe('header utils', () => {
       jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
         isAuthzEnabled: true,
-        canManageCertificates: false,
+        canViewCertificates: false,
       } as any);
       const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result
         .current.map((item) => item.title);
diff --git a/src/header/hooks.tsx b/src/header/hooks.tsx
index 71022dd223..b859fcbedb 100644
--- a/src/header/hooks.tsx
+++ b/src/header/hooks.tsx
@@ -96,7 +96,7 @@ export const useSettingMenuItems = (courseId: string) => {
   // legacy value: it would briefly show the link (and the Settings dropdown) to users
   // that authz then denies.
   const canAccessAdvancedSettings = perms.isAuthzEnabled
-    ? perms.canManageAdvancedSettings
+    ? perms.canViewAdvancedSettings
     : !perms.isLoading && legacyCanAccessAdvancedSettings;
 
   const items = [
@@ -125,7 +125,7 @@ export const useSettingMenuItems = (courseId: string) => {
           },
       ]
       : []),
-    ...(perms.canManageGroupConfigurations
+    ...(perms.canViewGroupConfigurations
       ? [{
         href: `/course/${courseId}/group_configurations`,
         title: intl.formatMessage(messages['header.links.groupConfigurations']),
@@ -138,7 +138,7 @@ export const useSettingMenuItems = (courseId: string) => {
       }] :
       []),
   ];
-  if (getConfig().ENABLE_CERTIFICATE_PAGE === 'true' && perms.canManageCertificates) {
+  if (getConfig().ENABLE_CERTIFICATE_PAGE === 'true' && perms.canViewCertificates) {
     items.push({
       href: `/course/${courseId}/certificates`,
       title: intl.formatMessage(messages['header.links.certificates']),
diff --git a/src/index.jsx b/src/index.jsx
index 2d527ae1f0..d8625aedb1 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -36,7 +36,7 @@ import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
-import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
+import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage, CompetencyManagementPage } from './taxonomy';
 import { ContentTagsDrawer } from './content-tags-drawer';
 import AccessibilityPage from './accessibility-page';
 import { ToastProvider } from './generic/toast-context';
@@ -110,6 +110,7 @@ const App = () => {
             </Route>
             <Route path="/taxonomy" element={<TaxonomyLayout />}>
               <Route path="/taxonomy/:taxonomyId" element={<TaxonomyDetailPage />} />
+              <Route path="/taxonomy/:taxonomyId/competencies" element={<CompetencyManagementPage />} />
             </Route>
             <Route
               path="/tagging/components/widget/:contentId"
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 9dc971a272..99cc0197be 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -22,6 +22,13 @@ interface LibraryBlockProps {
   scrollIntoView?: boolean;
   showTitle?: boolean;
   addHeight?: number;
+  /**
+   * The downstream (course) block id this library block is being reviewed from, if any.
+   * Lets the backend grant access via the course's `view_library_updates` permission when
+   * the current user doesn't otherwise have direct access to the library, e.g. when
+   * previewing pending library updates from a course.
+   */
+  courseId?: string;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -42,6 +49,7 @@ export const LibraryBlock = ({
   scrollIntoView = false,
   showTitle = false,
   addHeight = 0,
+  courseId,
 }: LibraryBlockProps) => {
   const { iframeRef, setIframeRef } = useIframe();
   const xblockView = view ?? 'student_view';
@@ -59,6 +67,9 @@ export const LibraryBlock = ({
   if (showTitle) {
     params.set('show_title', 'true');
   }
+  if (courseId) {
+    params.set('course_id', courseId);
+  }
 
   // For now, always show the draft version of the Xblock v1
   // It would be better to use a Studio URL for this, but there is no embeddable URL
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 0db9c84b95..5911f69082 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -17,6 +17,12 @@ interface Props {
   oldUsageKey?: string;
   sideBySide?: boolean;
   showTitle?: boolean;
+  /**
+   * The downstream (course) block id this comparison is being viewed from, if any. Lets the
+   * backend grant access to the upstream library block via the course's `view_library_updates`
+   * permission when the current user doesn't otherwise have direct library access.
+   */
+  courseId?: string;
 }
 
 /**
@@ -37,6 +43,7 @@ const CompareChangesWidget = ({
   hasLocalChanges = false,
   sideBySide = false,
   showTitle = false,
+  courseId,
 }: Props) => {
   const intl = useIntl();
 
@@ -71,6 +78,7 @@ const CompareChangesWidget = ({
               minHeight="45vh"
               showTitle={showTitle}
               addHeight={70}
+              courseId={courseId}
             />
           </IframeProvider>
         </div>
@@ -96,6 +104,7 @@ const CompareChangesWidget = ({
             showTitle={showNewTitle || showTitle}
             minHeight="45vh"
             addHeight={70}
+            courseId={courseId}
           />
         </IframeProvider>
       </Card.Body>
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index ea28bb91c7..8bbb8b4cbc 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -162,9 +162,15 @@ export const getLibraryContainersApiUrl = (libraryId: string) =>
   `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/containers/`;
 /**
  * Get the URL for the container detail api.
+ *
+ * `courseId` is optional: passing it lets the backend grant access via the course's
+ * `view_library_updates` permission when the caller is reviewing this container from a
+ * course it doesn't otherwise have library access from. Callers that use this as a base for
+ * other endpoints (restore, hierarchy, etc.) should omit it.
  */
-export const getLibraryContainerApiUrl = (containerId: string) =>
-  `${getApiBaseUrl()}/api/libraries/v2/containers/${containerId}/`;
+export const getLibraryContainerApiUrl = (containerId: string, courseId?: string) =>
+  `${getApiBaseUrl()}/api/libraries/v2/containers/${containerId}/`
+  + (courseId ? `?course_id=${encodeURIComponent(courseId)}` : '');
 /**
  * Get the URL for restore a container
  */
@@ -173,8 +179,9 @@ export const getLibraryContainerRestoreApiUrl = (containerId: string) =>
 /**
  * Get the URL for a single container children api.
  */
-export const getLibraryContainerChildrenApiUrl = (containerId: string, published: boolean = false) =>
-  `${getLibraryContainerApiUrl(containerId)}children/?published=${published}`;
+export const getLibraryContainerChildrenApiUrl = (containerId: string, published: boolean = false, courseId?: string) =>
+  `${getLibraryContainerApiUrl(containerId)}children/?published=${published}`
+  + (courseId ? `&course_id=${encodeURIComponent(courseId)}` : '');
 /**
  * Get the URL for a single container hierarchy api.
  */
@@ -782,8 +789,8 @@ export interface Container {
 /**
  * Get the container metadata.
  */
-export async function getContainerMetadata(containerId: string): Promise<Container> {
-  const { data } = await getAuthenticatedHttpClient().get(getLibraryContainerApiUrl(containerId));
+export async function getContainerMetadata(containerId: string, courseId?: string): Promise<Container> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryContainerApiUrl(containerId, courseId));
   return camelCaseObject(data);
 }
 
@@ -824,9 +831,10 @@ export async function restoreContainer(containerId: string) {
 export async function getLibraryContainerChildren<ChildType = LibraryBlockMetadata | Container>(
   containerId: string,
   published: boolean = false,
+  courseId?: string,
 ): Promise<ChildType[]> {
   const { data } = await getAuthenticatedHttpClient().get(
-    getLibraryContainerChildrenApiUrl(containerId, published),
+    getLibraryContainerChildrenApiUrl(containerId, published, courseId),
   );
   return camelCaseObject(data);
 }
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 610a330941..26e5f4856b 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -711,13 +711,18 @@ export const useCreateLibraryContainer = (libraryId: string) => {
 };
 
 /**
- * Get the metadata for a container in a library
+ * Get the metadata for a container in a library.
+ *
+ * `courseId` is optional and only needed when the caller is reviewing this container from
+ * within a course it doesn't otherwise have library access from (e.g. previewing pending
+ * library updates); it lets the backend grant access via the course's `view_library_updates`
+ * permission instead of requiring direct library permissions.
  */
-export const useContainer = (containerId?: string) => (
+export const useContainer = (containerId?: string, courseId?: string) => (
   useQuery({
     enabled: !!containerId,
     queryKey: libraryAuthoringQueryKeys.container(containerId!),
-    queryFn: () => api.getContainerMetadata(containerId!),
+    queryFn: () => api.getContainerMetadata(containerId!, courseId),
   })
 );
 
@@ -821,11 +826,12 @@ export const useContainerChildren = <
 >(
   containerId?: string,
   published: boolean = false,
+  courseId?: string,
 ) => (
   useQuery({
     enabled: !!containerId,
     queryKey: libraryAuthoringQueryKeys.containerChildren(containerId!),
-    queryFn: () => api.getLibraryContainerChildren<ChildType>(containerId!, published),
+    queryFn: () => api.getLibraryContainerChildren<ChildType>(containerId!, published, courseId),
     structuralSharing: (oldData: ChildType[], newData: ChildType[]) => {
       // This just sets `isNew` flag to new children components
       if (oldData) {
diff --git a/src/schedule-and-details/data/api.ts b/src/schedule-and-details/data/api.ts
index 7c5b82fc5f..a3a2670075 100644
--- a/src/schedule-and-details/data/api.ts
+++ b/src/schedule-and-details/data/api.ts
@@ -3,7 +3,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { convertObjectToSnakeCase } from '@src/utils';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
-export const getCourseDetailsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_details/${courseId}`;
+export const getCourseDetailsApiUrl = (courseId) =>
+  `${getApiBaseUrl()}/api/contentstore/v3/course_details/${courseId}/`;
 export const getUploadAssetsUrl = (courseId) => `${getApiBaseUrl()}/assets/${courseId}/`;
 
 // TODO: This interface has only basic data, all the rest needs to be added.
diff --git a/src/studio-home/StudioHome.tsx b/src/studio-home/StudioHome.tsx
index 6f99812abc..5d06648f34 100644
--- a/src/studio-home/StudioHome.tsx
+++ b/src/studio-home/StudioHome.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import {
   Button,
   Container,
@@ -85,7 +86,11 @@ const StudioHome = () => {
 
     if (canViewConsoleTeams) {
       headerButtons.push(
-        <div className="border-right mr-3 pr-4 py-2">
+        <div
+          className={classNames('mr-3 pr-4 py-2', {
+            'border-right': hasAbilityToCreateNewCourse || canCreateNewLibrary,
+          })}
+        >
           <Button
             as="a"
             href={adminConsoleUrl}
@@ -129,7 +134,14 @@ const StudioHome = () => {
     }
 
     return headerButtons;
-  }, [location, userIsActive, isFailedLoadingPage, canViewConsoleTeams]);
+  }, [
+    location,
+    userIsActive,
+    isFailedLoadingPage,
+    canViewConsoleTeams,
+    hasAbilityToCreateNewCourse,
+    canCreateNewLibrary,
+  ]);
 
   const headerButtons = userIsActive ? getHeaderButtons() : [];
   if (isLoadingPage && !isFiltered) {
diff --git a/src/taxonomy/competency-management/CompetencyManagementPage.test.tsx b/src/taxonomy/competency-management/CompetencyManagementPage.test.tsx
new file mode 100644
index 0000000000..7ddd3f39c6
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyManagementPage.test.tsx
@@ -0,0 +1,81 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  within,
+} from '@src/testUtils';
+import { apiUrls } from '@src/taxonomy/data/api';
+import CompetencyManagementPage from './CompetencyManagementPage';
+
+let axiosMock;
+
+const taxonomyId = 1;
+const path = '/taxonomy/:taxonomyId/competencies';
+const params = { taxonomyId: String(taxonomyId) };
+
+const tagListUrl = apiUrls.tagList(taxonomyId, {
+  pageIndex: 0,
+  pageSize: 50,
+  fullDepth: true,
+  disablePagination: true,
+});
+
+const emptyTagListResponse = {
+  next: null,
+  previous: null,
+  count: 0,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [],
+};
+
+const renderPage = () => render(<CompetencyManagementPage />, { path, params });
+
+describe('<CompetencyManagementPage />', () => {
+  beforeEach(() => {
+    ({ axiosMock } = initializeMocks());
+  });
+
+  it('shows a loading spinner while the taxonomy is being fetched', () => {
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(() => new Promise(() => {}));
+    renderPage();
+    expect(screen.getByRole('status')).toHaveTextContent('Loading...');
+  });
+
+  it('shows a connection error alert when the taxonomy fails to load', async () => {
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(500);
+    renderPage();
+    expect(await screen.findByTestId('connectionErrorAlert')).toBeInTheDocument();
+  });
+
+  it('renders the taxonomy name and links the breadcrumb to the right pages', async () => {
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(200, {
+      id: taxonomyId,
+      name: 'Test taxonomy',
+      description: 'This is a description',
+    });
+    axiosMock.onGet(tagListUrl).reply(200, emptyTagListResponse);
+
+    renderPage();
+
+    // The page's own heading is the taxonomy's own name, matching the Figma
+    // design (there's no separate "Competencies" title anywhere on the page).
+    expect(await screen.findByRole('heading', { name: 'Test taxonomy' })).toBeInTheDocument();
+
+    const breadcrumbNav = screen.getByRole('navigation', { name: 'breadcrumb' });
+    expect(within(breadcrumbNav).getByRole('link', { name: 'Taxonomies' })).toHaveAttribute('href', '/taxonomies/');
+    // The active breadcrumb item is the taxonomy's own name, and isn't a link.
+    expect(within(breadcrumbNav).getByText('Test taxonomy')).toBeInTheDocument();
+    expect(within(breadcrumbNav).queryByRole('link', { name: 'Test taxonomy' })).not.toBeInTheDocument();
+
+    // Wait for the tree's own (empty) data to settle so no async query is left
+    // pending. Even with zero tags, the tree still shows its synthetic
+    // taxonomy-root row (see `CompetencyTree`), so there's no separate empty
+    // state - the taxonomy name doubles as it. Scoped to the root row's own
+    // label, since the breadcrumb link above also reads "Test taxonomy".
+    expect(await screen.findByText('Test taxonomy', { selector: '.competency-row__label' }))
+      .toBeInTheDocument();
+    expect(screen.queryByText('No results found')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/competency-management/CompetencyManagementPage.tsx b/src/taxonomy/competency-management/CompetencyManagementPage.tsx
new file mode 100644
index 0000000000..32c8b3e1ec
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyManagementPage.tsx
@@ -0,0 +1,66 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Breadcrumb,
+  Container,
+} from '@openedx/paragon';
+import { Helmet } from 'react-helmet';
+import { Link, useParams } from 'react-router-dom';
+
+import ConnectionErrorAlert from '@src/generic/ConnectionErrorAlert';
+import Loading from '@src/generic/Loading';
+import getPageHeadTitle from '@src/generic/utils';
+import SubHeader from '@src/generic/sub-header/SubHeader';
+import taxonomyMessages from '@src/taxonomy/messages';
+import { useTaxonomyDetails } from '@src/taxonomy/data/apiHooks';
+import CompetencyTree from './CompetencyTree';
+import messages from './messages';
+
+const CompetencyManagementPage = () => {
+  const intl = useIntl();
+  const { taxonomyId: taxonomyIdString } = useParams();
+  const taxonomyId = Number(taxonomyIdString);
+
+  const {
+    data: taxonomy,
+    isError,
+    isFetched,
+  } = useTaxonomyDetails(taxonomyId);
+
+  if (!isFetched) {
+    return <Loading />;
+  }
+
+  if (isError || !taxonomy) {
+    return <ConnectionErrorAlert />;
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle(intl.formatMessage(messages.headerTitle), taxonomy.name)}</title>
+      </Helmet>
+      <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+        <Container size="xl">
+          <Breadcrumb
+            links={[
+              { label: intl.formatMessage(taxonomyMessages.headerTitle), to: '/taxonomies/' },
+            ]}
+            activeLabel={taxonomy.name}
+            linkAs={Link}
+          />
+          <SubHeader
+            title={taxonomy.name}
+            hideBorder
+          />
+        </Container>
+      </div>
+      <div className="bg-light-400 m-4">
+        <Container size="xl">
+          <CompetencyTree taxonomyId={taxonomyId} taxonomyName={taxonomy.name} />
+        </Container>
+      </div>
+    </>
+  );
+};
+
+export default CompetencyManagementPage;
diff --git a/src/taxonomy/competency-management/CompetencyTree.scss b/src/taxonomy/competency-management/CompetencyTree.scss
new file mode 100644
index 0000000000..f30d269ac6
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyTree.scss
@@ -0,0 +1,198 @@
+// Scoped styling for the read-only Competency Management page's nested-list
+// tree (a page-local `<ul>/<li>` renderer, not a table). Scoped under
+// `.competency-tree` so nothing here reaches the existing, unrelated
+// `/taxonomy/:taxonomyId` page.
+//
+// This file is imported directly from `CompetencyTree.tsx`, so it compiles as
+// its own root stylesheet rather than through `src/index.scss` (where
+// `CourseSequence.scss` gets its custom-media names from, via that file's own
+// `@import` chain). `postcss-custom-media` only resolves names declared in
+// the same compiled output, so this file needs its own `@use` below.
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
+.competency-tree {
+  $line-color: rgb(0 0 0 / .08);
+  $shadow-color: rgb(0 0 0 / .12);
+  $border-radius: 8px;
+  $indent: 25px;
+  // Figma specifies 25px from a row's own left edge to its label text.
+  // Paragon's default `IconButton size="sm"` (36px hit area) doesn't fit
+  // that inset, so the chevron is shrunk to this size - see
+  // `.competency-row .btn-icon-sm` below.
+  $disclosure-icon-size: 16px;
+  // WCAG 2.2 AA's minimum interactive target is 24px. This pads the
+  // chevron's hit area back out to that minimum without changing its
+  // visible size - see `.competency-row .btn-icon-sm` below.
+  $disclosure-hit-area-inset: 4px;
+  // Group envelope fill/border, read directly off the Figma inspector for
+  // this frame - not the earlier `--pgn-color-light-400`/#E9E6E4 guess.
+  $group-bg-color: #F8F8F8;
+  $group-border-color: #DDDDDD;
+
+  .competency-row__badge {
+    overflow-wrap: anywhere;
+    // Figma specifies a small, squared-off radius, not Paragon's full
+    // `pill` shape - reuses the custom property Paragon's own `.badge`
+    // already resolves to without the `pill` prop, rather than a literal.
+    border-radius: var(--pgn-size-badge-border-radius-base);
+    // Visible gap to the row's right edge - `ml-auto` (see
+    // `CompetencyTreeItem.tsx`) only pushes the badge right within the
+    // row, it doesn't add this gap.
+    margin-right: 5px;
+    // Padding and type read directly off Figma's inspector for this badge,
+    // overriding Paragon's own badge tokens (rather than the resolved
+    // properties) so anything else reading the same tokens stays in sync.
+    --pgn-spacing-badge-padding-y: 1.5px;
+    --pgn-spacing-badge-padding-x-base: 6px;
+    --pgn-typography-badge-font-weight: 400;
+    // `62.5%` renders as 10px at the default root font size (Figma's spec),
+    // but as a relative unit it keeps scaling with the user's font-size
+    // preference, unlike a fixed px value.
+    --pgn-typography-badge-font-size: 62.5%;
+
+    line-height: 15.75px;
+    letter-spacing: normal;
+  }
+
+  // Sits on this page's own light-grey background, not the white container
+  // below it - reuses the exact custom property `bg-light-400` resolves to.
+  &__toolbar {
+    background-color: var(--pgn-color-light-400);
+    // Bootstrap's `p-4` conflated two separate Figma measurements: a 24px
+    // vertical gap to `.competency-tree__container` below (kept, via
+    // top/bottom padding) and a 24px horizontal inset that pushed the
+    // button off the container's right edge below it - Figma has them
+    // flush, so left/right padding is zeroed instead.
+    padding: 24px 0;
+  }
+
+  // The single outer boundary holding the root row and every group/leaf
+  // inside one container, matching Figma. A plain `<div>` rather than
+  // Paragon's `Card`, since `Card`'s own visible outline is entirely a
+  // `box-shadow` (its Bootstrap `.card` border is zeroed) - a plain `<div>`
+  // is simpler and gives full control over that same look.
+  &__container {
+    background-color: #FFFFFF;
+    border: 1px solid $line-color;
+    border-radius: $border-radius;
+    box-shadow: 0 1px 4px $shadow-color;
+    padding: 12px 16px;
+  }
+
+  // Indentation comes from `<ul>` nesting itself, not a depth number
+  // computed in JS.
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: $indent;
+
+    // Reduced indentation at narrow viewports so deep nesting doesn't crowd
+    // out the label and Competency ID badge.
+    @media (--pgn-size-breakpoint-max-width-xs) {
+      padding-left: 16px;
+    }
+  }
+
+  // Base row look: white, bordered, rounded "pill". This is the leaf style
+  // and the default for every row; a row with children flattens back to
+  // its envelope's fill via `.competency-group > .competency-row` below.
+  .competency-row {
+    display: flex;
+    align-items: center;
+    background-color: #FFFFFF;
+    border: 1px solid $line-color;
+    border-radius: $border-radius;
+    // This plus the chevron's own size/margin below add up to Figma's 25px
+    // row inset (label start, measured from the row's own left edge).
+    padding-left: 5px;
+
+    // The disclosure chevron (visible or invisible placeholder, rendered by
+    // `ExpandCollapseIconButton`) shrunk to fit the 25px inset above - see
+    // `$disclosure-icon-size`.
+    .btn-icon-sm {
+      // `content-box` (overriding the app-wide `border-box` reset for just
+      // this button) makes `width`/`height` define the glyph only, so the
+      // padding below grows the real hit box without shrinking the glyph.
+      box-sizing: content-box;
+      width: $disclosure-icon-size;
+      height: $disclosure-icon-size;
+      // Grows the hit area to the WCAG 24px minimum, then cancels that
+      // growth's effect on the row's layout with matching negative margins
+      // on three sides, so the glyph and the 25px label inset don't move.
+      // The right margin is left at 0, so the 4px right padding above stays
+      // uncancelled and provides the icon-to-label gap, replacing the `mr-1`
+      // utility this page's disclosure button doesn't apply
+      // (`ExpandCollapseIconButton`'s `!important` couldn't otherwise be
+      // overridden here).
+      padding: $disclosure-hit-area-inset;
+      margin: (-$disclosure-hit-area-inset) 0 (-$disclosure-hit-area-inset) (-$disclosure-hit-area-inset); // top right bottom left
+
+      .btn-icon__icon-container,
+      .pgn__icon.btn-icon__icon {
+        width: $disclosure-icon-size;
+        height: $disclosure-icon-size;
+      }
+    }
+  }
+
+  // The taxonomy-root row is the single top item of the outer container:
+  // plain/white, not its own box - it's not a real `Tag`, just this page's
+  // display-only entry point into the tree (see `CompetencyTree.tsx`).
+  .competency-row--root {
+    border: none;
+    // Clears the chevron's hover/focus circle from the group box below.
+    // Group header rows get equivalent room from `.competency-group`'s own
+    // `padding: 5px`; the root has no such wrapper, so it needs this
+    // instead.
+    margin-bottom: 12px + $disclosure-hit-area-inset;
+  }
+
+  // Any node with children is a "group": one grey envelope around itself -
+  // its header row plus its whole rendered `<ul>` of children, not just the
+  // header. Keyed off `.competency-group` (added by `CompetencyTreeItem`
+  // from the same `hasChildren` check that decides whether to render a
+  // nested `<ul>`), so this recurses to any depth: a child that's itself a
+  // group gets its own envelope inset inside this one.
+  .competency-group {
+    background-color: $group-bg-color;
+    border: 1px solid $group-border-color;
+    border-radius: $border-radius;
+    padding: 5px;
+  }
+
+  // A group's own header row sits flat on its envelope's fill instead of
+  // the white/bordered leaf look - only true leaves keep that from the
+  // base `.competency-row` rule above.
+  .competency-group > .competency-row {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+  }
+
+  // Leaf rows keep the base rule's 1px border (groups/root override it to
+  // `none`), which shifts their inset over by that 1px - pulled back so
+  // every row's label lands at the same 25px inset regardless of variant.
+  li:not(.competency-group) > .competency-row {
+    padding-left: 4px;
+  }
+
+  // Vertical gap between a group's own header row and its first child leaf
+  // (smaller than the leaf-to-leaf gap below - two distinct values).
+  // Keyed off `.competency-group` rather than a structural `> li >` selector,
+  // so this holds recursively at any nesting depth.
+  .competency-group > ul {
+    margin-top: 5px;
+  }
+
+  // Vertical gap between adjacent sibling items within the same list (e.g.
+  // leaf-to-leaf within a group), recursively at any depth.
+  ul > li + li {
+    margin-top: 10px;
+  }
+
+  // Keeps the toggle button from resizing when its label swaps between
+  // "Expand All" and "Collapse All" - sized for the longer label.
+  &__toggle-button {
+    min-width: 160px;
+  }
+}
diff --git a/src/taxonomy/competency-management/CompetencyTree.test.tsx b/src/taxonomy/competency-management/CompetencyTree.test.tsx
new file mode 100644
index 0000000000..d71b67e032
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyTree.test.tsx
@@ -0,0 +1,242 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+  within,
+} from '@src/testUtils';
+import { apiUrls } from '@src/taxonomy/data/api';
+import { TAXONOMY_MAX_DEPTH } from '@src/taxonomy/taxonomy-detail/constants';
+import CompetencyTree from './CompetencyTree';
+
+let axiosMock;
+
+const taxonomyId = 1;
+
+const tagListUrl = apiUrls.tagList(taxonomyId, {
+  pageIndex: 0,
+  pageSize: 50,
+  fullDepth: true,
+  disablePagination: true,
+});
+
+const tagDefaults = { depth: 0, parent_value: null, child_count: 0 };
+
+// A root -> group -> leaf tree, plus two root tags exercising the three ways
+// a Competency ID can be missing: `null`, `''`, and the field being absent
+// (`undefined`) entirely.
+const nestedTagsResponse = {
+  next: null,
+  previous: null,
+  count: 3,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      ...tagDefaults,
+      id: 1,
+      value: 'Root A',
+      child_count: 1,
+      external_id: 'EXT-001',
+    },
+    {
+      ...tagDefaults,
+      id: 2,
+      value: 'Group A1',
+      depth: 1,
+      parent_value: 'Root A',
+      child_count: 1,
+      external_id: null,
+    },
+    {
+      ...tagDefaults,
+      id: 3,
+      value: 'Leaf A1a',
+      depth: 2,
+      parent_value: 'Group A1',
+      external_id: 'EXT-003',
+    },
+    {
+      ...tagDefaults,
+      id: 4,
+      value: 'Root B',
+      external_id: '',
+    },
+    {
+      ...tagDefaults,
+      id: 5,
+      value: 'Root C',
+      // no `external_id` field at all
+    },
+  ],
+};
+
+const buildDuplicateValueResponse = () => ({
+  ...nestedTagsResponse,
+  results: [
+    { ...tagDefaults, id: 10, value: 'Dup Tag' },
+    { ...tagDefaults, id: 11, value: 'DUP TAG' },
+  ],
+});
+
+const taxonomyName = 'Test Taxonomy';
+
+const renderTree = () => render(<CompetencyTree taxonomyId={taxonomyId} taxonomyName={taxonomyName} />);
+
+describe('<CompetencyTree />', () => {
+  beforeEach(() => {
+    ({ axiosMock } = initializeMocks());
+  });
+
+  it('renders the taxonomy name as an expandable root, one level above the tag tree', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, nestedTagsResponse);
+    renderTree();
+
+    // The taxonomy-root row starts expanded, so its immediate children (the
+    // real top-level tags) are visible without any click.
+    expect(await screen.findByText(taxonomyName)).toBeInTheDocument();
+    expect(await screen.findByText('Root A')).toBeInTheDocument();
+
+    // Root A's own children are one level deeper than the root, so they
+    // still require an explicit expand of Root A itself.
+    expect(screen.queryByText('Group A1')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    expect(await screen.findByText('Group A1')).toBeInTheDocument();
+
+    // It's a display-only row, not a real `Tag`: no Competency ID badge for
+    // itself, even though "Root A" (a real tag) has one.
+    const taxonomyRootRow = screen.getByText(taxonomyName).closest('.competency-row');
+    expect(taxonomyRootRow).not.toHaveTextContent('EXT-001');
+  });
+
+  it('renders a root -> group -> leaf tree, nested structurally rather than via a computed depth', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, nestedTagsResponse);
+    renderTree();
+    await screen.findByText(taxonomyName);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All' }));
+
+    const rootAItem = (await screen.findByText('Root A')).closest('li');
+    const groupA1Item = (await screen.findByText('Group A1')).closest('li');
+    const leafA1aItem = (await screen.findByText('Leaf A1a')).closest('li');
+    expect(rootAItem).not.toBeNull();
+    expect(groupA1Item).not.toBeNull();
+    expect(leafA1aItem).not.toBeNull();
+
+    // The DOM itself encodes the hierarchy via nesting, rather than a depth
+    // number: "Group A1" lives inside "Root A"'s own `<li>` subtree, and
+    // "Leaf A1a" lives inside "Group A1"'s (and therefore also "Root A"'s).
+    expect(within(rootAItem as HTMLElement).getByText('Group A1')).toBeInTheDocument();
+    expect(within(groupA1Item as HTMLElement).getByText('Leaf A1a')).toBeInTheDocument();
+    expect(within(rootAItem as HTMLElement).getByText('Leaf A1a')).toBeInTheDocument();
+  });
+
+  it('renders every level of a maximum-depth chain when expanded', async () => {
+    // A single deep chain (each tag has exactly one child) from depth 0 to
+    // `TAXONOMY_MAX_DEPTH`, the worst case this page has to render: the
+    // synthetic taxonomy-root plus every legal real depth, 1 + (TAXONOMY_MAX_DEPTH + 1)
+    // nested `<ul>` levels in total.
+    const depthChainLabels = Array.from(
+      { length: TAXONOMY_MAX_DEPTH + 1 },
+      (_, depth) => `Depth ${depth} Tag`,
+    );
+    const results = depthChainLabels.map((value, depth) => ({
+      ...tagDefaults,
+      id: 100 + depth,
+      value,
+      depth,
+      parent_value: depth === 0 ? null : depthChainLabels[depth - 1],
+      child_count: depth < TAXONOMY_MAX_DEPTH ? 1 : 0,
+    }));
+
+    axiosMock.onGet(tagListUrl).reply(200, { ...nestedTagsResponse, results });
+    renderTree();
+    await screen.findByText(taxonomyName);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All' }));
+    await screen.findByText(depthChainLabels[depthChainLabels.length - 1]);
+
+    // Assert every level individually, not just the deepest one: a bug that
+    // only manifested at the max depth wouldn't necessarily hide earlier
+    // levels, so this proves the whole chain rendered end-to-end.
+    depthChainLabels.forEach((label) => {
+      expect(screen.getByText(label)).toBeInTheDocument();
+    });
+  });
+
+  it('toggles nested rows with Expand All / Collapse All', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, nestedTagsResponse);
+    renderTree();
+    await screen.findByText(taxonomyName);
+
+    expect(screen.queryByText('Group A1')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All' }));
+    expect(await screen.findByText('Group A1')).toBeInTheDocument();
+    expect(await screen.findByText('Leaf A1a')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse All' }));
+    expect(screen.queryByText('Group A1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Leaf A1a')).not.toBeInTheDocument();
+  });
+
+  it('renders the Competency ID with an accessible name when externalId is set, and nothing when it is falsy', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, nestedTagsResponse);
+    renderTree();
+    await screen.findByText(taxonomyName);
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All' }));
+    await screen.findByText('Leaf A1a');
+
+    expect(screen.getByText('EXT-001')).toBeInTheDocument();
+    // The badge has no `<th>` to associate it with a column meaning anymore
+    // (there's no table), so it needs its own accessible name instead. Paragon's
+    // `Badge` renders a plain `<span>` (implicit ARIA role "generic"), on which
+    // `aria-label` is prohibited, so the badge is `aria-hidden` and a
+    // visually-hidden sibling `<span>` carries the accessible name instead.
+    expect(screen.getByText('EXT-001')).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.getByText('Competency ID: EXT-001')).toBeInTheDocument();
+    expect(screen.getByText('EXT-003')).toBeInTheDocument();
+
+    // Root B (`externalId: ''`), Root C (`externalId` absent), Group A1
+    // (`externalId: null`), and the taxonomy-root row itself (no `externalId`
+    // field at all) must not render the literal string "undefined" or
+    // "null", and must not render an empty badge either.
+    const rootBRow = screen.getByText('Root B').closest('.competency-row');
+    const rootCRow = screen.getByText('Root C').closest('.competency-row');
+    const groupRow = screen.getByText('Group A1').closest('.competency-row');
+    const taxonomyRootRow = screen.getByText(taxonomyName).closest('.competency-row');
+    [rootBRow, rootCRow, groupRow, taxonomyRootRow].forEach((row) => {
+      expect(row).not.toBeNull();
+      expect(within(row as HTMLElement).queryByText('undefined')).not.toBeInTheDocument();
+      expect(within(row as HTMLElement).queryByText('null')).not.toBeInTheDocument();
+    });
+    expect(screen.queryByText(/^undefined$/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/^null$/)).not.toBeInTheDocument();
+  });
+
+  it('renders as a plain list, not a table', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, nestedTagsResponse);
+    renderTree();
+    await screen.findByText(taxonomyName);
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All' }));
+    await screen.findByText('Leaf A1a');
+
+    // No table/column-header semantics at all - there's no `<thead>` to hide
+    // in the first place, since this is a `<ul>/<li>` tree.
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.queryAllByRole('columnheader')).toHaveLength(0);
+
+    // Every real tag renders as its own list item (the synthetic
+    // taxonomy-root row is not itself a list item - see `CompetencyTree`).
+    expect(screen.getAllByRole('listitem')).toHaveLength(5);
+  });
+
+  it('renders a connection error alert instead of throwing when the tag data has duplicate values', async () => {
+    axiosMock.onGet(tagListUrl).reply(200, buildDuplicateValueResponse());
+    renderTree();
+
+    expect(await screen.findByTestId('connectionErrorAlert')).toBeInTheDocument();
+    expect(screen.queryByText('Dup Tag')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/competency-management/CompetencyTree.tsx b/src/taxonomy/competency-management/CompetencyTree.tsx
new file mode 100644
index 0000000000..11955261ec
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyTree.tsx
@@ -0,0 +1,175 @@
+import { useMemo, useState } from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { OpenInFull } from '@openedx/paragon/icons';
+
+import ConnectionErrorAlert from '@src/generic/ConnectionErrorAlert';
+import ExpandCollapseIconButton from '@src/generic/ExpandCollapseIconButton';
+import { LoadingSpinner } from '@src/generic/Loading';
+import { useTagListData } from '@src/taxonomy/data/apiHooks';
+import { TagTree } from '@src/taxonomy/tag-list/tagTree';
+import CompetencyTreeItem from './CompetencyTreeItem';
+import messages from './messages';
+// @ts-ignore
+import './CompetencyTree.scss';
+
+interface CompetencyTreeProps {
+  taxonomyId: number;
+  taxonomyName: string;
+}
+
+/** A single node of this page's tree: either a real tag (from `TagTree`) or
+ * the synthetic taxonomy-root node this component wraps it in. Narrower than
+ * `TagTreeNode`/`TagData` since this page only ever reads `id`, `value`,
+ * `externalId`, and `subRows`.
+ */
+export interface CompetencyTreeNode {
+  id: string | number;
+  value: string;
+  externalId?: string | null;
+  subRows?: CompetencyTreeNode[];
+}
+
+const ROOT_ID = 'taxonomy-root';
+
+/** Either the successfully-built tree, or a marker that building it failed. */
+type TreeBuildResult = { treeData: CompetencyTreeNode[]; } | { treeBuildError: true; };
+
+/** Collects the string ids of every node (including the root passed in)
+ * that has at least one child, i.e. every node that can be expanded.
+ */
+function collectExpandableIds(node: CompetencyTreeNode): string[] {
+  if (!node.subRows?.length) {
+    return [];
+  }
+  return [
+    String(node.id),
+    ...node.subRows.flatMap(collectExpandableIds),
+  ];
+}
+
+const CompetencyTree = ({ taxonomyId, taxonomyName }: CompetencyTreeProps) => {
+  const intl = useIntl();
+  const { isLoading, isError, data: tagList } = useTagListData(taxonomyId, {
+    pageIndex: 0,
+    disablePagination: true,
+    enabled: true,
+  });
+
+  // The taxonomy root starts expanded so top-level competencies are visible
+  // on first load, matching the existing tag-editing page's precedent of
+  // always showing top-level tags; deeper nodes still start collapsed.
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set([ROOT_ID]));
+
+  const treeBuildResult = useMemo((): TreeBuildResult => {
+    if (!tagList?.results) {
+      return { treeData: [] };
+    }
+    try {
+      return { treeData: new TagTree(tagList.results).getAllAsDeepCopy() as unknown as CompetencyTreeNode[] };
+    } catch {
+      // `TagTree`'s constructor throws `TagTreeError` on duplicate tag values or a
+      // cycle in the data. `TaxonomyLayout` has no error boundary, so an uncaught
+      // throw here would break the whole page; render a connection-error state instead.
+      return { treeBuildError: true };
+    }
+  }, [tagList?.results]);
+
+  // The taxonomy itself is the tree's root row, one level above the tags
+  // returned by the API: the ticket's acceptance criteria calls for a nested
+  // tree of "root, groups, sub-competencies", where "root" is the taxonomy's
+  // own name, not just its starting point in the breadcrumb above the tree.
+  // This node is a display-only construct - it's never part of `TagData`/the
+  // API response, and nothing here writes it back.
+  const rootNode: CompetencyTreeNode | null = useMemo(
+    () => ('treeBuildError' in treeBuildResult
+      ? null
+      : { id: ROOT_ID, value: taxonomyName, subRows: treeBuildResult.treeData }),
+    [treeBuildResult, taxonomyName],
+  );
+
+  const allExpandableIds = useMemo(
+    () => (rootNode ? collectExpandableIds(rootNode) : []),
+    [rootNode],
+  );
+
+  const handleToggle = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const isAllExpanded = allExpandableIds.length > 0
+    && allExpandableIds.every((id) => expandedIds.has(id));
+
+  const handleToggleAll = () => {
+    setExpandedIds(isAllExpanded ? new Set() : new Set(allExpandableIds));
+  };
+
+  if ('treeBuildError' in treeBuildResult || !rootNode || isError) {
+    return <ConnectionErrorAlert />;
+  }
+
+  const rootHasChildren = !!rootNode.subRows?.length;
+  const rootIsExpanded = expandedIds.has(ROOT_ID);
+
+  return (
+    <div className="competency-tree">
+      <div className="competency-tree__toolbar d-flex justify-content-end align-items-center">
+        <Button
+          variant="outline-primary"
+          iconBefore={OpenInFull}
+          onClick={handleToggleAll}
+          aria-pressed={isAllExpanded}
+          disabled={isLoading || allExpandableIds.length === 0}
+          className="competency-tree__toggle-button"
+        >
+          {isAllExpanded
+            ? intl.formatMessage(messages.collapseAll)
+            : intl.formatMessage(messages.expandAll)}
+        </Button>
+      </div>
+      {isLoading ?
+        (
+          <div className="competency-tree__container d-flex justify-content-center p-4">
+            <LoadingSpinner />
+          </div>
+        ) :
+        (
+          <div className="competency-tree__container">
+            <div className="competency-row competency-row--root">
+              <ExpandCollapseIconButton
+                canExpand={rootHasChildren}
+                isExpanded={rootIsExpanded}
+                onToggle={() => handleToggle(ROOT_ID)}
+                expandLabel={intl.formatMessage(messages.expandRowButtonLabel)}
+                collapseLabel={intl.formatMessage(messages.collapseRowButtonLabel)}
+              />
+              <span className="competency-row__label">{taxonomyName}</span>
+            </div>
+            {rootIsExpanded && rootHasChildren && (
+              <ul>
+                {rootNode.subRows!.map((group) => (
+                  <CompetencyTreeItem
+                    key={group.id}
+                    node={group}
+                    expandedIds={expandedIds}
+                    onToggle={handleToggle}
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+    </div>
+  );
+};
+
+export default CompetencyTree;
diff --git a/src/taxonomy/competency-management/CompetencyTreeItem.tsx b/src/taxonomy/competency-management/CompetencyTreeItem.tsx
new file mode 100644
index 0000000000..2f95150f8e
--- /dev/null
+++ b/src/taxonomy/competency-management/CompetencyTreeItem.tsx
@@ -0,0 +1,84 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Badge } from '@openedx/paragon';
+
+import ExpandCollapseIconButton from '@src/generic/ExpandCollapseIconButton';
+import type { CompetencyTreeNode } from './CompetencyTree';
+import messages from './messages';
+
+export interface CompetencyTreeItemProps {
+  node: CompetencyTreeNode;
+  expandedIds: Set<string>;
+  onToggle: (id: string) => void;
+}
+
+/** CompetencyTreeItem
+ * Recursively renders one node of the competency tree (a group or a
+ * sub-competency leaf, and anything nested deeper than that) as an `<li>`:
+ * a row (disclosure button + name + Competency ID badge) and, when expanded
+ * and the node has children, a nested `<ul>` of more `CompetencyTreeItem`s.
+ *
+ * Indentation comes from the `<ul>` nesting itself (see `CompetencyTree.scss`),
+ * not from a depth number computed here. Whether a node's `<li>` reads
+ * visually as a grey "group" envelope (wrapping its own header row and all
+ * of its rendered children) or as a plain white leaf "pill" is likewise
+ * driven by this same `hasChildren` check, via the `competency-group` class
+ * below - not a depth number or a CSS structural-position selector, so it
+ * holds recursively at any depth.
+ */
+const CompetencyTreeItem = ({ node, expandedIds, onToggle }: CompetencyTreeItemProps) => {
+  const intl = useIntl();
+  const nodeId = String(node.id);
+  const hasChildren = !!node.subRows?.length;
+  const isExpanded = expandedIds.has(nodeId);
+
+  // `externalId` can be `undefined`, `null`, or `''` depending on the data
+  // path (the tag-list tree's JSON deep-copy round-trip drops `undefined`
+  // keys but keeps `null`, and newly-created tags elsewhere are seeded with
+  // `externalId: ''`), so use a truthiness check rather than `!== null`.
+  const { externalId } = node;
+
+  return (
+    <li className={hasChildren ? 'competency-group' : undefined}>
+      <div className="competency-row">
+        <ExpandCollapseIconButton
+          canExpand={hasChildren}
+          isExpanded={isExpanded}
+          onToggle={() => onToggle(nodeId)}
+          expandLabel={intl.formatMessage(messages.expandRowButtonLabel)}
+          collapseLabel={intl.formatMessage(messages.collapseRowButtonLabel)}
+        />
+        <span className="competency-row__label">{node.value}</span>
+        {externalId ?
+          (
+            <>
+              <span className="sr-only">
+                {intl.formatMessage(messages.competencyIdAccessibleLabel, { externalId })}
+              </span>
+              <Badge
+                variant="info"
+                className="competency-row__badge ml-auto"
+                aria-hidden="true"
+              >
+                {externalId}
+              </Badge>
+            </>
+          ) :
+          null}
+      </div>
+      {isExpanded && hasChildren && (
+        <ul>
+          {node.subRows!.map((child) => (
+            <CompetencyTreeItem
+              key={child.id}
+              node={child}
+              expandedIds={expandedIds}
+              onToggle={onToggle}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default CompetencyTreeItem;
diff --git a/src/taxonomy/competency-management/index.ts b/src/taxonomy/competency-management/index.ts
new file mode 100644
index 0000000000..3819d813ab
--- /dev/null
+++ b/src/taxonomy/competency-management/index.ts
@@ -0,0 +1 @@
+export { default as CompetencyManagementPage } from './CompetencyManagementPage';
diff --git a/src/taxonomy/competency-management/messages.ts b/src/taxonomy/competency-management/messages.ts
new file mode 100644
index 0000000000..66be0b3a1e
--- /dev/null
+++ b/src/taxonomy/competency-management/messages.ts
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headerTitle: {
+    id: 'course-authoring.competency-management.header.title',
+    defaultMessage: 'Competencies',
+    description: 'Document title suffix for the Competency Management page.',
+  },
+  expandAll: {
+    id: 'course-authoring.competency-management.expand-all',
+    defaultMessage: 'Expand All',
+    description: 'Label for the button that expands every node of the competency tree.',
+  },
+  collapseAll: {
+    id: 'course-authoring.competency-management.collapse-all',
+    defaultMessage: 'Collapse All',
+    description: 'Label for the button that collapses every node of the competency tree.',
+  },
+  expandRowButtonLabel: {
+    id: 'course-authoring.competency-management.expand-row.button-label',
+    defaultMessage: 'Expand',
+    description: 'Accessible label for the disclosure button on a collapsed competency tree row.',
+  },
+  collapseRowButtonLabel: {
+    id: 'course-authoring.competency-management.collapse-row.button-label',
+    defaultMessage: 'Collapse',
+    description: 'Accessible label for the disclosure button on an expanded competency tree row.',
+  },
+  competencyIdAccessibleLabel: {
+    id: 'course-authoring.competency-management.competency-id.accessible-label',
+    defaultMessage: 'Competency ID: {externalId}',
+    description: 'Accessible name for the Competency ID badge, read by screen readers since there is no column header to associate it with.',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/data/apiHooks.ts b/src/taxonomy/data/apiHooks.ts
index fd40a10097..7a7d1ad565 100644
--- a/src/taxonomy/data/apiHooks.ts
+++ b/src/taxonomy/data/apiHooks.ts
@@ -192,7 +192,7 @@ export const useImportPlan = (taxonomyId: number, file: File | null) =>
  * Use the list of tags in a taxonomy.
  */
 export const useTagListData = (taxonomyId: number, options: QueryOptions) => {
-  const { pageIndex, pageSize, enabled = true, disablePagination = false } = options; // eslint-disable-line
+  const { pageIndex, pageSize = null, enabled = true, disablePagination = false } = options; // eslint-disable-line
   return useQuery({
     // queryKey: taxonomyQueryKeys.taxonomyTagListPage(taxonomyId, pageIndex, pageSize),
     queryKey: taxonomyQueryKeys.taxonomyTagList(taxonomyId), // For now, ignore pagination in the query key.
diff --git a/src/taxonomy/data/types.ts b/src/taxonomy/data/types.ts
index 5a91cfdbf8..6bed6fdd1c 100644
--- a/src/taxonomy/data/types.ts
+++ b/src/taxonomy/data/types.ts
@@ -31,7 +31,9 @@ export interface TaxonomyListData {
 
 export interface QueryOptions {
   pageIndex: number;
-  pageSize: number;
+  // Unused (and thus omitted from the request URL) when `disablePagination`
+  // is true; see `apiUrls.tagList` in `./api.ts`.
+  pageSize?: number;
   enabled?: boolean;
   disablePagination?: boolean;
 }
diff --git a/src/taxonomy/index.ts b/src/taxonomy/index.ts
index 1a62229c51..495cc08a7f 100644
--- a/src/taxonomy/index.ts
+++ b/src/taxonomy/index.ts
@@ -1,3 +1,4 @@
+export { CompetencyManagementPage } from './competency-management';
 export { TaxonomyDetailPage } from './taxonomy-detail';
 export { TaxonomyLayout } from './TaxonomyLayout';
 export { TaxonomyListPage } from './TaxonomyListPage';
diff --git a/src/taxonomy/tag-list/OptionalExpandLink.tsx b/src/taxonomy/tag-list/OptionalExpandLink.tsx
index e42c198dcb..1a08cf81ef 100644
--- a/src/taxonomy/tag-list/OptionalExpandLink.tsx
+++ b/src/taxonomy/tag-list/OptionalExpandLink.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { IconButton } from '@openedx/paragon';
-import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
 import { Row } from '@tanstack/react-table';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import ExpandCollapseIconButton from '@src/generic/ExpandCollapseIconButton';
 import type { TreeRowData } from '@src/taxonomy/tree-table/types';
 import messages from './messages';
 
@@ -21,34 +20,15 @@ interface OptionalExpandLinkProps {
 const OptionalExpandLink = ({ row, forceHide = false }: OptionalExpandLinkProps) => {
   const intl = useIntl();
   const canExpand = !!row?.getCanExpand() && !forceHide;
-
-  if (!canExpand) {
-    return (
-      <IconButton
-        src={ExpandMore}
-        alt=""
-        size="sm"
-        className="mr-1 invisible"
-        disabled
-        tabIndex={-1}
-        aria-hidden
-      />
-    );
-  }
-
   const isExpanded = !!row?.getIsExpanded();
-  const buttonLabel = isExpanded
-    ? intl.formatMessage(messages.hideSubtagsButtonLabel)
-    : intl.formatMessage(messages.showSubtagsButtonLabel);
 
   return (
-    <IconButton
-      src={isExpanded ? ExpandLess : ExpandMore}
-      onClick={row?.getToggleExpandedHandler()}
-      alt={buttonLabel}
-      aria-label={buttonLabel}
-      aria-expanded={isExpanded}
-      size="sm"
+    <ExpandCollapseIconButton
+      canExpand={canExpand}
+      isExpanded={isExpanded}
+      onToggle={row?.getToggleExpandedHandler()}
+      expandLabel={intl.formatMessage(messages.showSubtagsButtonLabel)}
+      collapseLabel={intl.formatMessage(messages.hideSubtagsButtonLabel)}
       className="mr-1"
     />
   );