diff --git a/package.json b/package.json
index 222d6b9..5ea8265 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/attaches",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "keywords": [
     "codex editor",
     "attaches",
diff --git a/src/index.css b/src/index.css
index dd9c5a2..ef00de0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 .cdx-attaches {
   --color-line: #EFF0F1;
+  --color-line--hover: #e7e8e9;
   --color-bg: #fff;
   --color-bg-secondary: #F8F8F8;
   --color-bg-secondary--hover: #f2f2f2;
@@ -12,6 +13,11 @@
     border: 1px solid var(--color-line);
     border-radius: 7px;
     background: var(--color-bg);
+    text-decoration: none !important;
+
+    &[href]:hover, &[href]:focus {
+      --color-line: var(--color-line--hover);
+    }
 
     ^&__file-info {
       display: grid;
diff --git a/src/index.js b/src/index.js
index 0af7008..c73d096 100644
--- a/src/index.js
+++ b/src/index.js
@@ -245,7 +245,9 @@ export default class AttachesTool {
   render() {
     const holder = make('div', this.CSS.baseClass);
 
-    this.nodes.wrapper = make('div', this.CSS.wrapper);
+    // Make the whole box clickable in read-only mode
+    this.nodes.wrapper = make(this.readOnly ? 'a' : 'div', this.CSS.wrapper,
+                              this.readOnly ? { href: this.data.file.url, target: '_blank' } : {});
 
     if (this.pluginHasData()) {
       this.showFileData();
@@ -437,7 +439,7 @@ export default class AttachesTool {
     this.nodes.wrapper.appendChild(fileInfo);
 
     if (file.url !== undefined) {
-      const downloadIcon = make('a', this.CSS.downloadButton, {
+      const downloadIcon = make(this.readOnly ? 'span' : 'a', this.CSS.downloadButton, {
         innerHTML: IconChevronDown,
         href: file.url,
         target: '_blank',