diff --git a/app/routes/queries.world-comparison.tsx b/app/routes/queries.world-comparison.tsx
index 85e1e17d..c87b4a3a 100644
--- a/app/routes/queries.world-comparison.tsx
+++ b/app/routes/queries.world-comparison.tsx
@@ -1,4 +1,4 @@
-import { useActionData, useNavigation } from '@remix-run/react'
+import { useActionData, useLoaderData, useNavigation } from '@remix-run/react'
 import { ContentContainer, PageWrapper, Title } from '~/components/Common'
 import SmallFormContainer from '~/components/form/SmallFormContainer'
 import type { ActionFunction } from '@remix-run/cloudflare'
@@ -20,6 +20,10 @@ import {
 } from '@heroicons/react/outline'
 import { WorldList } from '~/utils/locations/Worlds'
 import TitleTooltip from '~/components/Common/TitleTooltip'
+import {
+  getActionUrl,
+  handleSearchParamChange
+} from '~/utils/urlSeachParamsHelpers'
 
 const pathHash: Record<string, string> = {
   hqOnly: 'High Quality Only',
@@ -46,6 +50,42 @@ export const links: LinksFunction = () => [
   }
 ]
 
+// Define default form values
+const defaultFormValues = {
+  itemIds: '',
+  exportServers: '',
+  hqOnly: 'false'
+}
+
+// Define input schema for validation
+const inputSchema = z.object({
+  itemIds: z.string().min(1),
+  exportServers: z.string().min(1),
+  hqOnly: z.optional(z.string())
+})
+
+// Loader function to handle URL parameters
+export const loader: LoaderFunction = async ({ request }) => {
+  const params = new URL(request.url).searchParams
+
+  const values = {
+    itemIds: params.get('itemIds') || defaultFormValues.itemIds,
+    exportServers:
+      params.get('exportServers') || defaultFormValues.exportServers,
+    hqOnly: params.get('hqOnly') || defaultFormValues.hqOnly
+  }
+
+  const validParams = inputSchema.safeParse(values)
+  if (!validParams.success) {
+    return json({
+      exception: `Missing: ${validParams.error.issues
+        .map(({ path }) => path.join(', '))
+        .join(', ')}`
+    })
+  }
+  return json(validParams.data)
+}
+
 const sortByPrice =
   (desc: boolean) => (first: { price: number }, second: { price: number }) => {
     if (first.price === second.price) {
@@ -101,6 +141,7 @@ const Index = () => {
   const results = useActionData<
     ItemServerComparisonList | { exception: string } | {}
   >()
+  const loaderData = useLoaderData<typeof defaultFormValues>()
 
   const [modal, setModal] = useState<'exportServers' | 'items' | null>(null)
   const [state, setState] = useState<{
@@ -108,6 +149,13 @@ const Index = () => {
     exportServers: string[]
   }>({ items: [], exportServers: [] })
 
+  // // One AI recommendation, but it didnt solve the issue. It keeps saying "Error: Cannot read properties of undefined (reading 'split')"
+  // const [state, setState] = useState({
+  //   items: loaderData.itemIds ? loaderData.itemIds.split(',') : [], // Add a check for undefined
+  //   exportServers: loaderData.exportServers ? loaderData.exportServers.split(',') : [], // Add a check for undefined
+  //   hqOnly: loaderData.hqOnly === 'false',
+  // })
+
   const onSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (transition.state === 'submitting') {
       e.preventDefault()
@@ -137,7 +185,8 @@ const Index = () => {
         onClick={onSubmit}
         loading={transition.state === 'submitting'}
         disabled={transition.state === 'submitting'}
-        error={error}>
+        error={error}
+        action={getActionUrl('/queries/world-comparison', state)}>
         <div className="pt-4">
           <div className="sm:px-4 flex flex-col gap-4">
             <div className="flex flex-col max-w-full relative">