diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts
index 9bd225d39..24fa48576 100644
--- a/apps/client/src/widgets/containers/ribbon_container.ts
+++ b/apps/client/src/widgets/containers/ribbon_container.ts
@@ -61,12 +61,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         for (const buttonWidget of this.buttonWidgets) {
             this.$buttonContainer.append(buttonWidget.render());
         }
-
-        this.$tabContainer.on("click", ".ribbon-tab-title", (e) => {
-            const $ribbonTitle = $(e.target).closest(".ribbon-tab-title");
-
-            this.toggleRibbonTab($ribbonTitle);
-        });
     }
 
     toggleRibbonTab($ribbonTitle: JQuery<HTMLElement>, refreshActiveTab = true) {
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 539c67f14..73693ecbb 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -1,3 +1,4 @@
+import { useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { useNoteContext } from "../react/hooks";
@@ -96,15 +97,18 @@ const TAB_CONFIGURATION: TabConfiguration[] = [
 export default function Ribbon() {
     const { note } = useNoteContext();
     const context: TabContext = { note };
+    const [ activeTab, setActiveTab ] = useState<number>();
 
     return (
         <div class="ribbon-container" style={{ contain: "none" }}>
             <div className="ribbon-top-row">
                 <div className="ribbon-tab-container">
-                    {TAB_CONFIGURATION.map(({ title, icon }) => (
+                    {TAB_CONFIGURATION.map(({ title, icon }, i) => (
                         <RibbonTab
                             icon={icon}
                             title={typeof title === "string" ? title : title(context)}
+                            active={i === activeTab}
+                            onClick={() => setActiveTab(i)}
                         />
                     ))}
                 </div>
@@ -116,16 +120,17 @@ export default function Ribbon() {
     )
 }
 
-function RibbonTab({ icon, title }: { icon: string; title: string }) {
+function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
     return (
         <>
-            <div className="ribbon-tab-title">
+            <div className={`ribbon-tab-title ${active ? "active" : ""}`}>
                 <span
                     className={`ribbon-tab-title-icon ${icon}`}
                     title={title}
+                    onClick={onClick}
                 />
                 &nbsp;
-                <span class="ribbon-tab-title-label">{title}</span>
+                { active && <span class="ribbon-tab-title-label">{title}</span> }
             </div>
 
             <div class="ribbon-tab-spacer" />