diff --git a/components/search/CustomSearchBox.tsx b/components/search/CustomSearchBox.tsx
index 33d6232..83f30b6 100644
--- a/components/search/CustomSearchBox.tsx
+++ b/components/search/CustomSearchBox.tsx
@@ -10,6 +10,7 @@ interface SearchBoxProps {
 
 function SearchBox({ refine }: SearchBoxProps) {
   const [searchBarState, setSearchBarState] = useState("");
+  const router = useRouter();
   useHotkeys("ctrl+k", () => {
     if (document != null) {
       const searchBar = document.querySelector(
@@ -21,8 +22,21 @@ function SearchBox({ refine }: SearchBoxProps) {
     }
   });
 
-  const dynamicRoute = useRouter().asPath;
+  // Populate search from ?query= URL parameter on initial load
+  const [initialQueryApplied, setInitialQueryApplied] = useState(false);
   useEffect(() => {
+    if (initialQueryApplied || !router.isReady) return;
+    const urlQuery = router.query.query;
+    if (typeof urlQuery === "string" && urlQuery.length > 0) {
+      setSearchBarState(urlQuery);
+      refine(urlQuery);
+    }
+    setInitialQueryApplied(true);
+  }, [router.isReady, router.query.query, initialQueryApplied, refine]);
+
+  const dynamicRoute = router.asPath;
+  useEffect(() => {
+    if (!initialQueryApplied) return;
     refine(""); // When the route changes - reset the search state
     setSearchBarState("");
   }, [dynamicRoute, refine]);
@@ -39,8 +53,16 @@ function SearchBox({ refine }: SearchBoxProps) {
         value={searchBarState}
         placeholder={"Ctrl + K"}
         onChange={(e) => {
-          refine(e.currentTarget.value);
-          setSearchBarState(e.currentTarget.value);
+          const value = e.currentTarget.value;
+          refine(value);
+          setSearchBarState(value);
+          const url = new URL(window.location.href);
+          if (value) {
+            url.searchParams.set("query", value);
+          } else {
+            url.searchParams.delete("query");
+          }
+          window.history.replaceState({}, "", url.toString());
         }}
         className="grow h-9 cursor-pointer rounded-sm text-sm focus:outline-none dark:bg-card-dark bg-search-bar-light placeholder:opacity-50 dark:text-white px-2"
       />
diff --git a/components/search/MobileSearchBox.tsx b/components/search/MobileSearchBox.tsx
index ed9d6be..65ae9ff 100644
--- a/components/search/MobileSearchBox.tsx
+++ b/components/search/MobileSearchBox.tsx
@@ -13,6 +13,7 @@ function SearchBox({
   onCloseCallback,
 }: MobileSearchBoxProps) {
   const [searchBarState, setSearchBarState] = useState("");
+  const router = useRouter();
   useEffect(() => {
     const searchBar = document.querySelector(
       "#algolia_search"
@@ -22,8 +23,21 @@ function SearchBox({
     }
   }, []);
 
-  const dynamicRoute = useRouter().asPath;
+  // Populate search from ?query= URL parameter on initial load
+  const [initialQueryApplied, setInitialQueryApplied] = useState(false);
   useEffect(() => {
+    if (initialQueryApplied || !router.isReady) return;
+    const urlQuery = router.query.query;
+    if (typeof urlQuery === "string" && urlQuery.length > 0) {
+      setSearchBarState(urlQuery);
+      refine(urlQuery);
+    }
+    setInitialQueryApplied(true);
+  }, [router.isReady, router.query.query, initialQueryApplied, refine]);
+
+  const dynamicRoute = router.asPath;
+  useEffect(() => {
+    if (!initialQueryApplied) return;
     refine(""); // When the route changes - reset the search state
     setSearchBarState("");
   }, [dynamicRoute, refine]);
@@ -37,8 +51,16 @@ function SearchBox({
         placeholder={"Search commands"}
         value={searchBarState}
         onChange={(e) => {
-          refine(e.currentTarget.value);
-          setSearchBarState(e.currentTarget.value);
+          const value = e.currentTarget.value;
+          refine(value);
+          setSearchBarState(value);
+          const url = new URL(window.location.href);
+          if (value) {
+            url.searchParams.set("query", value);
+          } else {
+            url.searchParams.delete("query");
+          }
+          window.history.replaceState({}, "", url.toString());
         }}
         className="grow h-9 cursor-pointer text-sm focus:outline-none bg-inherit placeholder:opacity-50 text-black dark:text-white px-2"
       />