diff --git a/package-lock.json b/package-lock.json
index 6ece0030e..bff08c78b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.5",
         "@xmldom/xmldom": "^0.8.10",
         "classnames": "^2.5.1",
         "commonmark": "^0.30.0",
@@ -3895,6 +3896,329 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@redux-devtools/extension": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
@@ -5983,6 +6307,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -12500,6 +12835,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -14299,6 +14642,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/inversify": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/inversify/-/inversify-6.0.2.tgz",
@@ -21546,6 +21897,51 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.21.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
@@ -21576,6 +21972,28 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-svg-core": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/react-svg-core/-/react-svg-core-3.0.3.tgz",
diff --git a/package.json b/package.json
index 7f68f2aef..bdfa5f408 100644
--- a/package.json
+++ b/package.json
@@ -251,6 +251,7 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@xmldom/xmldom": "^0.8.10",
     "classnames": "^2.5.1",
     "commonmark": "^0.30.0",
diff --git a/src/renderer/assets/icons/SaveAs-icon.svg b/src/renderer/assets/icons/SaveAs-icon.svg
new file mode 100644
index 000000000..0f6087715
--- /dev/null
+++ b/src/renderer/assets/icons/SaveAs-icon.svg
@@ -0,0 +1,10 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_142_7376)">
+<path d="M2.79336 3.94236C2.7053 3.8543 2.65583 3.73486 2.65583 3.61033C2.65583 3.48579 2.7053 3.36636 2.79336 3.2783C2.88142 3.19024 3.00085 3.14076 3.12539 3.14076C3.24993 3.14076 3.36936 3.19024 3.45742 3.2783L4.53125 4.35291V1.42322C4.53125 1.2989 4.58064 1.17967 4.66854 1.09176C4.75645 1.00385 4.87568 0.954468 5 0.954468C5.12432 0.954468 5.24355 1.00385 5.33146 1.09176C5.41936 1.17967 5.46875 1.2989 5.46875 1.42322V4.35291L6.54336 3.27791C6.63142 3.18985 6.75085 3.14037 6.87539 3.14037C6.99993 3.14037 7.11936 3.18985 7.20742 3.27791C7.29548 3.36597 7.34495 3.4854 7.34495 3.60994C7.34495 3.73447 7.29548 3.85391 7.20742 3.94197L5.33242 5.81697C5.28887 5.86067 5.23713 5.89534 5.18015 5.919C5.12317 5.94266 5.06208 5.95484 5.00039 5.95484C4.9387 5.95484 4.87761 5.94266 4.82063 5.919C4.76365 5.89534 4.71191 5.86067 4.66836 5.81697L2.79336 3.94236ZM8.75 5.01697H7.34375C7.21943 5.01697 7.1002 5.06635 7.01229 5.15426C6.92439 5.24217 6.875 5.3614 6.875 5.48572C6.875 5.61004 6.92439 5.72927 7.01229 5.81717C7.1002 5.90508 7.21943 5.95447 7.34375 5.95447H8.59375V8.14197H1.40625V5.95447H2.65625C2.78057 5.95447 2.8998 5.90508 2.98771 5.81717C3.07561 5.72927 3.125 5.61004 3.125 5.48572C3.125 5.3614 3.07561 5.24217 2.98771 5.15426C2.8998 5.06635 2.78057 5.01697 2.65625 5.01697H1.25C1.0428 5.01697 0.844086 5.09928 0.697573 5.24579C0.55106 5.3923 0.46875 5.59102 0.46875 5.79822V8.29822C0.46875 8.50542 0.55106 8.70413 0.697573 8.85065C0.844086 8.99716 1.0428 9.07947 1.25 9.07947H8.75C8.9572 9.07947 9.15591 8.99716 9.30243 8.85065C9.44894 8.70413 9.53125 8.50542 9.53125 8.29822V5.79822C9.53125 5.59102 9.44894 5.3923 9.30243 5.24579C9.15591 5.09928 8.9572 5.01697 8.75 5.01697ZM7.96875 7.04822C7.96875 6.9246 7.93209 6.80377 7.86342 6.70099C7.79474 6.59821 7.69713 6.5181 7.58293 6.47079C7.46872 6.42349 7.34306 6.41111 7.22182 6.43523C7.10058 6.45934 6.98922 6.51887 6.90181 6.60628C6.8144 6.69368 6.75487 6.80505 6.73076 6.92629C6.70664 7.04752 6.71902 7.17319 6.76632 7.2874C6.81363 7.4016 6.89374 7.49921 6.99652 7.56789C7.0993 7.63656 7.22014 7.67322 7.34375 7.67322C7.50951 7.67322 7.66848 7.60737 7.78569 7.49016C7.9029 7.37295 7.96875 7.21398 7.96875 7.04822Z" fill="#1053C8"/>
+</g>
+<defs>
+<clipPath id="clip0_142_7376">
+<rect width="10" height="10" fill="white" transform="translate(0 0.485718)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/renderer/assets/icons/addTag-icon.svg b/src/renderer/assets/icons/addTag-icon.svg
new file mode 100644
index 000000000..ecd0500d6
--- /dev/null
+++ b/src/renderer/assets/icons/addTag-icon.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.61524 4.20235L4.73555 0.32266C4.66322 0.249848 4.57714 0.192121 4.48233 0.152827C4.38751 0.113533 4.28584 0.0934538 4.18321 0.0937533H0.562503C0.438183 0.0937533 0.318955 0.143139 0.231047 0.231047C0.143139 0.318955 0.0937533 0.438183 0.0937533 0.562503V4.18321C0.0934538 4.28584 0.113533 4.38751 0.152827 4.48233C0.192121 4.57714 0.249848 4.66322 0.32266 4.73555L4.20235 8.61524C4.34885 8.7617 4.54753 8.84398 4.75469 8.84398C4.96185 8.84398 5.16053 8.7617 5.30703 8.61524L8.61524 5.30703C8.7617 5.16053 8.84398 4.96185 8.84398 4.75469C8.84398 4.54753 8.7617 4.34885 8.61524 4.20235ZM4.75469 7.8418L1.03125 4.11719V1.03125H4.11719L7.84063 4.75469L4.75469 7.8418ZM2.90625 2.28125C2.90625 2.40487 2.8696 2.5257 2.80092 2.62848C2.73225 2.73127 2.63463 2.81137 2.52043 2.85868C2.40623 2.90598 2.28056 2.91836 2.15932 2.89424C2.03808 2.87013 1.92672 2.8106 1.83931 2.72319C1.7519 2.63579 1.69238 2.52442 1.66826 2.40318C1.64415 2.28195 1.65652 2.15628 1.70383 2.04208C1.75113 1.92787 1.83124 1.83026 1.93402 1.76158C2.0368 1.69291 2.15764 1.65625 2.28125 1.65625C2.44701 1.65625 2.60598 1.7221 2.72319 1.83931C2.84041 1.95652 2.90625 2.11549 2.90625 2.28125Z" fill="#FEFEFE"/>
+</svg>
diff --git a/src/renderer/assets/icons/chevron-down.svg b/src/renderer/assets/icons/chevron-down.svg
index 1f0b8bc70..38e033c8c 100644
--- a/src/renderer/assets/icons/chevron-down.svg
+++ b/src/renderer/assets/icons/chevron-down.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icons/chevron-up.svg b/src/renderer/assets/icons/chevron-up.svg
new file mode 100644
index 000000000..3e06aada7
--- /dev/null
+++ b/src/renderer/assets/icons/chevron-up.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 15L12 9L18 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icons/followLink-icon.svg b/src/renderer/assets/icons/followLink-icon.svg
new file mode 100644
index 000000000..ac217d535
--- /dev/null
+++ b/src/renderer/assets/icons/followLink-icon.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.6875 4.375C9.6875 4.52418 9.62824 4.66726 9.52275 4.77275C9.41726 4.87824 9.27418 4.9375 9.125 4.9375C8.97582 4.9375 8.83274 4.87824 8.72725 4.77275C8.62176 4.66726 8.5625 4.52418 8.5625 4.375V2.73438L5.77297 5.52391C5.6673 5.62958 5.52397 5.68894 5.37453 5.68894C5.22509 5.68894 5.08177 5.62958 4.97609 5.52391C4.87042 5.41823 4.81106 5.27491 4.81106 5.12547C4.81106 4.97603 4.87042 4.8327 4.97609 4.72703L7.76562 1.9375H6.125C5.97582 1.9375 5.83274 1.87824 5.72725 1.77275C5.62176 1.66726 5.5625 1.52418 5.5625 1.375C5.5625 1.22582 5.62176 1.08274 5.72725 0.977252C5.83274 0.871763 5.97582 0.8125 6.125 0.8125H9.125C9.27418 0.8125 9.41726 0.871763 9.52275 0.977252C9.62824 1.08274 9.6875 1.22582 9.6875 1.375V4.375ZM7.625 5.5C7.47582 5.5 7.33274 5.55926 7.22725 5.66475C7.12176 5.77024 7.0625 5.91332 7.0625 6.0625V9.0625H1.4375V3.4375H4.4375C4.58668 3.4375 4.72976 3.37824 4.83525 3.27275C4.94074 3.16726 5 3.02418 5 2.875C5 2.72582 4.94074 2.58274 4.83525 2.47725C4.72976 2.37176 4.58668 2.3125 4.4375 2.3125H1.25C1.00136 2.3125 0.762903 2.41127 0.587087 2.58709C0.411272 2.7629 0.3125 3.00136 0.3125 3.25V9.25C0.3125 9.49864 0.411272 9.7371 0.587087 9.91291C0.762903 10.0887 1.00136 10.1875 1.25 10.1875H7.25C7.49864 10.1875 7.7371 10.0887 7.91291 9.91291C8.08873 9.7371 8.1875 9.49864 8.1875 9.25V6.0625C8.1875 5.91332 8.12824 5.77024 8.02275 5.66475C7.91726 5.55926 7.77418 5.5 7.625 5.5Z" fill="#1053C8"/>
+</svg>
diff --git a/src/renderer/assets/icons/link-icon.svg b/src/renderer/assets/icons/link-icon.svg
new file mode 100644
index 000000000..b9bc5d463
--- /dev/null
+++ b/src/renderer/assets/icons/link-icon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.10179 7.10252L7.10179 4.10252C7.15411 4.0502 7.21623 4.00869 7.2846 3.98038C7.35296 3.95206 7.42623 3.93748 7.50023 3.93748C7.57422 3.93748 7.6475 3.95206 7.71586 3.98038C7.78423 4.00869 7.84634 4.0502 7.89867 4.10252C7.95099 4.15485 7.9925 4.21696 8.02081 4.28533C8.04913 4.35369 8.0637 4.42696 8.0637 4.50096C8.0637 4.57496 8.04913 4.64823 8.02081 4.71659C7.9925 4.78496 7.95099 4.84707 7.89867 4.8994L4.89867 7.8994C4.79299 8.00507 4.64967 8.06444 4.50023 8.06444C4.35078 8.06444 4.20746 8.00507 4.10179 7.8994C3.99612 7.79372 3.93675 7.6504 3.93675 7.50096C3.93675 7.35152 3.99612 7.20819 4.10179 7.10252ZM10.2424 1.75877C9.71445 1.232 8.99909 0.936157 8.25328 0.936157C7.50746 0.936157 6.7921 1.232 6.26413 1.75877L4.85226 3.16924C4.74659 3.27491 4.68722 3.41824 4.68722 3.56768C4.68722 3.64167 4.7018 3.71495 4.73011 3.78331C4.75843 3.85167 4.79994 3.91379 4.85226 3.96612C4.90458 4.01844 4.9667 4.05994 5.03506 4.08826C5.10343 4.11658 5.1767 4.13115 5.2507 4.13115C5.40014 4.13115 5.54346 4.07179 5.64913 3.96612L7.05867 2.55705C7.37519 2.24047 7.8045 2.06259 8.25217 2.06255C8.69984 2.06251 9.12919 2.2403 9.44578 2.55682C9.76236 2.87334 9.94024 3.30265 9.94028 3.75032C9.94032 4.19799 9.76253 4.62735 9.44601 4.94393L8.0346 6.35252C7.98228 6.40485 7.94077 6.46696 7.91246 6.53533C7.88414 6.60369 7.86957 6.67696 7.86957 6.75096C7.86957 6.82496 7.88414 6.89823 7.91246 6.96659C7.94077 7.03496 7.98228 7.09707 8.0346 7.1494C8.08693 7.20172 8.14904 7.24323 8.21741 7.27154C8.28577 7.29986 8.35904 7.31444 8.43304 7.31444C8.50704 7.31444 8.58031 7.29986 8.64867 7.27154C8.71704 7.24323 8.77915 7.20172 8.83148 7.1494L10.2415 5.74033C10.7685 5.21205 11.0644 4.4962 11.0641 3.74997C11.0639 3.00373 10.7675 2.28809 10.2401 1.76018L10.2424 1.75877ZM6.35273 8.0344L4.9432 9.4444C4.78644 9.60112 4.60035 9.72544 4.39555 9.81024C4.19075 9.89505 3.97126 9.93869 3.74959 9.93867C3.52793 9.93864 3.30844 9.89496 3.10366 9.81012C2.89888 9.72527 2.71281 9.60092 2.55609 9.44416C2.23957 9.12758 2.06177 8.69823 2.06182 8.25056C2.06186 7.80289 2.23974 7.37357 2.55632 7.05705L3.96538 5.64752C4.01771 5.5952 4.05921 5.53308 4.08753 5.46472C4.11585 5.39635 4.13042 5.32308 4.13042 5.24908C4.13042 5.17509 4.11585 5.10182 4.08753 5.03345C4.05921 4.96509 4.01771 4.90297 3.96538 4.85065C3.91306 4.79832 3.85094 4.75682 3.78258 4.7285C3.71422 4.70018 3.64094 4.68561 3.56695 4.68561C3.49295 4.68561 3.41968 4.70018 3.35131 4.7285C3.28295 4.75682 3.22083 4.79832 3.16851 4.85065L1.76038 6.26158C1.49917 6.52283 1.29196 6.83297 1.1506 7.1743C1.00925 7.51562 0.936502 7.88145 0.936523 8.25089C0.936567 8.99701 1.233 9.71255 1.76062 10.2401C2.28823 10.7677 3.00381 11.064 3.74992 11.064C4.49604 11.0639 5.21158 10.7675 5.73913 10.2399L7.1482 8.83033C7.25387 8.72466 7.31324 8.58134 7.31324 8.4319C7.31324 8.28245 7.25387 8.13913 7.1482 8.03346C7.04253 7.92779 6.8992 7.86842 6.74976 7.86842C6.60032 7.86842 6.45699 7.92779 6.35132 8.03346L6.35273 8.0344Z" fill="#2D2D2D"/>
+</svg>
diff --git a/src/renderer/assets/icons/ongoingBook-icon.svg b/src/renderer/assets/icons/ongoingBook-icon.svg
new file mode 100644
index 000000000..c560a9522
--- /dev/null
+++ b/src/renderer/assets/icons/ongoingBook-icon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 0.75H7.5C7.20892 0.75 6.92183 0.817772 6.66147 0.947949C6.40112 1.07813 6.17465 1.26713 6 1.5C5.82535 1.26713 5.59888 1.07813 5.33853 0.947949C5.07817 0.817772 4.79108 0.75 4.5 0.75H1.5C1.30109 0.75 1.11032 0.829018 0.96967 0.96967C0.829018 1.11032 0.75 1.30109 0.75 1.5V7.5C0.75 7.69891 0.829018 7.88968 0.96967 8.03033C1.11032 8.17098 1.30109 8.25 1.5 8.25H4.5C4.79837 8.25 5.08452 8.36853 5.2955 8.5795C5.50647 8.79048 5.625 9.07663 5.625 9.375C5.625 9.47446 5.66451 9.56984 5.73484 9.64017C5.80516 9.71049 5.90054 9.75 6 9.75C6.09946 9.75 6.19484 9.71049 6.26517 9.64017C6.33549 9.56984 6.375 9.47446 6.375 9.375C6.375 9.07663 6.49353 8.79048 6.7045 8.5795C6.91548 8.36853 7.20163 8.25 7.5 8.25H10.5C10.6989 8.25 10.8897 8.17098 11.0303 8.03033C11.171 7.88968 11.25 7.69891 11.25 7.5V1.5C11.25 1.30109 11.171 1.11032 11.0303 0.96967C10.8897 0.829018 10.6989 0.75 10.5 0.75ZM4.5 7.5H1.5V1.5H4.5C4.79837 1.5 5.08452 1.61853 5.2955 1.8295C5.50647 2.04048 5.625 2.32663 5.625 2.625V7.875C5.30075 7.631 4.9058 7.49935 4.5 7.5ZM10.5 7.5H7.5C7.0942 7.49935 6.69925 7.631 6.375 7.875V2.625C6.375 2.32663 6.49353 2.04048 6.7045 1.8295C6.91548 1.61853 7.20163 1.5 7.5 1.5H10.5V7.5ZM7.5 2.625H9.375C9.47446 2.625 9.56984 2.66451 9.64017 2.73484C9.71049 2.80516 9.75 2.90054 9.75 3C9.75 3.09946 9.71049 3.19484 9.64017 3.26516C9.56984 3.33549 9.47446 3.375 9.375 3.375H7.5C7.40054 3.375 7.30516 3.33549 7.23483 3.26516C7.16451 3.19484 7.125 3.09946 7.125 3C7.125 2.90054 7.16451 2.80516 7.23483 2.73484C7.30516 2.66451 7.40054 2.625 7.5 2.625ZM9.75 4.5C9.75 4.59946 9.71049 4.69484 9.64017 4.76517C9.56984 4.83549 9.47446 4.875 9.375 4.875H7.5C7.40054 4.875 7.30516 4.83549 7.23483 4.76517C7.16451 4.69484 7.125 4.59946 7.125 4.5C7.125 4.40054 7.16451 4.30516 7.23483 4.23484C7.30516 4.16451 7.40054 4.125 7.5 4.125H9.375C9.47446 4.125 9.56984 4.16451 9.64017 4.23484C9.71049 4.30516 9.75 4.40054 9.75 4.5ZM9.75 6C9.75 6.09946 9.71049 6.19484 9.64017 6.26517C9.56984 6.33549 9.47446 6.375 9.375 6.375H7.5C7.40054 6.375 7.30516 6.33549 7.23483 6.26517C7.16451 6.19484 7.125 6.09946 7.125 6C7.125 5.90054 7.16451 5.80516 7.23483 5.73483C7.30516 5.66451 7.40054 5.625 7.5 5.625H9.375C9.47446 5.625 9.56984 5.66451 9.64017 5.73483C9.71049 5.80516 9.75 5.90054 9.75 6Z" fill="#1E1E1E"/>
+</svg>
diff --git a/src/renderer/assets/icons/pen-icon.svg b/src/renderer/assets/icons/pen-icon.svg
new file mode 100644
index 000000000..82f84829c
--- /dev/null
+++ b/src/renderer/assets/icons/pen-icon.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.78782 3.30658L7.69344 1.21173C7.60638 1.12464 7.50302 1.05555 7.38925 1.00841C7.27548 0.961273 7.15354 0.937012 7.0304 0.937012C6.90725 0.937012 6.78531 0.961273 6.67154 1.00841C6.55777 1.05555 6.45441 1.12464 6.36735 1.21173L0.587191 6.99236C0.499817 7.07916 0.430545 7.18245 0.383393 7.29622C0.33624 7.41 0.312145 7.53201 0.312504 7.65517V9.75001C0.312504 9.99865 0.411276 10.2371 0.587091 10.4129C0.762907 10.5887 1.00136 10.6875 1.25 10.6875H3.34485C3.46801 10.6878 3.59001 10.6637 3.70378 10.6166C3.81755 10.5694 3.92084 10.5002 4.00766 10.4128L9.78782 4.6322C9.96357 4.45639 10.0623 4.21798 10.0623 3.96939C10.0623 3.7208 9.96357 3.48238 9.78782 3.30658ZM3.26563 9.56251H1.4375V7.73439L5.375 3.79689L7.20313 5.62501L3.26563 9.56251ZM8 4.82814L6.17188 3.00001L7.03157 2.14033L8.85969 3.96845L8 4.82814Z" fill="#2D2D2D"/>
+</svg>
diff --git a/src/renderer/assets/icons/readBook-icon.svg b/src/renderer/assets/icons/readBook-icon.svg
new file mode 100644
index 000000000..9ff38e582
--- /dev/null
+++ b/src/renderer/assets/icons/readBook-icon.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.25 0.204468H6.75C6.51573 0.204393 6.28393 0.252365 6.06893 0.34542C5.85393 0.438474 5.6603 0.574634 5.5 0.745483C5.3397 0.574634 5.14607 0.438474 4.93107 0.34542C4.71607 0.252365 4.48427 0.204393 4.25 0.204468H1.75C1.5428 0.204468 1.34409 0.286778 1.19757 0.433291C1.05106 0.579803 0.96875 0.778517 0.96875 0.985718V5.98572C0.96875 6.19292 1.05106 6.39163 1.19757 6.53815C1.34409 6.68466 1.5428 6.76697 1.75 6.76697H4.25C4.4572 6.76697 4.65591 6.84928 4.80243 6.99579C4.94894 7.1423 5.03125 7.34102 5.03125 7.54822C5.03125 7.67254 5.08064 7.79177 5.16854 7.87967C5.25645 7.96758 5.37568 8.01697 5.5 8.01697C5.62432 8.01697 5.74355 7.96758 5.83146 7.87967C5.91936 7.79177 5.96875 7.67254 5.96875 7.54822C5.96875 7.34102 6.05106 7.1423 6.19757 6.99579C6.34409 6.84928 6.5428 6.76697 6.75 6.76697H9.25C9.4572 6.76697 9.65591 6.68466 9.80243 6.53815C9.94894 6.39163 10.0312 6.19292 10.0312 5.98572V0.985718C10.0312 0.778517 9.94894 0.579803 9.80243 0.433291C9.65591 0.286778 9.4572 0.204468 9.25 0.204468ZM4.25 5.82947H1.90625V1.14197H4.25C4.4572 1.14197 4.65591 1.22428 4.80243 1.37079C4.94894 1.5173 5.03125 1.71602 5.03125 1.92322V6.01736C4.78945 5.89358 4.52164 5.82918 4.25 5.82947ZM9.09375 5.82947H6.75C6.47828 5.8293 6.21044 5.89398 5.96875 6.01814V1.92322C5.96875 1.71602 6.05106 1.5173 6.19757 1.37079C6.34409 1.22428 6.5428 1.14197 6.75 1.14197H9.09375V5.82947ZM6.90625 2.23572H8.15625C8.28057 2.23572 8.3998 2.2851 8.48771 2.37301C8.57561 2.46092 8.625 2.58015 8.625 2.70447C8.625 2.82879 8.57561 2.94802 8.48771 3.03592C8.3998 3.12383 8.28057 3.17322 8.15625 3.17322H6.90625C6.78193 3.17322 6.6627 3.12383 6.57479 3.03592C6.48689 2.94802 6.4375 2.82879 6.4375 2.70447C6.4375 2.58015 6.48689 2.46092 6.57479 2.37301C6.6627 2.2851 6.78193 2.23572 6.90625 2.23572ZM8.625 4.26697C8.625 4.39129 8.57561 4.51052 8.48771 4.59842C8.3998 4.68633 8.28057 4.73572 8.15625 4.73572H6.90625C6.78193 4.73572 6.6627 4.68633 6.57479 4.59842C6.48689 4.51052 6.4375 4.39129 6.4375 4.26697C6.4375 4.14265 6.48689 4.02342 6.57479 3.93551C6.6627 3.8476 6.78193 3.79822 6.90625 3.79822H8.15625C8.28057 3.79822 8.3998 3.8476 8.48771 3.93551C8.57561 4.02342 8.625 4.14265 8.625 4.26697Z" fill="#FEFEFE"/>
+</svg>
diff --git a/src/renderer/assets/icons/trash-icon.svg b/src/renderer/assets/icons/trash-icon.svg
new file mode 100644
index 000000000..583854f7a
--- /dev/null
+++ b/src/renderer/assets/icons/trash-icon.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.4375 2.36072H0.5625C0.43818 2.36072 0.318951 2.4101 0.231044 2.49801C0.143136 2.58592 0.09375 2.70515 0.09375 2.82947C0.09375 2.95379 0.143136 3.07302 0.231044 3.16092C0.318951 3.24883 0.43818 3.29822 0.5625 3.29822H0.71875V8.61072C0.71875 8.81792 0.80106 9.01663 0.947573 9.16315C1.09409 9.30966 1.2928 9.39197 1.5 9.39197H6.5C6.7072 9.39197 6.90591 9.30966 7.05243 9.16315C7.19894 9.01663 7.28125 8.81792 7.28125 8.61072V3.29822H7.4375C7.56182 3.29822 7.68105 3.24883 7.76896 3.16092C7.85686 3.07302 7.90625 2.95379 7.90625 2.82947C7.90625 2.70515 7.85686 2.58592 7.76896 2.49801C7.68105 2.4101 7.56182 2.36072 7.4375 2.36072ZM6.34375 8.45447H1.65625V3.29822H6.34375V8.45447ZM1.96875 1.26697C1.96875 1.14265 2.01814 1.02342 2.10604 0.935511C2.19395 0.847604 2.31318 0.798218 2.4375 0.798218H5.5625C5.68682 0.798218 5.80605 0.847604 5.89396 0.935511C5.98186 1.02342 6.03125 1.14265 6.03125 1.26697C6.03125 1.39129 5.98186 1.51052 5.89396 1.59842C5.80605 1.68633 5.68682 1.73572 5.5625 1.73572H2.4375C2.31318 1.73572 2.19395 1.68633 2.10604 1.59842C2.01814 1.51052 1.96875 1.39129 1.96875 1.26697Z" fill="#1053C8"/>
+</svg>
diff --git a/src/renderer/assets/styles/bookDetailsDialog.css b/src/renderer/assets/styles/bookDetailsDialog.css
index 8322a0410..03294421b 100644
--- a/src/renderer/assets/styles/bookDetailsDialog.css
+++ b/src/renderer/assets/styles/bookDetailsDialog.css
@@ -303,7 +303,7 @@
       left: 0;
       right: 0;
       background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-      height: 2rem;
+      height: 5rem;
     }
   }
 
diff --git a/src/renderer/assets/styles/components/breadcrumb.css b/src/renderer/assets/styles/components/breadcrumb.css
index 9900ed465..ed271091f 100644
--- a/src/renderer/assets/styles/components/breadcrumb.css
+++ b/src/renderer/assets/styles/components/breadcrumb.css
@@ -15,7 +15,6 @@
   font-size: 16px;
   display: flex;
   align-items: center;
-
   /* color: rgb(59, 59, 59); */
   color: var(--color-accent);
   position: fixed;
diff --git a/src/renderer/assets/styles/components/buttons.css b/src/renderer/assets/styles/components/buttons.css
index f40963040..6c7feda2c 100644
--- a/src/renderer/assets/styles/components/buttons.css
+++ b/src/renderer/assets/styles/components/buttons.css
@@ -36,13 +36,13 @@
 
 /* button */
 
-button,
+/* button,
 .button_primary,
 .button_primary_small {
   &:not(:last-child) {
     margin-right: 10px;
   }
-}
+} */
 
 button {
   padding: 0;
@@ -51,9 +51,25 @@ button {
   height: 30px;
   fill: var(--color-primary);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
 
   &:hover {
     opacity: 1;
+    background: transparent;
+  }
+
+  &[type=submit] svg {
+    width: 13px;
+  }
+
+  &.disabled,
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -86,7 +102,6 @@ button {
     vertical-align: -2px;
     width: auto;
     height: 14px;
-    margin-right: 8px;
     transition: all 0.2s;
     fill: var(--color-primary);
   }
@@ -97,17 +112,6 @@ button {
       margin-left: 8px;
     }
   }
-
-  &.disabled,
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
-
-    &:hover {
-      background: transparent;
-    }
-  }
 }
 
 .button_primary_small,
@@ -193,7 +197,6 @@ button {
     fill: var(--color-accent-contrast);
     width: auto;
     height: 14px;
-    margin-right: 8px;
     transition: all 0.2s;
   }
 
@@ -240,7 +243,6 @@ button {
 
   & svg {
     width: 18px;
-    margin-right: 8px;
     vertical-align: -3px;
     color: var(--color-disabled);
   }
@@ -283,6 +285,50 @@ button {
   display: inline-block;
 }
 
+.button_primary_blue {
+  border: 1px solid var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 5px;
+  min-width: 100px;
+  background-color: var(--color-button-primary);
+  color: white;
+
+  svg {
+    width: 10px;
+    fill: white;
+}
+}
+
+.button_secondary_blue {
+  border: 1px solid var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 5px;
+  min-width: 100px;
+  background-color: var(--color-button-secondary);
+  color: var(--color-button-primary);
+
+  svg {
+    width: 15px;
+    fill: var(--color-button-primary);
+  }
+}
+
+.button_catalog_infos {
+  color: var(--color-button-primary);
+  height: 30px;
+  border-radius: 4px;
+  padding: 20px 5px;
+  background-color: var(--color-button-secondary);
+  margin: 30px 0;
+
+  svg {
+    width: 20px;
+    fill: var(--color-button-primary);
+  }
+}
+
 /*
 
   6. .button_keyboard
diff --git a/src/renderer/assets/styles/components/buttons.css.d.ts b/src/renderer/assets/styles/components/buttons.css.d.ts
index 398924e60..cf7c447a5 100644
--- a/src/renderer/assets/styles/components/buttons.css.d.ts
+++ b/src/renderer/assets/styles/components/buttons.css.d.ts
@@ -1,16 +1,19 @@
 declare const styles: {
   readonly "___DEBUG___COMPONENTS_BUTTONS_CSS": string;
   readonly "block_line": string;
+  readonly "button_catalog_infos": string;
   readonly "button_icon": string;
   readonly "button_keyboard": string;
   readonly "button_link": string;
   readonly "button_outline_accessibility": string;
   readonly "button_primary": string;
+  readonly "button_primary_blue": string;
   readonly "button_primary_form_default": string;
   readonly "button_primary_icon": string;
   readonly "button_primary_small": string;
   readonly "button_refresh": string;
   readonly "button_secondary": string;
+  readonly "button_secondary_blue": string;
   readonly "button_see_more": string;
   readonly "button_small": string;
   readonly "button_transparency": string;
diff --git a/src/renderer/assets/styles/components/catalog.scss b/src/renderer/assets/styles/components/catalog.scss
new file mode 100644
index 000000000..d942e04e6
--- /dev/null
+++ b/src/renderer/assets/styles/components/catalog.scss
@@ -0,0 +1,14 @@
+.catalog_infos_text {
+    margin-bottom: 30px;
+    font-size: 14px;
+    max-width: 750px;
+    a {
+        color: var(--color-button-primary);
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        svg {
+        width: 14px;
+        }
+    }
+}
diff --git a/src/renderer/assets/styles/components/inputs.css b/src/renderer/assets/styles/components/inputs.css
index a5fb919b9..d0a79c22e 100644
--- a/src/renderer/assets/styles/components/inputs.css
+++ b/src/renderer/assets/styles/components/inputs.css
@@ -194,7 +194,7 @@ select {
 
 /* 5. form_group */
 
-.form_group {
+/* .form_group {
   display: flex;
   justify-content: left;
   align-items: center;
@@ -217,6 +217,62 @@ select {
   &:not(:last-child):not(:only-child) {
     margin-bottom: 2rem;
   }
+} */
+
+.form_group {
+  width: 150px;
+  height: 20px;
+  padding:5px;
+  border:1px solid var(--color-primary);
+  margin:20px 0;
+  border-radius: 6px;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  & >label{
+      position:absolute;
+      font-size: 14px;
+      top:-10px;
+      left:10px;
+      background-color:white;
+  }
+
+  & >input{
+      border:none;
+      width: calc(100% - 35px);
+      height: 100%;
+      margin-left: 30px;
+      
+      &[type="search"], &[title="Add a tag"] {
+        margin: 0;
+        width: 100%;
+      }
+  }
+
+  & i {
+    width: 15px;
+    padding: 5px;
+    position: absolute;
+  }
+      
+}
+
+.form_group_catalog {
+  width: 100%;
+  height: 30px;
+}
+
+.form_group_wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: end;
+  gap: 10px;
+
+  & button {
+    min-width: 100px;
+    height: 42px;
+  }
 }
 
 /* 6. dropzone */
diff --git a/src/renderer/assets/styles/components/inputs.css.d.ts b/src/renderer/assets/styles/components/inputs.css.d.ts
index 9ab89d269..97cfac77f 100644
--- a/src/renderer/assets/styles/components/inputs.css.d.ts
+++ b/src/renderer/assets/styles/components/inputs.css.d.ts
@@ -3,6 +3,8 @@ declare const styles: {
   readonly "checkbox_keyboard": string;
   readonly "dropzone": string;
   readonly "form_group": string;
+  readonly "form_group_catalog": string;
+  readonly "form_group_wrapper": string;
   readonly "outline": string;
   readonly "radio_list": string;
 };
diff --git a/src/renderer/assets/styles/components/modals.css b/src/renderer/assets/styles/components/modals.css
index cbf229372..59a4a9673 100644
--- a/src/renderer/assets/styles/components/modals.css
+++ b/src/renderer/assets/styles/components/modals.css
@@ -38,11 +38,14 @@
 }
 
 .modal_dialog {
-  margin: 30px;
-  min-height: 400px;
-  min-width: 700px;
-  max-width: calc(100vw - 60px);
-  max-height: calc(100vh - 60px);
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+
+  /* min-height: 570px; */
+  min-width: 800px;
+  max-width: 960px;
+  max-height: calc(100vh - 100px);
   border-radius: 10px;
   z-index: 102;
   display: flex;
@@ -52,13 +55,17 @@
   overflow-x: hidden;
   align-content: flex-start;
   color: var(--color-primary);;
-  position: relative;
+  position: absolute;
   box-sizing: border-box;
 
-  &.modal_dialog_full {
-    width: calc(100vw - 60px);
-    height: calc(100vh - 60px);
+  @media screen and (width <= 960px) {
+    width: 100vw;
   }
+
+  /* &.modal_dialog_full {
+    width: calc(100vw - 60px);
+    height: calc(100vh - 100px);
+  } */
 }
 
 /*
@@ -87,7 +94,7 @@
 .modal_dialog_footer {
   display: flex;
   flex: none;
-  padding: 0 20px;
+  margin: 0 20px;
   align-items: center;
   height: 70px;
 }
@@ -110,6 +117,11 @@
 .modal_dialog_footer {
   justify-content: end;
   border-top: 1px solid var(--color-medium-grey);
+  position: sticky;
+  bottom: 0;
+  right: 0;
+  background-color: var(--color-secondary);
+  gap: 10px;
 
   & [type="submit"] {
     min-width: 100px;
@@ -171,3 +183,13 @@
 .___DEBUG___COMPONENTS_MODALS_CSS {
   display: none;
 }
+
+
+.modal_dialog-collapsed {
+  min-height: 0;
+}
+
+.modal_dialog_body-collapsed {
+  height: 0;
+  display: none;
+}
diff --git a/src/renderer/assets/styles/components/modals.css.d.ts b/src/renderer/assets/styles/components/modals.css.d.ts
index 84f29abd7..a4ccce376 100644
--- a/src/renderer/assets/styles/components/modals.css.d.ts
+++ b/src/renderer/assets/styles/components/modals.css.d.ts
@@ -5,10 +5,11 @@ declare const styles: {
   readonly "close_button": string;
   readonly "field": string;
   readonly "modal_dialog": string;
+  readonly "modal_dialog-collapsed": string;
   readonly "modal_dialog_body": string;
+  readonly "modal_dialog_body-collapsed": string;
   readonly "modal_dialog_body_centered": string;
   readonly "modal_dialog_footer": string;
-  readonly "modal_dialog_full": string;
   readonly "modal_dialog_header": string;
   readonly "modal_dialog_overlay": string;
   readonly "modal_dialog_overlay_hidden": string;
diff --git a/src/renderer/assets/styles/components/tags.css b/src/renderer/assets/styles/components/tags.css
index bf1f7aca6..594f996e5 100644
--- a/src/renderer/assets/styles/components/tags.css
+++ b/src/renderer/assets/styles/components/tags.css
@@ -21,12 +21,12 @@
 .tag {
   display: flex;
   align-items: center;
-  background-color: #e7f1fb;
+  background-color: var(--color-button-secondary);
   padding: 2px 6px;
   font-size: 1.1rem;
   border-radius: 5px;
-  border: 1px solid var(--color-tertiary);
-  color: var(--color-tertiary);
+  border: 0.5px solid var(--color-button-primary);
+  color: var(--color-button-primary);
   cursor: pointer;
   text-decoration: none;
   transition: all 0.2s;
diff --git a/src/renderer/assets/styles/partials/variables.css b/src/renderer/assets/styles/partials/variables.css
index 9de392aff..130ae5a99 100644
--- a/src/renderer/assets/styles/partials/variables.css
+++ b/src/renderer/assets/styles/partials/variables.css
@@ -34,4 +34,4 @@
 
 .___DEBUG___PARTIALS_VARIABLES_CSS {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/assets/styles/publicationInfos.scss b/src/renderer/assets/styles/publicationInfos.scss
new file mode 100644
index 000000000..64a090dcf
--- /dev/null
+++ b/src/renderer/assets/styles/publicationInfos.scss
@@ -0,0 +1,149 @@
+.publicationInfo-container {
+    display: flex;
+    margin-left: -15px;
+    margin-right: -15px;
+    flex-direction: row;
+    align-items: flex-start;
+    button {
+        font-weight: 400;
+        transition: 200ms linear;
+    }
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+    section {
+        margin-bottom: 30px;
+    }
+    .button_primary {
+        border: 1px solid var(--color-button-primary);
+        height: 30px;
+        border-radius: 4px;
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--color-button-primary);
+        color: white;
+    }
+    .button_secondary, .button_transparency {
+        border: 1px solid var(--color-button-primary);
+        height: 30px;
+        border-radius: 4px;
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--color-button-secondary);
+        color: var(--color-button-primary);
+        &:hover {
+            background-color: white;
+            color: var(--color-button-primary);
+        }
+    }
+}
+
+.publicationInfo-leftSide {
+    flex: 1;
+    max-width: 35%;
+    text-align: center;
+    &-coverWrapper {
+        width: 100%;
+        position: relative;
+        display: flex;
+        min-height: 400px;
+        align-items: center;
+        background-color: var(--color-light-grey);
+        border: 1px solid var(--color-medium-grey);
+        border-radius: 6px;
+    }
+    &-buttonsWrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin: 20px 0;
+        flex-wrap: wrap;
+        > div {
+            width: 100%;
+        }
+        button {
+            flex: 1 0 25%; 
+            margin: 5px 0;
+        }
+    }
+}
+
+.publicationInfo {
+    &-rightSide {
+        padding: 0 20px;
+        flex: 2;
+        h2 {
+            font-style: italic;
+        }
+    }
+    &-heading h3 {
+        position: relative;
+        font-weight: 600;
+        margin-bottom: 10px;
+        font-size: 18px;
+    }
+    &-description-bloc {
+        position: relative;
+        font-size: 1rem;
+        &-seeMore {
+            color: var(--color-button-primary);
+            text-decoration: underline;
+            font-size: 16px;
+            display: flex;
+            width: 100px;
+            align-items: center;
+            justify-content: center;
+            svg {
+                width: 20px;
+                margin: auto;
+            }
+        }
+    }
+    &-moreInfo-content, &-lcpInfo-content {
+        font-size: 16px;
+        div {
+            margin-bottom: 5px;
+            strong {
+                font-weight: 600;
+            }
+        }
+    }
+}
+
+.publicationInfo-tagContainer {
+    .tag {
+        font-size: 14px;
+    }
+    form {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        button {
+            width: 80px !important;
+            min-width: 80px;
+            svg {
+                fill: white;
+            }
+        }
+    }
+}
+
+.publicationInfo-progressionContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    p {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
diff --git a/src/renderer/assets/styles/reader-app.css b/src/renderer/assets/styles/reader-app.css
index f35891f98..6f2ca3eae 100644
--- a/src/renderer/assets/styles/reader-app.css
+++ b/src/renderer/assets/styles/reader-app.css
@@ -17,6 +17,8 @@
 =-=-= reader-app.css
 */
 
+@import url('./components/inputs.css');
+
 /* :global */
 
 :root.HIDE_CURSOR_CLASS,
@@ -87,11 +89,12 @@ body {
 }
 
 button {
+  display: inline;
   background: none;
   border: 0;
   cursor: pointer;
-  color: var(--reader-fontColor) !important;
-  fill: var(--reader-fontColor) !important;
+  color: var(--reader-fontColor);
+  fill: var(--reader-fontColor);
   height: auto;
 
   &:hover {
diff --git a/src/renderer/common/components/dialog/Dialog.tsx b/src/renderer/common/components/dialog/Dialog.tsx
index 02745cc8c..277a48d5e 100644
--- a/src/renderer/common/components/dialog/Dialog.tsx
+++ b/src/renderer/common/components/dialog/Dialog.tsx
@@ -102,7 +102,7 @@ class Dialog extends React.Component<React.PropsWithChildren<IProps>, undefined>
                         <div
                             role="document"
                             id={this.props.id}
-                            className={classNames(className, stylesModals.modal_dialog, this.props.size === "small" ? undefined : stylesModals.modal_dialog_full )}
+                            className={classNames(className, stylesModals.modal_dialog )}
                         >
                             <div className={stylesModals.modal_dialog_header}>
                                 <h2>{this.props.title}</h2>
@@ -164,7 +164,7 @@ class Dialog extends React.Component<React.PropsWithChildren<IProps>, undefined>
                                                 onClick={(_e) => {
                                                     this.props.closeDialog();
                                                 }}
-                                                className={stylesButtons.button_primary}
+                                                className={stylesButtons.button_secondary_blue}
                                             >
                                                 {__("dialog.cancel")}
                                             </button>
@@ -177,7 +177,7 @@ class Dialog extends React.Component<React.PropsWithChildren<IProps>, undefined>
                                                     this.submitForm(e);
                                                 }}
 
-                                                className={classNames(stylesButtons.button_primary, stylesButtons.button_primary_form_default)}
+                                                className={classNames(stylesButtons.button_primary_blue, stylesButtons.button_primary_form_default)}
                                                 ref={this.okRef}
                                             >
                                                 {this.props.submitButtonTitle}
diff --git a/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx b/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx
index dd8550c27..e2c56b4a5 100644
--- a/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx
@@ -102,7 +102,7 @@ class LcpInfo extends React.Component<IProps, undefined> {
 
         return (
             <>
-                <div className={stylesGlobal.heading}>
+                <div className="publicationInfo-heading">
                     <h3>LCP</h3>
                 </div>
                 <div className={classNames(stylesBookDetailsDialog.allowUserSelect)}>
@@ -134,24 +134,24 @@ class LcpInfo extends React.Component<IProps, undefined> {
                     }
 
                     {lcpRightsStartDateStr && <>
-                        <strong>{__("publication.lcpStart")}: </strong><i>{lcpRightsStartDateStr}</i>
+                        <strong>{__("publication.lcpStart")}: </strong><span>{lcpRightsStartDateStr}</span>
                         <br />
                     </>}
 
                     {lcpRightsEndDateStr && <>
-                        <strong>{__("publication.lcpEnd")}: </strong><i>{lcpRightsEndDateStr}</i>
+                        <strong>{__("publication.lcpEnd")}: </strong><span>{lcpRightsEndDateStr}</span>
                         <br />
                         <br />
                     </>}
 
                     {lcpRightsCopy ? <>
                         <strong>{__("publication.lcpRightsCopy")}: </strong>
-                        <i>{lcpRightsCopies} / {lcpRightsCopy}</i><br />
+                        <span>{lcpRightsCopies} / {lcpRightsCopy}</span><br />
                     </> : undefined}
 
                     {lcpRightsPrint ? <>
                         <strong>{__("publication.lcpRightsPrint")}: </strong>
-                        <i>0 / {lcpRightsPrint}</i><br />
+                        <span>0 / {lcpRightsPrint}</span><br />
                     </> : undefined}
                 </div>
             </>
diff --git a/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx b/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx
index 5a801f41e..9d3af2719 100644
--- a/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx
@@ -12,9 +12,12 @@ import * as React from "react";
 import { I18nTyped, Translator } from "readium-desktop/common/services/translator";
 import { TPublication } from "readium-desktop/common/type/publication.type";
 import * as stylesBookDetailsDialog from "readium-desktop/renderer/assets/styles/bookDetailsDialog.css";
-import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css";
-import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
-import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
+// import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css";
+// import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
+// import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
+import SVG from "../../SVG";
+import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg";
+import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg";
 
 // Logger
 const debug = debug_("readium-desktop:renderer:publicationInfoDescription");
@@ -68,15 +71,14 @@ export default class PublicationInfoDescription extends React.Component<IProps,
         if (!textSanitize) return <></>;
         return (
             <>
-                <div className={stylesGlobal.heading}>
+                <div className="publicationInfo-description-header">
                     <h3>{__("catalog.description")}</h3>
                 </div>
-                <div className={classNames(stylesBlocks.block_line, stylesBlocks.description_see_more)}>
+                <div className="publicationInfo-description-bloc">
                     <div
                         ref={this.descriptionWrapperRef}
                         className={classNames(
                             stylesBookDetailsDialog.descriptionWrapper,
-                            this.state.needSeeMore && stylesGlobal.mb_30,
                             this.state.needSeeMore && stylesBookDetailsDialog.hideEnd,
                             this.state.seeMore && stylesBookDetailsDialog.seeMore,
                         )}
@@ -90,7 +92,8 @@ export default class PublicationInfoDescription extends React.Component<IProps,
                     </div>
                     {
                         this.state.needSeeMore &&
-                        <button aria-hidden className={stylesButtons.button_see_more} onClick={this.toggleSeeMore}>
+                        <button aria-hidden className="publicationInfo-description-bloc-seeMore" onClick={this.toggleSeeMore}>
+                            <SVG ariaHidden svg={this.state.seeMore ? ChevronUp : ChevronDown} />
                             {
                                 this.state.seeMore
                                     ? __("publication.seeLess")
diff --git a/src/renderer/common/components/dialog/publicationInfos/formatPublicationLanguage.tsx b/src/renderer/common/components/dialog/publicationInfos/formatPublicationLanguage.tsx
index 10fab9b06..064b029e0 100644
--- a/src/renderer/common/components/dialog/publicationInfos/formatPublicationLanguage.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/formatPublicationLanguage.tsx
@@ -45,12 +45,12 @@ export const FormatPublicationLanguage: React.FC<IProps> = (props) => {
                 const note = (lang !== ll) ? ` (${lang})` : "";
                 const suffix = ((index < (publicationViewMaybeOpds.languages.length - 1)) ? ", " : "");
 
-                return (<i
+                return (<span
                     key={"lang-" + index}
                     className={stylesBookDetailsDialog.allowUserSelect}
                 >
                     {ll + note + suffix}
-                </i>);
+                </span>);
 
             });
 
diff --git a/src/renderer/common/components/dialog/publicationInfos/formatPublisherDate.tsx b/src/renderer/common/components/dialog/publicationInfos/formatPublisherDate.tsx
index 650c6a21e..26d6028c5 100644
--- a/src/renderer/common/components/dialog/publicationInfos/formatPublisherDate.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/formatPublisherDate.tsx
@@ -27,7 +27,7 @@ export const FormatPublisherDate: React.FC<IProps> = (props) => {
         if (date) {
             formatedPublishedDateComponent = (
                 <div>
-                    <strong>{__("catalog.released")}</strong> <i className={stylesBookDetailsDialog.allowUserSelect}>{date}</i>
+                    <strong>{__("catalog.released")}: </strong> <span className={stylesBookDetailsDialog.allowUserSelect}>{date}</span>
                 </div>
             );
         }
diff --git a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
index ced873947..65d346292 100644
--- a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
@@ -13,8 +13,8 @@ import { TPublication } from "readium-desktop/common/type/publication.type";
 import { formatTime } from "readium-desktop/common/utils/time";
 import { IOpdsBaseLinkView } from "readium-desktop/common/views/opds";
 import * as stylesBookDetailsDialog from "readium-desktop/renderer/assets/styles/bookDetailsDialog.css";
-import * as stylesColumns from "readium-desktop/renderer/assets/styles/components/columns.css";
-import * as stylesPublications from "readium-desktop/renderer/assets/styles/components/publications.css";
+// import * as stylesColumns from "readium-desktop/renderer/assets/styles/components/columns.css";
+import "readium-desktop/renderer/assets/styles/publicationInfos.scss";
 import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
 
 import { TaJsonDeserialize } from "@r2-lcp-js/serializable";
@@ -30,6 +30,8 @@ import PublicationInfoDescription from "./PublicationInfoDescription";
 import { convertMultiLangStringToString, langStringIsRTL } from "readium-desktop/renderer/common/language-string";
 import PublicationInfoA11y from "./publicationInfoA11y";
 import { PublicationView } from "readium-desktop/common/views/publication";
+import SVG from "../../SVG";
+import * as OnGoingBookIcon from "readium-desktop/renderer/assets/icons/ongoingBook-icon.svg";
 
 export interface IProps {
     publicationViewMaybeOpds: TPublication;
@@ -304,21 +306,21 @@ const Progression = (props: {
         }
 
         return (
-            <section>
-            <div className={stylesGlobal.heading}>
-                <h3 ref={focusRef} tabIndex={focusWhereAmI ? -1 : 0}>{`${__("publication.progression.title")}: `}</h3>
-            </div>
-            <>
-                {(txtProgression ? (<p><i className={stylesBookDetailsDialog.allowUserSelect}>
-                    {txtProgression}
-                </i></p>) : <></>)}
-                {(txtPagination ? (<p><i className={stylesBookDetailsDialog.allowUserSelect}>
-                    {txtPagination}
-                </i></p>) : <></>)}
-                {(txtHeadings ? (<><div style={{lineHeight: "2em"}} className={stylesBookDetailsDialog.allowUserSelect}>
-                    {txtHeadings}
-                </div></>) : <></>)}
-            </>
+            <section className="publicationInfo-progressionWrapper">
+                <div className="publicationInfo-heading">
+                    <h3 ref={focusRef} tabIndex={focusWhereAmI ? -1 : 0}>{`${__("publication.progression.title")} `}</h3>
+                </div>
+                <div className="publicationInfo-progressionContainer">
+                        {(txtProgression ? (<p className={stylesBookDetailsDialog.allowUserSelect}><SVG ariaHidden svg={OnGoingBookIcon} />
+                            {txtProgression}
+                        </p>) : <></>)}
+                    {(txtPagination ? (<p className={stylesBookDetailsDialog.allowUserSelect}>
+                        {txtPagination}
+                    </p>) : <></>)}
+                    {(txtHeadings ? (<><div style={{lineHeight: "2em"}} className={stylesBookDetailsDialog.allowUserSelect}>
+                        {txtHeadings}
+                    </div></>) : <></>)}
+                </div>
             </section>
         );
 
@@ -353,9 +355,9 @@ export const PublicationInfoContent: React.FC<React.PropsWithChildren<IProps>> =
 
     return (
         <>
-            <div className={stylesColumns.row}>
-                <div className={stylesColumns.col_book_img}>
-                    <div className={stylesPublications.publication_image_wrapper}>
+            <div className="publicationInfo-container">
+                <div className="publicationInfo-leftSide">
+                    <div className="publicationInfo-leftSide-coverWrapper">
                         <Cover
                             publicationViewMaybeOpds={publicationViewMaybeOpds}
                             onClick={() => toggleCoverZoomCb(coverZoom)}
@@ -365,9 +367,11 @@ export const PublicationInfoContent: React.FC<React.PropsWithChildren<IProps>> =
                             }
                         ></Cover>
                     </div>
+                    <div className="publicationInfo-leftSide-buttonsWrapper">
                     { ControlComponent && <ControlComponent /> }
+                    </div>
                 </div>
-                <div className={stylesColumns.col}>
+                <div className="publicationInfo-rightSide">
                     <section>
                         <h2 className={classNames(stylesBookDetailsDialog.allowUserSelect, stylesGlobal.my_10)}
                             dir={pubTitleIsRTL ? "rtl" : undefined}>
@@ -384,43 +388,43 @@ export const PublicationInfoContent: React.FC<React.PropsWithChildren<IProps>> =
                         <PublicationInfoDescription publicationViewMaybeOpds={publicationViewMaybeOpds} __={__} translator={props.translator} />
                     </section>
                     <section>
-                        <div className={stylesGlobal.heading}>
+                        <div className="publicationInfo-heading">
                             <h3>{__("catalog.moreInfo")}</h3>
                         </div>
-                        <div>
+                        <div className="publicationInfo-moreInfo-content">
                             <FormatPublisherDate publicationViewMaybeOpds={publicationViewMaybeOpds} __={__} />
                             {
                                 publicationViewMaybeOpds.publishers?.length ?
-                                    <>
+                                    <div>
                                         <strong>{`${__("catalog.publisher")}: `}</strong>
-                                        <i className={stylesBookDetailsDialog.allowUserSelect}>
+                                        <span className={stylesBookDetailsDialog.allowUserSelect}>
                                             <FormatContributorWithLink
                                                 contributors={publicationViewMaybeOpds.publishers}
                                                 translator={translator}
                                                 onClickLinkCb={onClikLinkCb}
                                             />
-                                        </i>
+                                        </span>
                                         <br />
-                                    </> : undefined
+                                    </div> : undefined
                             }
                             {
                                 publicationViewMaybeOpds.languages?.length ?
-                                    <>
+                                    <div>
                                         <strong>{`${__("catalog.lang")}: `}</strong>
                                         <FormatPublicationLanguage publicationViewMaybeOpds={publicationViewMaybeOpds} __={__} />
                                         <br />
-                                    </> : undefined
+                                    </div> : undefined
                             }
                             {
                                 publicationViewMaybeOpds.numberOfPages ?
-                                    <>
+                                    <div>
                                         <strong>{`${__("catalog.numberOfPages")}: `}</strong>
-                                        <i className={stylesBookDetailsDialog.allowUserSelect}>
+                                        <span className={stylesBookDetailsDialog.allowUserSelect}>
                                             {publicationViewMaybeOpds.numberOfPages}
-                                        </i>
+                                        </span>
                                         <br />
 
-                                    </> : undefined
+                                    </div> : undefined
                             }
                             <Duration
                                 __={__}
@@ -428,30 +432,30 @@ export const PublicationInfoContent: React.FC<React.PropsWithChildren<IProps>> =
                             />
                             {
                                 publicationViewMaybeOpds.nbOfTracks ?
-                                    <>
+                                    <div>
                                         <strong>{`${__("publication.audio.tracks")}: `}</strong>
                                         <i className={stylesBookDetailsDialog.allowUserSelect}>
                                             {publicationViewMaybeOpds.nbOfTracks}
                                         </i>
                                         <br />
 
-                                    </> : undefined
+                                    </div> : undefined
                             }
                         </div>
                     </section>
                     <section>
-                        <div className={stylesGlobal.heading}>
+                        <div className="publicationInfo-heading">
                             <h3>{__("publication.accessibility.name")}</h3>
                         </div>
                         <div>
                             <PublicationInfoA11y publicationViewMaybeOpds={publicationViewMaybeOpds}></PublicationInfoA11y>
                         </div>
                     </section>
-                    {(publicationViewMaybeOpds.lcp ? <section>
+                    {(publicationViewMaybeOpds.lcp ? <section className="publicationInfo-lcpInfo-content">
                         <LcpInfo publicationLcp={publicationViewMaybeOpds} />
                     </section> : <></>)}
-                    <section>
-                        <div className={stylesGlobal.heading}>
+                    <section className="publicationInfo-tagContainer">
+                        <div className="publicationInfo-heading">
                             <h3>{__("catalog.tags")}</h3>
                         </div>
                         <TagManagerComponent />
diff --git a/src/renderer/common/components/dialog/publicationInfos/tag/AddTag.tsx b/src/renderer/common/components/dialog/publicationInfos/tag/AddTag.tsx
index e80954b19..1723f841b 100644
--- a/src/renderer/common/components/dialog/publicationInfos/tag/AddTag.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/tag/AddTag.tsx
@@ -12,6 +12,9 @@ import { IOpdsTagView } from "readium-desktop/common/views/opds";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
 import * as stylesTags from "readium-desktop/renderer/assets/styles/components/tags.css";
 import { TChangeEventOnInput, TFormEvent } from "readium-desktop/typings/react";
+import SVG from "../../../SVG";
+import * as AddTagIcon from "readium-desktop/renderer/assets/icons/addTag-icon.svg";
+
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IProps {
@@ -45,18 +48,22 @@ export default class AddTag extends React.Component<IProps, IState> {
         return (
             this.props.pubId
                 ? <form onSubmit={this.addTag}>
-                    <input
-                        type="text"
-                        className={stylesTags.tag_inputs}
-                        title={__("catalog.addTags")}
-                        placeholder={__("catalog.addTags")}
-                        onChange={this.handleChangeName}
-                        value={this.state.newTagName}
-                    />
+                    <div className="form_group">
+                        <label>{__("catalog.tag")}</label>
+                        <input
+                            type="text"
+                            className={stylesTags.tag_inputs}
+                            title={__("catalog.addTags")}
+                            // placeholder={__("catalog.addTags")}
+                            onChange={this.handleChangeName}
+                            value={this.state.newTagName}
+                        />
+                    </div>
                     <button
                         type="submit"
-                        className={stylesButtons.button_primary_small}
+                        className={stylesButtons.button_primary_blue}
                     >
+                        <SVG ariaHidden svg={AddTagIcon} />
                         {__("catalog.addTagsButton")}
                     </button>
                 </form>
diff --git a/src/renderer/library/components/dialog/ApiappAddForm.tsx b/src/renderer/library/components/dialog/ApiappAddForm.tsx
index 86c06f2ef..422373190 100644
--- a/src/renderer/library/components/dialog/ApiappAddForm.tsx
+++ b/src/renderer/library/components/dialog/ApiappAddForm.tsx
@@ -6,104 +6,62 @@
 // ==LICENSE-END==
 
 import * as React from "react";
-import { connect } from "react-redux";
-import { DialogTypeName } from "readium-desktop/common/models/dialog";
-import * as dialogActions from "readium-desktop/common/redux/actions/dialog";
+import * as Dialog from "@radix-ui/react-dialog";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
 import * as stylesInputs from "readium-desktop/renderer/assets/styles/components/inputs.css";
 import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css";
-import Dialog from "readium-desktop/renderer/common/components/dialog/Dialog";
-import {
-    TranslatorProps, withTranslator,
-} from "readium-desktop/renderer/common/components/hoc/translator";
-import { apiAction } from "readium-desktop/renderer/library/apiAction";
-import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
-import { TDispatch } from "readium-desktop/typings/redux";
-// import * as SearchIcon from "readium-desktop/renderer/assets/icons/baseline-search-24px-grey.svg";
+import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
 import * as magnifyingGlass from "readium-desktop/renderer/assets/icons/magnifying_glass.svg";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 import { IApiappSearchResultView } from "readium-desktop/common/api/interface/apiappApi.interface";
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps extends TranslatorProps {
-}
-// IProps may typically extend:
-// RouteComponentProps
-// ReturnType<typeof mapStateToProps>
-// ReturnType<typeof mapDispatchToProps>
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IProps extends IBaseProps, ReturnType<typeof mapDispatchToProps>, ReturnType<typeof mapStateToProps> {
-}
-
-interface IState {
-    name: string | undefined;
-    url: string | undefined;
-    searchResultView: IApiappSearchResultView[];
-    selectSearchResult: IApiappSearchResultView | undefined;
-    query: string;
-}
-
-class ApiappAddForm extends React.Component<IProps, IState> {
-    // private focusRef: React.RefObject<HTMLInputElement>;
-    private inputRef: React.RefObject<HTMLInputElement>;
-
-    constructor(props: IProps) {
-        super(props);
-
-        // this.focusRef = React.createRef<HTMLInputElement>();
-        this.inputRef = React.createRef<HTMLInputElement>();
-
-        this.state = {
-            name: undefined,
-            url: undefined,
-            searchResultView: [],
-            selectSearchResult: undefined,
-            query: "",
-        };
-    }
-
-    public componentDidMount() {
-        if (this.inputRef?.current) {
-            this.inputRef.current.focus();
-        }
-    }
-
-    public render(): React.ReactElement<{}> {
-        if (!this.props.open) {
-            return (<></>);
-        }
-
-        const { __ } = this.props;
-        const listItems = this.state.searchResultView.map((v, idx) =>
-            <li key={idx.toString()}>
+import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
+import { useApi } from "readium-desktop/renderer/common/hooks/useApi";
+import { nanoid } from "nanoid";
+import * as AddIcon from "readium-desktop/renderer/assets/icons/add-alone.svg";
+import * as InfoIcon from "readium-desktop/renderer/assets/icons/outline-info-24px.svg";
+import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg";
+import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg";
+import * as FollowLinkIcon from "readium-desktop/renderer/assets/icons/followLink-icon.svg";
+import classNames from "classnames";
+
+const context = React.createContext<{
+    selectSearchResult: IApiappSearchResultView;
+    setSelectSearchResult: React.Dispatch<React.SetStateAction<IApiappSearchResultView>>;
+    submitAction: () => void;
+}>(undefined);
+
+const Item = ({v}: {v: IApiappSearchResultView}) => {
+
+    const {selectSearchResult, setSelectSearchResult, submitAction } = React.useContext(context);
+    return <li>
                 <a style={{
                     display: "block",
                     cursor: "pointer",
                     padding: "8px",
                     marginTop: "1rem",
-                    backgroundColor: this.state.selectSearchResult === v ? "#DDDDDD" : "transparent",
-                    border: this.state.selectSearchResult === v ? "2px solid black" : "2px solid transparent",
+                    backgroundColor: selectSearchResult === v ? "#DDDDDD" : "transparent",
+                    border: selectSearchResult === v ? "2px solid black" : "2px solid transparent",
                     borderRadius: "8px",
                 }}
                     role="option"
-                    aria-selected={this.state.selectSearchResult === v}
+                    aria-selected={selectSearchResult === v}
                     tabIndex={0}
-                    onClick={() => this.setState({ selectSearchResult: v })}
-                    onDoubleClick={(e) => {
-                        this.setState({ selectSearchResult: v });
+                    onClick={() => setSelectSearchResult(v)}
+                    onDoubleClick={() => {
+                        // e.preventDefault();
+                        setSelectSearchResult(v);
                         setTimeout(() => {
-                            this.addDoubleClick(e);
+                            submitAction();
                         }, 0);
                     }}
                     onKeyDown={(e) => {
                         if (e.key === "Enter") {
-                            this.setState({ selectSearchResult: v });
+                            // e.preventDefault();
+                            // e.stopPropagation();
+                            setSelectSearchResult(v);
                             setTimeout(() => {
-                                this.addDoubleClick(e);
+                                submitAction();
                             }, 0);
-
-                            // e.preventDefault();
-                            e.stopPropagation();
                         }
                     }}
                 >
@@ -113,109 +71,151 @@ class ApiappAddForm extends React.Component<IProps, IState> {
                     <br />
                     <span>{v.address}</span>
                 </a>
-            </li>);
+            </li>;
+};
 
-        return (
-            <Dialog
-                id={stylesModals.opds_form_dialog}
-                title={__("opds.addFormApiapp.title")}
-                onSubmitButton={this.add}
-                submitButtonDisabled={false}
-                submitButtonTitle={__("opds.addForm.addButton")}
-                noCentering={true}
-            >
-                <div style={{display:"flex", flexDirection: "column", width: "100%"}}>
-                    <div
-                        style={{ marginBottom: "0" }}
-                        className={stylesInputs.form_group}>
-                        <input
-                            ref={this.inputRef}
-                            type="search"
-                            id="apiapp_search"
-                            placeholder={__("header.searchPlaceholder")}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") {
-                                    this.search(undefined);
-                                    // e.preventDefault();
-                                    e.stopPropagation();
-                                }
-                            }}
-                        />
-                        <button
-                            onClick={this.search}
-                            className={stylesButtons.button_primary_small}
-                            style={{ fontWeight: "bold" }}
-                            title={__("header.searchTitle")}
-                        >
-                            {__("header.searchPlaceholder")}<SVG ariaHidden={true} svg={magnifyingGlass} />
-                        </button>
-                    </div>
-                    <div >
-                        {
-                            listItems.length
-                                ? <ul style={{
-                                    listStyle: "none",
-                                    padding: 0,
-                                    margin: 0,
-                                }}>
-                                    {listItems}
-                                </ul>
-                                :
-                                this.state.query ? __("apiapp.noLibraryFound", { name: this.state.query }) : <></>
-                        }
-                    </div>
-                </div>
-            </Dialog>
-        );
-    }
+const ApiappAddForm = () => {
+    const [__] = useTranslator();
+    const searchInputRef = React.useRef<HTMLInputElement>();
+    const [infoOpen, setInfoOpen] = React.useState(false);
+
+    const ItemListWithStyle = () =>
+    <div>
+        {
+        searchResultView?.length ? <ul style={{
+            listStyle: "none",
+            padding: 0,
+            margin: 0,
+        }}>
+            {searchResultView.map((v) => <Item v={v} key={nanoid(10)}/>)}
+        </ul>
+        : searchInputRef?.current?.value ? __("apiapp.noLibraryFound", { name: searchInputRef?.current.value }) : <></>
+        }
+    </div>;
 
-    private addDoubleClick = (e: React.UIEvent) => {
-        e.preventDefault();
-        this.add();
-        this.props.closeDialog();
-    };
+    const [resultApiAppSearchAction, apiAppSearchAction] = useApi(undefined, "apiapp/search");
+    const searchResultView = resultApiAppSearchAction?.data?.result || [];
 
-    private add = () => {
-        if (!this.state.selectSearchResult?.name || !this.state.selectSearchResult?.id || !this.state.selectSearchResult?.url) {
-            return;
-        }
-        const title = this.state.selectSearchResult.name;
-        const url = `apiapp://${this.state.selectSearchResult.id}:apiapp:${this.state.selectSearchResult.url}`;
-        apiAction("opds/addFeed", { title, url }).catch((err) => {
-            console.error("Error to fetch api opds/addFeed", err);
-        });
+    const openInfo = (e: any) => {
+        e.preventDefault();
+        setInfoOpen(!infoOpen);
     };
 
-    private search: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-        e?.preventDefault(); // undefined on enter keydown input search
-
-        const value = this.inputRef?.current?.value;
-        this.setState({ query: "" });
+    return (
+        <div className={stylesModals.modal_dialog_body}>
+            <div className={stylesInputs.form_group_wrapper}>
+                <div
+                    style={{ marginBottom: "0" }}
+                    className={classNames(stylesInputs.form_group, stylesInputs.form_group_catalog)}>
+                        <label htmlFor="apiapp-search">{__("header.searchPlaceholder")}</label>
+                    <input
+                        ref={searchInputRef}
+                        type="search"
+                        id="apiapp_search"
+                        // placeholder={__("header.searchPlaceholder")}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                const v = searchInputRef.current?.value;
+                                if (!v) return ;
+                                apiAppSearchAction(v);
+                                // e.preventDefault();
+                                // e.stopPropagation();
+                            }
+                        }}
+                    />
+                </div>
+                <button
+                        onClick={() => searchInputRef.current?.value ? apiAppSearchAction(searchInputRef.current.value) : ""}
+                        className={stylesButtons.button_secondary_blue}
+                        title={__("header.searchTitle")}
+                    >
+                        <SVG ariaHidden={true} svg={magnifyingGlass} />
+                        {__("header.searchPlaceholder")}
+                    </button>
+                </div>
+                <ItemListWithStyle/>
+                <div>
+                    <button className="button_catalog_infos" onClick={(e) => openInfo(e)}>
+                        <SVG ariaHidden svg={InfoIcon} />
+                        How does it work?
+                        <SVG ariaHidden svg={infoOpen ? ChevronUp : ChevronDown} />
+                    </button>
+                    { infoOpen ?
+                    <div className="catalog_infos_text">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Phasellus elit libero, pharetra vitae cursus sed, tincidunt et elit.
+                            Morbi laoreet iaculis nibh, non condimentum nulla euismod sed.
+                        </p>
+                        <a href="#">
+                            Vivamus quis pharetra eros.
+                            <SVG ariaHidden svg={FollowLinkIcon} />
+                        </a>
+                    </div>
+                    : <></>}
+                </div>
+            </div>
+    );
+};
 
-        if (value && typeof value === "string") {
-            apiAction("apiapp/search", value)
-                .then((searchResultView) => {
-                    this.setState({ searchResultView });
-                    this.setState({ query: value });
-                })
-                .catch((error) => console.error("Error to fetch api apiapp/search", error));
+export const ApiappAddFormDialog = () => {
+    const [__] = useTranslator();
+    const [, apiAddFeedAction] = useApi(undefined, "opds/addFeed");
+    const [selectSearchResult, setSelectSearchResult] = React.useState<IApiappSearchResultView>(undefined);
 
+    const addFeedAction = React.useCallback(() => {
+        if (!selectSearchResult?.name || !selectSearchResult?.id || !selectSearchResult?.url) {
+            return;
         }
-    };
-}
-
-const mapDispatchToProps = (dispatch: TDispatch, _props: IBaseProps) => {
-    return {
-        closeDialog: () => {
-            dispatch(
-                dialogActions.closeRequest.build(),
-            );
-        },
-    };
+        const title = selectSearchResult.name;
+        const url = `apiapp://${selectSearchResult.id}:apiapp:${selectSearchResult.url}`;
+        apiAddFeedAction({title, url});
+    }, [selectSearchResult, apiAddFeedAction]);
+
+    const submitButtonRef = React.useRef<HTMLButtonElement>();
+    const contextValue = {selectSearchResult, setSelectSearchResult, submitAction: () => submitButtonRef.current.click()};
+
+    return <Dialog.Root>
+        <Dialog.Trigger asChild>
+            <button
+                className={stylesButtons.button_primary}
+            >
+                <SVG ariaHidden={true} svg={AddIcon} />
+                <span>{__("opds.addFormApiapp.title")}</span>
+            </button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+            <div className={stylesModals.modal_dialog_overlay}></div>
+            <Dialog.Content>
+
+                <div className={stylesModals.modal_dialog_header}>
+                    <Dialog.Title>
+                        {__("opds.addFormApiapp.title")}
+                    </Dialog.Title>
+                    <div>
+                        <Dialog.Close asChild>
+                            <button className={stylesButtons.button_transparency_icon} aria-label="Close">
+                                <SVG ariaHidden={true} svg={QuitIcon} />
+                            </button>
+                        </Dialog.Close>
+                    </div>
+                </div>
+                <context.Provider value={contextValue}>
+                    <ApiappAddForm />
+                    <div className={stylesModals.modal_dialog_footer}>
+                        <Dialog.Close asChild>
+                            <button className={stylesButtons.button_secondary_blue}>{__("dialog.cancel")}</button>
+                        </Dialog.Close>
+                        <Dialog.Close asChild>
+                            <button ref={submitButtonRef} className={stylesButtons.button_primary_blue} onClick={() => addFeedAction()}>
+                                <SVG ariaHidden svg={AddIcon} />
+                                {__("opds.addForm.addButton")}</button>
+                        </Dialog.Close>
+                    </div>
+                </context.Provider>
+            </Dialog.Content>
+        </Dialog.Portal>
+    </Dialog.Root>;
 };
 
-const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({
-    open: state.dialog.type === DialogTypeName.ApiappAddForm,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withTranslator(ApiappAddForm));
+export default ApiappAddFormDialog;
diff --git a/src/renderer/library/components/dialog/DialogManager.tsx b/src/renderer/library/components/dialog/DialogManager.tsx
index 670023217..6805473c8 100644
--- a/src/renderer/library/components/dialog/DialogManager.tsx
+++ b/src/renderer/library/components/dialog/DialogManager.tsx
@@ -9,13 +9,11 @@ import * as React from "react";
 import { connect } from "react-redux";
 import PublicationInfo from "readium-desktop/renderer/library/components/dialog/publicationInfos/PublicationInfo";
 import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
-import ApiappAddForm from "./ApiappAddForm";
 
 import DeleteOpdsFeedConfirm from "./DeleteOpdsFeedConfirm";
 import DeletePublicationConfirm from "./DeletePublicationConfirm";
 import FileImport from "./FileImport";
 import LcpAuthentication from "./LcpAuthentication";
-import OpdsFeedAddForm from "./OpdsFeedAddForm";
 import OpdsFeedUpdateForm from "./OpdsFeedUpdateForm";
 import RenewLsdConfirm from "./RenewLsdConfirm";
 import ReturnLsdConfirm from "./ReturnLsdConfirm";
@@ -46,8 +44,6 @@ class DialogManager extends React.Component<IProps, undefined> {
 
         return (
             <>
-                <ApiappAddForm></ApiappAddForm>
-                <OpdsFeedAddForm></OpdsFeedAddForm>
                 <OpdsFeedUpdateForm></OpdsFeedUpdateForm>
                 <FileImport></FileImport>
                 <DeletePublicationConfirm></DeletePublicationConfirm>
diff --git a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
index f86670d74..f200c407f 100644
--- a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
+++ b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
@@ -6,117 +6,130 @@
 // ==LICENSE-END==
 
 import * as React from "react";
-import { connect } from "react-redux";
-import { DialogTypeName } from "readium-desktop/common/models/dialog";
-import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
+import SVG from "readium-desktop/renderer/common/components/SVG";
+import * as AddIcon from "readium-desktop/renderer/assets/icons/add-alone.svg";
+import { useApi } from "readium-desktop/renderer/common/hooks/useApi";
+import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
 import * as stylesInputs from "readium-desktop/renderer/assets/styles/components/inputs.css";
 import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css";
-import Dialog from "readium-desktop/renderer/common/components/dialog/Dialog";
-import {
-    TranslatorProps, withTranslator,
-} from "readium-desktop/renderer/common/components/hoc/translator";
-import { apiAction } from "readium-desktop/renderer/library/apiAction";
-import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
+import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
+import "readium-desktop/renderer/assets/styles/components/catalog.scss";
+import classNames from "classnames";
+import * as InfoIcon from "readium-desktop/renderer/assets/icons/outline-info-24px.svg";
+import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg";
+import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg";
+import * as FollowLinkIcon from "readium-desktop/renderer/assets/icons/followLink-icon.svg";
+import * as penIcon from "readium-desktop/renderer/assets/icons/pen-icon.svg";
+import * as linkIcon from "readium-desktop/renderer/assets/icons/link-icon.svg";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps extends TranslatorProps {
-}
-// IProps may typically extend:
-// RouteComponentProps
-// ReturnType<typeof mapStateToProps>
-// ReturnType<typeof mapDispatchToProps>
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IProps extends IBaseProps, ReturnType<typeof mapStateToProps> {
-}
+export const ApiappAddFormDialog = () => {
+    const [__] = useTranslator();
+    const [, apiAddFeedAction] = useApi(undefined, "opds/addFeed");
 
-interface IState {
-    name: string | undefined;
-    url: string | undefined;
-}
-
-class OpdsFeedAddForm extends React.Component<IProps, IState> {
-    private focusRef: React.RefObject<HTMLInputElement>;
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.focusRef = React.createRef<HTMLInputElement>();
-
-        this.state = {
-            name: undefined,
-            url: undefined,
-        };
-
-    }
-
-    public componentDidMount() {
-        if (this.focusRef?.current) {
-            this.focusRef.current.focus();
+    const [title, setTitle] = React.useState("");
+    const [url, setUrl] = React.useState("");
+    const [infoOpen, setInfoOpen] = React.useState(false);
+    const addAction = () => {
+        if (!title || !url) {
+            return;
         }
-    }
+        apiAddFeedAction({ title, url });
+    };
 
-    public render(): React.ReactElement<{}> {
-        if (!this.props.open) {
-            return (<></>);
-        }
+    const openInfo = (e: any) => {
+        e.preventDefault();
+        setInfoOpen(!infoOpen);
+    };
 
-        const { __ } = this.props;
-        const { name, url } = this.state;
-        return (
-            <Dialog
-                id={stylesModals.opds_form_dialog}
-                title={__("opds.addMenu")}
-                onSubmitButton={this.add}
-                submitButtonTitle={
-                    __("opds.addForm.addButton")
-                }
-                submitButtonDisabled={!(name && url)}
+    return <Dialog.Root>
+        <Dialog.Trigger asChild>
+            <button
+                className={stylesButtons.button_primary}
             >
-                <div className={stylesGlobal.w_50}>
-                    <div className={stylesInputs.form_group}>
-                        <label>{__("opds.addForm.name")}</label>
+                <SVG ariaHidden={true} svg={AddIcon} />
+                <span>{__("opds.addMenu")}</span>
+            </button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+            <div className={stylesModals.modal_dialog_overlay}></div>
+            <Dialog.Content>
+                <div className={stylesModals.modal_dialog_header}>
+                    <Dialog.Title>
+                        {__("opds.addMenu")}
+                    </Dialog.Title>
+                    <div>
+                        <Dialog.Close asChild>
+                            <button className={stylesButtons.button_transparency_icon} aria-label="Close">
+                                <SVG ariaHidden={true} svg={QuitIcon} />
+                            </button>
+                        </Dialog.Close>
+                    </div>
+                </div>
+                <form className={stylesModals.modal_dialog_body}>
+                    <div className={classNames(stylesInputs.form_group, stylesInputs.form_group_catalog)}>
+                        <label htmlFor="title">{__("opds.addForm.name")}</label>
+                        <i><SVG ariaHidden svg={penIcon} /></i>
                         <input
-                            onChange={(e) => this.setState({
-                                name: e.target.value,
-                            })}
+                            id="title"
+                            value={title}
+                            onChange={(e) => setTitle(e?.target?.value)}
                             type="text"
                             aria-label={__("opds.addForm.name")}
-                            placeholder={__("opds.addForm.namePlaceholder")}
-                            defaultValue={name}
-                            ref={this.focusRef}
+                            // placeholder={__("opds.addForm.namePlaceholder")}
+                            required
                         />
                     </div>
-                    <div className={stylesInputs.form_group}>
-                        <label>{__("opds.addForm.url")}</label>
+                    <div className={classNames(stylesInputs.form_group, stylesInputs.form_group_catalog)}>
+                        <label htmlFor="url">{__("opds.addForm.url")}</label>
+                        {/* <Form.Control asChild> */}
+                        <i><SVG ariaHidden svg={linkIcon} /></i>
                         <input
-                            onChange={(e) => this.setState({
-                                url: e.target.value,
-                            })}
+                            id="url"
+                            value={url}
+                            onChange={(e) => setUrl(e?.target?.value)}
                             type="text"
                             aria-label={__("opds.addForm.url")}
-                            placeholder={__("opds.addForm.urlPlaceholder")}
-                            defaultValue={url}
+                            // placeholder={__("opds.addForm.urlPlaceholder")}
+                            required
                         />
                     </div>
-                </div>
-            </Dialog>
-        );
-    }
-
-    public add = () => {
-        const title = this.state.name;
-        const url = this.state.url;
-        if (!title || !url) {
-            return;
-        }
-        apiAction("opds/addFeed", { title, url }).catch((err) => {
-            console.error("Error to fetch api opds/addFeed", err);
-        });
-    };
-
-}
-const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({
-    open: state.dialog.type === DialogTypeName.OpdsFeedAddForm,
-});
+                    <div>
+                        <button className="button_catalog_infos" onClick={(e) => openInfo(e)}>
+                            <SVG ariaHidden svg={InfoIcon} />
+                            What is OPDS?
+                            <SVG ariaHidden svg={infoOpen ? ChevronUp : ChevronDown} />
+                        </button>
+                        {infoOpen ?
+                            <div className="catalog_infos_text">
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                                    Phasellus elit libero, pharetra vitae cursus sed, tincidunt et elit.
+                                    Morbi laoreet iaculis nibh, non condimentum nulla euismod sed.
+                                </p>
+                                <a href="#">
+                                    Vivamus quis pharetra eros.
+                                    <SVG ariaHidden svg={FollowLinkIcon} />
+                                </a>
+                            </div>
+                            : <></>}
+                    </div>
+                    <div className={stylesModals.modal_dialog_footer}>
+                        <Dialog.Close asChild>
+                            <button className={stylesButtons.button_secondary_blue}>{__("dialog.cancel")}</button>
+                        </Dialog.Close>
+                        <Dialog.Close asChild>
+                            <button type="submit" disabled={!title || !url} className={stylesButtons.button_primary_blue} onClick={() => addAction()}>
+                                <SVG ariaHidden svg={AddIcon} />
+                                {__("opds.addForm.addButton")}
+                            </button>
+                        </Dialog.Close>
+                    </div>
+                </form>
+            </Dialog.Content>
+        </Dialog.Portal>
+    </Dialog.Root>;
+};
 
-export default connect(mapStateToProps)(withTranslator(OpdsFeedAddForm));
+export default ApiappAddFormDialog;
diff --git a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx
index 52b1270d8..7676873a6 100644
--- a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx
+++ b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx
@@ -11,8 +11,9 @@ import { DialogTypeName } from "readium-desktop/common/models/dialog";
 import { readerActions } from "readium-desktop/common/redux/actions";
 import * as dialogActions from "readium-desktop/common/redux/actions/dialog";
 import { PublicationView } from "readium-desktop/common/views/publication";
-import * as DeleteIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
-import * as ExportIcon from "readium-desktop/renderer/assets/icons/download.svg";
+import * as SaveAsIcon from "readium-desktop/renderer/assets/icons/SaveAs-icon.svg";
+import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg";
+import * as ReadBook from "readium-desktop/renderer/assets/icons/readBook-icon.svg";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
 import {
     TranslatorProps, withTranslator,
@@ -54,15 +55,16 @@ export class CatalogControls extends React.Component<IProps, undefined> {
         return (
             <>
                 <button onClick={this.handleRead} className={stylesButtons.button_primary}>
+                    <SVG svg={ReadBook} ariaHidden />
                     {__("catalog.readBook")}
                 </button>
                 <button onClick={this.deletePublication} className={stylesButtons.button_transparency}>
-                    <SVG svg={DeleteIcon} ariaHidden />
+                    <SVG svg={TrashIcon} ariaHidden />
                     {__("catalog.deleteBook")}
                 </button>
 
                 <button onClick={this.exportPublication} className={stylesButtons.button_transparency}>
-                    <SVG svg={ExportIcon} ariaHidden />
+                    <SVG svg={SaveAsIcon} ariaHidden />
                     {__("catalog.export")}
                 </button>
             </>
diff --git a/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx b/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx
index a034a0885..c481ec176 100644
--- a/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx
+++ b/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx
@@ -12,8 +12,6 @@ import { readerActions } from "readium-desktop/common/redux/actions";
 import * as dialogActions from "readium-desktop/common/redux/actions/dialog";
 import { PublicationView } from "readium-desktop/common/views/publication";
 import * as ArrowIcon from "readium-desktop/renderer/assets/icons/arrow-right.svg";
-import * as DeleteIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
-import * as ExportIcon from "readium-desktop/renderer/assets/icons/download.svg";
 import * as LoopIcon from "readium-desktop/renderer/assets/icons/loop.svg";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
 import {
@@ -26,6 +24,10 @@ import { apiAction } from "readium-desktop/renderer/library/apiAction";
 
 import { StatusEnum } from "@r2-lcp-js/parser/epub/lsd";
 
+import * as ReadBook from "readium-desktop/renderer/assets/icons/readBook-icon.svg";
+import * as SaveAsIcon from "readium-desktop/renderer/assets/icons/SaveAs-icon.svg";
+import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg";
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IBaseProps extends TranslatorProps {
     publicationView: PublicationView;
@@ -83,6 +85,7 @@ class CatalogLcpControls extends React.Component<IProps, undefined> {
                     onClick={this.handleRead}
                     className={stylesButtons.button_primary}
                 >
+                    <SVG svg={ReadBook} ariaHidden />
                     {__("catalog.readBook")}
                 </button>
                 : <></>
@@ -112,12 +115,12 @@ class CatalogLcpControls extends React.Component<IProps, undefined> {
                     onClick={ this.deletePublication }
                     className={stylesButtons.button_transparency}
                 >
-                    <SVG svg={DeleteIcon} ariaHidden/>
+                    <SVG svg={TrashIcon} ariaHidden/>
                     {__("catalog.deleteBook")}
                 </button>
 
                 <button onClick={this.exportPublication} className={stylesButtons.button_transparency}>
-                    <SVG svg={ExportIcon} ariaHidden />
+                    <SVG svg={SaveAsIcon} ariaHidden />
                     {__("catalog.export")}
                 </button>
             </>
diff --git a/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx b/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx
index e89beb272..318a0df88 100644
--- a/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx
+++ b/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx
@@ -57,7 +57,7 @@ export class OpdsControls extends React.Component<IProps, undefined> {
             __,
         } = this.props;
 
-        const boxStyle = {border: "1px solid silver", borderRadius: "8px", padding: "0.4em", paddingTop: "0.2em", marginBottom: "0.5em", marginTop: "0.4em"};
+        const boxStyle = {fontSize: "16px",border: "1px solid silver", borderRadius: "8px", padding: "0.4em", paddingTop: "0.2em", marginBottom: "0.5em", marginTop: "0.4em"};
 
         const m = findMimeTypeWithExtension(ADOBE_ADEPT_XML);
         const orderLinks = (links: IOpdsLinkView[]) => {
@@ -118,7 +118,7 @@ export class OpdsControls extends React.Component<IProps, undefined> {
                                     ln,
                                     opdsPublicationView,
                                 )}
-                                className={stylesButtons.button_primary}
+                                className={stylesButtons.button_transparency}
                                 disabled={sampleButtonIsDisabled()}
                             >
                                 <SVG ariaHidden={true} svg={ImportIcon}/>
@@ -152,7 +152,6 @@ export class OpdsControls extends React.Component<IProps, undefined> {
                                     <SVG ariaHidden={true} svg={CartFillIcon}/>
                                     {__("opds.menu.goBuyBook")}
                                 </button>
-                                <br />
                                 <OpdsLinkProperties properties={ln.properties} />
                             </div>,
                     )
@@ -164,7 +163,7 @@ export class OpdsControls extends React.Component<IProps, undefined> {
                         (ln, idx) =>
                             <div key={`borrowControl-${idx}`} style={ln.properties && Object.keys(ln.properties).length ? boxStyle : {}}>
                                 <button
-                                    className={stylesButtons.button_primary}
+                                    className={stylesButtons.button_transparency}
                                     onClick={() => this.props.link(
                                         ln,
                                         this.props.location,
@@ -184,7 +183,7 @@ export class OpdsControls extends React.Component<IProps, undefined> {
                         (ln, idx) =>
                             <div key={`subscribeControl-${idx}`} style={ln.properties && Object.keys(ln.properties).length ? boxStyle : {}}>
                                 <button
-                                    className={stylesButtons.button_primary}
+                                    className={stylesButtons.button_transparency}
                                     onClick={() => this.props.link(
                                         ln,
                                         this.props.location,
@@ -202,7 +201,7 @@ export class OpdsControls extends React.Component<IProps, undefined> {
                     orderLinks(opdsPublicationView.revokeLoanLinks).map((ln, idx) => (
                         <div key={`revokeControl-${idx}`} style={ln.properties && Object.keys(ln.properties).length ? boxStyle : {}}>
                             <button
-                                className={stylesButtons.button_primary}
+                                className={stylesButtons.button_transparency}
                                 onClick={() =>
                                     this.props.link(
                                         ln,
diff --git a/src/renderer/library/components/opds/OpdsAddForm.tsx b/src/renderer/library/components/opds/OpdsAddForm.tsx
index 6925d8e61..68e232674 100644
--- a/src/renderer/library/components/opds/OpdsAddForm.tsx
+++ b/src/renderer/library/components/opds/OpdsAddForm.tsx
@@ -6,66 +6,18 @@
 // ==LICENSE-END==
 
 import * as React from "react";
-import { connect } from "react-redux";
-import { DialogTypeName } from "readium-desktop/common/models/dialog";
-import * as dialogActions from "readium-desktop/common/redux/actions/dialog";
-import * as AddIcon from "readium-desktop/renderer/assets/icons/add-alone.svg";
-import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
-import {
-    TranslatorProps, withTranslator,
-} from "readium-desktop/renderer/common/components/hoc/translator";
-import SVG from "readium-desktop/renderer/common/components/SVG";
-import { TDispatch } from "readium-desktop/typings/redux";
+// import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css";
+import ApiappAddFormDialog from "readium-desktop/renderer/library/components/dialog/ApiappAddForm";
+import OpdsFeedAddForm from "../dialog/OpdsFeedAddForm";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps extends TranslatorProps {
-}
-// IProps may typically extend:
-// RouteComponentProps
-// ReturnType<typeof mapStateToProps>
-// ReturnType<typeof mapDispatchToProps>
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IProps extends IBaseProps, ReturnType<typeof mapDispatchToProps> {
-}
+const OpdsAddForm: React.FC = () => {
+    return (
+        <section>
+            <OpdsFeedAddForm/>
+            <ApiappAddFormDialog/>
+        </section>
+    );
 
-export class OpdsAddForm extends React.Component<IProps, undefined> {
-
-    constructor(props: IProps) {
-        super(props);
-    }
-
-    public render(): React.ReactElement<{}>  {
-        const { __ } = this.props;
-        return (
-            <section>
-                <button
-                    onClick={this.props.openOpdsFeedAddForm}
-                    className={stylesButtons.button_primary}
-                >
-                    <SVG ariaHidden={true} svg={AddIcon}/>
-                    <span>{ __("opds.addForm.title")}</span>
-                </button>
-                <button
-                    onClick={this.props.openApiappAddForm}
-                    className={stylesButtons.button_primary}
-                >
-                    <SVG ariaHidden={true} svg={AddIcon} />
-                    <span>{__("opds.addFormApiapp.title")}</span>
-                </button>
-            </section>
-        );
-    }
-}
-
-const mapDispatchToProps = (dispatch: TDispatch, _props: IBaseProps) => {
-    return {
-        openOpdsFeedAddForm: () => {
-            dispatch(dialogActions.openRequest.build(DialogTypeName.OpdsFeedAddForm, {}));
-        },
-        openApiappAddForm: () => {
-            dispatch(dialogActions.openRequest.build(DialogTypeName.ApiappAddForm, {}));
-        },
-    };
 };
 
-export default connect(undefined, mapDispatchToProps)(withTranslator(OpdsAddForm));
+export default OpdsAddForm;
diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
index b9e12d4f8..b3ec76feb 100644
--- a/src/resources/locales/en.json
+++ b/src/resources/locales/en.json
@@ -109,6 +109,7 @@
         "sort": "Sort by",
         "tagCount": "Tag count",
         "tags": "Tags",
+        "tag": "Tag",
         "update": "Edit"
     },
     "dialog": {
diff --git a/src/typings/en.translation.d.ts b/src/typings/en.translation.d.ts
index 9112437e3..506921ed3 100644
--- a/src/typings/en.translation.d.ts
+++ b/src/typings/en.translation.d.ts
@@ -152,6 +152,7 @@ declare namespace typed_i18n {
   readonly "sort": string,
   readonly "tagCount": string,
   readonly "tags": string,
+  readonly "tag": string,
   readonly "update": string
 };
   (_: "catalog.about", __?: {}): { readonly "button": string, readonly "title": string };
@@ -266,7 +267,7 @@ declare namespace typed_i18n {
   (_: "catalog.released", __?: {}): string;
   (_: "catalog.sort", __?: {}): string;
   (_: "catalog.tagCount", __?: {}): string;
-  (_: "catalog.tags", __?: {}): string;
+  (_: "catalog.tags", __?: {}): string; (_: "catalog.tag", __?: {}): string;
   (_: "catalog.update", __?: {}): string;
   (_: "dialog", __?: {}): {
   readonly "cancel": string,