diff --git a/apps/web/src/components/ui/report/elements/BlockSelection.tsx b/apps/web/src/components/ui/report/elements/BlockSelection.tsx
index 787c37d3d..acb7da775 100644
--- a/apps/web/src/components/ui/report/elements/BlockSelection.tsx
+++ b/apps/web/src/components/ui/report/elements/BlockSelection.tsx
@@ -8,7 +8,7 @@ import { cva } from 'class-variance-authority';
 import { type PlateElementProps, usePluginOption } from 'platejs/react';
 
 export const blockSelectionVariants = cva(
-  'pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity',
+  'pointer-events-none absolute inset-0 z-1 bg-brand/5 transition-opacity',
   {
     defaultVariants: {
       active: true
diff --git a/apps/web/src/components/ui/report/elements/BlockSuggestion.tsx b/apps/web/src/components/ui/report/elements/BlockSuggestion.tsx
index f5179bcbb..1738d2e41 100644
--- a/apps/web/src/components/ui/report/elements/BlockSuggestion.tsx
+++ b/apps/web/src/components/ui/report/elements/BlockSuggestion.tsx
@@ -175,7 +175,7 @@ export function BlockSuggestionCard({
               <div className="flex flex-col gap-2">
                 {suggestionText2Array(suggestion.newText!).map((text, index) => (
                   <React.Fragment key={index}>
-                    <div key={index} className="text-brand/80 flex items-start gap-2">
+                    <div key={index} className="text-brand/60 flex items-start gap-2">
                       <span className="text-sm">with:</span>
                       <span className="text-sm">{text || 'line breaks'}</span>
                     </div>
diff --git a/apps/web/src/components/ui/report/elements/CursorOverlay.tsx b/apps/web/src/components/ui/report/elements/CursorOverlay.tsx
index 76528695b..2f833d59a 100644
--- a/apps/web/src/components/ui/report/elements/CursorOverlay.tsx
+++ b/apps/web/src/components/ui/report/elements/CursorOverlay.tsx
@@ -46,7 +46,7 @@ function Cursor({
             key={i}
             className={cn(
               'pointer-events-none absolute z-10',
-              id === 'selection' && 'bg-brand/25',
+              id === 'selection' && 'bg-brand/15',
               id === 'selection' && isCursor && 'bg-primary'
             )}
             style={{
diff --git a/apps/web/src/components/ui/report/elements/Toolbar.tsx b/apps/web/src/components/ui/report/elements/Toolbar.tsx
index 04f99f287..02774714c 100644
--- a/apps/web/src/components/ui/report/elements/Toolbar.tsx
+++ b/apps/web/src/components/ui/report/elements/Toolbar.tsx
@@ -13,20 +13,23 @@ import {
   DropdownMenuSeparator
 } from '@/components/ui/dropdown-menu';
 import { Separator } from '@/components/ui/separator';
-import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
+import { TooltipBase, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
-export function Toolbar({
-  className,
-  ...props
-}: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
+export const Toolbar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof ToolbarPrimitive.Root>
+>(function Toolbar({ className, ...props }, ref) {
   return (
     <ToolbarPrimitive.Root
+      ref={ref}
       className={cn('relative flex items-center select-none', className)}
       {...props}
     />
   );
-}
+});
+
+Toolbar.displayName = 'Toolbar';
 
 export function ToolbarToggleGroup({
   className,
@@ -266,40 +269,45 @@ export function ToolbarGroup({ children, className }: React.ComponentProps<'div'
 type TooltipProps<T extends React.ElementType> = {
   tooltip?: React.ReactNode;
   tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
-  tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'children'>;
+  tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipBase>, 'children'>;
   tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
 } & React.ComponentProps<T>;
 
 function withTooltip<T extends React.ElementType>(Component: T) {
-  return function ExtendComponent({
-    tooltip,
-    tooltipContentProps,
-    tooltipProps,
-    tooltipTriggerProps,
-    ...props
-  }: TooltipProps<T>) {
-    const [mounted, setMounted] = React.useState(false);
+  const ExtendComponent = React.forwardRef<any, TooltipProps<T>>(
+    ({ tooltip, tooltipContentProps, tooltipProps, tooltipTriggerProps, ...props }, ref) => {
+      const [mounted, setMounted] = React.useState(false);
 
-    React.useEffect(() => {
-      setMounted(true);
-    }, []);
+      React.useEffect(() => {
+        setMounted(true);
+      }, []);
 
-    const component = <Component {...(props as React.ComponentProps<T>)} />;
+      const componentProps = {
+        ...props,
+        ref
+      };
 
-    if (tooltip && mounted) {
-      return (
-        <Tooltip {...tooltipProps}>
-          <TooltipTrigger asChild {...tooltipTriggerProps}>
-            {component}
-          </TooltipTrigger>
+      const component = React.createElement(Component, componentProps);
 
-          <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
-        </Tooltip>
-      );
+      if (tooltip && mounted) {
+        return (
+          <TooltipBase {...tooltipProps}>
+            <TooltipTrigger asChild {...tooltipTriggerProps}>
+              {component}
+            </TooltipTrigger>
+
+            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+          </TooltipBase>
+        );
+      }
+
+      return component;
     }
+  );
 
-    return component;
-  };
+  ExtendComponent.displayName = `withTooltip`;
+
+  return ExtendComponent;
 }
 
 function TooltipContent({