diff --git a/.gitignore b/.gitignore
index 5115232..92cd2c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,5 @@ mse_langs.c
 
 mse_langs.h
 /cmake-build-debug/
+
+frontend/pnpm-lock.yaml
diff --git a/frontend/package.json b/frontend/package.json
index cd12480..48c3a08 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,9 +18,9 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.45.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "14.0.3",
     "font-awesome": "^4.7.0",
-    "next": "13.4.12",
+    "next": "14.0.3",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 6988556..d48d4fd 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
             <FontAwesomeIcon icon={faGithub} />
           </Link>
         </div>
-        <div className='bg-slate-100'>
+        <div className="bg-slate-100">
           <div className="p-5 justify-center">{children}</div>
         </div>
       </body>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 21f100f..6d50a13 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -28,14 +28,19 @@ export default function Home() {
             <h3 className="text-xl font-bold">Query Composition</h3>
             <p>The syntax is designed to mimic that of Scryfall.</p>
             <p>You can use brackets as normal with negation.</p>
-            <p>The below query gets all mutally exclusive cards in m20 and m19.</p>
+            <p>
+              The below query gets all mutally exclusive cards in m20 and m19.
+            </p>
             <blockquote>
-            (set:m19 or set:m20) and !(set:m20 and set:m19)
+              (set:m19 or set:m20) and !(set:m20 and set:m19)
             </blockquote>
           </div>
           <div>
             <h3 className="text-xl font-bold">Operations</h3>
-            <p>Used in this form <blockquote>{'<query> <operator> <query>'}</blockquote></p>
+            <p>
+              Used in this form{" "}
+              <blockquote>{"<query> <operator> <query>"}</blockquote>
+            </p>
             <ul>
               <li>and</li>
               <li>or</li>
diff --git a/frontend/src/app/q/[...query]/card.tsx b/frontend/src/app/q/[...query]/card.tsx
deleted file mode 100644
index 21fa604..0000000
--- a/frontend/src/app/q/[...query]/card.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { isPropertySignature } from "typescript";
-import Manamoji from "./manamoji";
-import Oracle from "./oracle";
-import Colour from "./colour";
-
-export default function Card(props: {
-  data: {
-    name: string;
-    mana_cost: string;
-    colours: number;
-    colour_identity: number;
-    oracle_text: string;
-    power: string;
-    toughness: string;
-    types: string[];
-  };
-}) {
-  const colours = [];
-  for (var i = 1; i < 1 << 5; i <<= 1) {
-    const c = props.data.colour_identity & i;
-    if (c) {
-      colours.push(c);
-    }
-  }
-
-  return (
-    <div className="flex flex-col rounded-xl bg-slate-100 min-h-[300px] p-5 drop-shadow">
-      <div className="flex flex-row gap-3 justify-between">
-        <h2 className="font-bold">{props.data.name}</h2>
-        <div className="flex flex-row flex-wrap w-max justify-end">
-          {props.data.mana_cost &&
-            props.data.mana_cost
-              .split("{")
-              .slice(1)
-              .map((mana) => (
-                <Manamoji mana_cost={mana.replace("}", "")} key={mana} />
-              ))}
-        </div>
-      </div>
-      {props.data.types && (
-        <p className="text-m"> {props.data.types.join(" ")} </p>
-      )}
-      {props.data.oracle_text && (
-        <Oracle oracle_text={props.data.oracle_text} />
-      )}
-      <div className="grow" />
-      <div className="flex flex-row justify-between">
-        <span>
-          {colours.map((c) => (
-            <Colour colour={c} key={c} />
-          ))}
-        </span>
-        <p className="text-right">
-          {props.data.power && props.data.toughness
-            ? props.data.power + "/" + props.data.toughness
-            : ""}
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/app/q/[...query]/page.tsx b/frontend/src/app/q/[...query]/page.tsx
deleted file mode 100644
index dae3865..0000000
--- a/frontend/src/app/q/[...query]/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Card from "./card";
-import PageChanger from "./pageChanger";
-
-export default async function SearchResultPage({
-  params,
-}: {
-  params: {
-    query: string;
-    page_number?: number;
-  };
-}) {
-  const query = decodeURIComponent(params.query);
-  const resp = await fetch("http://127.0.0.1:4365/api", {
-    method: "POST",
-    body: query,
-    headers: {
-      page: params.page_number?.toString() || '',
-    }
-  });
-  const data = await resp.json();
-  const results = data.cards_total;
-  const page = data.page + 1;
-  const page_size = data.page_size;
-  const pages = Math.ceil(results / page_size);
-
-  return (
-    <div>
-      <div className="w-full mx-auto grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {data.cards.map((item: any) => (
-          <Card data={item} key={item} />
-        ))}
-      </div>
-      <p className="text-center">
-        {results} Results | Page {page} / {pages}
-      </p>
-      <div className="flex flex-row gap-3 w-full overflow-x-auto py-5">
-        {Array(pages)
-          .fill(0)
-          .slice(Math.max(0, page - 5), page + 1 + 50)
-          .map((v, i) => (
-            <PageChanger base_url={"/q/" + params.query} page={i + 1} key={i} />
-          ))}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/app/q/[...query]/pageChanger.tsx b/frontend/src/app/q/[...query]/pageChanger.tsx
deleted file mode 100644
index bf100f5..0000000
--- a/frontend/src/app/q/[...query]/pageChanger.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Link from "next/link";
-
-export default function PageChanger(props: { base_url: string; page: number }) {
-  return (
-    <h1 className="p-3 bg-blue-500 text-white rounded">
-      <Link href={props.base_url + "?page=" + props.page}>{props.page}</Link>
-    </h1>
-  );
-}
diff --git a/frontend/src/app/q/[query]/[page]/colour.tsx b/frontend/src/app/q/[query]/[page]/colour.tsx
deleted file mode 100644
index 2f31ebe..0000000
--- a/frontend/src/app/q/[query]/[page]/colour.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-export default function Colour(props: { colour: number }) {
-  var colour = "text-";
-  switch (props.colour) {
-    case 1 << 0:
-      colour += "yellow-300";
-      break;
-    case 1 << 1:
-      colour += "blue-700";
-      break;
-    case 1 << 2:
-      colour += "purple-900";
-      break;
-    case 1 << 3:
-      colour += "red-700";
-      break;
-    case 1 << 4:
-      colour += "lime-700";
-      break;
-    default:
-      colour += "black";
-      console.log(props.colour, "is not a colour");
-      break;
-  }
-
-  return (
-    <span className={"font-bold text-xl " + colour}>
-      ⏺
-      {
-        <div className="text-yellow-300 text-blue-700 text-purple-900 text-red-700 text-lime-700 text-black inline" />
-      }
-    </span>
-  );
-}
diff --git a/frontend/src/app/q/[query]/[page]/manamoji.tsx b/frontend/src/app/q/[query]/[page]/manamoji.tsx
deleted file mode 100644
index fc74cec..0000000
--- a/frontend/src/app/q/[query]/[page]/manamoji.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Image from "next/image";
-
-export default function Manamoji(props: { mana_cost: string }) {
-  const img =
-    "/manamoji/emojis/mana" +
-    props.mana_cost.toLowerCase().replace("/", "") +
-    ".png";
-  const size = 20;
-
-  return (
-    <span>
-      <Image
-        src={img}
-        width={size}
-        height={size}
-        className="aspect-square inline"
-        alt={"Manamoji of " + props.mana_cost}
-      />
-    </span>
-  );
-}
diff --git a/frontend/src/app/q/[query]/[page]/oracle.tsx b/frontend/src/app/q/[query]/[page]/oracle.tsx
deleted file mode 100644
index 6534d56..0000000
--- a/frontend/src/app/q/[query]/[page]/oracle.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Manamoji from "./manamoji";
-
-export default function Oracle(props: { oracle_text: string }) {
-  const oracle = props.oracle_text.split("{");
-  return (
-    <span className="text-sm">
-      {oracle.map((part) => {
-        const mana = part.split("}");
-        if (mana.length == 1) {
-          return <>{part}</>;
-        } else {
-          return (
-            <>
-              <Manamoji mana_cost={mana[0]} />
-              {mana.slice(1).join(" ")}
-            </>
-          );
-        }
-      })}
-    </span>
-  );
-}
diff --git a/frontend/src/app/q/[query]/[page]/pageChanger.tsx b/frontend/src/app/q/[query]/[page]/pageChanger.tsx
deleted file mode 100644
index 75e4e9e..0000000
--- a/frontend/src/app/q/[query]/[page]/pageChanger.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Link from "next/link";
-
-export default function PageChanger(props: { base_url: string; page: number }) {
-  return (
-    <h1 className="p-3 bg-blue-500 text-white rounded">
-      <Link href={props.base_url + "/" + props.page.toString()}>{props.page}</Link>
-    </h1>
-  );
-}
diff --git a/frontend/src/app/q/[query]/[page]/card.tsx b/frontend/src/app/q/card.tsx
similarity index 100%
rename from frontend/src/app/q/[query]/[page]/card.tsx
rename to frontend/src/app/q/card.tsx
diff --git a/frontend/src/app/q/[...query]/colour.tsx b/frontend/src/app/q/colour.tsx
similarity index 100%
rename from frontend/src/app/q/[...query]/colour.tsx
rename to frontend/src/app/q/colour.tsx
diff --git a/frontend/src/app/q/[...query]/manamoji.tsx b/frontend/src/app/q/manamoji.tsx
similarity index 100%
rename from frontend/src/app/q/[...query]/manamoji.tsx
rename to frontend/src/app/q/manamoji.tsx
diff --git a/frontend/src/app/q/[...query]/oracle.tsx b/frontend/src/app/q/oracle.tsx
similarity index 100%
rename from frontend/src/app/q/[...query]/oracle.tsx
rename to frontend/src/app/q/oracle.tsx
diff --git a/frontend/src/app/q/[query]/[page]/page.tsx b/frontend/src/app/q/page.tsx
similarity index 72%
rename from frontend/src/app/q/[query]/[page]/page.tsx
rename to frontend/src/app/q/page.tsx
index b69be7c..d4c841f 100644
--- a/frontend/src/app/q/[query]/[page]/page.tsx
+++ b/frontend/src/app/q/page.tsx
@@ -2,19 +2,19 @@ import Card from "./card";
 import PageChanger from "./pageChanger";
 
 export default async function SearchResultPage({
-  params,
+  searchParams,
 }: {
-  params: {
+  searchParams: {
     query: string;
-    page: number;
+    page?: string;
   };
 }) {
-  const query = decodeURIComponent(params.query);
+  const query = decodeURIComponent(searchParams.query);
   const resp = await fetch("http://127.0.0.1:4365/api", {
     method: "POST",
     body: query,
     headers: {
-      page: (params.page - 1).toString(),
+      page: (parseInt(searchParams.page ?? "1") - 1).toString(),
     },
   });
   const data = await resp.json();
@@ -38,7 +38,12 @@ export default async function SearchResultPage({
           .fill(0)
           .slice(Math.max(0, page - 5), page + 1 + 50)
           .map((_, i) => (
-            <PageChanger base_url={"/q/" + params.query} page={i + 1} key={i} />
+            <PageChanger
+              base_url={"/q/?query=" + searchParams.query}
+              page={i + 1}
+              key={i}
+              currentPage={(i + 1).toString() == searchParams.page}
+            />
           ))}
       </div>
     </div>
diff --git a/frontend/src/app/q/pageChanger.tsx b/frontend/src/app/q/pageChanger.tsx
new file mode 100644
index 0000000..9a4abf7
--- /dev/null
+++ b/frontend/src/app/q/pageChanger.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+interface Props {
+  base_url: string;
+  page: number;
+  currentPage: boolean;
+}
+
+export default function PageChanger({ base_url, page, currentPage }) {
+  return (
+    <Link href={base_url + "&page=" + page.toString()}>
+      <h1
+        className={`p-3 ${
+          currentPage ? "bg-red-700" : "bg-blue-500"
+        } text-white rounded`}
+      >
+        {page}
+      </h1>
+    </Link>
+  );
+}
diff --git a/frontend/src/app/searchBar.tsx b/frontend/src/app/searchBar.tsx
index 69e4559..c409117 100644
--- a/frontend/src/app/searchBar.tsx
+++ b/frontend/src/app/searchBar.tsx
@@ -1,9 +1,12 @@
 "use client";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 
-export default function SearchBar(props: { query?: string }) {
-  const [name, setName] = useState(props.query || "");
+export default function SearchBar() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get("query");
+  const [name, setName] = useState(query);
   const router = useRouter();
 
   return (
@@ -12,7 +15,7 @@ export default function SearchBar(props: { query?: string }) {
         <form
           className="flex flex-row w-full justify-between gap-3"
           onSubmit={(e) => {
-            router.push("/q/" + encodeURIComponent(name) + "/1");
+            router.push("/q/?query=" + encodeURIComponent(name) + "&page=1");
             e.preventDefault();
           }}
         >