diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts
index ec8531b40..88056d2da 100644
--- a/apps/client/src/widgets/containers/ribbon_container.ts
+++ b/apps/client/src/widgets/containers/ribbon_container.ts
@@ -28,79 +28,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         this.buttonWidgets = [];
     }
 
-    isEnabled() {
-        return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-    button(widget: ButtonWidget) {
-        super.child(widget);
-
-        this.buttonWidgets.push(widget);
-
-        return this;
-    }
-
-    doRender() {
-        this.$tabContainer = this.$widget.find(".ribbon-tab-container");
-        this.$buttonContainer = this.$widget.find(".ribbon-button-container");
-        this.$bodyContainer = this.$widget.find(".ribbon-body-container");
-
-        for (const buttonWidget of this.buttonWidgets) {
-            this.$buttonContainer.append(buttonWidget.render());
-        }
-    }
-
-    async noteSwitched() {
-        this.lastActiveComponentId = null;
-
-        await super.noteSwitched();
-    }
-
-    async refreshWithNote(note: FNote, noExplicitActivation = false) {
-        this.lastNoteType = note.type;
-
-        let $ribbonTabToActivate, $lastActiveRibbon;
-
-        this.$tabContainer.empty();
-
-        for (const ribbonWidget of this.ribbonWidgets) {
-            // TODO: Base class for ribbon widget
-            const ret = await (ribbonWidget as any).getTitle(note);
-
-            if (!ret.show) {
-                continue;
-            }
-
-            const $ribbonTitle = $('<div class="ribbon-tab-title">')
-                .attr("data-ribbon-component-id", ribbonWidget.componentId)
-                .attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets
-                .append(
-                    $('<span class="">')
-                        .attr("data-toggle-command", (ribbonWidget as any).toggleCommand)
-                )
-
-            this.$tabContainer.append('');
-
-            if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) {
-                $ribbonTabToActivate = $ribbonTitle;
-            }
-
-            if (this.lastActiveComponentId === ribbonWidget.componentId) {
-                $lastActiveRibbon = $ribbonTitle;
-            }
-        }
-
-        if (!$ribbonTabToActivate) {
-            $ribbonTabToActivate = $lastActiveRibbon;
-        }
-
-        if ($ribbonTabToActivate) {
-            this.toggleRibbonTab($ribbonTabToActivate, false);
-        } else {
-            this.$bodyContainer.find(".ribbon-body").removeClass("active");
-        }
-    }
-
     isRibbonTabActive(name: string) {
         const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
 
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 78db32310..ecde17118 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -187,50 +187,54 @@ export default function Ribbon() {
 
     return (
         <div className="ribbon-container" style={{ contain: "none" }}>
-            <div className="ribbon-top-row">
-                <div className="ribbon-tab-container">
-                    {filteredTabs.map(({ title, icon, index, toggleCommand }) => (
-                        <RibbonTab
-                            icon={icon}
-                            title={typeof title === "string" ? title : title(titleContext)}
-                            active={index === activeTabIndex}
-                            toggleCommand={toggleCommand}
-                            onClick={() => {
-                                if (activeTabIndex !== index) {
-                                    setActiveTabIndex(index);
-                                } else {
-                                    // Collapse
-                                    setActiveTabIndex(undefined);
+            {noteContext?.viewScope?.viewMode === "default" && (
+                <>
+                    <div className="ribbon-top-row">
+                        <div className="ribbon-tab-container">
+                            {filteredTabs.map(({ title, icon, index, toggleCommand }) => (
+                                <RibbonTab
+                                    icon={icon}
+                                    title={typeof title === "string" ? title : title(titleContext)}
+                                    active={index === activeTabIndex}
+                                    toggleCommand={toggleCommand}
+                                    onClick={() => {
+                                        if (activeTabIndex !== index) {
+                                            setActiveTabIndex(index);
+                                        } else {
+                                            // Collapse
+                                            setActiveTabIndex(undefined);
+                                        }
+                                    }}
+                                />
+                            ))}
+                        </div>
+                        <div className="ribbon-button-container">
+                            { note && <NoteActions note={note} noteContext={noteContext} /> }
+                        </div>
+                    </div>
+                
+                    <div className="ribbon-body-container">
+                        <div className="ribbon-body">
+                            {filteredTabs.map(tab => {
+                                const isActive = tab.index === activeTabIndex;
+                                if (!isActive && !tab.stayInDom) {
+                                    return;
                                 }
-                            }}
-                        />
-                    ))}
-                </div>
-                <div className="ribbon-button-container">
-                    { note && <NoteActions note={note} noteContext={noteContext} /> }
-                </div>
-            </div>
-        
-            <div className="ribbon-body-container">
-                <div className="ribbon-body">
-                    {filteredTabs.map(tab => {
-                        const isActive = tab.index === activeTabIndex;
-                        if (!isActive && !tab.stayInDom) {
-                            return;
-                        }
 
-                        return tab?.content && tab.content({
-                            note,
-                            hidden: !isActive,
-                            ntxId,
-                            hoistedNoteId,
-                            notePath,
-                            noteContext,
-                            componentId
-                        });
-                    })}
-                </div>
-            </div>
+                                return tab?.content && tab.content({
+                                    note,
+                                    hidden: !isActive,
+                                    ntxId,
+                                    hoistedNoteId,
+                                    notePath,
+                                    noteContext,
+                                    componentId
+                                });
+                            })}
+                        </div>
+                    </div>
+                </>
+            )}
         </div>
     )
 }