diff --git a/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue b/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue
index dbc0832..090a04d 100644
--- a/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue
+++ b/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue
@@ -858,22 +858,35 @@ function highlightTextNodes(root: HTMLElement, terms: string[]): number {
                   />
                   <template #content>
                     <UFieldGroup size="sm" orientation="horizontal" class="bg-white p-0 rounded-md shadow-md">
-                      <UButton
-                        v-if="hit.document.text"
-                        icon="ph-note-pencil"
-                        variant="ghost"
-                        color="neutral"
-                        size="lg"
-                        @click="addNote(hit.document.id)"
-                      ></UButton>
-                      <UButton
-                        v-if="hit.document.text"
-                        icon="ph-highlighter"
-                        variant="ghost"
-                        color="neutral"
-                        size="lg"
-                        @click="highlightParagraph(hit.document.id)"
-                      ></UButton>
+                      <UPopover>
+                        <UButton
+                          v-if="hit.document.text"
+                          icon="ph-note-pencil"
+                          variant="ghost"
+                          color="neutral"
+                          size="lg"
+                          @click="addNote(hit.document.id)"
+                        ></UButton>
+
+                        <template #content>
+                          <UEditor />
+                        </template>
+                      </UPopover>
+
+                      <UPopover>
+                        <UButton
+                          v-if="hit.document.text"
+                          icon="ph-highlighter"
+                          variant="ghost"
+                          color="neutral"
+                          size="lg"
+                          @click="highlightParagraph(hit.document.id)"
+                        ></UButton>
+
+                        <template #content>
+                          <UColorPicker />
+                        </template>
+                      </UPopover>
                       <UButton
                         v-if="hit.document.text"
                         icon="ph-copy"
diff --git a/app/utils/textUtilities.ts b/app/utils/textUtilities.ts
index a246a60..61d8624 100644
--- a/app/utils/textUtilities.ts
+++ b/app/utils/textUtilities.ts
@@ -1,12 +1,30 @@
 /* Copy to Clipboard */
-export async function copyToClipboard(textToCopy: string, type: string, id: string) {
+export async function copyToClipboard() {
   const toast = useToast()
 
+  const selection = window.getSelection()
+
+  const container = document.createElement('div')
+  const range = selection?.getRangeAt(0)
+  container.appendChild(range.cloneContents())
+
+  const htmlOutput = container.innerHTML
+  const textOutput = selection?.toString()
+
   try {
-    await navigator.clipboard.writeText(textToCopy)
+    // Modern Clipboard API requires ClipboardItem
+    const clipboardItem = new ClipboardItem({
+      'text/html': new Blob([htmlOutput], { type: 'text/html' }),
+      'text/plain': new Blob([textOutput], { type: 'text/plain' })
+    })
+
+    await navigator.clipboard.write([clipboardItem])
+
+    window.getSelection()?.removeAllRanges()
+
     toast.add({
       title: 'Texto copiado!',
-      description: `${textToCopy}`,
+      description: `${textOutput}`,
       icon: 'ph-clipboard-text',
       color: type == 'activities' ? 'success' : 'info'
     })