diff --git a/web/src/settings_user_topics.ts b/web/src/settings_user_topics.ts
index 118856bb552de..06f4462aee872 100644
--- a/web/src/settings_user_topics.ts
+++ b/web/src/settings_user_topics.ts
@@ -8,6 +8,7 @@ import * as scroll_util from "./scroll_util.ts";
 import * as settings_config from "./settings_config.ts";
 import * as user_topics from "./user_topics.ts";
 import type {UserTopic} from "./user_topics.ts";
+import * as util from "./util.ts";
 
 export let loaded = false;
 
@@ -31,6 +32,8 @@ export function populate_list(): void {
         modifier_html(user_topic) {
             const context = {
                 user_topic,
+                topic_display_name: util.get_final_topic_display_name(user_topic.topic),
+                is_empty_string_topic: user_topic.topic === "",
                 user_topic_visibility_policy_values:
                     settings_config.user_topic_visibility_policy_values,
             };
diff --git a/web/templates/user_topic_ui_row.hbs b/web/templates/user_topic_ui_row.hbs
index 67902f96402fa..9f36c3aba28f4 100644
--- a/web/templates/user_topic_ui_row.hbs
+++ b/web/templates/user_topic_ui_row.hbs
@@ -1,7 +1,7 @@
 {{#with user_topic}}
 <tr data-stream-id="{{stream_id}}" data-stream="{{stream}}" data-topic="{{topic}}" data-date-updated="{{date_updated_str}}" data-visibility-policy="{{visibility_policy}}">
     <td class="user-topic-stream">{{stream}}</td>
-    <td class="white-space-preserve-wrap user-topic">{{topic}}</td>
+    <td class="white-space-preserve-wrap user-topic {{#if ../is_empty_string_topic}}empty-topic-display{{/if}}">{{../topic_display_name}}</td>
     <td>
         <select class="settings_user_topic_visibility_policy list_select bootstrap-focus-style" data-setting-widget-type="number">
             {{#each ../user_topic_visibility_policy_values}}