diff --git a/RELEASE.md b/RELEASE.md
index 1fa28a68d5..3d2420e1bb 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -15,6 +15,7 @@ Please follow the established format:
 - Refactor backend integration with Kedro by replacing bootstrap_project with configure_project. (#1796)
 - Enhance kedro-viz doc integration. (#1874)
 - Fix Kedro-Viz waiting for valid Kedro project. (#1871)
+- Enhance Kedro-Viz documentation by using Kedro-sphinx-theme. (#1898)
 
 # Release 9.0.0
 
diff --git a/docs/source/_templates/layout.html b/docs/source/_templates/layout.html
deleted file mode 100644
index 5e2cd48b45..0000000000
--- a/docs/source/_templates/layout.html
+++ /dev/null
@@ -1,76 +0,0 @@
-{% extends "!layout.html" %} {%- block extrabody %}
-
-<div class="wy-grid-header">
-  <div class="wy-header-logo">
-    {%- set _logo_url = logo_url|default(pathto('_static/' + (logo or ""), 1))
-    %} {%- set _root_doc = root_doc|default(master_doc) %}
-    <a href="{{ pathto(_root_doc) }}">
-      <img src="https://raw.githubusercontent.com/kedro-org/kedro-brand-identity/main/horizontal/color/kedro-horizontal-color-on-light.svg" class="logo" alt="{{ _('Logo') }}" />
-    </a>
-  </div>
-
-  <div class="wy-main-nav">
-    <a href="https://docs.kedro.org">Kedro</a>
-    <a href="/" class="active">Kedro-Viz</a>
-    <a href="https://docs.kedro.org/projects/kedro-datasets">Kedro-Datasets</a>
-  </div>
-
-  {%- include "searchbox.html" %}
-</div>
-
-{% endblock %} {%- block extrahead %}
-<script type="text/javascript">
-    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
-
-    heap.load({{ "522942930" }});
-
-    //inline styling for read-the-docs flyout
-    document.documentElement.style.setProperty('--readthedocs-flyout-font-size', '0.9em');
-
-    // Wait for DOM to load and clone main nav into the sidebar
-    document.addEventListener("DOMContentLoaded", function() {
-
-      function showReadTheDocsSearch() {
-        const searchEvent = new CustomEvent("readthedocs-search-show");
-        document.dispatchEvent(searchEvent);
-      }
-
-      // Activate read-the-docs search when user focuses on search
-      document.querySelector('div[role="search"] form input').addEventListener("focus", showReadTheDocsSearch);
-
-      // Add keyboard event listener for Cmd+K (Mac) or Ctrl+K (Windows)
-      document.addEventListener("keydown", function(e) {
-        if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault(); 
-          showReadTheDocsSearch();
-        }
-      });
-
-      // Clone main nav into the sidebar
-      var sidebarSearch = document.querySelector('.wy-side-nav-search div[role="search"]');
-      sidebarSearch.parentNode.insertBefore(document.querySelector('.wy-main-nav').cloneNode(true), sidebarSearch);
-
-      // Prepend close button to mobile header
-      var closeBtn = document.createElement("span");
-      closeBtn.dataset.toggle = 'wy-nav-top';
-      closeBtn.classList.add('wy-nav-top-close');
-      document.querySelector('.wy-nav-top').prepend(closeBtn);
-
-      // Prepend open button to mobile header
-      var openBtn = document.createElement("span");
-      openBtn.dataset.toggle = 'wy-nav-top';
-      openBtn.classList.add('wy-nav-top-open');
-      document.querySelector('.wy-nav-top').prepend(openBtn);
-  });
-</script>
-<link
-  rel="stylesheet"
-  href="https://kedro-shared-files.s3.eu-west-2.amazonaws.com/qb1-sphinx-rtd.css"
-  type="text/css"
-/>
-<link
-  rel="stylesheet"
-  href="https://kedro-shared-files.s3.eu-west-2.amazonaws.com/theme-overrides.css"
-  type="text/css"
-/>
-{% endblock %}
diff --git a/docs/source/conf.py b/docs/source/conf.py
index be246d7c16..1d3edbd09d 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -62,7 +62,7 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = "sphinx_rtd_theme"
+html_theme = "kedro-sphinx-theme"
 
 # Theme options are theme-specific and customise the look and feel of a theme
 # further.  For a list of options available for each theme, see the
diff --git a/package/setup.py b/package/setup.py
index d2257d6f6d..e04cda700f 100644
--- a/package/setup.py
+++ b/package/setup.py
@@ -52,11 +52,7 @@
     },
     extras_require={
         "docs": [
-            "sphinx>=5.3,<7.3",
-            "sphinx_copybutton==0.5.2",
-            "sphinx-notfound-page",
-            "sphinx_rtd_theme==1.3.0",
-            "myst-parser>=1.0,<2.1",
+            "kedro-sphinx-theme==2024.4.0",
         ],
         "aws": ["s3fs>=2021.4"],
         "azure": ["adlfs>=2021.4"],