diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index 9ced53a6dc..89f62be73b 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -97,7 +97,8 @@ const SEARCH_OPTIONS: SearchOption[] = [
     attributeType: "label",
     icon: "bx bx-bug",
     label: t("search_definition.debug"),
-    tooltip: t("search_definition.debug_description")
+    tooltip: t("search_definition.debug_description"),
+    component: DebugOption
   }
 ];
 
@@ -412,9 +413,19 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
 
 function FastSearchOption({ ...restProps }: SearchOptionProps) {
   return <SearchOption
-    titleIcon="bx bx-run"
-    title={t("fast_search.fast_search")}
+    titleIcon="bx bx-run" title={t("fast_search.fast_search")}
     help={t("fast_search.description")}
     {...restProps}
   />
+}
+
+function DebugOption({ ...restProps }: SearchOptionProps) {
+  return <SearchOption
+    titleIcon="bx bx-bug" title={t("debug.debug")}
+    help={<>
+      <p>{t("debug.debug_info")}</p>
+      {t("debug.access_info")}
+    </>}
+    {...restProps}
+  />
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/search_options/debug.ts b/apps/client/src/widgets/search_options/debug.ts
deleted file mode 100644
index bdcf585e4a..0000000000
--- a/apps/client/src/widgets/search_options/debug.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="debug">
-    <td colSpan="2">
-        <span class="bx bx-bug"></span>
-        ${t("debug.debug")}
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>${t("debug.debug_info")}</p>
-                ${t("debug.access_info")}
-            </div>
-        </div>
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class Debug extends AbstractSearchOption {
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "debug");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}