diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index bc76bfe82ad..cb47d0edead 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -3,6 +3,7 @@
 import { useService } from '@web/core/utils/hooks';
 import { useWowlService } from '@web/legacy/utils';
 import { Dialog } from '@web/core/dialog/dialog';
+import { Notebook } from '@web/core/notebook/notebook';
 import { ImageSelector } from './image_selector';
 import { DocumentSelector } from './document_selector';
 import { IconSelector } from './icon_selector';
@@ -206,6 +207,10 @@ export class MediaDialog extends Component {
         }
         this.props.close();
     }
+
+    onTabChange(tab) {
+        this.state.activeTab = tab;
+    }
 }
 MediaDialog.template = 'web_editor.MediaDialog';
 MediaDialog.defaultProps = {
@@ -214,6 +219,7 @@ MediaDialog.defaultProps = {
 MediaDialog.components = {
     ...Object.keys(TABS).map(key => TABS[key].Component),
     Dialog,
+    Notebook,
 };
 
 export class MediaDialogWrapper extends Component {
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
index 703e4ef256e..6d58a44e030 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
@@ -4,21 +4,7 @@
     <Dialog contentClass="contentClass"
         size="size"
         title="title">
-        <div class="o_notebook">
-            <div class="o_notebook_headers">
-                <ul class="nav nav-tabs" role="tablist">
-                    <li t-foreach="tabs" t-as="tab" t-key="tab.id" class="nav-item cursor-pointer">
-                        <a class="nav-link" t-att-class="{ active:  tab.id === state.activeTab }" t-on-click="() => state.activeTab = tab.id"><t t-esc="tab.title"/></a>
-                    </li>
-                </ul>
-            </div>
-            <!-- Tab panes -->
-            <div class="o_notebook_content tab-content">
-                <t t-foreach="tabs" t-as="tab" t-key="tab.id">
-                    <div class="tab-pane fade" t-att-class="tab.id === state.activeTab ? 'active show' : ''"><t t-component="tab.Component" t-props="tab.props"/></div>
-                </t>
-            </div>
-        </div>
+        <Notebook pages="tabs" onPageUpdate.bind="onTabChange" defaultPage="state.activeTab"/>
         <t t-set-slot="footer">
             <button class="btn btn-primary" t-on-click="() => this.save()">Add</button>
             <button class="btn btn-secondary" t-on-click="() => this.props.close()">Discard</button>