diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx
index be8a5c6bb340..3e3e63ae9d74 100644
--- a/components/AlgoliaSearch.tsx
+++ b/components/AlgoliaSearch.tsx
@@ -1,13 +1,18 @@
 /* eslint-disable no-underscore-dangle */
 import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react';
-import { DocSearchModal } from '@docsearch/react';
 import clsx from 'clsx';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
+const DocSearchModal = dynamic(
+  () => import('@docsearch/react').then((mod) => ({ default: mod.DocSearchModal })),
+  { ssr: false }
+);
+
 export const INDEX_NAME = 'asyncapi';
 export const DOCS_INDEX_NAME = 'asyncapi-docs';
 const APP_ID = 'Z621OGRI9Y';
diff --git a/styles/globals.css b/styles/globals.css
index b5308ef4777c..c6a78b507f28 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,4 @@
 @import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css);
-@import url(https://cdn.jsdelivr.net/npm/@docsearch/css@3);
 
 @import "swiper/css";
 @import "swiper/css/a11y";