diff --git a/build_search_index.sh b/build_search_index.sh
new file mode 100644
index 000000000..69668865b
--- /dev/null
+++ b/build_search_index.sh
@@ -0,0 +1,14 @@
+partials="partials"
+
+for dir in content/*
+  do 
+    mydir="$(basename $dir)"
+    if [ "$mydir" != "$partials" ]
+      then
+        { # try
+          npx pagefind --site .next/server/pages/en/"$mydir" --output-path .next/static/chunks/pages/pageFind"$mydir";
+        } || { # catch
+          echo "Search index creation for version $mydir FAILED!"
+        }
+    fi
+done
diff --git a/components/Breadcrumb/Breadcrumb.tsx b/components/Breadcrumb/Breadcrumb.tsx
index a5307159a..ea84c2654 100644
--- a/components/Breadcrumb/Breadcrumb.tsx
+++ b/components/Breadcrumb/Breadcrumb.tsx
@@ -29,7 +29,7 @@ export default function Breadcrumb({ slug }: { slug: string[] }) {
     });
 
   return slug ? (
-    <div className={styles.Container}>
+    <div className={styles.Container} id="breadcrumb-container">
       {breadcrumb.map((crumb, idx) => {
         const hrefString = enableVersion
           ? `/${docVersion}/${crumb.path}`
diff --git a/components/CategoriesNav/CategoriesNav.tsx b/components/CategoriesNav/CategoriesNav.tsx
index ce23221ad..2d9e925f8 100644
--- a/components/CategoriesNav/CategoriesNav.tsx
+++ b/components/CategoriesNav/CategoriesNav.tsx
@@ -38,6 +38,7 @@ export default function CategoriesNav({ menu }: Props) {
         styles.Container,
         navBarCollapsed ? styles.CollapsedNav : ""
       )}
+      id="categories-nav-container"
     >
       <div className={styles.CategoriesContainer}>
         {menu.map((item) => {
diff --git a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.interface.ts b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.interface.ts
index b2c4944f2..e657e9d67 100644
--- a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.interface.ts
+++ b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.interface.ts
@@ -4,4 +4,5 @@ export interface ConnectorDetailsHeaderProps {
   platform: string;
   availableFeatures: Array<string>;
   unavailableFeatures: Array<string>;
+  searchWeight: string;
 }
diff --git a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx
index 35f843e23..a276dafe5 100644
--- a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx
+++ b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx
@@ -17,18 +17,29 @@ function ConnectorDetailsHeader({
   platform,
   availableFeatures,
   unavailableFeatures,
+  searchWeight,
 }: Readonly<ConnectorDetailsHeaderProps>) {
   const showSubHeading = useMemo(
     () => !isEmpty(availableFeatures) || !isEmpty(unavailableFeatures),
     [availableFeatures, unavailableFeatures]
   );
 
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+
   return (
     <div className={styles.Container}>
       <div className={styles.Heading}>
         <div className="flex items-center gap-3">
           <div className={styles.ImageContainer}>{getConnectorImage(name)}</div>
-          <div className={styles.ConnectorName}>{name}</div>
+          <div className={styles.ConnectorName} {...otherProps}>
+            {name}
+          </div>
           {getStageBadge(stage)}
         </div>
         <div className={styles.PlatformDetails}>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 63911da37..73a85e8fd 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -1,15 +1,17 @@
 import classNames from "classnames";
 import Link from "next/link";
-import React from "react";
-import styles from "./Footer.module.css";
 import {
   footerIconItemsData,
   footerItemsData,
 } from "../../constants/footer.constants";
+import styles from "./Footer.module.css";
 
 export default function Footer() {
   return (
-    <footer className={classNames(styles.Container, "footer")}>
+    <footer
+      className={classNames(styles.Container, "footer")}
+      id="footer-container"
+    >
       <hr className={styles.Separator} />
       <section className={styles.InnerContainer}>
         <nav className={styles.Navigation}>
diff --git a/components/Heading/Heading.interface.ts b/components/Heading/Heading.interface.ts
new file mode 100644
index 000000000..fef857813
--- /dev/null
+++ b/components/Heading/Heading.interface.ts
@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface HeadingProps {
+  children: ReactNode;
+  id?: string;
+  level?: number;
+  className?: string;
+  searchWeight?: string;
+}
diff --git a/components/Heading/Heading.module.css b/components/Heading/Heading.module.css
index f44ceecfd..6483a187f 100644
--- a/components/Heading/Heading.module.css
+++ b/components/Heading/Heading.module.css
@@ -5,6 +5,11 @@
   margin-top: 32px;
 }
 
+.H1Element{
+  border-bottom: 1px solid var(--default-border-color);
+  padding-bottom: 16px;
+}
+
 .CopiedText {
   margin-left: 16px;
   font-size: 12px;
diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx
index e64f99731..a362ab639 100644
--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@@ -1,9 +1,16 @@
 import classNames from "classnames";
 import { useState } from "react";
+import { HeadingProps } from "./Heading.interface";
 import styles from "./Heading.module.css";
 import HeadingElement from "./HeadingElement";
 
-export function Heading({ id = "", level = 1, children, className }) {
+export function Heading({
+  id = "",
+  level = 1,
+  children,
+  className = "",
+  searchWeight,
+}: Readonly<HeadingProps>) {
   const [copied, setCopied] = useState(false);
 
   const copyLinkUnbound = async () => {
@@ -14,10 +21,19 @@ export function Heading({ id = "", level = 1, children, className }) {
     window.setTimeout(() => setCopied(false), 2000);
   };
 
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+
   return (
     <HeadingElement
       className={classNames(className, styles.HeaderLink)}
       level={level}
+      {...otherProps}
     >
       <a id={id} className="hash-link" />
       <span>{children}</span>
diff --git a/components/Heading/HeadingElement.tsx b/components/Heading/HeadingElement.tsx
index cb8bc740e..f5f7c5f7f 100644
--- a/components/Heading/HeadingElement.tsx
+++ b/components/Heading/HeadingElement.tsx
@@ -1,26 +1,57 @@
-import React from "react";
-
 interface Props {
   level: number;
-  className: string;
+  className?: string;
   children: any;
 }
 
-export default function HeadingElement({ level, className, children }: Props) {
+export default function HeadingElement({
+  level,
+  className = "",
+  children,
+  ...otherProps
+}: Readonly<Props>) {
   switch (level) {
     case 1:
-      return <h1 className={className}>{children}</h1>;
+      return (
+        <h1 className={className} {...otherProps}>
+          {children}
+        </h1>
+      );
     case 2:
-      return <h2 className={className}>{children}</h2>;
+      return (
+        <h2 className={className} {...otherProps}>
+          {children}
+        </h2>
+      );
     case 3:
-      return <h3 className={className}>{children}</h3>;
+      return (
+        <h3 className={className} {...otherProps}>
+          {children}
+        </h3>
+      );
     case 4:
-      return <h4 className={className}>{children}</h4>;
+      return (
+        <h4 className={className} {...otherProps}>
+          {children}
+        </h4>
+      );
     case 5:
-      return <h5 className={className}>{children}</h5>;
+      return (
+        <h5 className={className} {...otherProps}>
+          {children}
+        </h5>
+      );
     case 6:
-      return <h6 className={className}>{children}</h6>;
+      return (
+        <h6 className={className} {...otherProps}>
+          {children}
+        </h6>
+      );
     default:
-      return <h6 className={className}>{children}</h6>;
+      return (
+        <h6 className={className} {...otherProps}>
+          {children}
+        </h6>
+      );
   }
 }
diff --git a/components/Search/CustomSearch/CustomSearch.tsx b/components/Search/CustomSearch/CustomSearch.tsx
index 9b88e7220..03d164303 100644
--- a/components/Search/CustomSearch/CustomSearch.tsx
+++ b/components/Search/CustomSearch/CustomSearch.tsx
@@ -1,38 +1,31 @@
 import { debounce } from "lodash";
 import { useCallback, useEffect, useRef } from "react";
-import { useSearchBox } from "react-instantsearch";
+import { useDocVersionContext } from "../../../context/DocVersionContext";
 import { useSearchContext } from "../../../context/SearchContext";
 import { isCommandKeyPress } from "../../../utils/SearchUtils";
 import styles from "./CustomSearch.module.css";
 
 interface CustomSearchProps {
-  searchValue: string;
   searchText: string;
-  bringElementIntoView: (
-    searchResults: NodeListOf<Element>,
-    focusedSearchItemNumber: number
-  ) => void;
   handleSearchValue: (value: string) => void;
   handleSearchText: (value: string) => void;
   handleIsSuggestionVisible: (value: boolean) => void;
 }
 
 function CustomSearch({
-  bringElementIntoView,
-  searchValue,
   searchText,
   handleSearchValue,
   handleIsSuggestionVisible,
   handleSearchText,
-}: CustomSearchProps) {
-  const { refine } = useSearchBox();
+}: Readonly<CustomSearchProps>) {
+  const { docVersion } = useDocVersionContext();
   const searchInputRef = useRef<HTMLInputElement>();
   const { onChangeFocusedSearchItem } = useSearchContext();
 
   const handleSearchValueChange = useCallback(
     (searchText: string) => {
       handleSearchValue(searchText);
-      onChangeFocusedSearchItem(1);
+      onChangeFocusedSearchItem(0);
 
       setTimeout(() => {
         const searchResults = document.getElementById("search-modal");
@@ -87,10 +80,11 @@ function CustomSearch({
   const handleInputChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = event.target;
+      window[`pageFind${docVersion}`].preload(value);
       debouncedSearch(value);
       handleSearchText(value);
     },
-    [debouncedSearch, handleSearchText]
+    [debouncedSearch, handleSearchText, docVersion]
   );
 
   useEffect(() => {
@@ -101,10 +95,6 @@ function CustomSearch({
     document.body.addEventListener("click", handleOutsideClick);
   }, []);
 
-  useEffect(() => {
-    refine(searchValue);
-  }, [searchValue]);
-
   return (
     <input
       className={styles.Input}
diff --git a/components/Search/ResultItem/ResultItem.interface.ts b/components/Search/ResultItem/ResultItem.interface.ts
new file mode 100644
index 000000000..7501647e7
--- /dev/null
+++ b/components/Search/ResultItem/ResultItem.interface.ts
@@ -0,0 +1,14 @@
+export interface ResultData {
+  id: string;
+  url: string;
+  raw_url: string;
+  excerpt: string;
+  meta: {
+    title: string;
+  };
+}
+
+export interface ResultsProps {
+  id: number;
+  result: ResultData;
+}
diff --git a/components/Search/ResultItem/ResultItem.module.css b/components/Search/ResultItem/ResultItem.module.css
new file mode 100644
index 000000000..a1802eea8
--- /dev/null
+++ b/components/Search/ResultItem/ResultItem.module.css
@@ -0,0 +1,26 @@
+.Container{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--default-text-color);
+    padding: 8px;
+    border-radius: 4px;
+    font-weight: 400;
+    text-align: left;
+    width: 100%
+}
+
+.Container mark{
+    background-color: white;
+    font-weight: 600;
+}
+
+.ActiveContainer, .ActiveContainer mark{
+    background-color: var(--primary-color);
+    color: white
+}
+
+.ResultTitle{
+    font-weight: 700;
+}
\ No newline at end of file
diff --git a/components/Search/ResultItem/ResultItem.tsx b/components/Search/ResultItem/ResultItem.tsx
new file mode 100644
index 000000000..34ba59bad
--- /dev/null
+++ b/components/Search/ResultItem/ResultItem.tsx
@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import Link from "next/link";
+import { useRef } from "react";
+import { useSearchContext } from "../../../context/SearchContext";
+import { ResultsProps } from "./ResultItem.interface";
+import styles from "./ResultItem.module.css";
+
+export default function Results({ result, id }: Readonly<ResultsProps>) {
+  const { focusedSearchItem, onChangeFocusedSearchItem } = useSearchContext();
+  const resultItemRef = useRef<HTMLButtonElement>(null);
+
+  const handleHover = () => {
+    const searchItems = document.querySelectorAll(`[class^="search-result-"]`);
+
+    searchItems.forEach((item) => {
+      item.classList.remove(styles.ActiveContainer);
+    });
+
+    resultItemRef.current.classList.add(styles.ActiveContainer);
+
+    const elementSerialNumber = resultItemRef.current.id.split("-")[2];
+    onChangeFocusedSearchItem(Number(elementSerialNumber));
+  };
+
+  return (
+    <Link href={result.raw_url ?? result.url}>
+      <button
+        className={classNames(
+          `search-result-${id}`,
+          styles.Container,
+          id === focusedSearchItem ? styles.ActiveContainer : ""
+        )}
+        id={`search-result-${id}`}
+        key={result.id}
+        ref={resultItemRef}
+        onMouseEnter={handleHover}
+      >
+        <span className={styles.ResultTitle}>{result.meta.title}</span>
+        <span dangerouslySetInnerHTML={{ __html: result.excerpt }}></span>
+      </button>
+    </Link>
+  );
+}
diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
index 5ee834856..98f36cf0a 100644
--- a/components/Search/Search.tsx
+++ b/components/Search/Search.tsx
@@ -3,13 +3,13 @@ import { isEmpty, isNull, isUndefined } from "lodash";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { IoIosCloseCircleOutline } from "react-icons/io";
-import { Configure, Hits, useInstantSearch } from "react-instantsearch";
+import { useDocVersionContext } from "../../context/DocVersionContext";
 import { useNavBarCollapsedContext } from "../../context/NavBarCollapseContext";
 import { useSearchContext } from "../../context/SearchContext";
 import { ReactComponent as Loader } from "../../images/icons/loader.svg";
 import { ReactComponent as SearchIcon } from "../../images/icons/search.svg";
 import CustomSearch from "./CustomSearch/CustomSearch";
-import HitComponent from "./HitComponent/HitComponent";
+import ResultItem from "./ResultItem/ResultItem";
 import styles from "./Search.module.css";
 
 interface SearchProps {
@@ -22,19 +22,17 @@ export default function Search({
   showHotKeys = true,
   className = "",
   resultsContainerClassName = "",
-}: SearchProps) {
+}: Readonly<SearchProps>) {
+  const { docVersion } = useDocVersionContext();
   const [hotKey, setHotKey] = useState("second");
   const [searchValue, setSearchValue] = useState(""); // To manage search value with debouncing
   const [searchText, setSearchText] = useState(""); // To manage search input value
   const [isSuggestionVisible, setIsSuggestionVisible] =
     useState<boolean>(false);
-  const [showNoDataPlaceHolder, setShowNoDataPlaceHolder] =
-    useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [results, setResults] = useState([]);
   const { navBarCollapsed } = useNavBarCollapsedContext();
 
-  const { status, results } = useInstantSearch();
-
   const { focusedSearchItem, onChangeFocusedSearchItem } = useSearchContext();
 
   const router = useRouter();
@@ -81,7 +79,9 @@ export default function Search({
   const handleKey = (e: KeyboardEvent) => {
     e.stopPropagation();
     if (isSuggestionVisible) {
-      const searchResults = document.querySelectorAll(".ais-Hits-item");
+      const searchResults = document.querySelectorAll(
+        `[class^="search-result-"]`
+      );
 
       switch (e.key) {
         case "Enter": {
@@ -92,7 +92,7 @@ export default function Search({
         case "ArrowUp": {
           onChangeFocusedSearchItem((currentFocus) => {
             const focusedSearchItemNumber =
-              currentFocus > 1 ? currentFocus - 1 : 1;
+              currentFocus > 0 ? currentFocus - 1 : 1;
 
             bringElementIntoView(searchResults, focusedSearchItemNumber);
 
@@ -106,7 +106,7 @@ export default function Search({
 
           onChangeFocusedSearchItem((currentFocus) => {
             const focusedSearchItemNumber =
-              currentFocus < resultCount - 1 ? currentFocus + 1 : resultCount;
+              currentFocus < resultCount - 2 ? currentFocus + 1 : resultCount;
 
             bringElementIntoView(searchResults, focusedSearchItemNumber);
 
@@ -144,13 +144,38 @@ export default function Search({
     };
   }, [searchValue, focusedSearchItem, isSuggestionVisible]);
 
-  useEffect(() => {
-    setIsLoading(status === "loading");
-  }, [status]);
+  const handleSearch = async () => {
+    try {
+      setIsLoading(true);
+      if (window[`pageFind${docVersion}`]) {
+        const search = await window[`pageFind${docVersion}`].search(
+          // To show results for "releases" as a default suggestions when no search text is present
+          isEmpty(searchValue) ? "releases" : searchValue,
+          { sort: { weight: "desc" } }
+        );
+
+        // Select only top 20 results
+        const topResults = search.results.slice(0, 20);
+
+        // The data for each search result should be loaded independently
+        // ref: https://pagefind.app/docs/api/#loading-a-result
+        const parsedResultsData = topResults.map(async (result) => {
+          const resultData = await result.data();
+          return { id: result.id, ...resultData };
+        });
+
+        setResults(await Promise.all(parsedResultsData));
+      }
+    } catch {
+      //
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   useEffect(() => {
-    setShowNoDataPlaceHolder(isEmpty(results.hits));
-  }, [results]);
+    handleSearch();
+  }, [searchValue, window[`pageFind${docVersion}`], docVersion]);
 
   return (
     <div
@@ -161,8 +186,6 @@ export default function Search({
       )}
     >
       <CustomSearch
-        bringElementIntoView={bringElementIntoView}
-        searchValue={searchValue}
         searchText={searchText}
         handleSearchValue={handleSearchValue}
         handleSearchText={handleSearchText}
@@ -195,19 +218,12 @@ export default function Search({
         )}
         id="search-modal"
       >
-        <Configure
-          attributesToSnippet={["content:10"]}
-          snippetEllipsisText={"..."}
-        />
-        {showNoDataPlaceHolder ? (
+        {isEmpty(results) || isUndefined(results) ? (
           <div className={styles.NoDataPlaceholder}>No Results found</div>
         ) : (
-          <Hits
-            classNames={{
-              item: styles.ListItem,
-            }}
-            hitComponent={HitComponent}
-          />
+          results.map((result, id) => (
+            <ResultItem key={result.id} id={id} result={result} />
+          ))
         )}
       </div>
     </div>
diff --git a/components/TopNav/TopNav.tsx b/components/TopNav/TopNav.tsx
index 4e734d4dc..66d00b31a 100644
--- a/components/TopNav/TopNav.tsx
+++ b/components/TopNav/TopNav.tsx
@@ -37,7 +37,8 @@ export default function TopNav({ versionsList, logo }: Readonly<TopNavProps>) {
   const router = useRouter();
   const [displayNavBarCollapseButton, setDisplayNavBarCollapseButton] =
     useState(false);
-  const { docVersion, onChangeDocVersion, enableVersion } = useDocVersionContext();
+  const { docVersion, onChangeDocVersion, enableVersion } =
+    useDocVersionContext();
   const { navBarCollapsed, onChangeNavBarCollapsed } =
     useNavBarCollapsedContext();
 
@@ -84,6 +85,7 @@ export default function TopNav({ versionsList, logo }: Readonly<TopNavProps>) {
         styles.NavBar,
         navBarCollapsed ? styles.CollapsedNavBar : ""
       )}
+      id="top-nav-container"
     >
       <div className={styles.CollapsedDivContainer}>
         <div className={styles.LogoContainer}>
diff --git a/components/common/Paragraph/Paragraph.interface.ts b/components/common/Paragraph/Paragraph.interface.ts
new file mode 100644
index 000000000..68118af21
--- /dev/null
+++ b/components/common/Paragraph/Paragraph.interface.ts
@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface ParagraphProps {
+  children: ReactNode;
+  searchWeight?: string;
+}
diff --git a/components/common/Paragraph/Paragraph.tsx b/components/common/Paragraph/Paragraph.tsx
new file mode 100644
index 000000000..e26de0bfd
--- /dev/null
+++ b/components/common/Paragraph/Paragraph.tsx
@@ -0,0 +1,14 @@
+import { ParagraphProps } from "./Paragraph.interface";
+
+function Paragraph({ searchWeight, children }: ParagraphProps) {
+  let otherProps = {};
+
+  if (searchWeight) {
+    otherProps = {
+      ["data-pagefind-weight"]: searchWeight,
+    };
+  }
+  return <p {...otherProps}>{children}</p>;
+}
+
+export default Paragraph;
diff --git a/context/SearchContext.tsx b/context/SearchContext.tsx
index 03a951e7c..95b529cc8 100644
--- a/context/SearchContext.tsx
+++ b/context/SearchContext.tsx
@@ -1,7 +1,7 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 
 export const SearchContext = React.createContext({
-  focusedSearchItem: 1,
+  focusedSearchItem: 0,
   onChangeFocusedSearchItem: (number: number | ((num: number) => number)) =>
     null,
 });
@@ -9,7 +9,7 @@ export const SearchContext = React.createContext({
 export const useSearchContext = () => useContext(SearchContext);
 
 export const SearchContextProvider = ({ children }) => {
-  const [focusedSearchItem, setFocusedSearchItem] = useState(1);
+  const [focusedSearchItem, setFocusedSearchItem] = useState(0);
 
   const onChangeFocusedSearchItem = (
     number: number | ((num: number) => number)
@@ -17,10 +17,13 @@ export const SearchContextProvider = ({ children }) => {
     setFocusedSearchItem(number);
   };
 
+  const contextValue = useMemo(
+    () => ({ focusedSearchItem, onChangeFocusedSearchItem }),
+    [focusedSearchItem, onChangeFocusedSearchItem]
+  );
+
   return (
-    <SearchContext.Provider
-      value={{ focusedSearchItem, onChangeFocusedSearchItem }}
-    >
+    <SearchContext.Provider value={contextValue}>
       {children}
     </SearchContext.Provider>
   );
diff --git a/lib/api.ts b/lib/api.ts
index 3b97c7e67..546164bf8 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -28,8 +28,15 @@ export function getAllFilesInDirectory(
 }
 
 export function getArticleSlugs() {
-  const files = getAllFilesInDirectory(ARTICLES_DIRECTORY);
-  return files;
+  const paths = getAllFilesInDirectory(ARTICLES_DIRECTORY);
+  const partialsFilteredPaths = paths.filter(
+    (path) => !path.includes(PARTIALS_DIRECTORY)
+  );
+  const homepageFilteredPaths = partialsFilteredPaths.filter((path) => {
+    const isHomepagePath = /(v\d+\.\d+\.x\/index.md)$/.test(path);
+    return !isHomepagePath;
+  });
+  return homepageFilteredPaths;
 }
 
 export function getArticleSlugFromString(pathname) {
diff --git a/lib/markdoc.ts b/lib/markdoc.ts
index 5e377821b..431b62edd 100644
--- a/lib/markdoc.ts
+++ b/lib/markdoc.ts
@@ -27,6 +27,7 @@ import Image from "../components/common/Image/Image";
 import InlineCallout from "../components/common/InlineCallout/InlineCallout";
 import InlineCalloutContainer from "../components/common/InlineCallout/InlineCalloutContainer";
 import Note from "../components/common/Note/Note";
+import Paragraph from "../components/common/Paragraph/Paragraph";
 import MultiTablesWrapper from "../components/common/Table/MultiTablesWrapper";
 import Table from "../components/common/Table/Table";
 import Tile from "../components/common/Tiles/Tile/Tile";
@@ -52,6 +53,7 @@ export const components = {
   CodePreview,
   Code,
   Heading,
+  Paragraph,
   Image,
   Step,
   StepsContainer,
diff --git a/markdoc/nodes/heading.markdoc.ts b/markdoc/nodes/heading.markdoc.ts
index ac82383b8..06ed4fc10 100644
--- a/markdoc/nodes/heading.markdoc.ts
+++ b/markdoc/nodes/heading.markdoc.ts
@@ -38,6 +38,7 @@ export const heading = {
     level: { type: Number, required: true, default: 1 },
     className: { type: String },
     children: { type: String },
+    searchWeight: { type: String },
   },
   transform(node, config) {
     const attributes = node.transformAttributes(config);
diff --git a/markdoc/nodes/index.ts b/markdoc/nodes/index.ts
index 6969e7d31..71bda0238 100644
--- a/markdoc/nodes/index.ts
+++ b/markdoc/nodes/index.ts
@@ -1,6 +1,8 @@
 /* Use this file to export your markdoc nodes */
 export * from "./code.markdoc";
 export * from "./fence.markdoc";
-export * from "./link.markdoc";
 export * from "./heading.markdoc";
+export * from "./link.markdoc";
+export * from "./paragraph.markdoc";
 export * from "./table/table.markdoc";
+
diff --git a/markdoc/nodes/paragraph.markdoc.ts b/markdoc/nodes/paragraph.markdoc.ts
new file mode 100644
index 000000000..efd014440
--- /dev/null
+++ b/markdoc/nodes/paragraph.markdoc.ts
@@ -0,0 +1,6 @@
+export const paragraph = {
+  render: "Paragraph",
+  attributes: {
+    searchWeight: { type: String },
+  },
+};
diff --git a/markdoc/tags/connectorDetailsHeader.markdoc.ts b/markdoc/tags/connectorDetailsHeader.markdoc.ts
index 7b2ea254e..6714e8b9e 100644
--- a/markdoc/tags/connectorDetailsHeader.markdoc.ts
+++ b/markdoc/tags/connectorDetailsHeader.markdoc.ts
@@ -25,5 +25,6 @@ export const connectorDetailsHeader = {
       type: Array<string>,
       description: "List of unavailable features for the connector.",
     },
+    searchWeight: { type: String },
   },
 };
diff --git a/package.json b/package.json
index b232708be..374439e00 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && sh build_search_index.sh",
     "start": "next start",
     "export": "next build && next export"
   },
@@ -19,6 +19,7 @@
     "lodash": "^4.17.21",
     "next": "13.3.0",
     "next-mdx-remote": "^4.1.0",
+    "pagefind": "^1.2.0",
     "prismjs": "1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/pagefind.yml b/pagefind.yml
new file mode 100644
index 000000000..cde54c2ac
--- /dev/null
+++ b/pagefind.yml
@@ -0,0 +1,8 @@
+exclude_selectors:
+  - "#side-nav-container"
+  - "#top-nav-container"
+  - "#categories-nav-container"
+  - "#footer-container"
+  - "#breadcrumb-container"
+  - "#article-title-metadata"
+  - "#error-page-container"
\ No newline at end of file
diff --git a/pages/404.tsx b/pages/404.tsx
new file mode 100644
index 000000000..2b1d76ad2
--- /dev/null
+++ b/pages/404.tsx
@@ -0,0 +1,5 @@
+function error() {
+  return <div>404</div>;
+}
+
+export default error;
diff --git a/pages/500.tsx b/pages/500.tsx
new file mode 100644
index 000000000..a853cb0de
--- /dev/null
+++ b/pages/500.tsx
@@ -0,0 +1,5 @@
+function error() {
+  return <div>500</div>;
+}
+
+export default error;
diff --git a/pages/[version]/[...slug].tsx b/pages/[version]/[...slug].tsx
index 68f24e7b8..508e42add 100644
--- a/pages/[version]/[...slug].tsx
+++ b/pages/[version]/[...slug].tsx
@@ -8,10 +8,7 @@ import DocsPageLayout from "../../components/PageLayouts/DocsPageLayout/DocsPage
 import { SelectOption } from "../../components/SelectDropdown/SelectDropdown";
 import TopNav from "../../components/TopNav/TopNav";
 import { API_AND_SDK_MENU_ITEMS } from "../../constants/categoriesNav.constants";
-import {
-  DEFAULT_VERSION,
-  REGEX_VERSION_MATCH,
-} from "../../constants/version.constants";
+import { REGEX_VERSION_MATCH } from "../../constants/version.constants";
 import { getVersionsList } from "../../lib/api";
 import { configs } from "../../lib/markdoc";
 import { getFormattedPartials } from "../../utils/CommonUtils";
@@ -27,6 +24,7 @@ export interface SlugProps {
   partials: Record<string, string>;
   pageTitle: string;
   pageDescription: string;
+  weight?: string;
 }
 
 export default function Article({
@@ -34,6 +32,8 @@ export default function Article({
   slug,
   versionsList,
   partials,
+  weight,
+  pageTitle,
 }: Readonly<SlugProps>) {
   const ast = useMemo(() => Markdoc.parse(content), [content]);
 
@@ -65,22 +65,35 @@ export default function Article({
       : { value: false, pageInfoObject: { label: "", value: "" } };
   }, [slug]);
 
-  return isAPIsPage.value ? (
-    <APIPageLayout
-      parsedContent={parsedContent}
-      pageInfoObject={isAPIsPage.pageInfoObject}
-    />
-  ) : (
-    <DocsPageLayout
-      navbar={<TopNav versionsList={versionsList} />}
-      parsedContent={parsedContent}
-      slug={slug}
-      footer={<Footer />}
-    />
+  return (
+    <>
+      <div
+        className="hidden"
+        data-pagefind-sort="weight[data-weight]"
+        data-pagefind-meta="title"
+        data-weight={weight ?? "0"}
+        id="article-title-metadata"
+      >
+        {pageTitle}
+      </div>
+      {isAPIsPage.value ? (
+        <APIPageLayout
+          parsedContent={parsedContent}
+          pageInfoObject={isAPIsPage.pageInfoObject}
+        />
+      ) : (
+        <DocsPageLayout
+          navbar={<TopNav versionsList={versionsList} />}
+          parsedContent={parsedContent}
+          slug={slug}
+          footer={<Footer />}
+        />
+      )}
+    </>
   );
 }
 
-export async function getServerSideProps(
+export async function getStaticProps(
   context: GetServerSidePropsContext
 ): Promise<GetServerSidePropsResult<SlugProps>> {
   try {
@@ -88,16 +101,6 @@ export async function getServerSideProps(
     const slug = context.params.slug as string[];
     const pathWithoutVersion = slug.join("/");
 
-    // If the version in the URL is the default version, change the path to /latest
-    if (version === DEFAULT_VERSION) {
-      return {
-        redirect: {
-          permanent: false,
-          destination: `/latest/${pathWithoutVersion}`,
-        },
-      };
-    }
-
     // Get all paths for the docs
     const paths = await getPaths();
 
@@ -136,3 +139,18 @@ export async function getServerSideProps(
     };
   }
 }
+
+export async function getStaticPaths() {
+  // Avoid page generation for dev server.
+  if (process.env.NODE_ENV === "development") {
+    return {
+      paths: [], // Indicates that no page needs be created at build time
+      fallback: "blocking", // Indicates the type of fallback
+    };
+  }
+
+  return {
+    paths: await getPaths(),
+    fallback: false,
+  };
+}
diff --git a/pages/[version]/index.tsx b/pages/[version]/index.tsx
index d9c0e5798..fa7165004 100644
--- a/pages/[version]/index.tsx
+++ b/pages/[version]/index.tsx
@@ -115,7 +115,7 @@ export default function Index({ versionsList }: Readonly<Props>) {
   );
 }
 
-export async function getServerSideProps(context: GetServerSidePropsContext) {
+export async function getStaticProps(context: GetServerSidePropsContext) {
   try {
     const version = context.params.version as string;
 
@@ -178,3 +178,23 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     };
   }
 }
+
+export async function getStaticPaths() {
+  const versionsList: Array<SelectOption<string>> = getVersionsList();
+
+  const paths = versionsList.map(({ value }) => ({
+    params: {
+      slug: [],
+      location: "/",
+      version: value,
+      fileName: "",
+      title: "",
+      description: "",
+    },
+  }));
+
+  return {
+    paths: paths,
+    fallback: false,
+  };
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bc726b4e1..309fa19c0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,25 +1,27 @@
-import Head from 'next/head';
+import Head from "next/head";
 
-import 'prismjs';
+import "prismjs";
 // Import other Prism themes here
-import '../public/globals.css';
-import '../public/modal.css';
+import "../public/globals.css";
+import "../public/modal.css";
 
-import { isEmpty } from 'lodash';
-import type { AppProps } from 'next/app';
-import ErrorBoundary from '../components/ErrorBoundary';
-import GoogleAnalyticsScript from '../components/GoogleAnalyticsScript/GoogleAnalyticsScript';
-import { CodeWithLanguageSelectorContextProvider } from '../context/CodeWithLanguageSelectorContext';
-import { DocVersionContextProvider } from '../context/DocVersionContext';
-import { MenuItemsContextProvider } from '../context/MenuItemsContext';
-import { NavBarCollapseContextProvider } from '../context/NavBarCollapseContext';
-import { RouteChangingContextProvider } from '../context/RouteChangingContext';
-import { StepsContextProvider } from '../context/StepsContext';
-import { SlugProps } from './[version]/[...slug]';
+import { isEmpty } from "lodash";
+import type { AppProps } from "next/app";
+import { useEffect } from "react";
+import ErrorBoundary from "../components/ErrorBoundary";
+import GoogleAnalyticsScript from "../components/GoogleAnalyticsScript/GoogleAnalyticsScript";
+import { CodeWithLanguageSelectorContextProvider } from "../context/CodeWithLanguageSelectorContext";
+import { DocVersionContextProvider } from "../context/DocVersionContext";
+import { MenuItemsContextProvider } from "../context/MenuItemsContext";
+import { NavBarCollapseContextProvider } from "../context/NavBarCollapseContext";
+import { RouteChangingContextProvider } from "../context/RouteChangingContext";
+import { StepsContextProvider } from "../context/StepsContext";
+import { fetchVersionsList } from "../utils/CommonUtils";
+import { SlugProps } from "./[version]/[...slug]";
 
-const TITLE = 'OpenMetadata Documentation: Get Help Instantly';
+const TITLE = "OpenMetadata Documentation: Get Help Instantly";
 const DESCRIPTION =
-  'Follow the step-by-step guides to get started with OpenMetadata, the #1 open source data catalog tool. Get discovery, collaboration, governance, observability, quality tools all in one place.';
+  "Follow the step-by-step guides to get started with OpenMetadata, the #1 open source data catalog tool. Get discovery, collaboration, governance, observability, quality tools all in one place.";
 
 export default function MyApp({ Component, pageProps }: AppProps<SlugProps>) {
   const title = isEmpty(pageProps.pageTitle) ? TITLE : pageProps.pageTitle;
@@ -27,6 +29,40 @@ export default function MyApp({ Component, pageProps }: AppProps<SlugProps>) {
     ? DESCRIPTION
     : pageProps.pageDescription;
 
+  // Function to load search indices for all the versions
+  const loadPageFind = async () => {
+    if (typeof window?.pageFind === "undefined") {
+      const versionsList = await fetchVersionsList();
+      try {
+        const importPageFindModules = versionsList.map(async ({ value }) => {
+          window[`pageFind${value}`] = await import(
+            /* webpackIgnore: true */ `./pageFind${value}/pagefind.js`
+          );
+          window[`pageFind${value}`].options({
+            highlightParam: "highlight",
+            excerptLength: 20,
+          });
+        });
+
+        await Promise.all(importPageFindModules);
+      } catch (e) {
+        versionsList.forEach(({ value }) => {
+          window[`pageFind${value}`] = {
+            preload: () => null,
+            search: () =>
+              Promise.resolve({
+                results: [],
+              }),
+          };
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    loadPageFind();
+  }, []);
+
   return (
     <>
       <Head>
diff --git a/pages/_error.tsx b/pages/_error.tsx
index 67ee9e98e..d943bc5b0 100644
--- a/pages/_error.tsx
+++ b/pages/_error.tsx
@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import CategoriesNav from "../components/CategoriesNav/CategoriesNav";
@@ -23,7 +24,7 @@ interface Props {
   versionsList: Array<SelectOption<string>>;
 }
 
-function ErrorComponent({ versionsList }: Props) {
+function Error({ versionsList }: Readonly<Props>) {
   const router = useRouter();
   const { docVersion, onChangeDocVersion } = useDocVersionContext();
   const { isRouteChanging } = useRouteChangingContext();
@@ -49,7 +50,7 @@ function ErrorComponent({ versionsList }: Props) {
   }, [router.asPath]);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" id="error-page-container">
       <GoogleAnalyticsScript />
       <TopNav versionsList={versionsList} />
       <CategoriesNav menu={menuItems} />
@@ -95,10 +96,12 @@ function ErrorComponent({ versionsList }: Props) {
   );
 }
 
-export default ErrorComponent;
+export default Error;
 
-export async function getServerSideProps() {
+export async function getStaticProps(context: GetServerSidePropsContext) {
   try {
+    const version = context.params.version as string;
+
     const versionsList: Array<SelectOption<string>> = getVersionsList();
 
     return {
@@ -109,4 +112,4 @@ export async function getServerSideProps() {
       notFound: true,
     };
   }
-}
+}
\ No newline at end of file
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 000000000..7690a0a0a
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1,3 @@
+/v1.1.x/ /v1.1.x 200
+/v1.2.x/ /v1.2.x 200
+/v1.3.x/ /v1.3.x 200
\ No newline at end of file
diff --git a/public/globals.css b/public/globals.css
index dcb57a066..d2dda3bcc 100644
--- a/public/globals.css
+++ b/public/globals.css
@@ -85,8 +85,6 @@ p {
 
 h1 {
   font-size: 32px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--default-border-color);
   line-height: 38px;
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index abcd0b03c..eeee15473 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,6 @@
     "jsx": "preserve",
     "typeRoots": ["./types"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "app.config.js"],
   "exclude": ["node_modules"]
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index 54d7f11c6..60a9777e6 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,7 +1,33 @@
-export {};
+import { ResultData } from "../components/Search/ResultItem/ResultItem.interface";
+
+interface PageFindOptions {
+  element?: string;
+  bundlePath?: string;
+  baseUrl?: string;
+  bundlePath?: string;
+  excerptLength?: number;
+  highlightParam?: string;
+  indexWeight?: number;
+  debounceTimeoutMs?: number;
+  mergeFilter?: { resource?: string };
+  showImages?: boolean;
+}
 
 declare global {
   interface Window {
     initial: any;
+    pageFind: Record<
+      string,
+      {
+        options?: (PageFindOptions) => Promise<void>;
+        preload: (text: string) => void;
+        search?: (text: string) => Promise<{
+          results: {
+            id: string;
+            data: () => Promise<ResultData | void>;
+          }[];
+        }>;
+      }
+    >;
   }
 }
diff --git a/utils/CommonUtils.ts b/utils/CommonUtils.ts
index 8012cbfc9..4166f3d41 100644
--- a/utils/CommonUtils.ts
+++ b/utils/CommonUtils.ts
@@ -1,7 +1,8 @@
-import Markdoc from "@markdoc/markdoc";
+import Markdoc, { Node } from "@markdoc/markdoc";
 import { isEmpty, startCase } from "lodash";
 import * as icons from "react-icons/md";
 import { HeadingObject } from "../components/PageLayouts/APIPageLayout/APIPageSideNav/APIPageSideNav";
+import { SelectOption } from "../components/SelectDropdown/SelectDropdown";
 import { DEFAULT_VERSION } from "../constants/version.constants";
 import { MenuItem, UrlParams } from "../interface/common.interface";
 
@@ -59,6 +60,24 @@ export const fetchMenuList = async (version?: string) => {
   }
 };
 
+export const fetchVersionsList = async () => {
+  try {
+    const response = await fetch(`/api/getVersionsList`, {
+      method: "GET",
+    });
+
+    const parsedResponse: Array<SelectOption<string>> = await response.json();
+
+    if (response.status === 200) {
+      return parsedResponse;
+    } else {
+      return [];
+    }
+  } catch (error) {
+    return [];
+  }
+};
+
 export const materialDesignIcon = (icon: string) => {
   // Checking whether the icon name passed has prefix 'Md' applied already
   // i.e. 'MdCircle' for 'circle' icon
@@ -80,7 +99,7 @@ export const getFormattedPartials = (
   if (isEmpty(partialsObject)) {
     return {};
   }
-  const formattedPartialsObj = {};
+  const formattedPartialsObj: Record<string, Node> = {};
 
   Object.entries(partialsObject).forEach(([key, value]) => {
     formattedPartialsObj[key] = Markdoc.parse(value);
diff --git a/utils/SlugUtils.ts b/utils/SlugUtils.ts
index e5463b8cc..06a101792 100644
--- a/utils/SlugUtils.ts
+++ b/utils/SlugUtils.ts
@@ -105,34 +105,6 @@ export const getReturnObjectForValidVersion = ({
       }
     }
 
-    // If the file is not found in the content folder
-    if (notFound) {
-      // Check if the version is present in the existing versions list
-      const isVersionPresent = versionsList.some(
-        (versionOption) => versionOption.value === version
-      );
-
-      // If the version is present in versions list, return 404
-      if (isVersionPresent) {
-        return { notFound };
-      }
-
-      // If the version is not present in versions list,
-      // check if the major version is present.
-      // Ex. If v1.4.8 is in the URL and v1.4.8 is not in versions list but v1.4.x is so match the 1.4
-      // and redirect to the respective version URL in this case to v1.4.x
-      const majorVersionMatch = getMajorVersionMatch(versionsList, version);
-
-      return {
-        redirect: {
-          permanent: false,
-          destination: `/${
-            majorVersionMatch?.value ?? "latest" // If major version match is not present, redirect to latest
-          }/${pathWithoutVersion}`,
-        },
-      };
-    }
-
     // Get the last element of the array to find the MD file
     const fileContents = fs.readFileSync(filename, "utf8");
     const { content, data } = matter(fileContents);
@@ -150,8 +122,9 @@ export const getReturnObjectForValidVersion = ({
         slug,
         versionsList,
         partials,
-        pageTitle: data.title,
+        pageTitle: data.title ?? "",
         pageDescription: data.description ?? "",
+        weight: data.weight ?? "0",
       },
     };
   }