diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts
index ad6b70a1c..68f50218a 100644
--- a/src/public/app/components/app_context.ts
+++ b/src/public/app/components/app_context.ts
@@ -3,7 +3,7 @@ import bundleService from "../services/bundle.js";
 import RootCommandExecutor from "./root_command_executor.js";
 import Entrypoints, { type SqlExecuteResults } from "./entrypoints.js";
 import options from "../services/options.js";
-import utils from "../services/utils.js";
+import utils, { hasTouchBar } from "../services/utils.js";
 import zoomComponent from "./zoom.js";
 import TabManager from "./tab_manager.js";
 import Component from "./component.js";
@@ -25,6 +25,7 @@ import type { default as NoteContext, GetTextEditorCallback } from "./note_conte
 import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 import type { NativeImage, TouchBar } from "electron";
+import TouchBarComponent from "./touch_bar.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -478,6 +479,10 @@ export class AppContext extends Component {
         if (utils.isElectron()) {
             this.child(zoomComponent);
         }
+
+        if (hasTouchBar) {
+            this.child(new TouchBarComponent());
+        }
     }
 
     renderWidgets() {
diff --git a/src/public/app/widgets/touch_bar.ts b/src/public/app/components/touch_bar.ts
similarity index 95%
rename from src/public/app/widgets/touch_bar.ts
rename to src/public/app/components/touch_bar.ts
index 9206d6f15..4afe65151 100644
--- a/src/public/app/widgets/touch_bar.ts
+++ b/src/public/app/components/touch_bar.ts
@@ -1,7 +1,6 @@
 import utils from "../services/utils.js";
-import Component from "../components/component.js";
-import appContext from "../components/app_context.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import Component from "./component.js";
+import appContext from "./app_context.js";
 import type { TouchBarButton, TouchBarGroup, TouchBarSegmentedControl, TouchBarSpacer } from "@electron/remote";
 
 export type TouchBarItem = (TouchBarButton | TouchBarSpacer | TouchBarGroup | TouchBarSegmentedControl);
@@ -10,7 +9,7 @@ export function buildSelectedBackgroundColor(isSelected: boolean) {
     return isSelected ? "#757575" : undefined;
 }
 
-export default class TouchBarWidget extends NoteContextAwareWidget {
+export default class TouchBarComponent extends Component {
 
     nativeImage: typeof import("electron").nativeImage;
     remote: typeof import("@electron/remote");
diff --git a/src/public/app/layouts/desktop_layout.ts b/src/public/app/layouts/desktop_layout.ts
index 0750bba36..ee6faed63 100644
--- a/src/public/app/layouts/desktop_layout.ts
+++ b/src/public/app/layouts/desktop_layout.ts
@@ -87,7 +87,6 @@ import utils, { hasTouchBar } from "../services/utils.js";
 import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
 import ContextualHelpButton from "../widgets/floating_buttons/help_button.js";
 import CloseZenButton from "../widgets/close_zen_button.js";
-import TouchBarWidget from "../widgets/touch_bar.js";
 import type { AppContext } from "./../components/app_context.js";
 import type { WidgetsByParent } from "../services/bundle.js";
 import SwitchSplitOrientationButton from "../widgets/floating_buttons/switch_layout_button.js";
@@ -162,7 +161,6 @@ export default class DesktopLayout {
                                             .filling()
                                             .collapsible()
                                             .id("center-pane")
-                                            .optChild(hasTouchBar, new TouchBarWidget())
                                             .child(
                                                 new SplitNoteContainer(() =>
                                                     new NoteWrapperWidget()
diff --git a/src/public/app/widgets/note_tree.ts b/src/public/app/widgets/note_tree.ts
index e29696a69..cbc3ec055 100644
--- a/src/public/app/widgets/note_tree.ts
+++ b/src/public/app/widgets/note_tree.ts
@@ -25,7 +25,7 @@ import type FNote from "../entities/fnote.js";
 import type { NoteType } from "../entities/fnote.js";
 import type { AttributeRow, BranchRow } from "../services/load_results.js";
 import type { SetNoteOpts } from "../components/note_context.js";
-import type { TouchBarItem } from "./touch_bar.js";
+import type { TouchBarItem } from "../components/touch_bar.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
 
 const TPL = /*html*/`
diff --git a/src/public/app/widgets/type_widgets/editable_code.ts b/src/public/app/widgets/type_widgets/editable_code.ts
index 371cb7f0a..fbdee8244 100644
--- a/src/public/app/widgets/type_widgets/editable_code.ts
+++ b/src/public/app/widgets/type_widgets/editable_code.ts
@@ -5,7 +5,7 @@ import keyboardActionService from "../../services/keyboard_actions.js";
 import options from "../../services/options.js";
 import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
 import appContext from "../../components/app_context.js";
-import type { TouchBarItem } from "../touch_bar.js";
+import type { TouchBarItem } from "../../components/touch_bar.js";
 import { hasTouchBar } from "../../services/utils.js";
 
 const TPL = /*html*/`
diff --git a/src/public/app/widgets/type_widgets/editable_text.ts b/src/public/app/widgets/type_widgets/editable_text.ts
index 65166f2dc..edefbcdcd 100644
--- a/src/public/app/widgets/type_widgets/editable_text.ts
+++ b/src/public/app/widgets/type_widgets/editable_text.ts
@@ -14,7 +14,7 @@ import { initSyntaxHighlighting } from "./ckeditor/syntax_highlight.js";
 import options from "../../services/options.js";
 import toast from "../../services/toast.js";
 import { normalizeMimeTypeForCKEditor } from "../../services/mime_type_definitions.js";
-import { buildSelectedBackgroundColor } from "../touch_bar.js";
+import { buildSelectedBackgroundColor } from "../../components/touch_bar.js";
 import { buildConfig, buildToolbarConfig } from "./ckeditor/config.js";
 import type FNote from "../../entities/fnote.js";
 import { getMermaidConfig } from "../../services/mermaid.js";
diff --git a/src/public/app/widgets/view_widgets/calendar_view.ts b/src/public/app/widgets/view_widgets/calendar_view.ts
index a5452de66..3ffc43d74 100644
--- a/src/public/app/widgets/view_widgets/calendar_view.ts
+++ b/src/public/app/widgets/view_widgets/calendar_view.ts
@@ -13,7 +13,7 @@ import date_notes from "../../services/date_notes.js";
 import appContext from "../../components/app_context.js";
 import type { EventImpl } from "@fullcalendar/core/internal";
 import debounce, { type DebouncedFunction } from "debounce";
-import type { TouchBarItem } from "../touch_bar.js";
+import type { TouchBarItem } from "../../components/touch_bar.js";
 import type { SegmentedControlSegment } from "electron";
 
 const TPL = /*html*/`