diff --git a/rollup.config.ts b/rollup.config.ts
index fc00580..bea5358 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -138,6 +138,14 @@ const optionsPageConfig = {
         dir: BUILD_PATH,
     },
     plugins: [
+        replace({
+            preventAssignment: true,
+            // word boundaries are ignored
+            delimiters: ['', ''],
+            values: {
+                __channel__: env,
+            },
+        }),
         ...commonPlugins,
         typescript({
             tsconfig: 'tsconfig.json',
diff --git a/src/pages/options/App.tsx b/src/pages/options/App.tsx
index 0e14800..404ffa0 100644
--- a/src/pages/options/App.tsx
+++ b/src/pages/options/App.tsx
@@ -10,17 +10,29 @@ import { useDetectUserscript } from './hooks';
 import { AppState } from './constants';
 import '../common/styles/options.pcss';
 
+type Channel = 'dev' | 'release' | 'beta';
+
 export const App = () => {
     const [state, setState] = useState(AppState.Detecting);
 
     useDetectUserscript(setState);
 
+    // This is a placeholder for the channel value from the rollup replace plugin.
+    const channel = '__channel__' as Channel;
+
+    let title = translator.getMessage('userscript_name');
+
+    if (channel !== 'release') {
+        // Capitalize the first letter of the channel name.
+        title += ` ${channel[0].toUpperCase() + channel.slice(1)}`;
+    }
+
     return (
         <>
             <div class="settings">
                 <div class="settings__in">
                     <div class="settings__title">
-                        {translator.getMessage('userscript_name')}
+                        {title}
                     </div>
                     {state === AppState.Detecting && <LoadingSubtitle />}
                     {state === AppState.NotInstalled && <NotInstalled />}