diff --git a/docs/_static/css/coveo_custom.css b/docs/_static/css/coveo_custom.css
new file mode 100644
index 00000000000..8eec37c1653
--- /dev/null
+++ b/docs/_static/css/coveo_custom.css
@@ -0,0 +1,45 @@
+:root {
+    --atomic-primary: rgb(var(--ost-color-navbar-background));
+    --atomic-primary-light: rgb(var(--ost-color-sst-dropdown-background-active));
+    --atomic-border-radius-md: 0.1rem;
+    --atomic-border-radius-lg: 0.2rem;
+    --atomic-border-radius-xl: 0.3rem;
+}
+
+::part(result-list-grid-clickable-container) {
+    border: 1px solid lightgray;
+    border-radius: var(--atomic-border-radius-md);
+}
+
+.view-selector-container {
+    grid-area: atomic-section-facets;
+    display: flex;
+    align-items: center;
+    column-gap: 0.5rem;
+}
+
+.view-selector-container .view-selector,
+.view-selector-container .view-selector:hover,
+.view-selector-container .view-selector:active,
+.view-selector-container .view-selector:focus {
+    border: none;
+    background-color: none;
+    background: none;
+    outline: none;
+    padding: 4px 12px;
+    font-size: 14px;
+    display: flex;
+    grid-gap: 8px;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-selector-container .view-selector i {
+    margin: 0;
+}
+
+.view-selector-container .view-selector.selected {
+    border-bottom: 2px solid rgb(var(--ost-color-navbar-background));
+    font-weight: 700;
+    color: rgb(var(--ost-color-navbar-background));
+}
diff --git a/docs/_static/js/custom.js b/docs/_static/js/custom.js
index 51f9eb605c5..a208c2c7362 100644
--- a/docs/_static/js/custom.js
+++ b/docs/_static/js/custom.js
@@ -281,3 +281,58 @@ function initSplide() {
   });
   splide.mount();
 }
+
+// ---------- COVEO SEARCH -----------
+function selectResultViewType(type, gridButton, listButton) {
+    type === "grid" ? gridButton.click() : listButton.click();
+}
+
+function addViewTypeListeners() {
+    const resultViewTypeFromLs = window.localStorage.getItem('atomicResultViewType');
+    let list = document.getElementById("atomic-result-list");
+    var viewSelectorGrid = document.getElementById("view-selector-grid");
+    viewSelectorGrid.addEventListener('click', function () {
+        list.display = "grid";
+        window.localStorage.setItem('atomicResultViewType', "grid");
+        viewSelectorGrid.classList.add('selected');
+        viewSelectorList.classList.remove('selected');
+        selectResultViewType("grid", viewSelectorGrid, viewSelectorList);
+    });
+    var viewSelectorList = document.getElementById("view-selector-list");
+    viewSelectorList.addEventListener('click', function () {
+        list.display = "list";
+        window.localStorage.setItem('atomicResultViewType', "list");
+        viewSelectorList.classList.add('selected');
+        viewSelectorGrid.classList.remove('selected');
+        selectResultViewType("list", viewSelectorGrid, viewSelectorList);
+    });
+    selectResultViewType(resultViewTypeFromLs || "grid", viewSelectorGrid, viewSelectorList);
+}
+ 
+document.addEventListener('DOMContentLoaded', function () {
+    (async () => {
+        await customElements.whenDefined("atomic-search-interface"); 
+        const searchInterfaceSa = document.querySelector("#sa-search");
+        const searchInterface = document.querySelector("#search");
+        if (searchInterfaceSa) {
+            let ver = getCurrentVersion();
+            if (ver) {
+                searchInterfaceSa.innerHTML = searchInterfaceSa.innerHTML.replace('search.html', 'search.html#f-ovversion=' + ver);
+            }
+            await searchInterfaceSa.initialize({ 
+            accessToken: "xx1f2aebd3-4307-4632-aeea-17c13378b237",
+            organizationId: "intelcorporationnonproduction2ybdyblf7",
+            });
+            searchInterfaceSa.executeFirstSearch(); 
+        }
+        if (searchInterface) {
+            await searchInterface.initialize({ 
+            accessToken: "xx1f2aebd3-4307-4632-aeea-17c13378b237",
+            organizationId: "intelcorporationnonproduction2ybdyblf7",
+            });
+            searchInterface.executeFirstSearch(); 
+        }
+        addViewTypeListeners();
+    })();
+})
+// -----------------------------------
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index 6793f261ca5..e85f73556dd 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -5,8 +5,12 @@
 <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
 
+<script type="module" src="https://static.cloud.coveo.com/atomic/v2/atomic.esm.js"></script> 
+<link rel="stylesheet" href="https://static.cloud.coveo.com/atomic/v2/themes/coveo.css">
+
 <link rel="stylesheet" href="{{ pathto('_static/css/viewer.min.css', 1) }}" type="text/css" />
 <link rel="stylesheet" href="{{ pathto('_static/css/custom.css', 1) }}" type="text/css" />
+<link rel="stylesheet" href="{{ pathto('_static/css/coveo_custom.css', 1) }}" type="text/css" />
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
@@ -28,4 +32,3 @@
 </div>
 <script src="{{ pathto('_static/js/hide_banner.js', 1) }}"></script>
 {% endblock %}
-
diff --git a/docs/_templates/search-field.html b/docs/_templates/search-field.html
index 4ed6c3803df..f4e9d142cb4 100644
--- a/docs/_templates/search-field.html
+++ b/docs/_templates/search-field.html
@@ -1,4 +1,6 @@
-<form class="searchForm bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-    <i class="icon fas fa-search"></i>
-    <input type="search" class="form-control" name="query" id="search-input" placeholder="{{ _(theme_search_bar_text) }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
-</form>
+<div>
+<atomic-search-interface id="sa-search">
+  <atomic-search-box redirection-url="search.html">
+  </atomic-search-box>
+</atomic-search-interface>
+</div>
\ No newline at end of file
diff --git a/docs/_templates/search.html b/docs/_templates/search.html
index 7b9b218860e..9902e9fe71b 100644
--- a/docs/_templates/search.html
+++ b/docs/_templates/search.html
@@ -1,31 +1,143 @@
 {%- extends "layout.html" %}
 {% set title = _('Search') %}
-{%- block scripts %}
+
+{%- block content %}
+    {# Added to support a banner with an alert #}
+    <div class="container-fluid" id="banner"></div>
+
+    {% block docs_navbar %}
     {{ super() }}
-    <link rel="stylesheet" href="{{ pathto('_static/css/gsearch.css', 1) }}" type="text/css" />
-    <script src="https://apis.google.com/js/api.js"></script>
-    <script src="{{ pathto('_static/js/gsearch.js', 1) }}"></script>
+    <div id="info-banner" class="transition-banner">
+        <p>OpenVINO 2022.1 has introduced OpenVINO API 2.0. For more information on transition steps from the previous API, see the <a href="https://docs.openvino.ai/latest/openvino_2_0_transition_guide.html">transition guide</a></p>
+        <button type="button" class="close-banner" onclick="closeTransitionBanner()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <script src="{{ pathto('_static/js/hide_banner.js', 1) }}"></script>
+    {% endblock %}
+
+    {% block body %}
+          <atomic-search-interface id="search"
+            fields-to-include='["ovversion", "ovdoctype", "filetype", "date", "source", "author", "sourcetype", "language", "description"]'>
+            <atomic-search-layout>
+            
+              <atomic-layout-section section="search">
+                <atomic-search-box>
+                  <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
+                </atomic-search-box>
+              </atomic-layout-section>
+            
+              <!-- ADDITIONAL FILTERS SECTION-->
+              <atomic-layout-section section="facets">
+                <div class="view-selector-container">
+                  <button id="view-selector-grid" class="view-selector">
+                    <i class="fas fa-th"></i> Grid
+                  </button>
+                  <button id="view-selector-list" class="view-selector">
+                    <i class="fas fa-list"></i> List
+                  </button>
+                </div>
+                <atomic-facet-manager>
+                  <atomic-facet field="ovversion" label="Version" sort-criteria="alphanumericDescending"></atomic-facet>
+                  <!-- <atomic-facet field="ovdoctype" label="Document type"></atomic-facet> -->
+                  <!-- <atomic-facet field="language" label="Language"></atomic-facet> -->
+                </atomic-facet-manager>
+              </atomic-layout-section>
+            
+              <atomic-layout-section section="main">
+              
+                <atomic-layout-section section="status">
+                  <!-- RESULTS SUMMARY SECTION -->
+                  <atomic-breadbox></atomic-breadbox>
+                  <atomic-query-summary></atomic-query-summary>
+                  <atomic-refine-toggle></atomic-refine-toggle>
+                
+                  <!-- SORT SECTION -->
+                  <atomic-sort-dropdown>
+                    <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
+                    <atomic-sort-expression label="most-recent" expression="date descending"></atomic-sort-expression>
+                  </atomic-sort-dropdown>
+                
+                  <atomic-did-you-mean></atomic-did-you-mean>
+                  <atomic-notifications></atomic-notifications>
+                
+                </atomic-layout-section>
+              
+                <atomic-layout-section section="results">
+                
+                  <atomic-result-list id="atomic-result-list" display="grid">
+                  
+                    <atomic-result-template>
+                      <template>
+                        <!-- RESULT TOP BADGES SECTION -->
+                        <atomic-result-section-badges>
+                          <atomic-result-badge>
+                            <atomic-result-multi-value-text field="ovversion"></atomic-result-multi-value-text>
+                          </atomic-result-badge>
+                        
+                          <atomic-result-badge
+                            icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg">
+                            <atomic-result-multi-value-text field="language"></atomic-result-multi-value-text>
+                          </atomic-result-badge>
+                        
+                          <atomic-field-condition must-match-is-recommendation="true">
+                            <atomic-result-badge label="Recommended"></atomic-result-badge>
+                          </atomic-field-condition>
+                        
+                          <atomic-field-condition must-match-is-top-result="true">
+                            <atomic-result-badge label="Top Result"></atomic-result-badge>
+                          </atomic-field-condition>
+                        </atomic-result-section-badges>
+                      
+                        <!-- RESULT ICON SECTION -->
+                        <atomic-result-section-visual>
+                          <atomic-icon class="icon" icon="assets://gform.svg"></atomic-result-icon>
+                          <!-- EXAMPLE OF CHANGING ICON -->
+                          <!-- <atomic-field-condition must-match-ovversion="2021.4">
+                            <atomic-icon class="icon" icon="assets://gsheet.svg"></atomic-icon>
+                          </atomic-field-condition>
+                          <atomic-field-condition must-match-ovversion="2022.2">
+                            <atomic-icon class="icon" icon="assets://html.svg"></atomic-icon>
+                          </atomic-field-condition>
+                          <atomic-field-condition must-not-match-ovversion="2022.2, 2021.4">
+                            <atomic-icon class="icon" icon="assets://gform.svg"></atomic-icon>
+                          </atomic-field-condition> -->
+                        </atomic-result-section-visual>
+                      
+                        <atomic-result-section-title>
+                          <atomic-result-link target="_blank"></atomic-result-link>
+                        </atomic-result-section-title>
+                      
+                        <atomic-result-section-excerpt>
+                          <atomic-result-text field="excerpt"></atomic-result-text>
+                        </atomic-result-section-excerpt>
+                      
+                        <atomic-result-section-bottom-metadata>
+                          <atomic-field-condition class="field" if-defined="description">
+                            <atomic-result-text field="description"></atomic-result-text>
+                          </atomic-field-condition>
+                        </atomic-result-section-bottom-metadata>
+                      </template>
+                    </atomic-result-template>
+                  
+                  </atomic-result-list>
+                
+                  <atomic-query-error></atomic-query-error>
+                  <atomic-no-results></atomic-no-results>
+                
+                </atomic-layout-section>
+              
+                <atomic-layout-section section="pagination">
+                  <atomic-load-more-results></atomic-load-more-results>
+                </atomic-layout-section>
+              
+              </atomic-layout-section>
+            </atomic-search-layout>
+          </atomic-search-interface>
+    {% endblock %}
+
+  {%- block scripts_end %}
+  {{ _webpack.body_post() }}
+  {%- endblock %}
+
 {%- endblock %}
-{% block body %}
-  <h1 id="search-documentation">{{ _('Search') }}</h1>
-  <p id="searchinfo">
-    Search Results...
-  </p>
-  <div id="gs-tabs-area"></div>
-  {% block scriptwarning %}
-  <div id="fallback" class="admonition warning">
-  <script>$('#fallback').hide();</script>
-  </div>
-  {% endblock %}
-  {% block searchbox %}
-  <form class="searchForm" action="" method="get">
-    <input id="searchfield" type="text" name="query" aria-labelledby="search-documentation" value="" />
-    <input type="submit" value="{{ _('search') }}" />
-    <span id="search-progress" style="padding-left: 10px"></span>
-  </form>
-  {% endblock %}
-  {% block searchresults %}
-  <div id="gs-tabs-area"></div>
-  <div id="searchresults"></div>
-  {% endblock %}
-{% endblock %}
diff --git a/docs/openvino_custom_sphinx_sitemap/openvino_custom_sphinx_sitemap.egg-info/PKG-INFO b/docs/openvino_custom_sphinx_sitemap/openvino_custom_sphinx_sitemap.egg-info/PKG-INFO
index 32657500683..4d4fc538936 100644
--- a/docs/openvino_custom_sphinx_sitemap/openvino_custom_sphinx_sitemap.egg-info/PKG-INFO
+++ b/docs/openvino_custom_sphinx_sitemap/openvino_custom_sphinx_sitemap.egg-info/PKG-INFO
@@ -3,3 +3,5 @@ Name: openvino-custom-sphinx-sitemap
 Version: 0.0.1
 Summary: Extends sphinx-sitemap plugin with additional sitemap metadata
 Requires-Python: >=3.9
+Requires-Dist: sphinx>=4.5.0
+Requires-Dist: sphinx-sitemap>=2.2.0
diff --git a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/search-field.html b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/search-field.html
index 6d69674e970..f4e9d142cb4 100644
--- a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/search-field.html
+++ b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/search-field.html
@@ -1,16 +1,6 @@
-<form style="padding: 0 0.5rem;" class="d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-  <div style="width:100%;" class="textfield textfield-q textfield-size-m left-slot">
-    <div class="slot left-slot-container">
-      <span class="icon fas fa-search"></span>
-    </div>
-    <input 
-      class="input input-quiet input-size-m" 
-      type="search" 
-      name="q" 
-      id="search-input" 
-      placeholder="{{ _(theme_search_bar_text) }}" 
-      aria-label="{{ theme_search_bar_text }}" 
-      autocomplete="off"
-    >
-  </div>
-</form>
\ No newline at end of file
+<div>
+<atomic-search-interface id="sa-search">
+  <atomic-search-box redirection-url="search.html">
+  </atomic-search-box>
+</atomic-search-interface>
+</div>
\ No newline at end of file