diff --git a/src/renderer/assets/icons/export-icon.svg b/src/renderer/assets/icons/export-icon.svg
new file mode 100644
index 000000000..81a2f0881
--- /dev/null
+++ b/src/renderer/assets/icons/export-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2344 8.74976V16.2498C15.2344 16.6642 15.0698 17.0616 14.7767 17.3546C14.4837 17.6476 14.0863 17.8123 13.6719 17.8123H2.42188C2.00747 17.8123 1.61005 17.6476 1.31702 17.3546C1.024 17.0616 0.859375 16.6642 0.859375 16.2498V8.74976C0.859375 8.33536 1.024 7.93793 1.31702 7.64491C1.61005 7.35188 2.00747 7.18726 2.42188 7.18726H3.98438C4.23302 7.18726 4.47147 7.28604 4.64729 7.46185C4.8231 7.63767 4.92188 7.87612 4.92188 8.12476C4.92188 8.3734 4.8231 8.61186 4.64729 8.78768C4.47147 8.96349 4.23302 9.06226 3.98438 9.06226H2.73438V15.9373H13.3594V9.06226H12.1094C11.8607 9.06226 11.6223 8.96349 11.4465 8.78768C11.2706 8.61186 11.1719 8.3734 11.1719 8.12476C11.1719 7.87612 11.2706 7.63767 11.4465 7.46185C11.6223 7.28604 11.8607 7.18726 12.1094 7.18726H13.6719C14.0863 7.18726 14.4837 7.35188 14.7767 7.64491C15.0698 7.93793 15.2344 8.33536 15.2344 8.74976ZM5.58516 5.66304L7.10938 4.14039V10.6248C7.10938 10.8734 7.20815 11.1119 7.38396 11.2877C7.55978 11.4635 7.79823 11.5623 8.04688 11.5623C8.29552 11.5623 8.53397 11.4635 8.70979 11.2877C8.8856 11.1119 8.98438 10.8734 8.98438 10.6248V4.14039L10.5086 5.66539C10.5958 5.75259 10.6993 5.82177 10.8133 5.86897C10.9272 5.91616 11.0493 5.94045 11.1727 5.94045C11.296 5.94045 11.4181 5.91616 11.532 5.86897C11.646 5.82177 11.7495 5.75259 11.8367 5.66539C11.9239 5.57818 11.9931 5.47465 12.0403 5.36071C12.0875 5.24677 12.1118 5.12465 12.1118 5.00133C12.1118 4.878 12.0875 4.75588 12.0403 4.64194C11.9931 4.528 11.9239 4.42447 11.8367 4.33726L8.71172 1.21226C8.62462 1.12486 8.52113 1.05552 8.40717 1.0082C8.29322 0.960881 8.17104 0.936523 8.04766 0.936523C7.92427 0.936523 7.80209 0.960881 7.68814 1.0082C7.57418 1.05552 7.47069 1.12486 7.38359 1.21226L4.25859 4.33726C4.17139 4.42447 4.10221 4.528 4.05502 4.64194C4.00782 4.75588 3.98353 4.878 3.98353 5.00133C3.98353 5.2504 4.08247 5.48927 4.25859 5.66539C4.43471 5.84151 4.67358 5.94045 4.92266 5.94045C5.17173 5.94045 5.4106 5.84151 5.58672 5.66539L5.58516 5.66304Z" fill="currentColor"/>
+</svg>
diff --git a/src/renderer/assets/icons/filter3-icon.svg b/src/renderer/assets/icons/filter3-icon.svg
new file mode 100644
index 000000000..4eca03b71
--- /dev/null
+++ b/src/renderer/assets/icons/filter3-icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3506 1.74297C17.2282 1.46613 17.028 1.23082 16.7743 1.06564C16.5206 0.900453 16.2244 0.812512 15.9217 0.8125H2.17172C1.86906 0.812529 1.57293 0.900459 1.31929 1.06561C1.06566 1.23075 0.865451 1.46601 0.74299 1.74279C0.620529 2.01957 0.581089 2.32595 0.629461 2.62472C0.677833 2.92349 0.811935 3.20178 1.01547 3.42578L1.02485 3.43672L6.23422 8.99609V14.875C6.23418 15.1579 6.31094 15.4355 6.4563 15.6781C6.60166 15.9208 6.81017 16.1195 7.05959 16.2529C7.30901 16.3864 7.58999 16.4496 7.87253 16.4359C8.15508 16.4222 8.4286 16.332 8.66391 16.175L11.1639 14.5086C11.378 14.3658 11.5534 14.1723 11.6747 13.9454C11.796 13.7185 11.8594 13.4651 11.8592 13.2078V8.99609L17.0678 3.43672L17.0772 3.42578C17.2809 3.2019 17.4151 2.92369 17.4637 2.62495C17.5122 2.32622 17.4729 2.01981 17.3506 1.74297ZM10.2413 7.98438C10.0772 8.15746 9.98531 8.38654 9.98422 8.625V13.0406L8.10922 14.2906V8.625C8.10899 8.38697 8.01821 8.15794 7.85532 7.98438L2.89282 2.6875H15.2006L10.2413 7.98438Z" fill="#currentColor"/>
+</svg>
diff --git a/src/renderer/assets/icons/import-icon.svg b/src/renderer/assets/icons/import-icon.svg
new file mode 100644
index 000000000..1b7dbfbed
--- /dev/null
+++ b/src/renderer/assets/icons/import-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8594 9.875V14.25C15.8594 14.6644 15.6948 15.0618 15.4017 15.3549C15.1087 15.6479 14.7113 15.8125 14.2969 15.8125H1.79688C1.38247 15.8125 0.985046 15.6479 0.692021 15.3549C0.398995 15.0618 0.234375 14.6644 0.234375 14.25V9.875C0.234375 9.62636 0.333147 9.3879 0.508962 9.21209C0.684778 9.03627 0.923235 8.9375 1.17188 8.9375C1.42052 8.9375 1.65897 9.03627 1.83479 9.21209C2.0106 9.3879 2.10938 9.62636 2.10938 9.875V13.9375H13.9844V9.875C13.9844 9.62636 14.0831 9.3879 14.259 9.21209C14.4348 9.03627 14.6732 8.9375 14.9219 8.9375C15.1705 8.9375 15.409 9.03627 15.5848 9.21209C15.7606 9.3879 15.8594 9.62636 15.8594 9.875ZM7.38359 10.5383C7.47069 10.6257 7.57418 10.695 7.68814 10.7423C7.80209 10.7897 7.92427 10.814 8.04766 10.814C8.17104 10.814 8.29322 10.7897 8.40717 10.7423C8.52113 10.695 8.62462 10.6257 8.71172 10.5383L11.8367 7.41328C12.0128 7.23716 12.1118 6.99829 12.1118 6.74922C12.1118 6.50015 12.0128 6.26128 11.8367 6.08516C11.6606 5.90904 11.4217 5.81009 11.1727 5.81009C10.9236 5.81009 10.6847 5.90904 10.5086 6.08516L8.98438 7.60938V1.125C8.98438 0.87636 8.8856 0.637903 8.70979 0.462087C8.53397 0.286272 8.29552 0.1875 8.04688 0.1875C7.79823 0.1875 7.55978 0.286272 7.38396 0.462087C7.20815 0.637903 7.10938 0.87636 7.10938 1.125V7.60938L5.58516 6.08672C5.40904 5.9106 5.17017 5.81166 4.92109 5.81166C4.67202 5.81166 4.43315 5.9106 4.25703 6.08672C4.08091 6.26284 3.98197 6.50171 3.98197 6.75078C3.98197 6.99985 4.08091 7.23872 4.25703 7.41484L7.38359 10.5383Z" fill="currentColor"/>
+</svg>
diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
index 8d01aee19..2cd1871a1 100644
--- a/src/renderer/assets/styles/components/annotations.scss
+++ b/src/renderer/assets/styles/components/annotations.scss
@@ -110,6 +110,11 @@
       color: var(--color-primary);
     }
 
+    .button_primary_blue:hover {
+      color: var(--color-secondary);
+      background-color: var(--color-blue);
+    }
+
     @include scrollbar_styling;
 
     &::-webkit-scrollbar-track {
@@ -137,20 +142,22 @@
     padding: 0 10px;
   }
 
+  &_line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: calc(100% - 50px);
+    gap: 20px;
+    margin-top: -35px;
+    border-right: 2px solid var(--color-extralight-grey);
+    padding-right: 10px;
+  }
+
   &_trigger_button {
     width: 30px;
     height: 30px;
     position: relative;
-    background-color: var(--color-extralight-grey);
     padding: 5px;
-    border-radius: 4px;
-    // box-shadow: 1px 0 5px var(--color-light-grey);
-    border: 1px solid var(--color-verylight-grey);
-
-    &:hover {
-      background-color: var(--color-verylight-grey-alt2);
-
-    }
 
     svg {
       width: 20px;
diff --git a/src/renderer/assets/styles/components/annotations.scss.d.ts b/src/renderer/assets/styles/components/annotations.scss.d.ts
index 3c8ffe5c7..56533053a 100644
--- a/src/renderer/assets/styles/components/annotations.scss.d.ts
+++ b/src/renderer/assets/styles/components/annotations.scss.d.ts
@@ -17,6 +17,7 @@ export declare const annotations_filter_button: string;
 export declare const annotations_filter_color: string;
 export declare const annotations_filter_container: string;
 export declare const annotations_filter_drawtype: string;
+export declare const annotations_filter_line: string;
 export declare const annotations_filter_nbOfFilters: string;
 export declare const annotations_filter_tag: string;
 export declare const annotations_filter_tagGroup: string;
@@ -33,6 +34,7 @@ export declare const CSS_END_components_annotations: string;
 export declare const CSS_START_components_annotations: string;
 export declare const docked_annotation_line: string;
 export declare const drawType_active: string;
+export declare const form_group: string;
 export declare const my_combobox_container: string;
 export declare const my_item: string;
 export declare const popover_dialog_reader: string;
diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx
index ba26988a3..472918d5c 100644
--- a/src/renderer/reader/components/ReaderMenu.tsx
+++ b/src/renderer/reader/components/ReaderMenu.tsx
@@ -19,20 +19,23 @@ import * as StylesCombobox from "readium-desktop/renderer/assets/styles/componen
 
 import classNames from "classnames";
 import * as React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
 import FocusLock from "react-focus-lock";
 import { isAudiobookFn } from "readium-desktop/common/isManifestType";
-// import {TextArea} from 'react-aria-components';
 
-import { IBookmarkState } from "readium-desktop/common/redux/states/bookmark";
-import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
-import * as SaveIcon from "readium-desktop/renderer/assets/icons/floppydisk-icon.svg";
-import * as ImportIcon from "readium-desktop/renderer/assets/icons/import.svg";
+import SVG from "readium-desktop/renderer/common/components/SVG";
+
+import * as SaveIcon from "readium-desktop/renderer/assets/icons/export-icon.svg";
+import * as ImportIcon from "readium-desktop/renderer/assets/icons/import-icon.svg";
 import * as DeleteIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg";
 import * as EditIcon from "readium-desktop/renderer/assets/icons/pen-icon.svg";
 import * as BookmarkIcon from "readium-desktop/renderer/assets/icons/bookmarkMultiple-icon.svg";
 import * as BookOpenIcon from "readium-desktop/renderer/assets/icons/bookOpen-icon.svg";
-
+import * as TocIcon from "readium-desktop/renderer/assets/icons/toc-icon.svg";
+import * as LandmarkIcon from "readium-desktop/renderer/assets/icons/landmark-icon.svg";
+import * as TargetIcon from "readium-desktop/renderer/assets/icons/target-icon.svg";
+import * as SearchIcon from "readium-desktop/renderer/assets/icons/search-icon.svg";
+import * as AnnotationIcon from "readium-desktop/renderer/assets/icons/annotations-icon.svg";
+import * as CalendarIcon from "readium-desktop/renderer/assets/icons/calendar-icon.svg";
 import * as DockLeftIcon from "readium-desktop/renderer/assets/icons/dockleft-icon.svg";
 import * as DockRightIcon from "readium-desktop/renderer/assets/icons/dockright-icon.svg";
 import * as DockModalIcon from "readium-desktop/renderer/assets/icons/dockmodal-icon.svg";
@@ -41,22 +44,32 @@ import * as ArrowRightIcon from "readium-desktop/renderer/assets/icons/baseline-
 import * as ArrowLeftIcon from "readium-desktop/renderer/assets/icons/baseline-arrow_left_ios-24px.svg";
 import * as ArrowLastIcon from "readium-desktop/renderer/assets/icons/arrowLast-icon.svg";
 import * as ArrowFirstIcon from "readium-desktop/renderer/assets/icons/arrowFirst-icon.svg";
-import * as Tabs from "@radix-ui/react-tabs";
-
-import * as TocIcon from "readium-desktop/renderer/assets/icons/toc-icon.svg";
-import * as LandmarkIcon from "readium-desktop/renderer/assets/icons/landmark-icon.svg";
-import * as TargetIcon from "readium-desktop/renderer/assets/icons/target-icon.svg";
-import * as SearchIcon from "readium-desktop/renderer/assets/icons/search-icon.svg";
-import * as AnnotationIcon from "readium-desktop/renderer/assets/icons/annotations-icon.svg";
-import * as CalendarIcon from "readium-desktop/renderer/assets/icons/calendar-icon.svg";
+import * as CheckIcon from "readium-desktop/renderer/assets/icons/singlecheck-icon.svg";
+import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg";
+import * as MenuIcon from "readium-desktop/renderer/assets/icons/filter3-icon.svg";
+import * as OptionsIcon from "readium-desktop/renderer/assets/icons/filter2-icon.svg";
+import * as SortIcon from "readium-desktop/renderer/assets/icons/sort-icon.svg";
+import * as HighLightIcon from "readium-desktop/renderer/assets/icons/highlight-icon.svg";
+import * as UnderLineIcon from "readium-desktop/renderer/assets/icons/underline-icon.svg";
+import * as TextStrikeThroughtIcon from "readium-desktop/renderer/assets/icons/TextStrikethrough-icon.svg";
+import * as TextOutlineIcon from "readium-desktop/renderer/assets/icons/TextOutline-icon.svg";
 // import * as DuplicateIcon from "readium-desktop/renderer/assets/icons/duplicate-icon.svg";
 
-import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState";
+import * as Tabs from "@radix-ui/react-tabs";
+import * as Popover from "@radix-ui/react-popover";
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import * as Dialog from "@radix-ui/react-dialog";
+import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox";
+import { MySelectProps, Select, SelectItem } from "readium-desktop/renderer/common/components/Select";
+import { ListBox, ListBoxItem, TextArea } from "react-aria-components";
+import type { Selection } from "react-aria-components";
+import { AnnotationEdit, annotationsColorsLight } from "./AnnotationEdit";
+import { TagGroup, TagList, Tag, Label } from "react-aria-components";
+// import {TextArea} from 'react-aria-components';
+// import { DialogTrigger as DialogTriggerReactAria, Popover as PopoverReactAria, Dialog as DialogReactAria } from "react-aria-components";
 
+import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState";
 import { Link } from "@r2-shared-js/models/publication-link";
-
-import SVG from "readium-desktop/renderer/common/components/SVG";
-
 import { ILink, TToc } from "../pdf/common/pdfReader.type";
 import { IReaderMenuProps } from "./options-values";
 import ReaderMenuSearch from "./ReaderMenuSearch";
@@ -64,43 +77,23 @@ import ReaderMenuSearch from "./ReaderMenuSearch";
 // import { SectionData } from "./sideMenu/sideMenuData";
 // import UpdateBookmarkForm from "./UpdateBookmarkForm";
 
-import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox";
-import { MySelectProps, Select, SelectItem } from "readium-desktop/renderer/common/components/Select";
 import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
 import { Publication as R2Publication } from "@r2-shared-js/models/publication";
 import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
 import { useDispatch } from "readium-desktop/renderer/common/hooks/useDispatch";
 import { Locator } from "@r2-shared-js/models/locator";
-// import { DialogTrigger as DialogTriggerReactAria, Popover as PopoverReactAria, Dialog as DialogReactAria } from "react-aria-components";
-import { ListBox, ListBoxItem, TextArea } from "react-aria-components";
-import { AnnotationEdit, annotationsColorsLight } from "./AnnotationEdit";
 import { IAnnotationState, IColor, TAnnotationState, TDrawType } from "readium-desktop/common/redux/states/renderer/annotation";
 import { annotationActions, readerActions } from "readium-desktop/common/redux/actions";
 import { readerLocalActionLocatorHrefChanged, readerLocalActionSetConfig } from "../redux/actions";
-
-import * as CheckIcon from "readium-desktop/renderer/assets/icons/singlecheck-icon.svg";
-import * as Popover from "@radix-ui/react-popover";
 import { useReaderConfig, useSaveReaderConfig } from "readium-desktop/renderer/common/hooks/useReaderConfig";
 import { ReaderConfig } from "readium-desktop/common/models/reader";
-import * as AlertDialog from "@radix-ui/react-alert-dialog";
-
-import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg";
-import * as MenuIcon from "readium-desktop/renderer/assets/icons/filter-icon.svg";
-import * as OptionsIcon from "readium-desktop/renderer/assets/icons/filter2-icon.svg";
-import * as SortIcon from "readium-desktop/renderer/assets/icons/sort-icon.svg";
-import * as HighLightIcon from "readium-desktop/renderer/assets/icons/highlight-icon.svg";
-import * as UnderLineIcon from "readium-desktop/renderer/assets/icons/underline-icon.svg";
-import * as TextStrikeThroughtIcon from "readium-desktop/renderer/assets/icons/TextStrikethrough-icon.svg";
-import * as TextOutlineIcon from "readium-desktop/renderer/assets/icons/TextOutline-icon.svg";
-import { TagGroup, TagList, Tag, Label } from "react-aria-components";
 import { ObjectKeys } from "readium-desktop/utils/object-keys-values";
-
-import type { Selection } from "react-aria-components";
 import { rgbToHex } from "readium-desktop/common/rgb";
 import { IReadiumAnnotationModelSet } from "readium-desktop/common/readium/annotation/annotationModel.type";
 import { convertAnnotationListToReadiumAnnotationSet } from "readium-desktop/common/readium/annotation/converter";
 import { ImportAnnotationsDialog } from "readium-desktop/renderer/common/components/ImportAnnotationsDialog";
-
+import { IBookmarkState } from "readium-desktop/common/redux/states/bookmark";
+import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
 
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -852,312 +845,326 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
 
     return (
         <>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "end", width: "100%", gap: "20px", marginTop: "-35px" }}>
-                <AlertDialog.Root>
-                    <AlertDialog.Trigger className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}>
-                        <SVG svg={TrashIcon} ariaHidden />
-                    </AlertDialog.Trigger>
-                    <AlertDialog.Portal>
-                        <AlertDialog.Overlay className={stylesAlertModals.AlertDialogOverlay} />
-                        <AlertDialog.Content className={stylesAlertModals.AlertDialogContent}>
-                            <AlertDialog.Title className={stylesAlertModals.AlertDialogTitle}>{__("dialog.deleteAnnotations")}</AlertDialog.Title>
-                            <AlertDialog.Description className={stylesAlertModals.AlertDialogDescription}>
-                                {__("dialog.deleteAnnotationsText", { annotationListLength: annotationList.length })}
-                            </AlertDialog.Description>
-                            <div className={stylesAlertModals.AlertDialogButtonContainer}>
-                                <AlertDialog.Cancel asChild>
-                                    <button className={stylesButtons.button_secondary_blue}>{__("dialog.cancel")}</button>
-                                </AlertDialog.Cancel>
-                                <AlertDialog.Action asChild>
-                                    <button className={stylesButtons.button_primary_blue} onClick={() => {
-                                        for (const [, annotation] of annotationList) {
-
-                                            dispatch(readerActions.annotation.pop.build(annotation));
-                                            setannotationItemEditedUUID("");
-                                        }
-
-                                        // reset filters
-                                        setTagArrayFilter(new Set([]));
-                                        setColorArrayFilter(new Set([]));
-                                        setDrawTypeArrayFilter(new Set([]));
-                                        setCreatorArrayFilter(new Set([]));
-                                    }} type="button">
-                                        <SVG ariaHidden svg={TrashIcon} />
-                                        {__("dialog.yes")}</button>
-                                </AlertDialog.Action>
-                            </div>
-                        </AlertDialog.Content>
-                    </AlertDialog.Portal>
-                </AlertDialog.Root>
-                <ImportAnnotationsDialog winId={winId}>
-                    <button className={stylesAnnotations.annotations_filter_trigger_button}
-                        onClick={() => {
-                            dispatch(annotationActions.importAnnotationSet.build(publicationView.identifier, winId));
-                        }}
-                        title={__("catalog.importAnnotation")}>
-                        <SVG svg={ImportIcon} />
-                    </button>
-                </ImportAnnotationsDialog>
-                <Popover.Root>
-                    <Popover.Trigger asChild>
-                        <button className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}
-                            title={__("catalog.exportAnnotation")}>
-                            <SVG svg={SaveIcon} />
-                        </button>
-                    </Popover.Trigger>
-                    <Popover.Portal>
-                        <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_sorting_container} style={{ maxHeight: Math.round(window.innerHeight / 2), padding: "15px 0"}}>
-                            <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
-                            <form
-                                className={stylesAnnotations.annotationsTitle_form_container}
-                                onSubmit={(e) => {
-                                    e.preventDefault();
-                                }}
-                            >
-                                <p>{__("reader.annotations.annotationsExport.description")}</p>
-                                <div className={stylesInputs.form_group}>
-                                    <label htmlFor="annotationsTitle">{__("reader.annotations.annotationsExport.title")}</label>
-                                    <input
-                                        type="text"
-                                        name="annotationsTitle"
-                                        id="annotationsTitle"
-                                        ref={annotationTitleRef}
-                                        className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE" />
-                                </div>
-                                <Popover.Close aria-label={__("catalog.export")} asChild>
-                                    <button type="submit" onClick={() => {
-                                        const annotations = annotationList.map(([, anno]) => {
-                                            const { creator } = anno;
-                                            if (creator?.id === creatorMyself.id) {
-                                                return { ...anno, creator: { ...creatorMyself, id: "urn:uuid:" + creatorMyself.id } };
-                                            }
-                                            return anno;
-                                        });
-                                        const title = annotationTitleRef?.current.value || "myAnnotationsSet";
-                                        let label = title;
-                                        label = label.trim();
-                                        label = label.replace(/[^a-z0-9_-]/gi, "_");
-                                        label = label.replace(/^_+|_+$/g, ""); // leading and trailing underscore
-                                        label = label.replace(/^\./, ""); // remove dot start
-                                        label = label.toLowerCase();
-                                        const contents = convertAnnotationListToReadiumAnnotationSet(annotations, publicationView, title);
-                                        downloadAnnotationJSON(contents, label);
-                                    }} className={stylesButtons.button_primary_blue}>
-                                        <SVG svg={SaveIcon} />
-                                        {__("catalog.export")}
-                                    </button>
-                                </Popover.Close>
-                            </form>
-                        </Popover.Content>
-                    </Popover.Portal>
-                </Popover.Root>
-                <Popover.Root>
-                    <Popover.Trigger asChild>
-                        <button aria-label="Menu" className={stylesAnnotations.annotations_filter_trigger_button}
-                            title={__("reader.annotations.sorting.sortingOptions")}>
-                            <SVG svg={SortIcon} />
-                        </button>
-                    </Popover.Trigger>
-                    <Popover.Portal>
-                        <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_sorting_container} style={{ maxHeight: Math.round(window.innerHeight / 2) }}>
-                            <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
-                            <ListBox
-                                selectedKeys={sortType}
-                                onSelectionChange={setSortType}
-                                selectionMode="multiple"
-                                selectionBehavior="replace"
-                                aria-label={__("reader.annotations.sorting.sortingOptions")}
-                            >
-                                <ListBoxItem id="progression" key="progression" aria-label="progression" className={({ isFocused, isSelected }) =>
-                                    classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
-                                    style={{ marginBottom: "5px" }}
+            <div className={stylesAnnotations.annotations_filter_line}>
+                <div style={{display: "flex", gap: "10px"}}>
+                    <Popover.Root>
+                        <Popover.Trigger asChild>
+                            <button aria-label="Menu" className={stylesAnnotations.annotations_filter_trigger_button}
+                                title={__("reader.annotations.sorting.sortingOptions")}>
+                                <SVG svg={SortIcon} />
+                            </button>
+                        </Popover.Trigger>
+                        <Popover.Portal>
+                            <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_sorting_container} style={{ maxHeight: Math.round(window.innerHeight / 2) }}>
+                                <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
+                                <ListBox
+                                    selectedKeys={sortType}
+                                    onSelectionChange={setSortType}
+                                    selectionMode="multiple"
+                                    selectionBehavior="replace"
+                                    aria-label={__("reader.annotations.sorting.sortingOptions")}
                                 >
-                                    {__("reader.annotations.sorting.progression")}
-                                </ListBoxItem>
-                                <ListBoxItem id="lastCreated" key="lastCreated" aria-label="lastCreated" className={({ isFocused, isSelected }) =>
-                                    classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
-                                    style={{ marginBottom: "5px" }}
+                                    <ListBoxItem id="progression" key="progression" aria-label="progression" className={({ isFocused, isSelected }) =>
+                                        classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
+                                        style={{ marginBottom: "5px" }}
+                                    >
+                                        {__("reader.annotations.sorting.progression")}
+                                    </ListBoxItem>
+                                    <ListBoxItem id="lastCreated" key="lastCreated" aria-label="lastCreated" className={({ isFocused, isSelected }) =>
+                                        classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
+                                        style={{ marginBottom: "5px" }}
+                                    >
+                                        {__("reader.annotations.sorting.lastcreated")}
+                                    </ListBoxItem>
+                                    <ListBoxItem id="lastModified" key="lastModified" aria-label="lastModified" className={({ isFocused, isSelected }) =>
+                                        classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
+                                    >
+                                        {__("reader.annotations.sorting.lastmodified")}
+                                    </ListBoxItem>
+                                </ListBox>
+                            </Popover.Content>
+                        </Popover.Portal>
+                    </Popover.Root>
+                    <Popover.Root>
+                        <Popover.Trigger asChild>
+                            <button aria-label="Menu" className={stylesAnnotations.annotations_filter_trigger_button}
+                                title={__("reader.annotations.filter.filterOptions")}>
+                                <SVG svg={MenuIcon} />
+                                {nbOfFilters > 0 ?
+                                    <p className={stylesAnnotations.annotations_filter_nbOfFilters} style={{ fontSize: nbOfFilters > 9 ? "10px" : "12px", paddingLeft: nbOfFilters > 9 ? "3px" : "4px" }}>{nbOfFilters}</p>
+                                    : <></>
+                                }
+                            </button>
+                        </Popover.Trigger>
+                        <Popover.Portal>
+                            <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_filter_container} style={{ maxHeight: Math.round(window.innerHeight / 2) }}>
+                                <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
+                                <TagGroup
+                                    selectionMode="multiple"
+                                    selectedKeys={tagArrayFilter}
+                                    onSelectionChange={setTagArrayFilter}
+                                    aria-label={__("reader.annotations.filter.filterByTag")}
+                                    style={{ marginBottom: "20px" }}
                                 >
-                                    {__("reader.annotations.sorting.lastcreated")}
-                                </ListBoxItem>
-                                <ListBoxItem id="lastModified" key="lastModified" aria-label="lastModified" className={({ isFocused, isSelected }) =>
-                                    classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")}
+                                    <details open id="annotationListTagDetails">
+                                        <summary className={stylesAnnotations.annotations_filter_tagGroup}>
+                                            <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByTag")}</Label>
+                                            <div style={{ display: "flex", gap: "10px" }}>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={tagArrayFilter === "all" ? stylesButtons.button_primary_blue : stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setTagArrayFilter("all");
+                                                        const detailsElement = document.getElementById("annotationListTagDetails") as HTMLDetailsElement;
+                                                        if (detailsElement) {
+                                                            detailsElement.open = true;
+                                                        }
+
+                                                    }}>
+                                                    {__("reader.annotations.filter.all")}
+                                                </button>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setTagArrayFilter(new Set([]));
+
+                                                    }}>
+                                                    {__("reader.annotations.filter.none")}
+                                                </button>
+                                            </div>
+                                        </summary>
+                                        <TagList items={selectTagOption} className={stylesAnnotations.annotations_filter_taglist}>
+                                            {(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.name} textValue={item.name}>{item.name}</Tag>}
+                                        </TagList>
+                                    </details>
+                                </TagGroup>
+                                <TagGroup
+                                    selectionMode="multiple"
+                                    selectedKeys={colorArrayFilter}
+                                    onSelectionChange={setColorArrayFilter}
+                                    aria-label={__("reader.annotations.filter.filterByColor")}
+                                    style={{ marginBottom: "20px" }}
                                 >
-                                    {__("reader.annotations.sorting.lastmodified")}
-                                </ListBoxItem>
-                            </ListBox>
-                        </Popover.Content>
-                    </Popover.Portal>
-                </Popover.Root>
-                <Popover.Root>
-                    <Popover.Trigger asChild>
-                        <button aria-label="Menu" className={stylesAnnotations.annotations_filter_trigger_button}
-                            title={__("reader.annotations.filter.filterOptions")}>
-                            <SVG svg={MenuIcon} />
-                            {nbOfFilters > 0 ?
-                                <p className={stylesAnnotations.annotations_filter_nbOfFilters} style={{ fontSize: nbOfFilters > 9 ? "10px" : "12px", paddingLeft: nbOfFilters > 9 ? "3px" : "4px" }}>{nbOfFilters}</p>
-                                : <></>
-                            }
-                        </button>
-                    </Popover.Trigger>
-                    <Popover.Portal>
-                        <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_filter_container} style={{ maxHeight: Math.round(window.innerHeight / 2) }}>
-                            <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
-                            <TagGroup
-                                selectionMode="multiple"
-                                selectedKeys={tagArrayFilter}
-                                onSelectionChange={setTagArrayFilter}
-                                aria-label={__("reader.annotations.filter.filterByTag")}
-                                style={{ marginBottom: "20px" }}
-                            >
-                                <details open id="annotationListTagDetails">
-                                    <summary className={stylesAnnotations.annotations_filter_tagGroup}>
-                                        <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByTag")}</Label>
-                                        <div style={{ display: "flex", gap: "10px" }}>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setTagArrayFilter("all");
-                                                    const detailsElement = document.getElementById("annotationListTagDetails") as HTMLDetailsElement;
-                                                    if (detailsElement) {
-                                                        detailsElement.open = true;
-                                                    }
+                                    <details open id="annotationListColorDetails">
+                                        <summary className={stylesAnnotations.annotations_filter_tagGroup}>
+                                            <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByColor")}</Label>
+                                            <div style={{ display: "flex", gap: "10px" }}>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={colorArrayFilter === "all" ? stylesButtons.button_primary_blue : stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setColorArrayFilter("all");
+                                                        const detailsElement = document.getElementById("annotationListColorDetails") as HTMLDetailsElement;
+                                                        if (detailsElement) {
+                                                            detailsElement.open = true;
+                                                        }
 
-                                                }}>
-                                                {__("reader.annotations.filter.all")}
-                                            </button>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setTagArrayFilter(new Set([]));
-
-                                                }}>
-                                                {__("reader.annotations.filter.none")}
-                                            </button>
-                                        </div>
-                                    </summary>
-                                    <TagList items={selectTagOption} className={stylesAnnotations.annotations_filter_taglist}>
-                                        {(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.name} textValue={item.name}>{item.name}</Tag>}
-                                    </TagList>
-                                </details>
-                            </TagGroup>
-                            <TagGroup
-                                selectionMode="multiple"
-                                selectedKeys={colorArrayFilter}
-                                onSelectionChange={setColorArrayFilter}
-                                aria-label={__("reader.annotations.filter.filterByColor")}
-                                style={{ marginBottom: "20px" }}
-                            >
-                                <details open id="annotationListColorDetails">
-                                    <summary className={stylesAnnotations.annotations_filter_tagGroup}>
-                                        <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByColor")}</Label>
-                                        <div style={{ display: "flex", gap: "10px" }}>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setColorArrayFilter("all");
-                                                    const detailsElement = document.getElementById("annotationListColorDetails") as HTMLDetailsElement;
-                                                    if (detailsElement) {
-                                                        detailsElement.open = true;
-                                                    }
+                                                    }}>
+                                                    {__("reader.annotations.filter.all")}
+                                                </button>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setColorArrayFilter(new Set([]));
+
+                                                    }}>
+                                                    {__("reader.annotations.filter.none")}
+                                                </button>
+                                            </div>
+                                        </summary>
+                                        <TagList items={annotationsColors} className={stylesAnnotations.annotations_filter_taglist}>
+                                            {(item) => <Tag className={stylesAnnotations.annotations_filter_color} style={{ backgroundColor: item.hex, outlineColor: item.hex }} id={item.hex} textValue={item.name}></Tag>}
+                                        </TagList>
+                                    </details>
+                                </TagGroup>
+                                <TagGroup
+                                    selectionMode="multiple"
+                                    selectedKeys={drawTypeArrayFilter}
+                                    onSelectionChange={setDrawTypeArrayFilter}
+                                    aria-label={__("reader.annotations.filter.filterByDrawtype")}
+                                    style={{ marginBottom: "20px" }}
+                                >
+                                    <details open id="annotationListDrawDetails">
+                                        <summary className={stylesAnnotations.annotations_filter_tagGroup}>
+                                            <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByDrawtype")}</Label>
+                                            <div style={{ display: "flex", gap: "10px" }}>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={drawTypeArrayFilter === "all" ? stylesButtons.button_primary_blue : stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setDrawTypeArrayFilter("all");
+                                                        const detailsElement = document.getElementById("annotationListDrawDetails") as HTMLDetailsElement;
+                                                        if (detailsElement) {
+                                                            detailsElement.open = true;
+                                                        }
 
-                                                }}>
-                                                {__("reader.annotations.filter.all")}
-                                            </button>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setColorArrayFilter(new Set([]));
-
-                                                }}>
-                                                {__("reader.annotations.filter.none")}
-                                            </button>
-                                        </div>
-                                    </summary>
-                                    <TagList items={annotationsColors} className={stylesAnnotations.annotations_filter_taglist}>
-                                        {(item) => <Tag className={stylesAnnotations.annotations_filter_color} style={{ backgroundColor: item.hex, outlineColor: item.hex }} id={item.hex} textValue={item.name}></Tag>}
-                                    </TagList>
-                                </details>
-                            </TagGroup>
-                            <TagGroup
-                                selectionMode="multiple"
-                                selectedKeys={drawTypeArrayFilter}
-                                onSelectionChange={setDrawTypeArrayFilter}
-                                aria-label={__("reader.annotations.filter.filterByDrawtype")}
-                                style={{ marginBottom: "20px" }}
-                            >
-                                <details open id="annotationListDrawDetails">
-                                    <summary className={stylesAnnotations.annotations_filter_tagGroup}>
-                                        <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByDrawtype")}</Label>
-                                        <div style={{ display: "flex", gap: "10px" }}>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setDrawTypeArrayFilter("all");
-                                                    const detailsElement = document.getElementById("annotationListDrawDetails") as HTMLDetailsElement;
-                                                    if (detailsElement) {
-                                                        detailsElement.open = true;
-                                                    }
+                                                    }}>
+                                                    {__("reader.annotations.filter.all")}
+                                                </button>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setDrawTypeArrayFilter(new Set([]));
+
+                                                    }}>
+                                                    {__("reader.annotations.filter.none")}
+                                                </button>
+                                            </div>
+                                        </summary>
+                                        <TagList items={selectDrawtypesOptions} className={stylesAnnotations.annotations_filter_taglist}>
+                                            {(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.name}><SVG svg={item.svg} /></Tag>}
+                                        </TagList>
+                                    </details>
+                                </TagGroup>
+                                <TagGroup
+                                    selectionMode="multiple"
+                                    selectedKeys={creatorArrayFilter}
+                                    onSelectionChange={setCreatorArrayFilter}
+                                    aria-label={__("reader.annotations.filter.filterByCreator")}
+                                    style={{ marginBottom: "20px" }}
+                                >
+                                    <details id="annotationListCreator">
+                                        <summary className={stylesAnnotations.annotations_filter_tagGroup} style={{pointerEvents : selectCreatorOptions.length < 2 ? "none": "auto", opacity:  selectCreatorOptions.length < 2 ? "0.5" : "1"}}>
+                                            <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByCreator")}</Label>
+                                            <div style={{ display: "flex", gap: "10px" }}>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={creatorArrayFilter === "all" ? stylesButtons.button_primary_blue : stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setCreatorArrayFilter("all");
+                                                        const detailsElement = document.getElementById("annotationListCreator") as HTMLDetailsElement;
+                                                        if (detailsElement) {
+                                                            detailsElement.open = true;
+                                                        }
 
-                                                }}>
-                                                {__("reader.annotations.filter.all")}
-                                            </button>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setDrawTypeArrayFilter(new Set([]));
-
-                                                }}>
-                                                {__("reader.annotations.filter.none")}
-                                            </button>
-                                        </div>
-                                    </summary>
-                                    <TagList items={selectDrawtypesOptions} className={stylesAnnotations.annotations_filter_taglist}>
-                                        {(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.name}><SVG svg={item.svg} /></Tag>}
-                                    </TagList>
-                                </details>
-                            </TagGroup>
-                            <TagGroup
-                                selectionMode="multiple"
-                                selectedKeys={creatorArrayFilter}
-                                onSelectionChange={setCreatorArrayFilter}
-                                aria-label={__("reader.annotations.filter.filterByCreator")}
-                                style={{ marginBottom: "20px" }}
-                            >
-                                <details id="annotationListCreator">
-                                    <summary className={stylesAnnotations.annotations_filter_tagGroup} style={{pointerEvents : selectCreatorOptions.length < 2 ? "none": "auto", opacity:  selectCreatorOptions.length < 2 ? "0.5" : "1"}}>
-                                        <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByCreator")}</Label>
-                                        <div style={{ display: "flex", gap: "10px" }}>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setCreatorArrayFilter("all");
-                                                    const detailsElement = document.getElementById("annotationListCreator") as HTMLDetailsElement;
-                                                    if (detailsElement) {
-                                                        detailsElement.open = true;
-                                                    }
+                                                    }}>
+                                                    {__("reader.annotations.filter.all")}
+                                                </button>
+                                                <button
+                                                    style={{ width: "fit-content", minWidth: "unset"}}
+                                                    className={stylesButtons.button_secondary_blue}
+                                                    onClick={() => {
+                                                        setCreatorArrayFilter(new Set([]));
+
+                                                    }}>
+                                                    {__("reader.annotations.filter.none")}
+                                                </button>
+                                            </div>
+                                        </summary>
+                                        <TagList items={selectCreatorOptions} className={stylesAnnotations.annotations_filter_taglist}  style={{margin : selectCreatorOptions.length < 2 ? "0": "20px 0"}}>
+                                            {(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.name} textValue={item.name}>{item.name}</Tag>}
+                                        </TagList>
+                                    </details>
+                                </TagGroup>
+                            </Popover.Content>
+                        </Popover.Portal>
+                    </Popover.Root>
+                </div>
+                <div style={{display: "flex", gap: "10px"}}>
+                    <ImportAnnotationsDialog winId={winId}>
+                        <button className={stylesAnnotations.annotations_filter_trigger_button}
+                            onClick={() => {
+                                dispatch(annotationActions.importAnnotationSet.build(publicationView.identifier, winId));
+                            }}
+                            title={__("catalog.importAnnotation")}>
+                            <SVG svg={ImportIcon} />
+                        </button>
+                    </ImportAnnotationsDialog>
 
-                                                }}>
-                                                {__("reader.annotations.filter.all")}
-                                            </button>
-                                            <button
-                                                style={{ padding: "6px" }}
-                                                onClick={() => {
-                                                    setCreatorArrayFilter(new Set([]));
-
-                                                }}>
-                                                {__("reader.annotations.filter.none")}
-                                            </button>
-                                        </div>
-                                    </summary>
-                                    <TagList items={selectCreatorOptions} className={stylesAnnotations.annotations_filter_taglist}  style={{margin : selectCreatorOptions.length < 2 ? "0": "20px 0"}}>
-                                        {(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.name} textValue={item.name}>{item.name}</Tag>}
-                                    </TagList>
-                                </details>
-                            </TagGroup>
-                        </Popover.Content>
-                    </Popover.Portal>
-                </Popover.Root>
+                    <Popover.Root>
+                        <Popover.Trigger asChild>
+                            <button className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}
+                                title={__("catalog.exportAnnotation")}>
+                                <SVG svg={SaveIcon} />
+                            </button>
+                        </Popover.Trigger>
+                        <Popover.Portal>
+                            <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_sorting_container} style={{ maxHeight: Math.round(window.innerHeight / 2), padding: "15px 0"}}>
+                                <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
+                                <form
+                                    className={stylesAnnotations.annotationsTitle_form_container}
+                                    onSubmit={(e) => {
+                                        e.preventDefault();
+                                    }}
+                                >
+                                    <p>{__("reader.annotations.annotationsExport.description")}</p>
+                                    <div className={stylesInputs.form_group}>
+                                        <label htmlFor="annotationsTitle">{__("reader.annotations.annotationsExport.title")}</label>
+                                        <input
+                                            type="text"
+                                            name="annotationsTitle"
+                                            id="annotationsTitle"
+                                            ref={annotationTitleRef}
+                                            className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE" />
+                                    </div>
+                                    <Popover.Close aria-label={__("catalog.export")} asChild>
+                                        <button type="submit" onClick={() => {
+                                            const annotations = annotationList.map(([, anno]) => {
+                                                const { creator } = anno;
+                                                if (creator?.id === creatorMyself.id) {
+                                                    return { ...anno, creator: { ...creatorMyself, id: "urn:uuid:" + creatorMyself.id } };
+                                                }
+                                                return anno;
+                                            });
+                                            const title = annotationTitleRef?.current.value || "myAnnotationsSet";
+                                            let label = title;
+                                            label = label.trim();
+                                            label = label.replace(/[^a-z0-9_-]/gi, "_");
+                                            label = label.replace(/^_+|_+$/g, ""); // leading and trailing underscore
+                                            label = label.replace(/^\./, ""); // remove dot start
+                                            label = label.toLowerCase();
+                                            const contents = convertAnnotationListToReadiumAnnotationSet(annotations, publicationView, title);
+                                            downloadAnnotationJSON(contents, label);
+                                        }} className={stylesButtons.button_primary_blue}>
+                                            <SVG svg={SaveIcon} />
+                                            {__("catalog.export")}
+                                        </button>
+                                    </Popover.Close>
+                                </form>
+                            </Popover.Content>
+                        </Popover.Portal>
+                    </Popover.Root>
+
+                    <AlertDialog.Root>
+                        <AlertDialog.Trigger className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}>
+                            <SVG svg={TrashIcon} ariaHidden />
+                        </AlertDialog.Trigger>
+                        <AlertDialog.Portal>
+                            <AlertDialog.Overlay className={stylesAlertModals.AlertDialogOverlay} />
+                            <AlertDialog.Content className={stylesAlertModals.AlertDialogContent}>
+                                <AlertDialog.Title className={stylesAlertModals.AlertDialogTitle}>{__("dialog.deleteAnnotations")}</AlertDialog.Title>
+                                <AlertDialog.Description className={stylesAlertModals.AlertDialogDescription}>
+                                    {__("dialog.deleteAnnotationsText", { annotationListLength: annotationList.length })}
+                                </AlertDialog.Description>
+                                <div className={stylesAlertModals.AlertDialogButtonContainer}>
+                                    <AlertDialog.Cancel asChild>
+                                        <button className={stylesButtons.button_secondary_blue}>{__("dialog.cancel")}</button>
+                                    </AlertDialog.Cancel>
+                                    <AlertDialog.Action asChild>
+                                        <button className={stylesButtons.button_primary_blue} onClick={() => {
+                                            for (const [, annotation] of annotationList) {
+
+                                                dispatch(readerActions.annotation.pop.build(annotation));
+                                                setannotationItemEditedUUID("");
+                                            }
+
+                                            // reset filters
+                                            setTagArrayFilter(new Set([]));
+                                            setColorArrayFilter(new Set([]));
+                                            setDrawTypeArrayFilter(new Set([]));
+                                            setCreatorArrayFilter(new Set([]));
+                                        }} type="button">
+                                            <SVG ariaHidden svg={TrashIcon} />
+                                            {__("dialog.yes")}</button>
+                                    </AlertDialog.Action>
+                                </div>
+                            </AlertDialog.Content>
+                        </AlertDialog.Portal>
+                    </AlertDialog.Root>
+                </div>
             </div>
             <div className={stylesAnnotations.separator} />
             {annotationsPagedArray.map(([timestamp, annotationItem], _i) =>
@@ -2325,7 +2332,7 @@ export const ReaderMenu: React.FC<IBaseProps> = (props) => {
                     <Tabs.Content value="tab-annotation" tabIndex={-1} id={"readerMenu_tabs-tab-annotation"} className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE">
                         <TabHeader />
                         <div className={classNames(stylesSettings.settings_tab, stylesAnnotations.annotations_tab)}>
-
+                            <div style={{width: "100%", display: "flex", justifyContent: "end"}}>
                             <Popover.Root>
                                 <Popover.Trigger className={stylesAnnotations.annotations_filter_trigger_button}>
                                     <SVG ariaHidden svg={OptionsIcon} title={__("reader.annotations.annotationsOptions")} />
@@ -2465,6 +2472,7 @@ export const ReaderMenu: React.FC<IBaseProps> = (props) => {
                                     </Popover.Content>
                                 </Popover.Portal>
                             </Popover.Root>
+                            </div>
 
                             <AnnotationList goToLocator={goToLocator} annotationUUIDFocused={annotationUUID} resetAnnotationUUID={resetAnnotationUUID} doFocus={doFocus} popoverBoundary={popoverBoundary.current} />
                         </div>