diff --git a/attachment_preview/README.rst b/attachment_preview/README.rst
index c65b0349..dc01b4f8 100644
--- a/attachment_preview/README.rst
+++ b/attachment_preview/README.rst
@@ -1,6 +1,6 @@
-===================
-Preview attachments
-===================
+==================
+Attachment Preview
+==================
 
 .. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !! This file is generated by oca-gen-addon-readme !!
@@ -14,18 +14,18 @@ Preview attachments
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fknowledge-lightgray.png?logo=github
-    :target: https://github.com/OCA/knowledge/tree/11.0/attachment_preview
+    :target: https://github.com/OCA/knowledge/tree/12.0/attachment_preview
     :alt: OCA/knowledge
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/knowledge-11-0/knowledge-11-0-attachment_preview
+    :target: https://translation.odoo-community.org/projects/knowledge-12-0/knowledge-12-0-attachment_preview
     :alt: Translate me on Weblate
 .. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
-    :target: https://runbot.odoo-community.org/runbot/118/11.0
+    :target: https://runbot.odoo-community.org/runbot/118/12.0
     :alt: Try me on Runbot
 
 |badge1| |badge2| |badge3| |badge4| |badge5| 
 
-This addon allows to preview attachments supported by http://viewerjs.org.
+This module allows to preview attachments supported by http://viewerjs.org.
 
 Currently, that's most Libreoffice files and PDFs.
 
@@ -44,7 +44,7 @@ Installation
 For filetype recognition, you'll get the best results by installing
 ``python-magic``:
 
-sudo apt-get install python-magic
+sudo apt-get install python3-magic
 
 Usage
 =====
@@ -64,7 +64,7 @@ Bug Tracker
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/knowledge/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/knowledge/issues/new?body=module:%20attachment_preview%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/knowledge/issues/new?body=module:%20attachment_preview%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -86,8 +86,8 @@ Contributors
 Other credits
 ~~~~~~~~~~~~~
 
-Addon icon
-----------
+Module icon
+-----------
 
 * courtesy of http://commons.wikimedia.org/wiki/Crystal_Clear
 
@@ -104,6 +104,6 @@ OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.
 
-This module is part of the `OCA/knowledge <https://github.com/OCA/knowledge/tree/11.0/attachment_preview>`_ project on GitHub.
+This module is part of the `OCA/knowledge <https://github.com/OCA/knowledge/tree/12.0/attachment_preview>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
diff --git a/attachment_preview/__init__.py b/attachment_preview/__init__.py
index 5b89c089..69f7babd 100644
--- a/attachment_preview/__init__.py
+++ b/attachment_preview/__init__.py
@@ -1,4 +1,3 @@
-# Copyright 2014 Therp BV (<http://therp.nl>)
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 from . import models
diff --git a/attachment_preview/__manifest__.py b/attachment_preview/__manifest__.py
index 77da9c13..63d5c710 100644
--- a/attachment_preview/__manifest__.py
+++ b/attachment_preview/__manifest__.py
@@ -2,8 +2,8 @@
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 {
-    "name": "Preview attachments",
-    "version": "11.0.1.3.0",
+    "name": "Attachment Preview",
+    "version": "12.0.1.0.0",
     "author": "Therp BV,"
               "Onestein,"
               "Odoo Community Association (OCA)",
diff --git a/attachment_preview/models/__init__.py b/attachment_preview/models/__init__.py
index 22aa81fb..aee1fe67 100644
--- a/attachment_preview/models/__init__.py
+++ b/attachment_preview/models/__init__.py
@@ -1,4 +1,3 @@
-# Copyright 2014 Therp BV (<http://therp.nl>)
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 from . import ir_attachment
diff --git a/attachment_preview/models/ir_attachment.py b/attachment_preview/models/ir_attachment.py
index 0b88b0e7..ee53880e 100644
--- a/attachment_preview/models/ir_attachment.py
+++ b/attachment_preview/models/ir_attachment.py
@@ -46,6 +46,7 @@ class IrAttachment(models.Model):
                 continue
             try:
                 import magic
+                magic = magic.Magic(magic.flags.MAGIC_NONE)
                 if model == self._name and binary_field == 'datas'\
                         and this.store_fname:
                     mimetype = magic.from_file(
@@ -59,7 +60,7 @@ class IrAttachment(models.Model):
                                   mimetype)
             except ImportError:
                 (mimetype, encoding) = mimetypes.guess_type(
-                    'data:;base64,' + this[binary_field], strict=False)
+                    'data:;base64,' + str(this[binary_field]), strict=False)
                 _logger.debug('Mimetypes guessed type %s from buffer',
                               mimetype)
             extension = mimetypes.guess_extension(
diff --git a/attachment_preview/readme/CREDITS.rst b/attachment_preview/readme/CREDITS.rst
index 07bb3a4e..ad5c83e0 100644
--- a/attachment_preview/readme/CREDITS.rst
+++ b/attachment_preview/readme/CREDITS.rst
@@ -1,4 +1,4 @@
-Addon icon
-----------
+Module icon
+-----------
 
 * courtesy of http://commons.wikimedia.org/wiki/Crystal_Clear
diff --git a/attachment_preview/readme/DESCRIPTION.rst b/attachment_preview/readme/DESCRIPTION.rst
index aadfd944..7cf0f78e 100644
--- a/attachment_preview/readme/DESCRIPTION.rst
+++ b/attachment_preview/readme/DESCRIPTION.rst
@@ -1,4 +1,4 @@
-This addon allows to preview attachments supported by http://viewerjs.org.
+This module allows to preview attachments supported by http://viewerjs.org.
 
 Currently, that's most Libreoffice files and PDFs.
 
diff --git a/attachment_preview/readme/INSTALL.rst b/attachment_preview/readme/INSTALL.rst
index eb26fced..6f45c2f0 100644
--- a/attachment_preview/readme/INSTALL.rst
+++ b/attachment_preview/readme/INSTALL.rst
@@ -1,4 +1,4 @@
 For filetype recognition, you'll get the best results by installing
 ``python-magic``:
 
-sudo apt-get install python-magic
+sudo apt-get install python3-magic
diff --git a/attachment_preview/static/description/index.html b/attachment_preview/static/description/index.html
index 28ae9376..73d59c1c 100644
--- a/attachment_preview/static/description/index.html
+++ b/attachment_preview/static/description/index.html
@@ -4,7 +4,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils 0.14: http://docutils.sourceforge.net/" />
-<title>Preview attachments</title>
+<title>Attachment Preview</title>
 <style type="text/css">
 
 /*
@@ -367,8 +367,8 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/knowledge/tree/11.0/attachment_preview"><img alt="OCA/knowledge" src="https://img.shields.io/badge/github-OCA%2Fknowledge-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/knowledge-11-0/knowledge-11-0-attachment_preview"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/118/11.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
-<p>This addon allows to preview attachments supported by <a class="reference external" href="http://viewerjs.org">http://viewerjs.org</a>.</p>
+<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/knowledge/tree/12.0/attachment_preview"><img alt="OCA/knowledge" src="https://img.shields.io/badge/github-OCA%2Fknowledge-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/knowledge-12-0/knowledge-12-0-attachment_preview"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/118/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
+<p>This module allows to preview attachments supported by <a class="reference external" href="http://viewerjs.org">http://viewerjs.org</a>.</p>
 <p>Currently, that’s most Libreoffice files and PDFs.</p>
 <img alt="Screenshot of split form view" src="https://raw.githubusercontent.com/attachment_preview/static/description/screenshot-split.png" style="width: 100%;" />
 <p><strong>Table of contents</strong></p>
@@ -381,7 +381,7 @@ ul.auto-toc {
 <li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
 <li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
 <li><a class="reference internal" href="#other-credits" id="id7">Other credits</a><ul>
-<li><a class="reference internal" href="#addon-icon" id="id8">Addon icon</a></li>
+<li><a class="reference internal" href="#module-icon" id="id8">Module icon</a></li>
 </ul>
 </li>
 <li><a class="reference internal" href="#maintainers" id="id9">Maintainers</a></li>
@@ -409,7 +409,7 @@ next to the navigational buttons you can open the preview in a separate window.<
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/knowledge/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/knowledge/issues/new?body=module:%20attachment_preview%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/OCA/knowledge/issues/new?body=module:%20attachment_preview%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@@ -430,8 +430,8 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 </div>
 <div class="section" id="other-credits">
 <h2><a class="toc-backref" href="#id7">Other credits</a></h2>
-<div class="section" id="addon-icon">
-<h3><a class="toc-backref" href="#id8">Addon icon</a></h3>
+<div class="section" id="module-icon">
+<h3><a class="toc-backref" href="#id8">Module icon</a></h3>
 <ul class="simple">
 <li>courtesy of <a class="reference external" href="http://commons.wikimedia.org/wiki/Crystal_Clear">http://commons.wikimedia.org/wiki/Crystal_Clear</a></li>
 </ul>
@@ -444,7 +444,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/knowledge/tree/11.0/attachment_preview">OCA/knowledge</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/knowledge/tree/12.0/attachment_preview">OCA/knowledge</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>
diff --git a/attachment_preview/static/lib/ViewerJS/example.local.css b/attachment_preview/static/lib/ViewerJS/example.local.css
index 034347d4..33e013cc 100644
--- a/attachment_preview/static/lib/ViewerJS/example.local.css
+++ b/attachment_preview/static/lib/ViewerJS/example.local.css
@@ -22,6 +22,5 @@
          url('/ViewerJS/fonts/Exotica-webfont.svg#exoticamedium') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
 
diff --git a/attachment_preview/static/src/js/attachment_preview.js b/attachment_preview/static/src/js/attachment_preview.js
index b2c6b339..2529b984 100644
--- a/attachment_preview/static/src/js/attachment_preview.js
+++ b/attachment_preview/static/src/js/attachment_preview.js
@@ -18,7 +18,7 @@ odoo.define('attachment_preview', function (require) {
             return $.inArray(
                 extension,
                 ['odt', 'odp', 'ods', 'fodt', 'pdf', 'ott', 'fodp', 'otp',
-                 'fods', 'ots',
+                    'fods', 'ots',
                 ]) > -1;
         },
 
@@ -257,13 +257,13 @@ odoo.define('attachment_preview', function (require) {
         },
 
         show: function () {
-            this.$el.removeClass('hidden');
+            this.$el.removeClass('d-none');
             this.trigger('shown');
         },
 
         hide: function () {
-            this.$el.addClass('hidden');
-            this.trigger('hidden');
+            this.$el.addClass('d-none');
+            this.trigger('d-none');
         },
 
         updatePaginator: function () {
@@ -295,7 +295,7 @@ odoo.define('attachment_preview', function (require) {
         init: function () {
             var res = this._super.apply(this, arguments);
             this.attachmentPreviewWidget = new AttachmentPreviewWidget(this);
-            this.attachmentPreviewWidget.on('hidden', this, this._attachmentPreviewWidgetHidden);
+            this.attachmentPreviewWidget.on('d-none', this, this._attachmentPreviewWidgetHidden);
             return res;
         },
 
diff --git a/attachment_preview/static/src/less/attachment_preview.less b/attachment_preview/static/src/scss/attachment_preview.scss
similarity index 91%
rename from attachment_preview/static/src/less/attachment_preview.less
rename to attachment_preview/static/src/scss/attachment_preview.scss
index 17c42ac1..70344909 100644
--- a/attachment_preview/static/src/less/attachment_preview.less
+++ b/attachment_preview/static/src/scss/attachment_preview.scss
@@ -35,7 +35,7 @@
 
     > .attachment_preview_iframe {
         width: 100%;
-        height: calc(~"100% - 30px");
+        height: calc(100% - 30px);
         float: left;
     }
 
@@ -44,7 +44,7 @@
         float: left;
         width: 100%;
         background-color: #FFF;
-        border-left: 1px solid @gray-lighter-dark;
+        border-left: 1px solid gray('300');
 
         button {
             min-width: 25px;
diff --git a/attachment_preview/static/src/xml/attachment_preview.xml b/attachment_preview/static/src/xml/attachment_preview.xml
index fd2a9665..7bfe4c09 100644
--- a/attachment_preview/static/src/xml/attachment_preview.xml
+++ b/attachment_preview/static/src/xml/attachment_preview.xml
@@ -18,18 +18,18 @@
     </t>
 
     <t t-name="attachment_preview.AttachmentPreviewWidget">
-        <div class="attachment_preview_widget hidden">
+        <div class="attachment_preview_widget d-none">
             <div class="attachment_preview_buttons">
-                <div class="button-group pull-left">
-                    <button class="btn btn-sm btn-default attachment_preview_previous"><i class="fa fa-chevron-left"/></button>
-                    <button class="btn btn-sm btn-default disabled attachment_preview_current">1 / 5</button>
-                    <button class="btn btn-sm btn-default attachment_preview_next"><i class="fa fa-chevron-right"/></button>
+                <div class="button-group float-left">
+                    <button class="btn btn-secondary attachment_preview_previous"><i class="fa fa-chevron-left"/></button>
+                    <button class="btn btn-secondary disabled attachment_preview_current">1 / 5</button>
+                    <button class="btn btn-secondary attachment_preview_next"><i class="fa fa-chevron-right"/></button>
                 </div>
-                <button class="btn btn-sm btn-default pull-left ml8 attachment_preview_popout"><i class="fa fa-external-link"/></button>
+                <button class="btn btn-secondary pull-left ml8 attachment_preview_popout"><i class="fa fa-external-link"/></button>
 
-                <button class="btn btn-sm btn-default pull-right attachment_preview_close"><i class="fa fa-times"/></button>
+                <button class="btn btn-secondary pull-right attachment_preview_close"><i class="fa fa-times"/></button>
             </div>
-            <iframe class="attachment_preview_iframe"></iframe>
+            <iframe class="attachment_preview_iframe"/>
         </div>
     </t>
 </templates>
diff --git a/attachment_preview/templates/assets.xml b/attachment_preview/templates/assets.xml
index 8caf8f95..599b21be 100644
--- a/attachment_preview/templates/assets.xml
+++ b/attachment_preview/templates/assets.xml
@@ -2,8 +2,8 @@
 <odoo>
     <template id="assets_backend" name="attachment_preview assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
-            <script type="text/javascript" src="/attachment_preview/static/src/js/attachment_preview.js"></script>
-            <link rel="stylesheet" type="text/less" href="/attachment_preview/static/src/less/attachment_preview.less" />
+            <script type="text/javascript" src="/attachment_preview/static/src/js/attachment_preview.js"/>
+            <link rel="stylesheet" type="text/scss" href="/attachment_preview/static/src/scss/attachment_preview.scss"/>
         </xpath>
     </template>
 </odoo>
diff --git a/attachment_preview/tests/__init__.py b/attachment_preview/tests/__init__.py
index 7aec7faa..d115c7b6 100644
--- a/attachment_preview/tests/__init__.py
+++ b/attachment_preview/tests/__init__.py
@@ -1,4 +1,3 @@
-# Copyright 2018 Onestein
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 from . import test_attachment_preview