diff --git a/components/OpenAPIComparison.js b/components/OpenAPIComparison.js
index a556c7b6a17..14cb59391a5 100644
--- a/components/OpenAPIComparison.js
+++ b/components/OpenAPIComparison.js
@@ -15,41 +15,41 @@ export default function OpenAPIComparison({ className = '' }) {
     });
 
     return (
-        <div className={`${className} flex flex-wrap text-center`}>
+        <div className={ `${ className } flex flex-wrap text-center` }>
             <div className="flex-1 border border-black p-2 mr-1">
                 <h3 className="text-lg font-sans font-medium mb-4 ml-2">OpenAPI 3.0</h3>
 
                 <div>
-                    <div className={(hoverState.Info ? `bg-blue-100 ` : ` `) + `border border-blue-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Info: false })}>
+                    <div className={ (hoverState.Info ? `bg-blue-100 ` : ` `) + `border border-blue-300 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Info: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Info: false }) } data-testid="OpenAPI-sec-info">
                         Info
                     </div>
                     <div className="flex flex-wrap flex-1">
-                        <div className={(hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Servers: false })}>
+                        <div className={ (hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Servers: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Servers: false }) } data-testid="OpenAPI-sec-servers">
                             Servers
                         </div>
                         <div className="flex-1 hover:bg-gray-200 border border-bg-gray-500 p-2 m-2">
                             Security
                         </div>
                     </div>
-                    <div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Paths: false })}>
+                    <div className={ (hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Paths: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Paths: false }) } data-testid="OpenAPI-paths">
                         Paths
                         <div className="flex flex-wrap flex-1">
-                            <div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseEnter={() => { return setHoverState(prevState => ({ ...prevState, PathItem: true })) }} onMouseLeave={() => { return setHoverState({ ...hoverState, PathItem: false }) }}>
+                            <div className={ (hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2` } onMouseEnter={ () => { return setHoverState(prevState => ({ ...prevState, PathItem: true })) } } onMouseLeave={ () => { return setHoverState({ ...hoverState, PathItem: false }) } } data-testid="OpenAPI-path-item">
                                 Path Item
 
                                 <div className="flex flex-col flex-wrap flex-1">
-                                    <div className={(hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Summary: true }))} onMouseLeave={() => { return setHoverState({ ...hoverState, Summary: false }) }}>
+                                    <div className={ (hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Summary: true })) } onMouseLeave={ () => { return setHoverState({ ...hoverState, Summary: false }) } } data-testid="OpenAPI-summary">
                                         Summary and description
                                     </div>
                                     <div className="flex flex-wrap flex-1">
-                                        <div className={(hoverState.Operation ? `bg-orange-100` : 'bg-white') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Operation: false })}>
+                                        <div className={ (hoverState.Operation ? `bg-orange-100` : 'bg-white') + ` flex-1 border border-orange-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Operation: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Operation: false }) } data-testid="OpenAPI-operation">
                                             Operation (GET, PUT, POST, etc.)
 
                                             <div className="flex flex-wrap flex-1">
-                                                <div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}>
+                                                <div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Message: false }) } data-testid="OpenAPI-request">
                                                     Request
                                                 </div>
-                                                <div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}>
+                                                <div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Message: false }) } data-testid="OpenAPI-responses">
                                                     Responses
                                                 </div>
                                             </div>
@@ -60,14 +60,14 @@ export default function OpenAPIComparison({ className = '' }) {
                         </div>
                     </div>
                     <div className="flex flex-wrap flex-1">
-                        <div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+                        <div className={ (hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Tags: true })) } onMouseLeave={ () => setHoverState({ Tags: false }) } data-testid="OpenAPI-tags">
                             <p>Tags</p>
                         </div>
-                        <div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+                        <div className={ (hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, External: true })) } onMouseLeave={ () => setHoverState({ External: false }) } data-testid="OpenAPI-external">
                             <p>External Docs</p>
                         </div>
                     </div>
-                    <div className={(hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}>
+                    <div className={ (hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Components: true })) } onMouseLeave={ () => setHoverState({ Components: false }) } data-testid="OpenAPI-components">
                         Components
 
                         <div className="grid grid-cols-2 grid-gap-2 flex-1 mt-1">
@@ -101,32 +101,32 @@ export default function OpenAPIComparison({ className = '' }) {
                 <h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 2.0</h3>
 
                 <div>
-                    <div className={(hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
+                    <div className={ (hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Info: true })) } onMouseLeave={ () => setHoverState({ Info: false }) }>
                         Info
                     </div>
                     <div className="flex flex-wrap flex-1">
-                        <div className={(hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ Servers: false })}>
+                        <div className={ (hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Servers: true })) } onMouseLeave={ () => setHoverState({ Servers: false }) }>
                             Servers (hosts + security)
                         </div>
                     </div>
-                    <div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+                    <div className={ (hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Paths: true })) } onMouseLeave={ () => setHoverState({ Paths: false }) }>
                         Channel
 
                         <div className="flex flex-wrap flex-1">
-                            <div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+                            <div className={ (hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, PathItem: true })) } onMouseLeave={ () => setHoverState({ PathItem: false }) }>
                                 Channel Item
 
                                 <div className="flex flex-wrap flex-1">
                                     <div className="flex flex-wrap flex-1">
-                                        <div className={(hoverState.Operation ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
+                                        <div className={ (hoverState.Operation ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Operation: true })) } onMouseLeave={ () => setHoverState({ Operation: false }) }>
                                             Operation (Publish and Subscribe)
 
                                             <div className="flex flex-col flex-wrap flex-1">
-                                                <div className={(hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Summary: true }))} onMouseLeave={() => setHoverState({ Summary: false })} >
+                                                <div className={ (hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Summary: true })) } onMouseLeave={ () => setHoverState({ Summary: false }) } >
                                                     Summary, description, tags, etc.
                                                 </div>
                                                 <div className="flex flex-wrap flex-1">
-                                                    <div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
+                                                    <div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ Message: false }) }>
                                                         Message
 
                                                         <div className="flex-1 border border-black box-border mr-1 p-2 m-2">
@@ -150,14 +150,14 @@ export default function OpenAPIComparison({ className = '' }) {
                         </div>
                     </div>
                     <div className="flex flex-wrap flex-1">
-                        <div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+                        <div className={ (hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Tags: true })) } onMouseLeave={ () => setHoverState({ Tags: false }) }>
                             <p>Tags</p>
                         </div>
-                        <div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+                        <div className={ (hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, External: true })) } onMouseLeave={ () => setHoverState({ External: false }) }>
                             <p>External Docs</p>
                         </div>
                     </div>
-                    <div className={(hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}>
+                    <div className={ (hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Components: true })) } onMouseLeave={ () => setHoverState({ Components: false }) }>
                         Components
 
                         <div className="grid grid-cols-2 grid-gap-2 flex-wrap flex-1 mt-2">
diff --git a/cypress/test/AlgoliaSearch.cy.js b/cypress/test/AlgoliaSearch.cy.js
new file mode 100644
index 00000000000..21d2654a6d2
--- /dev/null
+++ b/cypress/test/AlgoliaSearch.cy.js
@@ -0,0 +1,27 @@
+import { mount } from 'cypress/react'
+import AlgoliaSearch from '../../components/AlgoliaSearch'
+import { SearchButton } from '../../components/AlgoliaSearch';
+import { DocSearchModal } from '@docsearch/react'
+
+describe('AlgoliaSearch component', () => {
+  it('renders without errors', () => {
+    mount(
+      <AlgoliaSearch>
+        <SearchButton>Search</SearchButton>
+      </AlgoliaSearch>
+    )
+  })
+
+  it('performs search for a specific page', () => {
+    mount(
+      <AlgoliaSearch>
+        <SearchButton>Open Search</SearchButton>
+      </AlgoliaSearch>
+    );
+    cy.get('button').click(); // Open the search modal
+    cy.get('input[placeholder="Search resources"]').type('welcome')
+    cy.should('have.value', 'welcome')
+    // Check if the docsearch-list element contains the text 'Welcome'
+    cy.get('#docsearch-list').contains('Welcome')
+  });
+});
\ No newline at end of file
diff --git a/cypress/test/GeneratorInstallation.cy.js b/cypress/test/GeneratorInstallation.cy.js
new file mode 100644
index 00000000000..0428284badf
--- /dev/null
+++ b/cypress/test/GeneratorInstallation.cy.js
@@ -0,0 +1,8 @@
+import { mount } from 'cypress/react';
+import GeneratorInstallation from '../../components/GeneratorInstallation';
+
+describe('GeneratorInstallation', () => {
+    it('renders without errors', () => {
+        mount(<GeneratorInstallation />);
+    });
+});
\ No newline at end of file
diff --git a/cypress/test/OpenAPIComparison.cy.js b/cypress/test/OpenAPIComparison.cy.js
new file mode 100644
index 00000000000..86de5e2dd51
--- /dev/null
+++ b/cypress/test/OpenAPIComparison.cy.js
@@ -0,0 +1,57 @@
+import { mount } from '@cypress/react'
+import OpenAPIComparison from '../../components/OpenAPIComparison'
+
+describe('OpenAPIComparison', () => {
+    it('renders without errors', () => {
+        mount(<OpenAPIComparison />);
+
+    });
+
+    it('changes background color on hover', () => {
+        mount(<OpenAPIComparison />);
+
+        // Hover over the "Info" element
+        cy.contains('Info').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-sec-info"]').should('exist');
+
+        // Hover over the "Servers" element
+        cy.contains('Servers').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-sec-servers"]').should('exist');
+
+        // Hover over the "Paths" element
+        cy.contains('Paths').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-paths"]').should('exist');
+
+        // Hover over the "Path Item" element
+        cy.contains('Path Item').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-path-item"]').should('exist');
+
+        // Hover over the "Summary and description" element
+        cy.contains('Summary and description').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-summary"]').should('exist');
+
+        // Hover over the "Operation (GET, PUT, POST, etc.)" element
+        cy.contains('Operation (GET, PUT, POST, etc.)').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-operation"]').should('exist');
+
+        // Hover over the "Request" element
+        cy.contains('Request').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-request"]').should('exist');
+
+        // Hover over the "Responses" element
+        cy.contains('Responses').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-responses"]').should('exist');
+
+        // Hover over the "Tags" element
+        cy.contains('Tags').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-tags"]').should('exist');
+
+        // Hover over the "External Docs" element
+        cy.contains('External Docs').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-external"]').should('exist');
+
+        // Hover over the "Components" element
+        cy.contains('Components').trigger('mouseover');
+        cy.get('[data-testid="OpenAPI-components"]').should('exist');
+    });
+});