diff --git a/iati_sphinx_theme/__init__.py b/iati_sphinx_theme/__init__.py
index ea3ea5b..ef71b57 100644
--- a/iati_sphinx_theme/__init__.py
+++ b/iati_sphinx_theme/__init__.py
@@ -10,5 +10,4 @@ def setup(app: sphinx.application.Sphinx) -> None:
     app.config["html_permalinks_icon"] = "#"
     app.config["html_favicon"] = "static/favicon-16x16.png"
     app.config["html_context"]["language"] = app.config["language"]
-    app.add_js_file("header.js")
     app.add_js_file("language-switcher.js")
diff --git a/iati_sphinx_theme/layout.html b/iati_sphinx_theme/layout.html
index 994eacf..7ba1875 100644
--- a/iati_sphinx_theme/layout.html
+++ b/iati_sphinx_theme/layout.html
@@ -4,6 +4,7 @@
   {% if theme_plausible_domain %}
     <script defer data-domain="{{ theme_plausible_domain }}" src="https://plausible.io/js/script.js"></script>
   {% endif %}
+  <script src="https://cdn.jsdelivr.net/npm/iati-design-system@2.1.0/dist/js/iati.js"></script>
   <style>
     .iati-brand-background {
       --background-image: url("{{ pathto('marque-white.svg', 1) }}");
diff --git a/iati_sphinx_theme/static/header.js b/iati_sphinx_theme/static/header.js
deleted file mode 100644
index bc165da..0000000
--- a/iati_sphinx_theme/static/header.js
+++ /dev/null
@@ -1,69 +0,0 @@
-(function () {
-  /**
-   * @param {Object} container DOM element, which will be hidden\displayed (required)
-   * @param {string} options the class to be toggled.
-   */
-  class IatiMobileNav {
-    constructor(wrapper, openClass) {
-      this.wrapper = wrapper;
-      this.openClass = openClass;
-      const focusableElements = this.wrapper.querySelectorAll("a, button");
-      this.firstElement = focusableElements[0];
-      this.lastElement = focusableElements[focusableElements.length - 1];
-    }
-
-    show = () => {
-      this.wrapper.removeAttribute("hidden");
-      const reflow = this.wrapper.offsetHeight;
-      document.addEventListener("keydown", (e) => this.handleKeyDown(e));
-      this.wrapper.classList.add(this.openClass);
-      setTimeout(() => {
-        this.firstElement.focus();
-      }, 500);
-    };
-
-    hide = (closeCallBack) => {
-      this.wrapper.classList.remove(this.openClass);
-      document.removeEventListener("keydown", (e) => this.handleKeyDown(e));
-      setTimeout(() => {
-        this.wrapper.setAttribute("hidden", "hidden");
-        closeCallBack();
-      }, 500);
-    };
-
-    handleKeyDown(event) {
-      if (event.key === "Tab") {
-        if (document.activeElement === this.firstElement && event.shiftKey) {
-          this.lastElement.focus();
-          event.preventDefault();
-        }
-        if (document.activeElement === this.lastElement && !event.shiftKey) {
-          this.firstElement.focus();
-          event.preventDefault();
-        }
-      }
-      if (event.key == "Escape") {
-        this.hide();
-      }
-    }
-  }
-
-  document.addEventListener("DOMContentLoaded", function () {
-    const iatiMobileNav = new IatiMobileNav(
-      document.querySelector(".js-iati-mobile-nav"),
-      "iati-mobile-nav--open"
-    );
-
-    const overlay = document.querySelector(".js-iati-mobile-overlay");
-    const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open");
-    const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close");
-    const restoreFocus = () => {
-      menuOpenBtn.focus();
-    };
-    menuOpenBtn.addEventListener("click", iatiMobileNav.show);
-    menuCloseBtn.addEventListener("click", () =>
-      iatiMobileNav.hide(restoreFocus)
-    );
-    overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus));
-  });
-})();