diff --git a/components/Toolbar/TextDecorationButton.tsx b/components/Toolbar/TextDecorationButton.tsx
index c4e4ac89..a8f40100 100644
--- a/components/Toolbar/TextDecorationButton.tsx
+++ b/components/Toolbar/TextDecorationButton.tsx
@@ -9,6 +9,7 @@ import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark";
 
 export function TextDecorationButton(props: {
   mark: MarkType;
+  attrs?: any;
   icon: React.ReactNode;
 }) {
   let focusedBlock = useUIState((s) => s.focusedBlock);
@@ -36,7 +37,7 @@ export function TextDecorationButton(props: {
       active={hasMark}
       onClick={(e) => {
         e.preventDefault();
-        toggleMarkInFocusedBlock(props.mark);
+        toggleMarkInFocusedBlock(props.mark, props.attrs);
       }}
     >
       {props.icon}
diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx
index 2cfbfc7d..bd4e5587 100644
--- a/components/Toolbar/index.tsx
+++ b/components/Toolbar/index.tsx
@@ -117,6 +117,7 @@ export const TextToolbar = (props: { entityID: string }) => {
             />
             <div className="flex items-center gap-1">
               <TextDecorationButton
+                attrs={{ color: lastUsedHighlight }}
                 mark={schema.marks.highlight}
                 icon={<HighlightSmall />}
               />